Merge pull request #94 from code4rena-dev/samuus/audit-status-icon

[audit status] use dot icon with no space

Author: SamusElderg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "4.5.6",
+  "version": "4.5.7",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

src/lib/ContestStatus/AuditStatusSection.tsx

@@ -66,6 +66,39 @@ const getAuditStatusColor = (status: AuditStatus | null) => {
   }
 };
 
+const DotNoPaddingStrokeIcon = ({
+  className,
+  color = "var(--color__text-primary)",
+  strokeColor = "var(--color__border-secondary)",
+  width = 16,
+  height = 16,
+}: {
+  className?: string;
+  color?: string;
+  strokeColor?: string;
+  width?: number;
+  height?: number;
+}) => (
+  <svg
+    width={width}
+    height={height}
+    fill="none"
+    className={className}
+    viewBox="0 0 8 8"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x=".5"
+      y=".5"
+      width="7"
+      height="7"
+      rx="3.5"
+      fill={color}
+      stroke={strokeColor}
+    />
+  </svg>
+);
+
 export const AuditStatusSection = ({
   auditStatus,
   startTime,
@@ -128,7 +161,7 @@ export const AuditStatusSection = ({
     <div className="details">
       {iconColor && (
         <div className="audit-tile__status__icon">
-          <Icon name="dot" color={iconColor} />
+          <DotNoPaddingStrokeIcon color={iconColor} strokeColor={iconColor} />
         </div>
       )}
       <div

src/lib/ContestTile/ContestTile.scss

@@ -175,13 +175,13 @@
             align-items: center;
             gap: 0.5rem;
             flex: 1 0 0;
-            padding-left: 0.5rem;
+            padding-left: 1rem;
             border-right: 1px solid hsla(0, 0%, 100%, 0.4);
 
             .audit-tile__status__icon {
-              width: 1.1rem;
-              height: 1.1rem;
-              border-radius: 12.5rem;
+              display: flex;
+              width: 0.5rem;
+              height: 0.5rem;
 
               svg {
                 width: 100%;
@@ -685,13 +685,13 @@
             align-items: center;
             gap: 0.5rem;
             flex: 1 0 0;
-            padding-left: 0.5rem;
+            padding-left: 1rem;
             border-right: 1px solid $color__n-60;
 
             .audit-tile__status__icon {
-              width: 1.1rem;
-              height: 1.1rem;
-              border-radius: 12.5rem;
+              display: flex;
+              width: 0.5rem;
+              height: 0.5rem;
 
               svg {
                 width: 100%;

src/lib/ContestTile/DefaultTemplate.tsx

@@ -4,15 +4,14 @@ import wolfbotIcon from "../../../public/icons/wolfbot.svg";
 import { BaseContestSchedule, BountyTileData, ContestSchedule, ContestTileData, ContestTileProps, ContestTileVariant } from "./ContestTile.types";
 import { DropdownLink, Status, TagSize, TagVariant } from "../types";
 import { ContestStatus } from "../ContestStatus";
-import { ContestCountdown, Countdown } from "./ContestTile";
+import { Countdown } from "./ContestTile";
 import { getDates, getContestSchedule } from "../../utils/time";
 import { isBefore } from "date-fns";
 import { Dropdown } from "../Dropdown";
 import { Icon } from "../Icon";
 import { Tag } from "../Tag";
 import { AuditStatusSection } from "../ContestStatus/AuditStatusSection";
 
-
 export default function DefaultTemplate({
     variant,
     htmlId,