za-ek/marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma corrections

Browse Source
This commit is contained in:
Zakhar 2026-08-31 11:55:33 +03:00
parent db7a8e9140
commit 099755d516
11 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -166,7 +166,7 @@ export function App() {
icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 13.23C17 13.23 16.09 12.77 15.182 12.77C13.818 12.77 12 14.615 12 17.385C12 20.154 14.49 22 17 22C19.51 22 22 20.154 22 17.385C22 14.616 20.182 12.769 18.818 12.769C17.909 12.769 17 13.231 17 13.231C17 11.847 17.91 10.001 19.727 10.001M10.655 5C11.551 5 12.278 4.328 12.278 3.5C12.278 2.672 11.55 2 10.655 2H5.245C4.349 2 3.623 2.672 3.623 3.5C3.623 4.328 4.349 5 5.246 5M11.169 4.923C12.125 6.689 12.909 8.283 13.389 10C13.4283 10.14 13.4653 10.281 13.5 10.423M10.428 22H6.328C2.747 22 2 21.31 2 18V13.777C2 10.377 3.098 7.886 4.705 4.915" stroke="#859D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 13.23C17 13.23 16.09 12.77 15.182 12.77C13.818 12.77 12 14.615 12 17.385C12 20.154 14.49 22 17 22C19.51 22 22 20.154 22 17.385C22 14.616 20.182 12.769 18.818 12.769C17.909 12.769 17 13.231 17 13.231C17 11.847 17.91 10.001 19.727 10.001M10.655 5C11.551 5 12.278 4.328 12.278 3.5C12.278 2.672 11.55 2 10.655 2H5.245C4.349 2 3.623 2.672 3.623 3.5C3.623 4.328 4.349 5 5.246 5M11.169 4.923C12.125 6.689 12.909 8.283 13.389 10C13.4283 10.14 13.4653 10.281 13.5 10.423M10.428 22H6.328C2.747 22 2 21.31 2 18V13.777C2 10.377 3.098 7.886 4.705 4.915" stroke="#859D96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>} </svg>}
description={'Чем меньше значение, тем меньше продуктов и калорий в корзине'} description={openSection === 'fullness' ? 'Чем меньше значение, тем меньше продуктов и калорий в корзине' : ''}
isHighlighted={isFullnessHighlighted} isHighlighted={isFullnessHighlighted}
isOpen={openSection === 'fullness'} isOpen={openSection === 'fullness'}
onToggle={() => { onToggle={() => {
@ -315,7 +315,7 @@ const FilterTitle = styled.div`
const SettingsPanel = styled.div` const SettingsPanel = styled.div`
border: 1px solid ${({ theme }) => theme.colors.border}; border: 1px solid ${({ theme }) => theme.colors.border};
border-radius: 16px; border-radius: 12px;
`; `;
const Alert = styled.div` const Alert = styled.div`

2
src/components/Accordion/Accordion.tsx
View File

@ -110,7 +110,7 @@ const HeaderTitle = styled.div`
`; `;
const Description = styled.div` const Description = styled.div`
font-size: 14px; font-size: 16px;
color: ${({ theme }) => theme.colors.gray}; color: ${({ theme }) => theme.colors.gray};
margin-top: 2px; margin-top: 2px;
`; `;

12
src/components/Cart/Cart.tsx
View File

@ -95,7 +95,7 @@ export function Cart({
<b>&bull;</b> <b>&bull;</b>
<span>{formattedTotalPrice}</span> <span>{formattedTotalPrice}</span>
<SummaryExcess> <SummaryExcess>
С запасами на {stockDays} {declension(stockDays, ['день', 'дня', 'дней'])} с запасами на {stockDays} {declension(stockDays, ['день', 'дня', 'дней'])}
</SummaryExcess> </SummaryExcess>
</> </>
)} )}
@ -129,8 +129,8 @@ export function Cart({
{remaining > 0 && ( {remaining > 0 && (
<ShowMore type="button" onClick={() => setVisibleCount(products.length)}> <ShowMore type="button" onClick={() => setVisibleCount(products.length)}>
Показать ещё <span>{remaining}</span> товаров Показать ещё <span>{remaining}</span> товаров
<svg viewBox="0 0 24 24" fill="none"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="6 9 12 15 18 9" /> <path d="M19 9L12 16L5 9" stroke="#5EA12D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</ShowMore> </ShowMore>
)} )}
@ -224,7 +224,6 @@ const SummaryDetails = styled.div<{ $hidden: boolean }>`
font-family: initial; font-family: initial;
font-size: 20px; font-size: 20px;
line-height: 8px; line-height: 8px;
margin-bottom: -2px;
} }
`; `;
@ -325,11 +324,12 @@ const ShowMore = styled.button`
} }
svg { svg {
width: 14px; width: 24px;
height: 14px; height: 24px;
stroke: ${({ theme }) => theme.colors.green}; stroke: ${({ theme }) => theme.colors.green};
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
margin-left: 6px;
} }
`; `;

4
src/components/Cart/CartItem.tsx
View File

@ -71,7 +71,7 @@ const Item = styled.li<{ $processing: boolean }>`
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #E7EDE7;
position: relative; position: relative;
transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s;
opacity: ${({$processing}) => ($processing ? 0.5 : 1)}; opacity: ${({$processing}) => ($processing ? 0.5 : 1)};
@ -127,7 +127,7 @@ const MenuWrapper = styled.div`
const MenuButton = styled.button` const MenuButton = styled.button`
background: none; background: none;
border: none; border: none;
color: #b0b0b0; color: #CEDFD0;
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
font-size: 20px; font-size: 20px;

11
src/components/Cart/OrderPopup.tsx
View File

@ -69,6 +69,7 @@ const ModalContent = styled.div`
padding: 20px; padding: 20px;
color: #0C3B2E; color: #0C3B2E;
max-width: 335px; max-width: 335px;
box-sizing: content-box;
`; `;
const ButtonBlock = styled.div` const ButtonBlock = styled.div`
margin-top: 24px; margin-top: 24px;
@ -89,6 +90,16 @@ const Button = styled.div`
line-height: 16px; line-height: 16px;
cursor: pointer; cursor: pointer;
&:hover {
background-color: #F7FBF6;
}
&:active,
&:focus {
background-color: #EEF8EB;
outline: none;
}
`; `;
const ActiveButton = styled(Button)` const ActiveButton = styled(Button)`
background-color: #5EA12D; background-color: #5EA12D;

2
src/components/Cart/ProductModal.tsx
View File

@ -79,7 +79,7 @@ const CloseButton = styled.button`
right: 15px; right: 15px;
background: none; background: none;
border: none; border: none;
color: #b3b3b3; color: #CEDFD0;
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;

4
src/components/Family/FamilySection.tsx
View File

@ -178,7 +178,7 @@ const Name = styled.div`
`; `;
const Age = styled.div` const Age = styled.div`
font-size: 14px; font-size: 16px;
font-weight: 350; font-weight: 350;
color: ${({ theme }) => theme.colors.gray}; color: ${({ theme }) => theme.colors.gray};
`; `;
@ -211,7 +211,7 @@ const AddButton = styled.button`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 16px; margin-top: 14px;
color: ${({ theme }) => theme.colors.green}; color: ${({ theme }) => theme.colors.green};
font-size: 15px; font-size: 15px;
font-weight: 350; font-weight: 350;

31
src/components/Family/PersonModal.tsx
View File

@ -249,7 +249,7 @@ const Overlay = styled.div`
const Content = styled.div` const Content = styled.div`
background: #ffffff; background: #ffffff;
border-radius: 24px; border-radius: 12px;
width: 100%; width: 100%;
max-width: 440px; max-width: 440px;
padding: 24px; padding: 24px;
@ -273,7 +273,7 @@ const Header = styled.div`
const CloseButton = styled.button` const CloseButton = styled.button`
font-size: 24px; font-size: 24px;
color: #b0b0b0; color: #CEDFD0;
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
background: transparent; background: transparent;
@ -290,9 +290,9 @@ const FormGroup = styled.div`
label { label {
display: block; display: block;
font-size: 14px; font-size: 16px;
color: ${({theme}) => theme.colors.darkGreen}; color: ${({theme}) => theme.colors.darkGreen};
margin-bottom: 6px; margin-bottom: 8px;
} }
input { input {
@ -304,6 +304,9 @@ const FormGroup = styled.div`
outline: none; outline: none;
transition: 0.2s; transition: 0.2s;
&::placeholder {
color: #A3ADA2;
}
&:focus { &:focus {
border-color: ${({theme}) => theme.colors.green}; border-color: ${({theme}) => theme.colors.green};
} }
@ -340,13 +343,19 @@ const GenderToggles = styled.div`
const GenderButton = styled.button<{ $active: boolean }>` const GenderButton = styled.button<{ $active: boolean }>`
flex: 1; flex: 1;
padding: 10px; padding: 10px;
border: 1px solid ${({$active}) => ($active ? '#e9f6d9' : '#e1e1e1')}; border: 1px solid ${({$active}) => ($active ? '#5EA12D' : '#E7EDE7')};
border-radius: 8px; border-radius: 8px;
background: ${({$active}) => ($active ? '#e9f6d9' : '#ffffff')}; background: ${({$active}) => ($active ? '#E6F696' : '#ffffff')};
font-size: 14px; outline: ${({$active}) => ($active ? '1px solid #5EA12D' : '1px solid transparent')};
font-size: 16px;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.1s;
font-weight: ${({$active}) => ($active ? 500 : 400)}; font-weight: 370;
&:hover {
outline: 1px solid #5EA12D;
border: 1px solid #5EA12D;
}
`; `;
const PrefsGrid = styled.div` const PrefsGrid = styled.div`
@ -367,10 +376,12 @@ const SaveButton = styled.button`
padding: 12px; padding: 12px;
background: ${({theme}) => theme.colors.green}; background: ${({theme}) => theme.colors.green};
color: #fff; color: #fff;
height: 54px;
box-sizing: border-box;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 370;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;

11
src/components/Family/TagsInput.tsx
View File

@ -51,7 +51,7 @@ export function TagsInput({
<Input <Input
type="text" type="text"
placeholder={type === 'avoid' ? 'Например: лук' : ''} placeholder={type === 'avoid' ? 'Например: лук' : 'Например: яблоко'}
value={query} value={query}
onChange={event => setQuery(event.target.value)} onChange={event => setQuery(event.target.value)}
/> />
@ -133,10 +133,10 @@ const Column = styled.div`
const Title = styled.span` const Title = styled.span`
display: block; display: block;
font-size: 14px; font-size: 16px;
font-weight: 600; font-weight: 370;
color: ${({ theme }) => theme.colors.darkGreen}; color: ${({ theme }) => theme.colors.darkGreen};
margin-bottom: 6px; margin-bottom: 8px;
`; `;
const Input = styled.input` const Input = styled.input`
@ -148,6 +148,9 @@ const Input = styled.input`
outline: none; outline: none;
margin-bottom: 6px; margin-bottom: 6px;
&::placeholder {
color:#A3ADA2;
}
&:focus { &:focus {
border-color: ${({ theme }) => theme.colors.green}; border-color: ${({ theme }) => theme.colors.green};
} }

2
src/components/components/TextInput.tsx
View File

@ -80,7 +80,7 @@ const Input = styled.input<{ $state: InputState }>`
color: #333; color: #333;
&::placeholder { &::placeholder {
color: #999; color: #A3ADA2;
} }
${({ $state }) => $state === 'disabled' && css` ${({ $state }) => $state === 'disabled' && css`

2
src/styles/theme.ts
View File

@ -11,7 +11,7 @@ export const theme = {
pageBg: '#FF7D89', pageBg: '#FF7D89',
}, },
radius: { radius: {
page: '24px', page: '20px',
card: '16px', card: '16px',
button: '12px', button: '12px',
small: '8px', small: '8px',