style: commission card style

Author: NoeTerrier

app/src/components/Card.tsx

@@ -62,7 +62,13 @@ export default function Card(
         props.background ? styles.background : ""
       }`}
     >
-      <DirectusImage img={img} name={title || ""} className={styles.picture} />
+      <div className={styles.imageDiv}>
+        <DirectusImage
+          img={img}
+          name={title || ""}
+          className={styles.picture}
+        />
+      </div>
       <div className={styles.content}>
         <h4 className={styles.name}>{title}</h4>
         <p className={styles.description}>{description}</p>

app/src/styles/Card.module.scss

@@ -2,20 +2,13 @@
 @use "utilities/variables";
 
 .card {
-  @extend .glass;
-
   display: flex;
+  align-items: center;
+  overflow: hidden;
 
   border-radius: 5rem;
 
-  color: variables.$text-color;
-
-  padding: 1rem;
-
-  align-items: center;
-
   h4 {
-    color: variables.$text-color;
     margin: 0;
     margin-bottom: 0.5rem;
     font-weight: lighter;
@@ -31,9 +24,6 @@
   }
 
   .picture {
-    border: 3px white solid;
-    border-radius: 50%;
-
     overflow: hidden;
   }
 
@@ -48,29 +38,43 @@
   }
 
   &.small {
+    @extend .glass;
     flex-direction: row;
 
+    padding: 1rem;
+
     width: 19rem;
     height: 6rem;
 
+    color: variables.$text-color;
+
+    h4 {
+      color: variables.$text-color;
+    }
+
     .description {
       font-size: small;
     }
 
     .picture {
       min-width: 6rem;
       min-height: 6rem;
+
+      border: 3px white solid;
+      border-radius: 50%;
     }
   }
 
   &.large {
+    background-color: variables.$white-background-color;
     flex-direction: column;
 
-    gap: 0;
+    height: 100%;
 
-    height: calc(100% - 2rem);
     border-radius: 4rem;
 
+    box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+
     h4 {
       font-size: 2rem;
       margin-bottom: 1rem;
@@ -80,9 +84,23 @@
       font-size: medium;
     }
 
+    .content {
+      margin: 2rem;
+    }
+
+    .imageDiv {
+      width: 100%;
+      align-items: center;
+      background-color: white;
+      padding: 1rem;
+    }
+
     .picture {
       width: 10rem;
       height: 10rem;
+
+      margin: auto;
+
       border-radius: 2rem;
       overflow: hidden;
       background-color: white;

app/src/styles/CommissionsPage.module.scss

@@ -27,7 +27,7 @@
     grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
     grid-template-rows: auto auto auto;
 
-    gap: 4rem;
+    gap: 2rem;
 
     align-items: center;
     justify-items: center;

app/src/styles/utilities/_variables.scss

@@ -1,5 +1,6 @@
 $background-color: #1c70ddff;
 $white-background-color: #fafafa;
+$red-background-color: #e70060;
 
 $text-color: #fafafa;
 $dark-text-color: #273183;