fix: cleans up the css

- uses css-variables instead of !important overrides - moves stuff around accordingly
City-of-Helsinki · Jan 12, 2025 · d030a66 · d030a66
1 parent 0666320
commit d030a66
Showing 1 changed file with 28 additions and 30 deletions.
diff --git a/apps/ui/components/application/reservation-unit-card.tsx b/apps/ui/components/application/reservation-unit-card.tsx
@@ -6,7 +6,6 @@ import { fontBold, fontRegular, H6 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import type { ReservationUnitCardFieldsFragment } from "@gql/gql-types";
 import { getMainImage, getTranslation } from "@/modules/util";
-import { MediumButton } from "@/styles/util";
 import { getReservationUnitName } from "@/modules/reservationUnit";
 import { getImageSource } from "common/src/helpers";
 import Card from "common/src/components/Card";
@@ -24,7 +23,7 @@ type Props = {
   invalid: boolean;
 };
 
-const NameCardContainer = styled(Flex).attrs({ $gap: "0" })`
+const NameCardContainer = styled(Flex).attrs({ $gap: "none" })`
   flex-direction: column;
   @media (min-width: ${breakpoints.m}) {
     flex-direction: row;
@@ -55,9 +54,11 @@ const OverlayContainer = styled(Flex)`
   }
 `;
 
+const orderButtonsWidth = "230px";
+
 const CardContainer = styled(Flex)`
   @media (min-width: ${breakpoints.m}) {
-    width: calc(100% - 230px);
+    width: calc(100% - ${orderButtonsWidth});
     overflow: hidden;
     [class*="Card__ImageWrapper"] {
       max-width: 147px;
@@ -88,7 +89,7 @@ const OrderButtonContainer = styled.div`
     grid-template-columns: 100px 1fr;
     grid-template-rows: 1fr 1fr;
     height: 100%;
-    width: 230px;
+    width: ${orderButtonsWidth};
     margin-top: 0;
     padding: 0;
     background: var(--color-black-20);
@@ -106,11 +107,13 @@ const DeleteContainer = styled(Flex).attrs({ $justifyContent: "center" })`
   }
 `;
 
-const DeleteButton = styled(MediumButton)`
+const DeleteButton = styled(Button)`
   white-space: nowrap;
   margin: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
   color: var(--color-black-90) !important;
-  font-family: var(--font-bold), sans-serif !important;
+  && {
+    ${fontBold}
+  }
   @media (min-width: ${breakpoints.m}) {
     grid-column: 1;
     grid-row: 1 / 2;
@@ -125,43 +128,38 @@ const OrderButton = styled(Button)`
   && {
     position: relative;
     z-index: 2;
-    color: var(--color-black-90) !important;
-    background-color: var(--color-white);
-    border-color: var(--color-black-90) !important;
+    --color: var(--color-black-90);
+    --background-color: var(--color-white);
+    --border-color: var(--color-black-90);
+    --background-color-hover-focus: var(--color-white);
+    --color-hover-focus: var(--color-black-90);
+    --background-color-disabled: var(--color-black-5);
+    --border-color-disabled: var(--color-black-20);
+    --color-disabled: var(--color-black-20);
     ${fontBold}
     &:hover,
     &:focus:hover {
       background-color: var(--color-black-5);
     }
 
-    &:focus {
-      background-color: var(--color-white);
-    }
-
     &:disabled {
-      background-color: var(--color-black-5);
-      border-color: var(--color-black-20) !important;
-      color: var(--color-black-20) !important;
       z-index: 1;
       ${fontRegular}
     }
     @media (min-width: ${breakpoints.m}) {
-      background-color: var(--color-black-5);
-      border-color: var(--color-black-5) !important;
+      --background-color: var(--color-black-5);
+      --border-color: var(--color-black-5);
 
       &:hover,
-      &:focus:hover {
-        background-color: var(--color-black-10);
-      }
-
-      &:focus {
-        background-color: var(--color-black-5);
+      &:focus-within,
+      &:focus-within:hover {
+        --color-focus: var(--color-black-90);
+        --background-color-focus: var(--color-black-5);
+        --background-color-hover-focus: var(--color-black-10);
       }
 
       &:disabled {
-        background-color: var(--color-black-5);
-        color: var(--color-black-20) !important;
-        border-color: transparent !important;
+        --border-color-disabled: transparent;
         ${fontRegular}
       }
     }
@@ -186,8 +184,8 @@ const DownButton = styled(OrderButton)`
     margin-right: 0 !important;
     grid-column: 2;
     grid-row: 2;
-    &&:disabled {
-      border-right: 0 !important;
+    &&:disabled && {
+      border-right: 0;
     }
   }
 `;
@@ -209,7 +207,7 @@ export function ReservationUnitCard({
   onMoveUp,
   onMoveDown,
   invalid,
-}: Props): JSX.Element {
+}: Readonly<Props>): JSX.Element {
   const { t } = useTranslation();
 
   const { unit } = reservationUnit;