From 69cd3b026409f753d830474f87dfefa3ab0f12ed Mon Sep 17 00:00:00 2001 From: beny25585 Date: Wed, 29 Apr 2026 00:41:03 +0300 Subject: [PATCH 1/7] fix: pr review comments --- src/components/UI/Divider/SGLDivider.tsx | 51 +++++++++++++++++++++ src/components/UI/Divider/styles.ts | 49 ++++++++++++++++++-- src/locales/ar/translation.json | 8 +++- src/locales/en/translation.json | 8 +++- src/locales/he/translation.json | 8 +++- src/locales/ru/translation.json | 8 +++- src/pages/home/dailyTips/DailyTips.tsx | 58 +++++++++++++++++------- 7 files changed, 166 insertions(+), 24 deletions(-) create mode 100644 src/components/UI/Divider/SGLDivider.tsx diff --git a/src/components/UI/Divider/SGLDivider.tsx b/src/components/UI/Divider/SGLDivider.tsx new file mode 100644 index 0000000..3bf7fab --- /dev/null +++ b/src/components/UI/Divider/SGLDivider.tsx @@ -0,0 +1,51 @@ +import type { ReactNode } from 'react' +import { Box, LinearProgress, useTheme } from '@mui/material' +import { SGLTypography } from '@/components/UI/Typography/SGLTypography' +import { dividerStyles } from './styles' + +interface SGLDividerProps { + label: string + value: string + percent: number + lowLabel: string + highLabel: string + icon?: ReactNode +} + +export const SGLDivider = ({ + label, + value, + percent, + lowLabel, + highLabel, + icon, +}: SGLDividerProps) => { + const theme = useTheme() + + return ( + + + + {value} + + + {label} + {icon && {icon}} + + + + + + + {lowLabel} + {highLabel} + + + ) +} \ No newline at end of file diff --git a/src/components/UI/Divider/styles.ts b/src/components/UI/Divider/styles.ts index 83ad16f..8b55d26 100644 --- a/src/components/UI/Divider/styles.ts +++ b/src/components/UI/Divider/styles.ts @@ -1,5 +1,46 @@ -import { styled } from '@mui/material' +import type { SxProps, Theme } from '@mui/material' -export const SGLDivider = styled('div')(() => ({ - display: 'none', -})) +export const dividerStyles = { + container: { + width: '100%', + display: 'flex', + flexDirection: 'column', + gap: 0.5, + py: 1.5, + borderBottom: '1px solid', + borderColor: 'mediumGrey.main', + } as SxProps, + + header: { + display: 'flex', + flexDirection: 'row-reverse', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + } as SxProps, + + headerRight: { + display: 'flex', + flexDirection: 'row-reverse', + alignItems: 'center', + gap: 1, + } as SxProps, + + getProgress: (theme: Theme): SxProps => ({ + height: 6, + borderRadius: '10px', + backgroundColor: theme.palette.mediumGrey.main, + transform: 'scaleX(-1)', + '& .MuiLinearProgress-bar': { + borderRadius: '10px', + backgroundColor: theme.palette.purple.main, + }, + }), + + footer: { + display: 'flex', + flexDirection: 'row-reverse', + justifyContent: 'space-between', + width: '100%', + } as SxProps, +} \ No newline at end of file diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index cbdcd56..2d2cef7 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -67,5 +67,11 @@ "checkIn.arisonBuilding": "مبنى أريسون", "checkIn.performCheckIn": "قم بتسجيل الدخول", "checkIn.notComing": "لن أحضر", - "checkIn.completedSuccessfully": "تم بنجاح" + "checkIn.completedSuccessfully": "تم بنجاح", + "pain.level": "مستوى الألم", +"pain.high": "ألم شديد", +"pain.low": "لا ألم", +"concentration": "التركيز", +"concentration.high": "صعوبة في التركيز", +"concentration.low": "تركيز عالٍ" } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f433f31..23566a5 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -67,5 +67,11 @@ "checkIn.arisonBuilding": "Arison Building", "checkIn.performCheckIn": "Perform Check-In", "checkIn.notComing": "Not Coming", - "checkIn.completedSuccessfully": "Completed Successfully" + "checkIn.completedSuccessfully": "Completed Successfully", + "pain.level": "Pain Level", +"pain.high": "High Pain", +"pain.low": "No Pain", +"concentration": "Concentration", +"concentration.high": "Hard to Focus", +"concentration.low": "Very Focused" } diff --git a/src/locales/he/translation.json b/src/locales/he/translation.json index 1e1453d..04446f8 100644 --- a/src/locales/he/translation.json +++ b/src/locales/he/translation.json @@ -68,5 +68,11 @@ "checkIn.arisonBuilding": "בניין אריסון", "checkIn.performCheckIn": "בצע צ'ק אין", "checkIn.notComing": "לא מגיע", - "checkIn.completedSuccessfully": "בוצע בהצלחה" + "checkIn.completedSuccessfully": "בוצע בהצלחה", + "pain.level": "רמת כאב", +"pain.high": "כאב חזק", +"pain.low": "ללא כאב", +"concentration": "ריכוז", +"concentration.high": "קשה להתרכז", +"concentration.low": "מרוכז מאוד" } diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index db657c8..4d3a9b4 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -67,5 +67,11 @@ "checkIn.arisonBuilding": "Здание Арисон", "checkIn.performCheckIn": "Отметиться", "checkIn.notComing": "Не приду", - "checkIn.completedSuccessfully": "Успешно выполнено" + "checkIn.completedSuccessfully": "Успешно выполнено", + "pain.level": "Уровень боли", +"pain.high": "Сильная боль", +"pain.low": "Нет боли", +"concentration": "Концентрация", +"concentration.high": "Трудно сосредоточиться", +"concentration.low": "Очень сосредоточен" } diff --git a/src/pages/home/dailyTips/DailyTips.tsx b/src/pages/home/dailyTips/DailyTips.tsx index 289916e..8ac0272 100644 --- a/src/pages/home/dailyTips/DailyTips.tsx +++ b/src/pages/home/dailyTips/DailyTips.tsx @@ -1,30 +1,56 @@ import { SGLCard } from '@/components/UI/Card/SGLCard' import { SGLLightIcon } from '@/components/UI/Icons/LightIcon/SGLLightIcon' +import { SGLBrainIcon } from '@/components/UI/Icons/BrainIcon/SGLBrainIcon' import { SGLTypography } from '@/components/UI/Typography/SGLTypography' import { dailyTipsStyles } from './styles' import { useIsMobile } from '@/hooks/useIsMobile' import { TitleAndDescription } from './titleAndDescription/TitleAndDescription' import { useTranslation } from 'react-i18next' +import { SGLDivider } from '@/components/UI/Divider/SGLDivider' +import { Bandage } from 'lucide-react' +import { useTheme } from '@mui/material' export const DailyTips = () => { + const theme = useTheme() const isMobile = useIsMobile() const { t } = useTranslation() + return ( - - - {!isMobile && {t('daily.tip')}} - {isMobile ? ( -
+ <> + + + {!isMobile && {t('daily.tip')}} + {isMobile ? ( +
+ +
+ ) : ( -
- ) : ( - - )} - + )} + + + } + /> + + } + /> + ) -} +} \ No newline at end of file From 116dc0600c15c74c952252f77e06f9a2a941bf1b Mon Sep 17 00:00:00 2001 From: beny25585 Date: Wed, 29 Apr 2026 22:55:59 +0300 Subject: [PATCH 2/7] feat: DIVIDER component - create simple horizontal divider --- src/components/UI/Divider/SGLDivider.tsx | 51 ++---------------------- src/components/UI/Divider/index.ts | 1 + src/components/UI/Divider/styles.ts | 46 +++------------------ src/pages/home/dailyTips/DailyTips.tsx | 24 +---------- 4 files changed, 11 insertions(+), 111 deletions(-) create mode 100644 src/components/UI/Divider/index.ts diff --git a/src/components/UI/Divider/SGLDivider.tsx b/src/components/UI/Divider/SGLDivider.tsx index 3bf7fab..b27f77a 100644 --- a/src/components/UI/Divider/SGLDivider.tsx +++ b/src/components/UI/Divider/SGLDivider.tsx @@ -1,51 +1,6 @@ -import type { ReactNode } from 'react' -import { Box, LinearProgress, useTheme } from '@mui/material' -import { SGLTypography } from '@/components/UI/Typography/SGLTypography' +import { Box } from '@mui/material' import { dividerStyles } from './styles' -interface SGLDividerProps { - label: string - value: string - percent: number - lowLabel: string - highLabel: string - icon?: ReactNode +export const SGLDivider = () => { + return } - -export const SGLDivider = ({ - label, - value, - percent, - lowLabel, - highLabel, - icon, -}: SGLDividerProps) => { - const theme = useTheme() - - return ( - - - - {value} - - - {label} - {icon && {icon}} - - - - - - - {lowLabel} - {highLabel} - - - ) -} \ No newline at end of file diff --git a/src/components/UI/Divider/index.ts b/src/components/UI/Divider/index.ts new file mode 100644 index 0000000..0d7218e --- /dev/null +++ b/src/components/UI/Divider/index.ts @@ -0,0 +1 @@ +export { SGLDivider } from './SGLDivider' diff --git a/src/components/UI/Divider/styles.ts b/src/components/UI/Divider/styles.ts index 8b55d26..600fa3b 100644 --- a/src/components/UI/Divider/styles.ts +++ b/src/components/UI/Divider/styles.ts @@ -1,46 +1,10 @@ import type { SxProps, Theme } from '@mui/material' export const dividerStyles = { - container: { + divider: { width: '100%', - display: 'flex', - flexDirection: 'column', - gap: 0.5, - py: 1.5, - borderBottom: '1px solid', - borderColor: 'mediumGrey.main', + height: '1px', + backgroundColor: 'mediumGrey.main', + my: 1.5, } as SxProps, - - header: { - display: 'flex', - flexDirection: 'row-reverse', - justifyContent: 'space-between', - alignItems: 'center', - width: '100%', - } as SxProps, - - headerRight: { - display: 'flex', - flexDirection: 'row-reverse', - alignItems: 'center', - gap: 1, - } as SxProps, - - getProgress: (theme: Theme): SxProps => ({ - height: 6, - borderRadius: '10px', - backgroundColor: theme.palette.mediumGrey.main, - transform: 'scaleX(-1)', - '& .MuiLinearProgress-bar': { - borderRadius: '10px', - backgroundColor: theme.palette.purple.main, - }, - }), - - footer: { - display: 'flex', - flexDirection: 'row-reverse', - justifyContent: 'space-between', - width: '100%', - } as SxProps, -} \ No newline at end of file +} diff --git a/src/pages/home/dailyTips/DailyTips.tsx b/src/pages/home/dailyTips/DailyTips.tsx index 8ac0272..61c2fe0 100644 --- a/src/pages/home/dailyTips/DailyTips.tsx +++ b/src/pages/home/dailyTips/DailyTips.tsx @@ -1,17 +1,13 @@ import { SGLCard } from '@/components/UI/Card/SGLCard' import { SGLLightIcon } from '@/components/UI/Icons/LightIcon/SGLLightIcon' -import { SGLBrainIcon } from '@/components/UI/Icons/BrainIcon/SGLBrainIcon' import { SGLTypography } from '@/components/UI/Typography/SGLTypography' import { dailyTipsStyles } from './styles' import { useIsMobile } from '@/hooks/useIsMobile' import { TitleAndDescription } from './titleAndDescription/TitleAndDescription' import { useTranslation } from 'react-i18next' import { SGLDivider } from '@/components/UI/Divider/SGLDivider' -import { Bandage } from 'lucide-react' -import { useTheme } from '@mui/material' export const DailyTips = () => { - const theme = useTheme() const isMobile = useIsMobile() const { t } = useTranslation() @@ -34,23 +30,7 @@ export const DailyTips = () => { )} - } - /> - - } - /> + ) -} \ No newline at end of file +} From 3fa71704bdfe088001fecdef9c48abf9d2b659d0 Mon Sep 17 00:00:00 2001 From: beny25585 Date: Thu, 30 Apr 2026 00:30:14 +0300 Subject: [PATCH 3/7] feat: Complete SGLDivider component - add divider UI component with styling --- src/locales/ar/translation.json | 10 +++++----- src/locales/en/translation.json | 10 +++++----- src/locales/he/translation.json | 10 +++++----- src/locales/ru/translation.json | 10 +++++----- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index 2d2cef7..7c0867b 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -69,9 +69,9 @@ "checkIn.notComing": "لن أحضر", "checkIn.completedSuccessfully": "تم بنجاح", "pain.level": "مستوى الألم", -"pain.high": "ألم شديد", -"pain.low": "لا ألم", -"concentration": "التركيز", -"concentration.high": "صعوبة في التركيز", -"concentration.low": "تركيز عالٍ" + "pain.high": "ألم شديد", + "pain.low": "لا ألم", + "concentration": "التركيز", + "concentration.high": "صعوبة في التركيز", + "concentration.low": "تركيز عالٍ" } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 23566a5..ce419c4 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -69,9 +69,9 @@ "checkIn.notComing": "Not Coming", "checkIn.completedSuccessfully": "Completed Successfully", "pain.level": "Pain Level", -"pain.high": "High Pain", -"pain.low": "No Pain", -"concentration": "Concentration", -"concentration.high": "Hard to Focus", -"concentration.low": "Very Focused" + "pain.high": "High Pain", + "pain.low": "No Pain", + "concentration": "Concentration", + "concentration.high": "Hard to Focus", + "concentration.low": "Very Focused" } diff --git a/src/locales/he/translation.json b/src/locales/he/translation.json index 04446f8..3f985ed 100644 --- a/src/locales/he/translation.json +++ b/src/locales/he/translation.json @@ -70,9 +70,9 @@ "checkIn.notComing": "לא מגיע", "checkIn.completedSuccessfully": "בוצע בהצלחה", "pain.level": "רמת כאב", -"pain.high": "כאב חזק", -"pain.low": "ללא כאב", -"concentration": "ריכוז", -"concentration.high": "קשה להתרכז", -"concentration.low": "מרוכז מאוד" + "pain.high": "כאב חזק", + "pain.low": "ללא כאב", + "concentration": "ריכוז", + "concentration.high": "קשה להתרכז", + "concentration.low": "מרוכז מאוד" } diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 4d3a9b4..3d9faec 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -69,9 +69,9 @@ "checkIn.notComing": "Не приду", "checkIn.completedSuccessfully": "Успешно выполнено", "pain.level": "Уровень боли", -"pain.high": "Сильная боль", -"pain.low": "Нет боли", -"concentration": "Концентрация", -"concentration.high": "Трудно сосредоточиться", -"concentration.low": "Очень сосредоточен" + "pain.high": "Сильная боль", + "pain.low": "Нет боли", + "concentration": "Концентрация", + "concentration.high": "Трудно сосредоточиться", + "concentration.low": "Очень сосредоточен" } From 9134d7d482e3130c021b008b5128c7fa3c25ac5b Mon Sep 17 00:00:00 2001 From: beny25585 Date: Sat, 2 May 2026 23:26:31 +0300 Subject: [PATCH 4/7] =?UTF-8?q?=D7=AA=D7=99=D7=A7=D7=95=D7=9F=20=D7=93?= =?UTF-8?q?=D7=95=D7=99=D7=93=D7=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UI/Divider/SGLDivider.tsx | 18 +++++++++++---- src/components/UI/Divider/styles.ts | 29 ++++++++++++++++++------ 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/components/UI/Divider/SGLDivider.tsx b/src/components/UI/Divider/SGLDivider.tsx index b27f77a..a711427 100644 --- a/src/components/UI/Divider/SGLDivider.tsx +++ b/src/components/UI/Divider/SGLDivider.tsx @@ -1,6 +1,16 @@ -import { Box } from '@mui/material' -import { dividerStyles } from './styles' +import { Box, useTheme } from '@mui/material' +import { getDividerStyles } from './styles' -export const SGLDivider = () => { - return +interface SGLDividerProps { + orientation?: 'horizontal' | 'vertical' +} + +export const SGLDivider = ({ orientation = 'horizontal' }: SGLDividerProps = {}) => { + const theme = useTheme() + const dividerStyles = getDividerStyles(theme) + + const styles = + orientation === 'vertical' ? dividerStyles.dividerVertical : dividerStyles.dividerHorizontal + + return } diff --git a/src/components/UI/Divider/styles.ts b/src/components/UI/Divider/styles.ts index 600fa3b..eb71243 100644 --- a/src/components/UI/Divider/styles.ts +++ b/src/components/UI/Divider/styles.ts @@ -1,10 +1,25 @@ -import type { SxProps, Theme } from '@mui/material' +import type { Theme } from '@mui/material' +import type { CSSProperties } from 'react' -export const dividerStyles = { - divider: { +export interface DividerStylesInterface { + dividerHorizontal: CSSProperties + dividerVertical: CSSProperties +} + +export const getDividerStyles = (theme: Theme): DividerStylesInterface => ({ + dividerHorizontal: { width: '100%', height: '1px', - backgroundColor: 'mediumGrey.main', - my: 1.5, - } as SxProps, -} + backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0', + marginTop: '1.5rem', + marginBottom: '1.5rem', + }, + + dividerVertical: { + width: '1px', + height: '100%', + backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0', + marginLeft: '1.5rem', + marginRight: '1.5rem', + }, +}) From 6e25e4f0fc4799963a9b3a29e10368699470d187 Mon Sep 17 00:00:00 2001 From: tg14102005-a11y Date: Sun, 10 May 2026 02:27:50 +0300 Subject: [PATCH 5/7] feat:implement meal recommendations mapping --- src/pages/home/home.tsx | 2 + .../lifeStyle/dietTab/DietTabExample.tsx | 81 +++++++++++++++++++ .../mealRecommendation/MealRecommendation.tsx | 70 ++++++++++++++++ .../dietTab/mealRecommendation/index.ts | 1 + .../dietTab/mealRecommendation/styles.ts | 67 +++++++++++++++ 5 files changed, 221 insertions(+) create mode 100644 src/pages/lifeStyle/dietTab/DietTabExample.tsx create mode 100644 src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx create mode 100644 src/pages/lifeStyle/dietTab/mealRecommendation/index.ts create mode 100644 src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index bcff6e0..f83063b 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -4,6 +4,7 @@ import { BottomSheetDialog } from '@/components/BottomSheetDialog/BottomSheetDia import type { Appointment } from '@/components/BottomSheetDialog/types' import { TrainingGoal } from '../lifeStyle/physioAndTrainingTab/TraningGoal' import { DailyTips } from './dailyTips/DailyTips' +import { DietTabExample } from '@/pages/lifeStyle/dietTab/DietTabExample' import { useTranslation } from 'react-i18next' import { CheckIn } from './checkIn/CheckIn' @@ -27,6 +28,7 @@ export const Home = () => { /> + {}} /> ) diff --git a/src/pages/lifeStyle/dietTab/DietTabExample.tsx b/src/pages/lifeStyle/dietTab/DietTabExample.tsx new file mode 100644 index 0000000..68c46bd --- /dev/null +++ b/src/pages/lifeStyle/dietTab/DietTabExample.tsx @@ -0,0 +1,81 @@ +import { SGLMealRecommendation } from './mealRecommendation' + +export const DietTabExample = () => { + const mealsData = [ + { + name: 'סלמון אפוי', + recipe: 'סלמון טרי אפוי עם לימון וצמחי תיבול', + fullRecipe: `סלמון אפוי עם לימון וצמחי תיבול - מומלץ מאוד לבריאות הלב + +חומרים: +• 200 גר סלמון טרי +• לימון אחד +• בזיליקום, כוסברה, דיל +• שמן זית + +הוראות: +1. חמם תנור ל-180 מעלות +2. הנח סלמון על נייר אפייה +3. ריסה עם שמן זית, מלח ופלפל +4. פזר צמחי תיבול +5. אפה 15-20 דקות עד שהסלמון בשל +6. הגש עם לימון טרי`, + }, + { + name: 'סלט ירוקים', + recipe: 'תערובת ירוקים טרייה עם עגבניה ומלפפון', + fullRecipe: `סלט ירוקים טרי ובריא + +חומרים: +• עלי סלט מעורבים 150 גר +• 2 עגבניות בינוניות +• מלפפון אחד +• בצל אדום קצוץ +• זיתים שחורים +• שמן זית וחומץ בלסמי + +הוראות: +1. שטוף את הירוקים היטב +2. חתוך את הירקות לגדלים נוחים +3. מיזג את כל החומרים בקערה +4. מחבל שמן זית וחומץ בחומס בנפרד +5. מוזج את הרוטב על הסלט +6. ערבב ברכות`, + }, + { + name: 'עוף ברוטב עלים', + recipe: 'עוף צלול עם רוטב עלים טבעי וחומרים מזינים', + fullRecipe: `עוף ברוטב עלים טבעי + +חומרים: +• 250 גר בקע עוף +• 100 מ"ל מרק עוף +• כוסברית, בזיליקום, כוסבר +• שום 2 שיניים +• שמן זית + +הוראות: +1. חמם שמן זית בחליה +2. הוסף בקע עוף עד להשחמה +3. הוסף שום קצוץ +4. שפוך מרק עוף +5. הוסף צמחי תיבול +6. בישול על אש בינונית 15-20 דקות +7. הגש חם`, + }, + ] + + return ( +
+

המלצות ארוחות יומיות

+ {mealsData.map((meal, index) => ( + + ))} +
+ ) +} diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx new file mode 100644 index 0000000..d4b48e7 --- /dev/null +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx @@ -0,0 +1,70 @@ +import { Box, Typography, Button, useTheme, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material' +import { useState } from 'react' +import { getMealRecommendationStyles } from './styles' + +interface SGLMealRecommendationProps { + name: string + recipe: string + fullRecipe?: string +} + +export const SGLMealRecommendation = ({ + name, + recipe, + fullRecipe +}: SGLMealRecommendationProps) => { + const theme = useTheme() + const mealRecommendationStyles = getMealRecommendationStyles(theme) + const [openDialog, setOpenDialog] = useState(false) + + return ( + <> + + {/* Hero Image Section */} + + + {/* Content Section - CENTERED */} + + + {name} + + + {recipe} + + + + {/* CTA Button */} + + + + {/* Full Recipe Dialog */} + setOpenDialog(false)} + maxWidth="sm" + fullWidth + > + + {name} + + + + {fullRecipe || recipe} + + + + + + + + ) +} diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/index.ts b/src/pages/lifeStyle/dietTab/mealRecommendation/index.ts new file mode 100644 index 0000000..cd9c351 --- /dev/null +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/index.ts @@ -0,0 +1 @@ +export { SGLMealRecommendation } from './MealRecommendation' diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts b/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts new file mode 100644 index 0000000..4cc249e --- /dev/null +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts @@ -0,0 +1,67 @@ +import type { Theme, SxProps } from '@mui/material' + +export interface MealRecommendationStylesInterface { + container: SxProps + heroImage: SxProps + content: SxProps + title: SxProps + recipe: SxProps + button: SxProps +} + +export const getMealRecommendationStyles = (theme: Theme): MealRecommendationStylesInterface => ({ + container: { + backgroundColor: theme.palette.background?.paper, + borderRadius: '12px', + overflow: 'hidden', + boxShadow: theme.shadows[2], + marginBottom: '16px', + display: 'flex', + flexDirection: 'column', + }, + + heroImage: { + width: '100%', + height: '180px', + backgroundColor: theme.palette.primary?.light, + }, + + content: { + padding: '16px', + display: 'flex', + flexDirection: 'column', + gap: '8px', + flex: 1, + textAlign: 'center', + }, + + title: { + fontWeight: 700, + fontSize: '18px', + color: theme.palette.text?.primary, + margin: 0, + textAlign: 'center', + }, + + recipe: { + fontSize: '13px', + color: theme.palette.text?.secondary, + margin: 0, + lineHeight: '1.5', + textAlign: 'center', + }, + + button: { + backgroundColor: theme.palette.primary?.main, + color: theme.palette.primary?.contrastText, + textTransform: 'none', + fontSize: '14px', + fontWeight: 600, + borderRadius: 0, + margin: '12px', + marginTop: '8px', + '&:hover': { + backgroundColor: theme.palette.primary?.dark, + }, + }, +}) From e2a0b9759968be51813fc790b924c8489636a241 Mon Sep 17 00:00:00 2001 From: Tehila Gadidiyan Date: Tue, 2 Jun 2026 03:38:27 +0300 Subject: [PATCH 6/7] style: fix meal recommendation button and add theme colors --- .../mealRecommendation/MealRecommendation.tsx | 89 ++++++---- .../dietTab/mealRecommendation/styles.ts | 92 +++++------ src/theme.d.ts | 153 +++++++++++++++++- src/theme.ts | 4 + 4 files changed, 250 insertions(+), 88 deletions(-) diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx index d4b48e7..6b787ac 100644 --- a/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx @@ -1,68 +1,87 @@ -import { Box, Typography, Button, useTheme, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material' +import { Typography, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material' import { useState } from 'react' +import { useTheme } from '@mui/material' import { getMealRecommendationStyles } from './styles' +import { SGLButton } from '../../../../components/UI/Button/SGLButton' +import { SGLCard } from '../../../../components/UI/Card/SGLCard' +import { SGLLink } from '../../../../components/UI/Icons/Link/SGLLink' +import { SGLTypography } from '../../../../components/UI/Typography/SGLTypography' +import { variantMap } from '../../../../components/UI/Typography/types' interface SGLMealRecommendationProps { name: string recipe: string fullRecipe?: string + imageUrl?: string } export const SGLMealRecommendation = ({ name, recipe, - fullRecipe + fullRecipe, + imageUrl }: SGLMealRecommendationProps) => { const theme = useTheme() - const mealRecommendationStyles = getMealRecommendationStyles(theme) + const styles = getMealRecommendationStyles(theme) const [openDialog, setOpenDialog] = useState(false) - + return ( <> - - {/* Hero Image Section */} - - - {/* Content Section - CENTERED */} - - - {name} - - - {recipe} - - - - {/* CTA Button */} - - + +
+
+
+ +
+
+
+ + {name} + + + {recipe} + +
+
+ setOpenDialog(true)} + variant="outlined" + styles={styles.mealButton(theme)} + > + + צפה במתכון המלא + + +
+
+ - {/* Full Recipe Dialog */} - setOpenDialog(false)} - maxWidth="sm" + maxWidth="tablet" fullWidth > {name} - + {fullRecipe || recipe} - + diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts b/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts index 4cc249e..2901f51 100644 --- a/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts @@ -1,67 +1,67 @@ import type { Theme, SxProps } from '@mui/material' +import type { CSSProperties } from '@mui/material' export interface MealRecommendationStylesInterface { - container: SxProps - heroImage: SxProps - content: SxProps - title: SxProps - recipe: SxProps - button: SxProps + container: CSSProperties + heroImage: (imageUrl?: string) => CSSProperties + iconContainer: CSSProperties + content: CSSProperties + buttonWrapper: CSSProperties + mealButton: (theme: Theme) => SxProps } export const getMealRecommendationStyles = (theme: Theme): MealRecommendationStylesInterface => ({ container: { - backgroundColor: theme.palette.background?.paper, - borderRadius: '12px', - overflow: 'hidden', - boxShadow: theme.shadows[2], - marginBottom: '16px', display: 'flex', flexDirection: 'column', - }, + overflow: 'hidden', + marginBottom: theme.spacing(2), + } as CSSProperties, - heroImage: { + heroImage: (imageUrl?: string) => ({ width: '100%', height: '180px', - backgroundColor: theme.palette.primary?.light, - }, + backgroundColor: theme.palette.lightGrey.main, + backgroundImage: imageUrl ? `url(${imageUrl})` : 'none', + backgroundSize: 'cover', + backgroundPosition: 'center', + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'flex-end', + padding: theme.spacing(1.5), + } as CSSProperties), + + iconContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '40px', + height: '40px', + borderRadius: '50%', + backgroundColor: theme.palette.lowOpacityWhite.main, + } as CSSProperties, content: { - padding: '16px', + padding: theme.spacing(2), display: 'flex', flexDirection: 'column', - gap: '8px', - flex: 1, + gap: theme.spacing(1), textAlign: 'center', - }, + } as CSSProperties, - title: { - fontWeight: 700, - fontSize: '18px', - color: theme.palette.text?.primary, - margin: 0, - textAlign: 'center', - }, - - recipe: { - fontSize: '13px', - color: theme.palette.text?.secondary, - margin: 0, - lineHeight: '1.5', - textAlign: 'center', - }, + buttonWrapper: { + padding: theme.spacing(1.5), + } as CSSProperties, - button: { - backgroundColor: theme.palette.primary?.main, - color: theme.palette.primary?.contrastText, - textTransform: 'none', - fontSize: '14px', - fontWeight: 600, - borderRadius: 0, - margin: '12px', - marginTop: '8px', + mealButton: (theme: Theme) => ({ + gap: '0.5rem', + backgroundColor: theme.palette.background.paper, + color: theme.palette.purple.main, + border: `1px solid ${theme.palette.mediumGrey.main}`, + width: '100%', + transition: 'background-color 0.2s ease', '&:hover': { - backgroundColor: theme.palette.primary?.dark, + backgroundColor: theme.palette.purple50.main, }, - }, -}) + } as SxProps), +}) \ No newline at end of file diff --git a/src/theme.d.ts b/src/theme.d.ts index a9ec900..32421f9 100644 --- a/src/theme.d.ts +++ b/src/theme.d.ts @@ -1,3 +1,24 @@ +import { createTheme } from '@mui/material/styles' + +const textColors = { + black: '#000000', + grey: '#8F9098', +} + +declare module '@mui/material/styles' { + interface BreakpointOverrides { + xs: false + sm: false + md: false + lg: false + xl: false + mobile: true + tablet: true + laptop: true + desktop: true + } +} + declare module '@mui/material/styles' { interface Palette { purple: Palette['primary'] @@ -13,17 +34,15 @@ declare module '@mui/material/styles' { midGrey: Palette['primary'] lowOpacityGrey: Palette['primary'] lowOpacityPurple: Palette['primary'] - lowOpacityGrey: Palette['primary'] lowOpacityYellow: Palette['primary'] lowOpacityWhite: Palette['primary'] blue: Palette['primary'] emerald: Palette['primary'] lightGreen: Palette['primary'] darkGreen: Palette['primary'] - yellow: Palette['primary'] - brown: Palette['primary'] lightOrange: Palette['primary'] warmBrown: Palette['primary'] + purple50: Palette['primary'] } interface PaletteOptions { purple?: PaletteOptions['primary'] @@ -39,18 +58,138 @@ declare module '@mui/material/styles' { midGrey?: PaletteOptions['primary'] lowOpacityGrey?: PaletteOptions['primary'] lowOpacityPurple?: PaletteOptions['primary'] - lowOpacityGrey?: PaletteOptions['primary'] lowOpacityYellow?: PaletteOptions['primary'] lowOpacityWhite?: PaletteOptions['primary'] blue?: PaletteOptions['primary'] emerald?: PaletteOptions['primary'] lightGreen?: PaletteOptions['primary'] darkGreen?: PaletteOptions['primary'] - yellow?: PaletteOptions['primary'] - brown?: PaletteOptions['primary'] lightOrange?: PaletteOptions['primary'] warmBrown?: PaletteOptions['primary'] + purple50?: PaletteOptions['primary'] } } -export {} +export const theme = createTheme({ + direction: 'rtl', + breakpoints: { + values: { + mobile: 425, + tablet: 640, + laptop: 1024, + desktop: 1200, + }, + }, + palette: { + primary: { + main: '#1976d2', + }, + secondary: { + main: '#8b2cf5', + }, + error: { + main: '#d32f2f', + }, + background: { + paper: '#ffffff', + }, + purple: { + main: '#6D22AB', + }, + orange: { + main: '#fa7315', + }, + brown: { + main: '#50372e', + }, + yellow: { + main: '#ffdd00', + }, + green: { + main: '#02b134', + }, + lightBrown: { + main: '#775549', + }, + lightYellow: { + main: '#fcff9a', + }, + lightGrey: { + main: '#f3f4f6', + }, + lightWhite: { + main: '#FFFFFF94', + }, + midGrey: { + main: '#8F9098', + }, + lowOpacityPurple: { + main: '#6d22ab2c', + }, + lowOpacityYellow: { + main: '#ffff2b23', + }, + lowOpacityWhite: { + main: '#FFFFFF38', + }, + lowOpacityGrey: { + main: '#7a7a7a27', + }, + mediumGrey: { + main: '#dfdcdc', + }, + blue: { + main: '#3B82F6', + }, + emerald: { + main: '#10B981', + }, + lightGreen: { + main: '#e8f5e9', + }, + darkGreen: { + main: '#1B5E20', + }, + lightOrange: { + main: '#fff8ed', + }, + warmBrown: { + main: '#8a3720', + }, + purple50: { + main: '#FAF5FF', + }, + }, + typography: { + h1: { + fontSize: '26px', + fontWeight: 700, + color: textColors.black, + }, + h2: { + fontSize: '22px', + fontWeight: 700, + color: textColors.black, + }, + h3: { + fontSize: '16px', + fontWeight: 700, + color: textColors.black, + }, + h4: { + fontSize: '18px', + color: textColors.grey, + fontWeight: 400, + }, + h5: { + fontSize: '16px', + color: textColors.grey, + fontWeight: 400, + }, + h6: { + fontSize: '14px', + color: textColors.grey, + fontWeight: 400, + }, + }, +}) \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts index 43baee6..67625b3 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -17,6 +17,7 @@ declare module '@mui/material/styles' { laptop: true desktop: true } + } export const theme = createTheme({ @@ -105,6 +106,9 @@ export const theme = createTheme({ warmBrown: { main: '#8a3720', }, + purple50: { + main: '#FAF5FF', + }, }, typography: { h1: { From bf81af73a8eb1e8eff6af936d1c9bf77870648ec Mon Sep 17 00:00:00 2001 From: Tehila Gadidiyan Date: Sun, 14 Jun 2026 00:29:03 +0300 Subject: [PATCH 7/7] feat: split MealRecommendation into components and add translations --- src/locales/ar/translation.json | 8 +- src/locales/en/translation.json | 8 +- src/locales/he/translation.json | 8 +- src/locales/ru/translation.json | 8 +- .../lifeStyle/dietTab/DietTabExample.tsx | 4 + .../dietTab/mealRecommendation/MealCard.tsx | 51 +++++++ .../dietTab/mealRecommendation/MealDialog.tsx | 34 +++++ .../mealRecommendation/MealRecommendation.tsx | 71 +++------- src/theme.d.ts | 134 +----------------- 9 files changed, 136 insertions(+), 190 deletions(-) create mode 100644 src/pages/lifeStyle/dietTab/mealRecommendation/MealCard.tsx create mode 100644 src/pages/lifeStyle/dietTab/mealRecommendation/MealDialog.tsx diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index 4272cf5..e1e5f8c 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -84,5 +84,11 @@ "lifeStyle.morningStretchingTitle": "تمارين التمدد الصباحية", "lifeStyle.morningStretchingDescription": "تحسين تدفق الدم والمرونة", "lifeStyle.balanceTrainingTitle": "تمارين التوازن", - "lifeStyle.balanceTrainingDescription": "تقوية عضلات الجسم الأساسية وتحسين القوام" + "lifeStyle.balanceTrainingDescription": "تقوية عضلات الجسم الأساسية وتحسين القوام", + "mealRecommendation.viewFullRecipe": "عرض الوصفة الكاملة", + "mealRecommendation.close": "إغلاق", + "mealRecommendation.lunch": "غداء موصى به", + "mealRecommendation.breakfast": "إفطار موصى به", + "mealRecommendation.dinner": "عشاء موصى به", + "mealRecommendation.dailyMeals": "وجباتك اليومية" } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 403a887..712f4db 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -131,5 +131,11 @@ "lifeStyle.morningStretchingTitle": "Morning Stretching", "lifeStyle.morningStretchingDescription": "Improve Blood Flow and Flexibility", "lifeStyle.balanceTrainingTitle": "Balance Training", - "lifeStyle.balanceTrainingDescription": "Strengthen Core Muscles and Posture" + "lifeStyle.balanceTrainingDescription": "Strengthen Core Muscles and Posture", + "mealRecommendation.viewFullRecipe": "View Full Recipe", + "mealRecommendation.close": "Close", + "mealRecommendation.lunch": "Recommended Lunch", + "mealRecommendation.breakfast": "Recommended Breakfast", + "mealRecommendation.dinner": "Recommended Dinner", + "mealRecommendation.dailyMeals": "Your Daily Meals" } diff --git a/src/locales/he/translation.json b/src/locales/he/translation.json index db0aa5b..186801c 100644 --- a/src/locales/he/translation.json +++ b/src/locales/he/translation.json @@ -132,5 +132,11 @@ "lifeStyle.morningStretchingTitle": "מתיחות בוקר", "lifeStyle.morningStretchingDescription": "שיפור זרימת דם וגמישות", "lifeStyle.balanceTrainingTitle": "אימון שיווי משקל", - "lifeStyle.balanceTrainingDescription": "חיזוק שרירי ליבה ויציבה" + "lifeStyle.balanceTrainingDescription": "חיזוק שרירי ליבה ויציבה", + "mealRecommendation.viewFullRecipe": "צפה במתכון המלא", + "mealRecommendation.close": "סגור", + "mealRecommendation.lunch": "ארוחת צהריים מומלצת", + "mealRecommendation.breakfast": "ארוחת בוקר מומלצת", + "mealRecommendation.dinner": "ארוחת ערב מומלצת", + "mealRecommendation.dailyMeals": "הארוחות המומלצות שלך" } diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 825f4fb..ac16e62 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -131,5 +131,11 @@ "lifeStyle.morningStretchingTitle": "Утренняя растяжка", "lifeStyle.morningStretchingDescription": "Улучшение кровообращения и гибкости", "lifeStyle.balanceTrainingTitle": "Тренировка равновесия", - "lifeStyle.balanceTrainingDescription": "Укрепление мышц кора и осанки" + "lifeStyle.balanceTrainingDescription": "Укрепление мышц кора и осанки", + "mealRecommendation.viewFullRecipe": "Просмотреть полный рецепт", + "mealRecommendation.close": "Закрыть", + "mealRecommendation.lunch": "Рекомендуемый обед", + "mealRecommendation.breakfast": "Рекомендуемый завтрак", + "mealRecommendation.dinner": "Рекомендуемый ужин", + "mealRecommendation.dailyMeals": "Ваши ежедневные приемы пищи" } diff --git a/src/pages/lifeStyle/dietTab/DietTabExample.tsx b/src/pages/lifeStyle/dietTab/DietTabExample.tsx index 70cb469..fce59d4 100644 --- a/src/pages/lifeStyle/dietTab/DietTabExample.tsx +++ b/src/pages/lifeStyle/dietTab/DietTabExample.tsx @@ -5,6 +5,7 @@ export const DietTabExample = () => { const { t } = useTranslation() const mealsData = [ { + mealType: 'ארוחת צהריים מומלצת', name: 'סלמון אפוי', recipe: 'סלמון טרי אפוי עם לימון וצמחי תיבול', fullRecipe: `סלמון אפוי עם לימון וצמחי תיבול - מומלץ מאוד לבריאות הלב @@ -24,6 +25,7 @@ export const DietTabExample = () => { 6. הגש עם לימון טרי`, }, { + mealType: 'חטיף מומלץ', name: 'סלט ירוקים', recipe: 'תערובת ירוקים טרייה עם עגבניה ומלפפון', fullRecipe: `סלט ירוקים טרי ובריא @@ -45,6 +47,7 @@ export const DietTabExample = () => { 6. ערבב ברכות`, }, { + mealType: 'ארוחת ערב מומלצת', name: 'עוף ברוטב עלים', recipe: 'עוף צלול עם רוטב עלים טבעי וחומרים מזינים', fullRecipe: `עוף ברוטב עלים טבעי @@ -73,6 +76,7 @@ export const DietTabExample = () => { {mealsData.map((meal, index) => ( void +} + +export const MealCard = ({ mealType, name, recipe, imageUrl, onOpenDialog }: MealCardProps) => { + const theme = useTheme() + const { t } = useTranslation() + const styles = getMealRecommendationStyles(theme) + + return ( + <> + + {mealType} + + +
+
+
+ +
+
+
+ {name} + {recipe} +
+
+ + + {t('mealRecommendation.viewFullRecipe')} + + +
+
+ + + ) +} diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/MealDialog.tsx b/src/pages/lifeStyle/dietTab/mealRecommendation/MealDialog.tsx new file mode 100644 index 0000000..b9a668f --- /dev/null +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/MealDialog.tsx @@ -0,0 +1,34 @@ +import { Typography, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material' +import { useTheme } from '@mui/material' +import { useTranslation } from 'react-i18next' +import { getMealRecommendationStyles } from './styles' +import { SGLButton } from '../../../../components/UI/Button/SGLButton' +import { variantMap } from '../../../../components/UI/Typography/types' + +interface MealDialogProps { + name: string + recipe: string + fullRecipe?: string + open: boolean + onClose: () => void +} + +export const MealDialog = ({ name, recipe, fullRecipe, open, onClose }: MealDialogProps) => { + const theme = useTheme() + const { t } = useTranslation() + const styles = getMealRecommendationStyles(theme) + + return ( + + {name} + + {fullRecipe || recipe} + + + + {t('mealRecommendation.close')} + + + + ) +} diff --git a/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx index 128fc72..5b18fc7 100644 --- a/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx +++ b/src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx @@ -1,15 +1,9 @@ -import { Typography, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material' import { useState } from 'react' -import { useTheme } from '@mui/material' -import { useTranslation } from 'react-i18next' -import { getMealRecommendationStyles } from './styles' -import { SGLButton } from '../../../../components/UI/Button/SGLButton' -import { SGLCard } from '../../../../components/UI/Card/SGLCard' -import { SGLLink } from '../../../../components/UI/Icons/Link/SGLLink' -import { SGLTypography } from '../../../../components/UI/Typography/SGLTypography' -import { variantMap } from '../../../../components/UI/Typography/types' +import { MealCard } from './MealCard' +import { MealDialog } from './MealDialog' interface SGLMealRecommendationProps { + mealType: string name: string recipe: string fullRecipe?: string @@ -17,59 +11,30 @@ interface SGLMealRecommendationProps { } export const SGLMealRecommendation = ({ + mealType, name, recipe, fullRecipe, imageUrl, }: SGLMealRecommendationProps) => { - const theme = useTheme() - const { t } = useTranslation() - const styles = getMealRecommendationStyles(theme) const [openDialog, setOpenDialog] = useState(false) return ( <> - -
-
-
- -
-
-
- {name} - {recipe} -
-
- setOpenDialog(true)} - variant="outlined" - sx={styles.mealButton(theme)} - > - - {t('mealRecommendation.viewFullRecipe')} - - -
-
- - - setOpenDialog(false)} fullWidth> - {name} - - {fullRecipe || recipe} - - - setOpenDialog(false)} - fullWidth - variant="contained" - sx={styles.closeButton} - > - {t('mealRecommendation.close')} - - - + setOpenDialog(true)} + /> + setOpenDialog(false)} + /> ) } diff --git a/src/theme.d.ts b/src/theme.d.ts index fcdf118..9822b12 100644 --- a/src/theme.d.ts +++ b/src/theme.d.ts @@ -1,10 +1,3 @@ -import { createTheme } from '@mui/material/styles' - -const textColors = { - black: '#000000', - grey: '#8F9098', -} - declare module '@mui/material/styles' { interface BreakpointOverrides { xs: false @@ -17,9 +10,6 @@ declare module '@mui/material/styles' { laptop: true desktop: true } -} - -declare module '@mui/material/styles' { interface Palette { purple: Palette['primary'] brown: Palette['primary'] @@ -76,126 +66,4 @@ declare module '@mui/material/styles' { } } -export const theme = createTheme({ - direction: 'rtl', - breakpoints: { - values: { - mobile: 425, - tablet: 640, - laptop: 1024, - desktop: 1200, - }, - }, - palette: { - primary: { - main: '#1976d2', - }, - secondary: { - main: '#8b2cf5', - }, - error: { - main: '#d32f2f', - }, - background: { - paper: '#ffffff', - }, - purple: { - main: '#6D22AB', - }, - orange: { - main: '#fa7315', - }, - brown: { - main: '#50372e', - }, - yellow: { - main: '#ffdd00', - }, - green: { - main: '#02b134', - }, - lightBrown: { - main: '#775549', - }, - lightYellow: { - main: '#fcff9a', - }, - lightGrey: { - main: '#f3f4f6', - }, - lightWhite: { - main: '#FFFFFF94', - }, - midGrey: { - main: '#8F9098', - }, - lowOpacityPurple: { - main: '#6d22ab2c', - }, - lowOpacityYellow: { - main: '#ffff2b23', - }, - lowOpacityWhite: { - main: '#FFFFFF38', - }, - lowOpacityGrey: { - main: '#7a7a7a27', - }, - mediumGrey: { - main: '#dfdcdc', - }, - blue: { - main: '#3B82F6', - }, - emerald: { - main: '#10B981', - }, - lightGreen: { - main: '#e8f5e9', - }, - darkGreen: { - main: '#1B5E20', - }, - lightOrange: { - main: '#fff8ed', - }, - warmBrown: { - main: '#8a3720', - }, - purple50: { - main: '#FAF5FF', - }, - }, - typography: { - h1: { - fontSize: '26px', - fontWeight: 700, - color: textColors.black, - }, - h2: { - fontSize: '22px', - fontWeight: 700, - color: textColors.black, - }, - h3: { - fontSize: '16px', - fontWeight: 700, - color: textColors.black, - }, - h4: { - fontSize: '18px', - color: textColors.grey, - fontWeight: 400, - }, - h5: { - fontSize: '16px', - color: textColors.grey, - fontWeight: 400, - }, - h6: { - fontSize: '14px', - color: textColors.grey, - fontWeight: 400, - }, - }, -}) +export {}