feat(WEB-304): remaning UI from design system primitives

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -33,7 +33,11 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           {hotelInformation.hotelName}
         </Title>
         <div className={styles.date}>
-          <Calendar height={20} width={20} color="var(--Main-Brand-Burgundy)" />
+          <Calendar
+            height={20}
+            width={20}
+            color="var(--Scandic-Brand-Burgundy)"
+          />
           <time dateTime={arrivalDateTime}>{arrivalDate}</time>
           {" - "}
           <time dateTime={departDateTime}>{departDate}</time>

components/MyPages/Blocks/Stays/StayCard/stay.module.css

@@ -1,43 +1,43 @@
 .stay {
-  border-radius: 0.4rem;
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
   display: grid;
   overflow: hidden;
-  background-color: var(--Main-Grey-White);
-  border: 1px solid #4d001b1a; /* var(--Main-Brand-Burgundy) 10% */
 }
 
 .image {
   height: auto;
-  width: 100%;
-  min-height: 22rem;
+  min-height: 220px;
   object-fit: cover;
   overflow: hidden;
+  width: 100%;
 }
 
 .footer {
-  color: var(--Main-Brand-Burgundy);
-  padding: 1.6rem;
-  overflow: hidden;
-  margin-top: auto;
-  width: 100%;
+  color: var(--Scandic-Brand-Burgundy);
   display: grid;
-  gap: 1.6rem;
+  gap: var(--Spacing-x2);
+  margin-top: auto;
+  overflow: hidden;
+  padding: var(--Spacing-x2);
+  width: 100%;
 }
 
 .hotel {
-  overflow: hidden;
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
-  padding: 0;
   margin: 0;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
 }
 
 .date {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-half);
+  font-family: var(--typography-Caption-Regular-fontFamily);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: var(--typography-Caption-Regular-fontWeight);
   line-height: var(--typography-Caption-Regular-lineHeight);
-
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
 }