Merge pull request #17 from code4rena-dev/compact-contest-tile

Compact Contest Tile

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

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {
@@ -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",

package.json

@@ -54,13 +54,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    object-fit: cover;
     aspect-ratio: 1/1;
     order: 1;
 
     img {
       height: 100%;
       width: 100%;
+      object-fit: cover;
     }
 
     &--l {

src/lib/Card/Card.scss

@@ -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>
     )
   );