style: update TariffCard typography and adjust StepperField styling w…

…ith theme colors Refs: #UPS-5301
cultuurnet · Dec 15, 2024 · bfda09b · bfda09b
1 parent e495b5f
commit bfda09b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/mobile/feature-saving/components/tariff/TariffCard.tsx b/src/mobile/feature-saving/components/tariff/TariffCard.tsx
@@ -108,7 +108,10 @@ export const TariffCard = ({
             alignItems: "center",
           }}
         >
-          <Typography variant="h6">
+          <Typography
+            variant="h6"
+            sx={{ ...(remainingDiscounts && { mt: "-16px" }) }}
+          >
             {t("saving.mobile.tariff.card.count")}
           </Typography>
           <StepperField

diff --git a/src/mobile/lib/ui/system/theme.ts b/src/mobile/lib/ui/system/theme.ts
@@ -97,7 +97,9 @@ export const palette = {
   // however, I don't see a way to copy all of the colors (it does not let me)
   neutral: {
     0: "#FFFFFF",
+    100: "#F9FAF9",
     200: "#CFD3D3",
+    300: "#D8DAD9",
     500: "#787474",
     900: "#2E3333",
   },
@@ -140,7 +142,9 @@ export const theme = createTheme({
     },
     neutral: {
       0: palette.neutral[0],
+      100: palette.neutral[100],
       200: palette.neutral[200],
+      300: palette.neutral[300],
       500: palette.neutral[500],
       900: palette.neutral[900],
     },

diff --git a/src/mobile/lib/ui/uitpas/StepperField/StepperField.tsx b/src/mobile/lib/ui/uitpas/StepperField/StepperField.tsx
@@ -20,6 +20,7 @@ export const StepperField = ({
   subtitle,
 }: StepperFieldProps) => {
   const theme = useTheme();
+
   const handleIncrement = () => {
     onChange(value + incrementValue);
   };
@@ -44,27 +45,26 @@ export const StepperField = ({
     }
   };
 
-  // TODO: replace colors with colors from theme
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
       <Box
         sx={{
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
-          paddingTop: `${subtitle ? "20px" : "4px"}`,
+          paddingTop: `${subtitle ? "12px" : "4px"}`,
         }}
       >
         <IconButton
           onClick={handleDecrement}
           disableRipple
           sx={{
-            background: "#f9faf9",
+            background: theme.palette.neutral[100],
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
             borderTopLeftRadius: "6px",
             borderBottomLeftRadius: "6px",
-            border: "1px solid #d8dad9",
+            border: `1px solid ${theme.palette.neutral[300]}`,
             width: "44px",
             height: "37px",
           }}
@@ -81,8 +81,8 @@ export const StepperField = ({
             width: "80px",
             px: "12px",
             height: "37px",
-            borderTop: "1px solid #d8dad9",
-            borderBottom: "1px solid #d8dad9",
+            borderTop: `1px solid ${theme.palette.neutral[300]}`,
+            borderBottom: `1px solid ${theme.palette.neutral[300]}`,
             borderLeft: "none",
             borderRight: "none",
             fontSize: "16px",
@@ -96,12 +96,12 @@ export const StepperField = ({
           disableRipple
           disabled={!!(maxValue && value >= maxValue)}
           sx={{
-            background: "#ffffff",
+            background: theme.palette.neutral[0],
             borderTopRightRadius: "6px",
             borderBottomRightRadius: "6px",
             borderTopLeftRadius: 0,
             borderBottomLeftRadius: 0,
-            border: "1px solid #d8dad9",
+            border: `1px solid ${theme.palette.neutral[300]}`,
             width: "44px",
             height: "37px",
           }}