From 099755d51624b91aef516188e6824f0999923bc9 Mon Sep 17 00:00:00 2001 From: Zakhar Date: Mon, 31 Aug 2026 11:55:33 +0300 Subject: [PATCH] figma corrections --- src/App.tsx | 4 ++-- src/components/Accordion/Accordion.tsx | 2 +- src/components/Cart/Cart.tsx | 12 +++++----- src/components/Cart/CartItem.tsx | 4 ++-- src/components/Cart/OrderPopup.tsx | 11 +++++++++ src/components/Cart/ProductModal.tsx | 2 +- src/components/Family/FamilySection.tsx | 4 ++-- src/components/Family/PersonModal.tsx | 31 +++++++++++++++++-------- src/components/Family/TagsInput.tsx | 11 +++++---- src/components/components/TextInput.tsx | 2 +- src/styles/theme.ts | 2 +- 11 files changed, 55 insertions(+), 30 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8172f1b..a3effc1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -166,7 +166,7 @@ export function App() { icon={ } - description={'Чем меньше значение, тем меньше продуктов и калорий в корзине'} + description={openSection === 'fullness' ? 'Чем меньше значение, тем меньше продуктов и калорий в корзине' : ''} isHighlighted={isFullnessHighlighted} isOpen={openSection === 'fullness'} onToggle={() => { @@ -315,7 +315,7 @@ const FilterTitle = styled.div` const SettingsPanel = styled.div` border: 1px solid ${({ theme }) => theme.colors.border}; - border-radius: 16px; + border-radius: 12px; `; const Alert = styled.div` diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 7a3a0b4..25b05c2 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -110,7 +110,7 @@ const HeaderTitle = styled.div` `; const Description = styled.div` - font-size: 14px; + font-size: 16px; color: ${({ theme }) => theme.colors.gray}; margin-top: 2px; `; diff --git a/src/components/Cart/Cart.tsx b/src/components/Cart/Cart.tsx index e855029..1c3fb14 100644 --- a/src/components/Cart/Cart.tsx +++ b/src/components/Cart/Cart.tsx @@ -95,7 +95,7 @@ export function Cart({ • {formattedTotalPrice} - С запасами на {stockDays} {declension(stockDays, ['день', 'дня', 'дней'])} + с запасами на {stockDays} {declension(stockDays, ['день', 'дня', 'дней'])} )} @@ -129,8 +129,8 @@ export function Cart({ {remaining > 0 && ( setVisibleCount(products.length)}> Показать ещё {remaining} товаров - - + + )} @@ -224,7 +224,6 @@ const SummaryDetails = styled.div<{ $hidden: boolean }>` font-family: initial; font-size: 20px; line-height: 8px; - margin-bottom: -2px; } `; @@ -325,11 +324,12 @@ const ShowMore = styled.button` } svg { - width: 14px; - height: 14px; + width: 24px; + height: 24px; stroke: ${({ theme }) => theme.colors.green}; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; + margin-left: 6px; } `; \ No newline at end of file diff --git a/src/components/Cart/CartItem.tsx b/src/components/Cart/CartItem.tsx index 230759f..8ddb4da 100644 --- a/src/components/Cart/CartItem.tsx +++ b/src/components/Cart/CartItem.tsx @@ -71,7 +71,7 @@ const Item = styled.li<{ $processing: boolean }>` flex-direction: row; align-items: stretch; padding: 16px 0; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid #E7EDE7; position: relative; transition: opacity 0.4s, transform 0.4s; opacity: ${({$processing}) => ($processing ? 0.5 : 1)}; @@ -127,7 +127,7 @@ const MenuWrapper = styled.div` const MenuButton = styled.button` background: none; border: none; - color: #b0b0b0; + color: #CEDFD0; cursor: pointer; padding: 4px 8px; font-size: 20px; diff --git a/src/components/Cart/OrderPopup.tsx b/src/components/Cart/OrderPopup.tsx index f7ba941..cf5ba2b 100644 --- a/src/components/Cart/OrderPopup.tsx +++ b/src/components/Cart/OrderPopup.tsx @@ -69,6 +69,7 @@ const ModalContent = styled.div` padding: 20px; color: #0C3B2E; max-width: 335px; + box-sizing: content-box; `; const ButtonBlock = styled.div` margin-top: 24px; @@ -89,6 +90,16 @@ const Button = styled.div` line-height: 16px; cursor: pointer; + &:hover { + background-color: #F7FBF6; + } + + &:active, + &:focus { + background-color: #EEF8EB; + outline: none; + } + `; const ActiveButton = styled(Button)` background-color: #5EA12D; diff --git a/src/components/Cart/ProductModal.tsx b/src/components/Cart/ProductModal.tsx index 96dce47..360ae19 100644 --- a/src/components/Cart/ProductModal.tsx +++ b/src/components/Cart/ProductModal.tsx @@ -79,7 +79,7 @@ const CloseButton = styled.button` right: 15px; background: none; border: none; - color: #b3b3b3; + color: #CEDFD0; font-size: 24px; line-height: 1; cursor: pointer; diff --git a/src/components/Family/FamilySection.tsx b/src/components/Family/FamilySection.tsx index 3252e90..cdd684c 100644 --- a/src/components/Family/FamilySection.tsx +++ b/src/components/Family/FamilySection.tsx @@ -178,7 +178,7 @@ const Name = styled.div` `; const Age = styled.div` - font-size: 14px; + font-size: 16px; font-weight: 350; color: ${({ theme }) => theme.colors.gray}; `; @@ -211,7 +211,7 @@ const AddButton = styled.button` display: flex; align-items: center; justify-content: center; - margin-top: 16px; + margin-top: 14px; color: ${({ theme }) => theme.colors.green}; font-size: 15px; font-weight: 350; diff --git a/src/components/Family/PersonModal.tsx b/src/components/Family/PersonModal.tsx index f10dc67..c00798d 100644 --- a/src/components/Family/PersonModal.tsx +++ b/src/components/Family/PersonModal.tsx @@ -249,7 +249,7 @@ const Overlay = styled.div` const Content = styled.div` background: #ffffff; - border-radius: 24px; + border-radius: 12px; width: 100%; max-width: 440px; padding: 24px; @@ -273,7 +273,7 @@ const Header = styled.div` const CloseButton = styled.button` font-size: 24px; - color: #b0b0b0; + color: #CEDFD0; cursor: pointer; line-height: 1; background: transparent; @@ -290,9 +290,9 @@ const FormGroup = styled.div` label { display: block; - font-size: 14px; + font-size: 16px; color: ${({theme}) => theme.colors.darkGreen}; - margin-bottom: 6px; + margin-bottom: 8px; } input { @@ -304,6 +304,9 @@ const FormGroup = styled.div` outline: none; transition: 0.2s; + &::placeholder { + color: #A3ADA2; + } &:focus { border-color: ${({theme}) => theme.colors.green}; } @@ -340,13 +343,19 @@ const GenderToggles = styled.div` const GenderButton = styled.button<{ $active: boolean }>` flex: 1; padding: 10px; - border: 1px solid ${({$active}) => ($active ? '#e9f6d9' : '#e1e1e1')}; + border: 1px solid ${({$active}) => ($active ? '#5EA12D' : '#E7EDE7')}; border-radius: 8px; - background: ${({$active}) => ($active ? '#e9f6d9' : '#ffffff')}; - font-size: 14px; + background: ${({$active}) => ($active ? '#E6F696' : '#ffffff')}; + outline: ${({$active}) => ($active ? '1px solid #5EA12D' : '1px solid transparent')}; + font-size: 16px; cursor: pointer; - transition: 0.2s; - font-weight: ${({$active}) => ($active ? 500 : 400)}; + transition: 0.1s; + font-weight: 370; + + &:hover { + outline: 1px solid #5EA12D; + border: 1px solid #5EA12D; + } `; const PrefsGrid = styled.div` @@ -367,10 +376,12 @@ const SaveButton = styled.button` padding: 12px; background: ${({theme}) => theme.colors.green}; color: #fff; + height: 54px; + box-sizing: border-box; border: none; border-radius: 12px; font-size: 16px; - font-weight: 600; + font-weight: 370; cursor: pointer; transition: 0.2s; diff --git a/src/components/Family/TagsInput.tsx b/src/components/Family/TagsInput.tsx index c056f5d..cc9f506 100644 --- a/src/components/Family/TagsInput.tsx +++ b/src/components/Family/TagsInput.tsx @@ -51,7 +51,7 @@ export function TagsInput({ setQuery(event.target.value)} /> @@ -133,10 +133,10 @@ const Column = styled.div` const Title = styled.span` display: block; - font-size: 14px; - font-weight: 600; + font-size: 16px; + font-weight: 370; color: ${({ theme }) => theme.colors.darkGreen}; - margin-bottom: 6px; + margin-bottom: 8px; `; const Input = styled.input` @@ -148,6 +148,9 @@ const Input = styled.input` outline: none; margin-bottom: 6px; + &::placeholder { + color:#A3ADA2; + } &:focus { border-color: ${({ theme }) => theme.colors.green}; } diff --git a/src/components/components/TextInput.tsx b/src/components/components/TextInput.tsx index 2d463f0..4d91bb5 100644 --- a/src/components/components/TextInput.tsx +++ b/src/components/components/TextInput.tsx @@ -80,7 +80,7 @@ const Input = styled.input<{ $state: InputState }>` color: #333; &::placeholder { - color: #999; + color: #A3ADA2; } ${({ $state }) => $state === 'disabled' && css` diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 66c01b3..6f4cc8a 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -11,7 +11,7 @@ export const theme = { pageBg: '#FF7D89', }, radius: { - page: '24px', + page: '20px', card: '16px', button: '12px', small: '8px',