Adding Compact style variants

Author: leo95oliveira

.storybook/preview.tsx

@@ -9,6 +9,7 @@ const wrapperStyle = {
   justifyContent: "center",
   alignItems: "center",
   padding: "0rem 1rem",
+  marginTop: "2rem",
 };
 
 const preview: Preview = {

package-lock.json

@@ -58,7 +58,7 @@
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-transformer-svg": "^2.0.1",
-    "sass": "^1.63.6",
+    "sass": "^1.69.5",
     "storybook": "^7.0.26",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",
@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "clsx": "^1.2.1",
+    "container-query-polyfill": "^1.0.2",
     "date-fns": "^2.30.0",
     "luxon": "^3.3.0",
     "react-avatar": "^5.0.3",
@@ -84,4 +85,4 @@
       "@babel/preset-react"
     ]
   }
-}
+}

package.json

@@ -7,6 +7,7 @@
     justify-content: center;
     gap: 0.75rem;
     color: $color__white;
+    font-size: $font-size__text;
 
     .statusindicator {
         width: $spacing__s;
@@ -25,4 +26,6 @@
             background: $color__green;
         }
     }
+
+    p { margin: 0; }
 }

src/lib/ContestStatus/ContestStatus.scss

@@ -30,10 +30,10 @@ export const ContestStatus: React.FC<ContestStatusProps> = ({
     status && (
       <div id={id ?? undefined} className={`c4conteststatus ${className}`}>
         <div className={`${styling}`} />
-        {status === Status.UPCOMING && "Soon"}
-        {status === Status.LIVE && "Live"}
-        {status === Status.ENDED && "Ended"}
-        {!status && "-"}
+        {status === Status.UPCOMING && <p>Soon</p>}
+        {status === Status.LIVE && <p>Live</p>}
+        {status === Status.ENDED && <p>Ended</p>}
+        {!status && <p>-</p>}
       </div>
     )
   );