Feat/diet recipe card#68
Merged
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (11)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughRefactors the divider into a theme-driven component, adds a meal-recommendation UI (card, dialog, example) with i18n entries, augments MUI theme types and adds palette.purple50, and updates workspace build config. ChangesDivider Component Refactoring
Meal Recommendation Feature
Theme Updates and Config
🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly Related PRs
Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
src/components/UI/Divider/styles.ts (1)
9-25: ⚡ Quick winConsider using
theme.spacing()for margins.The margins are currently hardcoded as
'1.5rem'. Usingtheme.spacing()would better integrate with MUI's spacing system and maintain consistency with the theme-driven approach.♻️ Suggested refactor
export const getDividerStyles = (theme: Theme): DividerStylesInterface => ({ dividerHorizontal: { width: '100%', height: '1px', backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0', - marginTop: '1.5rem', - marginBottom: '1.5rem', + marginTop: theme.spacing(3), + marginBottom: theme.spacing(3), }, dividerVertical: { width: '1px', height: '100%', backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0', - marginLeft: '1.5rem', - marginRight: '1.5rem', + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), }, })Note:
theme.spacing(3)produces24px(assuming default 8px spacing unit), which matches1.5remwhen the root font-size is16px.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/UI/Divider/styles.ts` around lines 9 - 25, Replace the hardcoded '1.5rem' margin values in getDividerStyles for dividerHorizontal and dividerVertical with theme.spacing(...) calls to align with MUI spacing (e.g., theme.spacing(3)); update both marginTop/marginBottom and marginLeft/marginRight to use theme.spacing so the component uses the theme-driven spacing system consistently.src/pages/lifeStyle/dietTab/DietTabExample.tsx (2)
73-73: ⚡ Quick winPrefer stable keys over array index.
Using
indexas the key works for static arrays, but if the meal data becomes dynamic (reordered, filtered, or fetched), this can cause rendering issues and poor performance.♻️ Use meal name or stable ID as key
If meal names are unique:
- <SGLMealRecommendation - key={index} + <SGLMealRecommendation + key={meal.name} name={meal.name}Or add stable IDs to the meal data:
const mealsData = [ { + id: 'salmon-baked', name: 'סלמון אפוי', // ... }, // ... ] // Then use: - key={index} + key={meal.id}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/lifeStyle/dietTab/DietTabExample.tsx` at line 73, The list item is using the array index as the React key which can break reconciliation when the meal list is dynamic; in the DietTabExample component change the key on the mapped elements (the place currently using key={index}) to a stable identifier such as meal.id or meal.name (ensure names are unique), or add a stable id to each item when building the meals array and use that (e.g., meals.map(meal => ... key={meal.id} ...)); if neither unique field exists, derive a stable id once (when data is loaded) rather than using the map index.
69-70: ⚡ Quick winUse MUI Box with sx prop for consistent styling.
The inline
style={{ padding: '16px' }}is inconsistent with the theme-driven approach used elsewhere in the codebase (e.g.,getMealRecommendationStyles). The heading text is also hardcoded in Hebrew.♻️ Refactor to use MUI Box and i18n
+import { Box, Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' export const DietTabExample = () => { + const { t } = useTranslation() const mealsData = [ // ... ] return ( - <div style={{ padding: '16px' }}> - <h2>המלצות ארוחות יומיות</h2> + <Box sx={{ padding: 2 }}> + <Typography variant="h2">{t('dietTab.dailyMealsRecommendations')}</Typography> {mealsData.map((meal, index) => (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/lifeStyle/dietTab/DietTabExample.tsx` around lines 69 - 70, Replace the inline <div style={{ padding: '16px' }}> and hardcoded Hebrew heading in the DietTabExample component with a MUI Box using the sx prop and an i18n translation key: import Box from '@mui/material/Box' (or use existing MUI imports) and wrap the content in <Box sx={{ p: 2 }}> to match theme spacing; replace the hardcoded heading string with a call to your i18n hook (e.g., const { t } = useTranslation() and use t('dailyMealRecommendations') or the appropriate key) so the text is localized; you can still reuse getMealRecommendationStyles for other styling but move padding into the Box sx prop for consistency.src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx (1)
54-54: 💤 Low valueConsider moving inline styles to the styles file.
The inline
sxprops forDialogTitle(line 54) andTypography(line 58) could be moved togetMealRecommendationStylesfor consistency with the rest of the component's styling approach.♻️ Move to styles file
In
styles.ts:export interface MealRecommendationStylesInterface { container: SxProps<Theme> heroImage: SxProps<Theme> content: SxProps<Theme> title: SxProps<Theme> recipe: SxProps<Theme> button: SxProps<Theme> + dialogTitle: SxProps<Theme> + dialogContent: SxProps<Theme> } export const getMealRecommendationStyles = (theme: Theme): MealRecommendationStylesInterface => ({ // ... existing styles ... + dialogTitle: { + textAlign: 'center', + fontWeight: 700, + }, + dialogContent: { + marginTop: 2, + }, })In
MealRecommendation.tsx:- <DialogTitle sx={{ textAlign: 'center', fontWeight: 700 }}> + <DialogTitle sx={mealRecommendationStyles.dialogTitle}> {name} </DialogTitle> <DialogContent> - <Typography variant="body1" sx={{ marginTop: 2 }}> + <Typography variant="body1" sx={mealRecommendationStyles.dialogContent}> {fullRecipe || recipe} </Typography> </DialogContent>Also applies to: 58-58
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx` at line 54, Move the inline sx styling applied to DialogTitle and the Typography in MealRecommendation.tsx into the component style module by extending getMealRecommendationStyles in styles.ts (e.g., add keys like dialogTitle and recommendationText or similar), export those style objects, and then replace the sx props in the JSX (DialogTitle, Typography) with references to the corresponding style entries from getMealRecommendationStyles; update any imports to use the new style entries so all styling for MealRecommendation is centralized in styles.ts.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/locales/he/translation.json`:
- Around line 88-93: Rename the check-in translation keys to include the missing
"checkIn." prefix for consistency: change "pain.level" → "checkIn.pain.level",
"pain.high" → "checkIn.pain.high", "pain.low" → "checkIn.pain.low",
"concentration" → "checkIn.concentration", "concentration.high" →
"checkIn.concentration.high", and "concentration.low" →
"checkIn.concentration.low" in this Hebrew translation file and mirror the same
renames across the other locale translation files; after renaming, search for
any runtime references to these keys (e.g., lookups of "pain.level" or
"concentration") and update them to the new "checkIn.*" keys if found.
In `@src/pages/home/dailyTips/DailyTips.tsx`:
- Line 8: Replace the direct component import of SGLDivider with the barrel
export: update the import statement that references SGLDivider to import from
the Divider directory barrel (i.e., '@/components/UI/Divider') instead of
'@/components/UI/Divider/SGLDivider' so the module uses the centralized export;
keep the imported symbol name SGLDivider unchanged.
In `@src/pages/lifeStyle/dietTab/DietTabExample.tsx`:
- Around line 4-66: The mealsData array in DietTabExample is hardcoded in
Hebrew; move these strings into i18n translation keys or a data service: replace
the inline mealsData with a mapped structure that reads values via the t(...)
calls (e.g., t('dietTab.meals.salmon.name'), t('dietTab.meals.salmon.recipe'),
t('dietTab.meals.salmon.fullRecipe')) or fetches from an API/context if meals
are dynamic, update any references to mealsData in DietTabExample to use the
translated/fetched values, and add corresponding keys to the translation files
(dietTab.meals.*) so content is localizable and maintainable.
In `@src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx`:
- Line 43: Replace the hardcoded Hebrew button labels in the MealRecommendation
component with react-i18next translations: import and use the useTranslation
hook inside MealRecommendation, replace the "צפה במתכון המלא" label with
t('dietTab.viewFullRecipe') and the "סגור" label with t('common.close'), and add
corresponding keys to your locale JSON files (e.g., en.json and he.json) under
dietTab.viewFullRecipe and common.close so the UI is internationalized.
---
Nitpick comments:
In `@src/components/UI/Divider/styles.ts`:
- Around line 9-25: Replace the hardcoded '1.5rem' margin values in
getDividerStyles for dividerHorizontal and dividerVertical with
theme.spacing(...) calls to align with MUI spacing (e.g., theme.spacing(3));
update both marginTop/marginBottom and marginLeft/marginRight to use
theme.spacing so the component uses the theme-driven spacing system
consistently.
In `@src/pages/lifeStyle/dietTab/DietTabExample.tsx`:
- Line 73: The list item is using the array index as the React key which can
break reconciliation when the meal list is dynamic; in the DietTabExample
component change the key on the mapped elements (the place currently using
key={index}) to a stable identifier such as meal.id or meal.name (ensure names
are unique), or add a stable id to each item when building the meals array and
use that (e.g., meals.map(meal => ... key={meal.id} ...)); if neither unique
field exists, derive a stable id once (when data is loaded) rather than using
the map index.
- Around line 69-70: Replace the inline <div style={{ padding: '16px' }}> and
hardcoded Hebrew heading in the DietTabExample component with a MUI Box using
the sx prop and an i18n translation key: import Box from '@mui/material/Box' (or
use existing MUI imports) and wrap the content in <Box sx={{ p: 2 }}> to match
theme spacing; replace the hardcoded heading string with a call to your i18n
hook (e.g., const { t } = useTranslation() and use t('dailyMealRecommendations')
or the appropriate key) so the text is localized; you can still reuse
getMealRecommendationStyles for other styling but move padding into the Box sx
prop for consistency.
In `@src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx`:
- Line 54: Move the inline sx styling applied to DialogTitle and the Typography
in MealRecommendation.tsx into the component style module by extending
getMealRecommendationStyles in styles.ts (e.g., add keys like dialogTitle and
recommendationText or similar), export those style objects, and then replace the
sx props in the JSX (DialogTitle, Typography) with references to the
corresponding style entries from getMealRecommendationStyles; update any imports
to use the new style entries so all styling for MealRecommendation is
centralized in styles.ts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: cf88bd99-88ba-4bb8-b9cf-1177e0639945
📒 Files selected for processing (13)
src/components/UI/Divider/SGLDivider.tsxsrc/components/UI/Divider/index.tssrc/components/UI/Divider/styles.tssrc/locales/ar/translation.jsonsrc/locales/en/translation.jsonsrc/locales/he/translation.jsonsrc/locales/ru/translation.jsonsrc/pages/home/dailyTips/DailyTips.tsxsrc/pages/home/home.tsxsrc/pages/lifeStyle/dietTab/DietTabExample.tsxsrc/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsxsrc/pages/lifeStyle/dietTab/mealRecommendation/index.tssrc/pages/lifeStyle/dietTab/mealRecommendation/styles.ts
Comment on lines
+4
to
+66
| 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. הגש חם`, | ||
| }, | ||
| ] |
There was a problem hiding this comment.
Move meal data to i18n translations or a data service.
The meal data is hardcoded in Hebrew within the component, preventing internationalization and making maintenance difficult. Since the codebase uses react-i18next (and the PR adds i18n keys for other fields), these meal definitions should follow the same pattern.
Consider:
- Option 1 (recommended): Move to translation files with structure like
t('dietTab.meals.salmon.name'),t('dietTab.meals.salmon.recipe'), etc. - Option 2: If meals are dynamic content, fetch from an API or context provider.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/lifeStyle/dietTab/DietTabExample.tsx` around lines 4 - 66, The
mealsData array in DietTabExample is hardcoded in Hebrew; move these strings
into i18n translation keys or a data service: replace the inline mealsData with
a mapped structure that reads values via the t(...) calls (e.g.,
t('dietTab.meals.salmon.name'), t('dietTab.meals.salmon.recipe'),
t('dietTab.meals.salmon.fullRecipe')) or fetches from an API/context if meals
are dynamic, update any references to mealsData in DietTabExample to use the
translated/fetched values, and add corresponding keys to the translation files
(dietTab.meals.*) so content is localizable and maintainable.
Tamir198
requested changes
May 10, 2026
Tamir198
left a comment
Tamir198
left a comment
Member
There was a problem hiding this comment.
Your colors are not like the design and this is not responsive on mobile:
Also clean this pr first, you have your changes from the divider branch
| import { Box, useTheme } from '@mui/material' | ||
| import { getDividerStyles } from './styles' | ||
|
|
||
| interface SGLDividerProps { |
Member
There was a problem hiding this comment.
Why do you have divider changes in this pr?
Collaborator
There was a problem hiding this comment.
@tg14102005-a11y please address this comment from @Tamir198
https://github.com/ColmanDevClubORG/Sagol360Management/pull/68/changes#r3215472919
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts`:
- Around line 1-2: The import for CSSProperties is coming from the wrong
package; update the import so CSSProperties is imported from 'react' instead of
'`@mui/material`'. In styles.ts replace the existing imports so Theme and SxProps
remain imported from '`@mui/material`' and CSSProperties is imported from 'react'
(locate the import statement that currently references CSSProperties and change
its source). Ensure any references to CSSProperties in this file continue to use
the React type.
In `@src/theme.d.ts`:
- Around line 1-2: The file contains runtime code that must be moved out of the
declaration file: remove the import createTheme, the runtime const textColors,
and the export const theme = createTheme(...) from src/theme.d.ts and instead
create a new runtime module src/theme.ts that exports the single source-of-truth
theme (export const theme) built with createTheme; keep only the TypeScript
augmentation blocks (declare module '`@mui/material/styles`' { ... }) inside
src/theme.d.ts so typings remain, and update any imports to consume theme from
src/theme.ts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 43f5088a-d275-43ae-8b7a-34d3e3f6f8b1
📒 Files selected for processing (4)
src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsxsrc/pages/lifeStyle/dietTab/mealRecommendation/styles.tssrc/theme.d.tssrc/theme.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx
Comment on lines
+1
to
+2
| import type { Theme, SxProps } from '@mui/material' | ||
| import type { CSSProperties } from '@mui/material' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether this file imports CSSProperties from MUI instead of React.
rg -n -C2 "import type \{ CSSProperties \} from '`@mui/material`'|import type \{ CSSProperties \} from 'react'" src/pages/lifeStyle/dietTab/mealRecommendation/styles.tsRepository: ColmanDevClubORG/Sagol360Management
Length of output: 244
🌐 Web query:
Does @mui/materialexport aCSSPropertiestype? (MUI v7.3.9) What package exportsCSSProperties—React CSSProperties or MUI?
💡 Result:
Yes— in MUI v7.3.9, @mui/material does not export a named CSSProperties type from @mui/material/styles. Instead, the CSSProperties type you usually want for inline style props is React.CSSProperties (from React’s types, ultimately based on csstype). In contrast, MUI has its own internal/styled-engine CSSProperties types (e.g., packages/mui-styled-engine exports a CSSProperties type), but that is not re-exported as the public CSSProperties from @mui/material/styles in v7. Evidence: - A MUI v7 issue reports that importing CSSProperties from “@mui/material/styles” fails: “Module '@mui/material/styles' has no exported member CSSProperties” [1]. - The same issue’s discussion indicates CSSProperties exports were corrected/fixed via adjusting exports (implying it was not available as a public export as imported) [1]. - MUI styling uses React.CSSProperties for inline style prop typing (e.g., StandardProps defines style?: React.CSSProperties) [2]. - MUI also defines/exports its own CSSProperties type from mui-styled-engine (showing there is MUI-internal CSSProperties, but not necessarily the @mui/material/styles public export being asked about) [3]. So the answer to “What package exports CSSProperties—React CSSProperties or MUI?” is: use React.CSSProperties for the standard CSSProperties type; in v7.3.9 @mui/material/styles does not export CSSProperties as a named type [1][2], while MUI’s own packages export their own CSS-related types (e.g., mui-styled-engine) [3].
Citations:
- 1: [MUI v7] CSSProperties not exported from @mui/material/styles mui/material-ui#45703
- 2: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts
- 3: https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine/src/index.d.ts
Fix CSSProperties import source in styles.ts
src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts imports CSSProperties from @mui/material, but MUI v7 doesn’t export a public CSSProperties type there—use React’s CSSProperties instead.
Proposed fix
-import type { Theme, SxProps } from '`@mui/material`'
-import type { CSSProperties } from '`@mui/material`'
+import type { Theme, SxProps } from '`@mui/material`'
+import type { CSSProperties } from 'react'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import type { Theme, SxProps } from '@mui/material' | |
| import type { CSSProperties } from '@mui/material' | |
| import type { Theme, SxProps } from '`@mui/material`' | |
| import type { CSSProperties } from 'react' |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts` around lines 1 - 2,
The import for CSSProperties is coming from the wrong package; update the import
so CSSProperties is imported from 'react' instead of '`@mui/material`'. In
styles.ts replace the existing imports so Theme and SxProps remain imported from
'`@mui/material`' and CSSProperties is imported from 'react' (locate the import
statement that currently references CSSProperties and change its source). Ensure
any references to CSSProperties in this file continue to use the React type.
Collaborator
Author
|
היי.עשיתי את התקונים של הקומפוננטה שמציגה מתכונים.מצרפת קישור https://github.com/ColmanDevClubORG/Sagol360Management/pull/68/changes |
Tamir198
requested changes
Jun 2, 2026
| } | ||
|
|
||
| export {} | ||
| export const theme = createTheme({ |
Member
There was a problem hiding this comment.
WE have a theme file why do you need to have this here?
Collaborator
There was a problem hiding this comment.
| @@ -1,3 +1,24 @@ | |||
| import { createTheme } from '@mui/material/styles' | |||
Member
There was a problem hiding this comment.
Try to merge the latest main branch because those changes are not related to this pr
Collaborator
There was a problem hiding this comment.
| onClick={() => setOpenDialog(false)} | ||
| fullWidth | ||
| variant="contained" | ||
| styles={{ |
| <div style={styles.container}> | ||
| <div style={styles.heroImage(imageUrl)}> | ||
| <div style={styles.iconContainer}> | ||
| <SGLLink size={20} color={theme.palette.midGrey.main} strokeWidth={2.5} /> |
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts (1)
1-2:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix
CSSPropertiesimport source.This issue was already flagged in a previous review:
CSSPropertiesshould be imported from'react', not'@mui/material', as MUI v7 does not export this type.🛠️ Proposed fix
import type { Theme, SxProps } from '`@mui/material`' -import type { CSSProperties } from '`@mui/material`' +import type { CSSProperties } from 'react'🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts` around lines 1 - 2, The import of CSSProperties is from the wrong package; update the import so CSSProperties is imported from 'react' instead of '`@mui/material`' — in src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts adjust the top-level imports so Theme and SxProps remain from '`@mui/material`' and CSSProperties is imported via "import type { CSSProperties } from 'react'" (remove CSSProperties from the '`@mui/material`' import).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts`:
- Around line 1-2: The import of CSSProperties is from the wrong package; update
the import so CSSProperties is imported from 'react' instead of '`@mui/material`'
— in src/pages/lifeStyle/dietTab/mealRecommendation/styles.ts adjust the
top-level imports so Theme and SxProps remain from '`@mui/material`' and
CSSProperties is imported via "import type { CSSProperties } from 'react'"
(remove CSSProperties from the '`@mui/material`' import).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: cb5191a3-e4ee-40fc-ac68-278c1c457268
📒 Files selected for processing (11)
pnpm-workspace.yamlsrc/locales/ar/translation.jsonsrc/locales/en/translation.jsonsrc/locales/he/translation.jsonsrc/locales/ru/translation.jsonsrc/pages/lifeStyle/LifeStyle.tsxsrc/pages/lifeStyle/dietTab/DietTabExample.tsxsrc/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsxsrc/pages/lifeStyle/dietTab/mealRecommendation/styles.tssrc/theme.d.tssrc/theme.ts
✅ Files skipped from review due to trivial changes (2)
- pnpm-workspace.yaml
- src/locales/he/translation.json
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/lifeStyle/dietTab/DietTabExample.tsx
- src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx
- src/theme.d.ts
Collaborator
Author
|
היי.תיקנתי לפי הערות |
Collaborator
Author
|
תוקנו הקונפליקטים |
GilHeller
requested changes
Jun 12, 2026
| import { Box, useTheme } from '@mui/material' | ||
| import { getDividerStyles } from './styles' | ||
|
|
||
| interface SGLDividerProps { |
Collaborator
There was a problem hiding this comment.
@tg14102005-a11y please address this comment from @Tamir198
https://github.com/ColmanDevClubORG/Sagol360Management/pull/68/changes#r3215472919
| @@ -1,3 +1,24 @@ | |||
| import { createTheme } from '@mui/material/styles' | |||
Collaborator
There was a problem hiding this comment.
| } | ||
|
|
||
| export {} | ||
| export const theme = createTheme({ |
Collaborator
There was a problem hiding this comment.
Comment on lines
+32
to
+55
| <SGLCard variant="white"> | ||
| <div style={styles.container}> | ||
| <div style={styles.heroImage(imageUrl)}> | ||
| <div style={styles.iconContainer}> | ||
| <SGLLink {...styles.linkIcon} /> | ||
| </div> | ||
| </div> | ||
| <div style={styles.content}> | ||
| <Typography variant={variantMap.smallTitle}>{name}</Typography> | ||
| <Typography variant={variantMap.smallText}>{recipe}</Typography> | ||
| </div> | ||
| <div style={styles.buttonWrapper}> | ||
| <SGLButton | ||
| onClick={() => setOpenDialog(true)} | ||
| variant="outlined" | ||
| sx={styles.mealButton(theme)} | ||
| > | ||
| <SGLTypography variant="smallTitle"> | ||
| {t('mealRecommendation.viewFullRecipe')} | ||
| </SGLTypography> | ||
| </SGLButton> | ||
| </div> | ||
| </div> | ||
| </SGLCard> |
Collaborator
There was a problem hiding this comment.
Consider to extract this component to a new file.
Comment on lines
+57
to
+72
| <Dialog open={openDialog} onClose={() => setOpenDialog(false)} fullWidth> | ||
| <DialogTitle sx={styles.dialogTitle}>{name}</DialogTitle> | ||
| <DialogContent> | ||
| <Typography variant={variantMap.mediumText}>{fullRecipe || recipe}</Typography> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <SGLButton | ||
| onClick={() => setOpenDialog(false)} | ||
| fullWidth | ||
| variant="contained" | ||
| sx={styles.closeButton} | ||
| > | ||
| {t('mealRecommendation.close')} | ||
| </SGLButton> | ||
| </DialogActions> | ||
| </Dialog> |
Collaborator
There was a problem hiding this comment.
Consider to extract this component to a new file.
Collaborator
There was a problem hiding this comment.
Why does the divider here?
Collaborator
Author
|
Fixed based on feedback |
Collaborator
Author
|
GilHeller
approved these changes
Jun 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Please include a summary of the changes and the related issue.
I have created a new component that provides daily meal recommendations, including detailed recipe information and preparation steps.
Related Issue(s)
Fixes # (issue number)
Checklist:
Screenshots (if appropriate):
Summary by CodeRabbit
New Features
Localization