From c909de9b9dc5ef0b5e4a78c5053954ceb3e1fb36 Mon Sep 17 00:00:00 2001
From: Dmitriy Vostrikov <dmitriy.vostrikov@zinderlabs.com>
Date: Sun, 15 Dec 2024 17:36:28 +0100
Subject: [PATCH] style: update TariffCard typography and adjust StepperField
 styling with theme colors

Refs: #UPS-5301
---
 .../components/tariff/TariffCard.tsx             |  5 ++++-
 src/mobile/lib/ui/system/theme.ts                |  4 ++++
 .../lib/ui/uitpas/StepperField/StepperField.tsx  | 16 ++++++++--------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/mobile/feature-saving/components/tariff/TariffCard.tsx b/src/mobile/feature-saving/components/tariff/TariffCard.tsx
index 4883aa3..10a2f2e 100644
--- 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
index a8c2483..00b43de 100644
--- 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
index f97ddee..76c7ace 100644
--- 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,7 +45,6 @@ export const StepperField = ({
     }
   };
 
-  // TODO: replace colors with colors from theme
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
       <Box
@@ -52,19 +52,19 @@ export const StepperField = ({
           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",
           }}