create a card css component

core/static/core/components/card.scss

@@ -0,0 +1,96 @@
+@import "core/static/core/colors";
+
+@mixin row-layout {
+  min-height: 100px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  .card-image {
+    max-width: 75px;
+  }
+  .card-content {
+    flex: 1;
+    text-align: left;
+  }
+}
+
+.card {
+  background-color: $primary-neutral-light-color;
+  border-radius: 5px;
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px 10px;
+  height: fit-content;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+
+  &:hover {
+    background-color: darken($primary-neutral-light-color, 5%);
+  }
+
+  &.selected {
+    animation: bg-in-out 1s ease;
+    background-color: rgb(216, 236, 255);
+  }
+
+  .card-image {
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    max-height: 70px;
+    object-fit: contain;
+    border-radius: 4px;
+    line-height: 70px;
+  }
+
+  i.card-image {
+    color: black;
+    text-align: center;
+    background-color: rgba(173, 173, 173, 0.2);
+    width: 80%;
+  }
+
+  .card-content {
+    color: black;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+
+    p {
+      font-size: 13px;
+      margin: 0;
+    }
+
+    .card-title {
+      margin: 0;
+      font-size: 15px;
+      word-break: break-word;
+    }
+  }
+
+  @keyframes bg-in-out {
+    0% {
+      background-color: white;
+    }
+    100% {
+      background-color: rgb(216, 236, 255);
+    }
+  }
+
+  @media screen and (max-width: 765px) {
+    @include row-layout
+  }
+
+  // When combined with card, card-row display the card in a row layout,
+  // whatever the size of the screen.
+  &.card-row {
+    @include row-layout
+  }
+}
+

core/static/user/user_detail.scss

@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 main {
   box-sizing: border-box;
   display: flex;
@@ -69,7 +71,7 @@ main {
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        background-color: #f2f2f2;
+        background-color: $primary-neutral-light-color;
 
         > span {
           font-size: small;