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',