From 244aed205b20b7be97a8fd8cf20e4a2799c23f72 Mon Sep 17 00:00:00 2001 From: maxnes3 Date: Wed, 6 Nov 2024 11:49:14 +0400 Subject: [PATCH] start normal disign --- src/pages/home/home.page.tsx | 2 +- src/pages/home/styles.module.scss | 27 +++++++++++- src/shared/assets/styles/_adaptive.scss | 12 +++--- src/shared/assets/styles/_colors.scss | 2 +- src/shared/assets/styles/_theme.scss | 17 ++++++++ .../components/button/button.component.tsx | 8 ++-- .../components/button/styles.module.scss | 11 ++--- .../components/devider/devider.component.tsx | 8 ++++ src/shared/components/devider/index.ts | 1 + .../components/devider/styles.module.scss | 6 +++ .../expander/expander.component.tsx | 34 +++++++++++++++ src/shared/components/expander/index.ts | 1 + .../components/expander/styles.module.scss | 41 +++++++++++++++++++ .../selector/selector.component.tsx | 28 ++++++------- .../components/selector/styles.module.scss | 33 +++++++++------ src/shared/types/predict.ts | 2 +- src/widgets/form/form.widget.tsx | 23 +++++------ src/widgets/form/styles.module.scss | 8 ++-- src/widgets/navbar/navbar.widget.tsx | 4 +- src/widgets/navbar/styles.module.scss | 29 ++++++++++--- 20 files changed, 225 insertions(+), 72 deletions(-) create mode 100644 src/shared/assets/styles/_theme.scss create mode 100644 src/shared/components/devider/devider.component.tsx create mode 100644 src/shared/components/devider/index.ts create mode 100644 src/shared/components/devider/styles.module.scss create mode 100644 src/shared/components/expander/expander.component.tsx create mode 100644 src/shared/components/expander/index.ts create mode 100644 src/shared/components/expander/styles.module.scss diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx index 1c68fa0..f2e79ac 100644 --- a/src/pages/home/home.page.tsx +++ b/src/pages/home/home.page.tsx @@ -5,7 +5,7 @@ import Laptop from '@shared/assets/icons/laptop.svg'; const HomePage = () => { return (
- +
diff --git a/src/pages/home/styles.module.scss b/src/pages/home/styles.module.scss index dad5215..065ade8 100644 --- a/src/pages/home/styles.module.scss +++ b/src/pages/home/styles.module.scss @@ -1,13 +1,36 @@ @use '../../shared/assets/styles/adaptive' as adaptive; +$adaptive: ( + desktop: ( + flex-direction: row, + size: 250px, + container-width: 768px + ), + table: ( + flex-direction: row, + size: 250px, + container-width: 425px + ), + mobile: ( + flex-direction: column, + size: auto, + container-width: auto + ), +); + .home { display: flex; - flex-direction: column; justify-content: center; width: 100%; + @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction); + + .laptop { + @include adaptive.set-adaptive($adaptive, width, size); + @include adaptive.set-adaptive($adaptive, height, size); + } .container { padding: 15px; - @include adaptive.container; + @include adaptive.set-adaptive($adaptive, width, container-width); } } \ No newline at end of file diff --git a/src/shared/assets/styles/_adaptive.scss b/src/shared/assets/styles/_adaptive.scss index 0858255..efe8f7a 100644 --- a/src/shared/assets/styles/_adaptive.scss +++ b/src/shared/assets/styles/_adaptive.scss @@ -1,14 +1,14 @@ $breakpoints: ( desktop: ( - max: 1440px, - min: 1024.1px + max: 2560px, + min: 1024px ), table: ( - max: 1024px, - min: 768.1px + max: 1023.99px, + min: 768px ), mobile: ( - max: 768px, + max: 767.99px, min: 375px ), ); @@ -26,7 +26,7 @@ $breakpoints: ( @each $breakpoint, $settings in $adaptive { @include breakpoint($breakpoint) { @if $property and $attribute { - #{$property}: map-get($settings, $attribute); + #{$property}: map-get($settings, $attribute); } } } diff --git a/src/shared/assets/styles/_colors.scss b/src/shared/assets/styles/_colors.scss index b7575fe..99571e3 100644 --- a/src/shared/assets/styles/_colors.scss +++ b/src/shared/assets/styles/_colors.scss @@ -1,7 +1,7 @@ :root { --primary-black: #040404; - --transparent-black: rgba(0, 0, 0, 0.8); --primary-white: #ffffff; --secondary-gray: #D9D9D9; --active-color: #007AFF; + --transparent-black: rgba(0, 0, 0, 0.8); } \ No newline at end of file diff --git a/src/shared/assets/styles/_theme.scss b/src/shared/assets/styles/_theme.scss new file mode 100644 index 0000000..990e194 --- /dev/null +++ b/src/shared/assets/styles/_theme.scss @@ -0,0 +1,17 @@ +@mixin shadows () { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), + 0 1px 3px rgba(0, 0, 0, 0.08); +} + +@mixin hoverElement { + background-color: var(--active-color); + color: var(--primary-white); +} + +@mixin hoverBorder { + border: 2px solid var(--active-color); +} + +@mixin hoverLink { + color: var(--active-color); +} \ No newline at end of file diff --git a/src/shared/components/button/button.component.tsx b/src/shared/components/button/button.component.tsx index 202f5b7..5ee6297 100644 --- a/src/shared/components/button/button.component.tsx +++ b/src/shared/components/button/button.component.tsx @@ -1,15 +1,15 @@ -import React, { FormEvent } from 'react'; +import React, { FormEvent, ReactNode } from 'react'; import classes from './styles.module.scss'; type ButtonProps = { - label: string; + children: ReactNode; onClick: (e: FormEvent) => Promise; }; -const Button: React.FC = ({ label, onClick }) => { +const Button: React.FC = ({ children, onClick }) => { return ( ); }; diff --git a/src/shared/components/button/styles.module.scss b/src/shared/components/button/styles.module.scss index f07ca25..c3ae9d9 100644 --- a/src/shared/components/button/styles.module.scss +++ b/src/shared/components/button/styles.module.scss @@ -1,18 +1,19 @@ @use '../../assets/styles/fonts' as fonts; +@use '../../assets/styles/theme' as theme; .button { background-color: var(--primary-white); - border: 2px solid var(--secondary-gray); // белая обводка - border-radius: 8px; // закруглённые углы + border: none; // белая обводка + border-radius: 2px 2px 16px 16px; // закруглённые углы color: var(--primary-black); // белый текст padding: 10px 20px; // внутренних отступов cursor: pointer; // курсор при наведении - transition: 0.3s ease; // плавный переход фона + transition: 0.3s ease; @include fonts.urbanist-font(20px, 600); + @include theme.shadows(); &:hover { - background-color: var(--active-color); - color: var(--primary-white); // белый текст + @include theme.hoverElement(); } &:focus { diff --git a/src/shared/components/devider/devider.component.tsx b/src/shared/components/devider/devider.component.tsx new file mode 100644 index 0000000..83a65c3 --- /dev/null +++ b/src/shared/components/devider/devider.component.tsx @@ -0,0 +1,8 @@ +import { FC } from 'react'; +import classes from './styles.module.scss'; + +const Devider: FC = () => { + return
; +}; + +export default Devider; diff --git a/src/shared/components/devider/index.ts b/src/shared/components/devider/index.ts new file mode 100644 index 0000000..4f0afb0 --- /dev/null +++ b/src/shared/components/devider/index.ts @@ -0,0 +1 @@ +export { default as Devider } from './devider.component'; diff --git a/src/shared/components/devider/styles.module.scss b/src/shared/components/devider/styles.module.scss new file mode 100644 index 0000000..ef03cd4 --- /dev/null +++ b/src/shared/components/devider/styles.module.scss @@ -0,0 +1,6 @@ +.devider { + background-color: var(--secondary-gray); + width: 100%; + height: 2px; + border-radius: 50%; +} \ No newline at end of file diff --git a/src/shared/components/expander/expander.component.tsx b/src/shared/components/expander/expander.component.tsx new file mode 100644 index 0000000..45b01cc --- /dev/null +++ b/src/shared/components/expander/expander.component.tsx @@ -0,0 +1,34 @@ +import { FC, ReactNode, useState } from 'react'; +import classes from './styles.module.scss'; +import { Devider } from '@shared/components/devider'; + +type ExpanderProps = { + title: string; + children: ReactNode; +}; + +const Expander: FC = ({ title, children }) => { + const [expanded, setExpanded] = useState(false); + const handleHeaderClick = () => { + setExpanded((expanded) => !expanded); + }; + + return ( +
+
+
{title}
+ {expanded ? '▼' : '❮'} +
+
+ + {children} +
+
+ ); +}; + +export default Expander; diff --git a/src/shared/components/expander/index.ts b/src/shared/components/expander/index.ts new file mode 100644 index 0000000..73818b5 --- /dev/null +++ b/src/shared/components/expander/index.ts @@ -0,0 +1 @@ +export { default as Expander } from './expander.component'; diff --git a/src/shared/components/expander/styles.module.scss b/src/shared/components/expander/styles.module.scss new file mode 100644 index 0000000..f31feb7 --- /dev/null +++ b/src/shared/components/expander/styles.module.scss @@ -0,0 +1,41 @@ +@use '../../assets/styles/fonts' as fonts; +@use '../../assets/styles/theme' as theme; + +.expander { + display: flex; + flex-direction: column; + gap: 8px; + background-color: var(--primary-white); + border: 2px solid var(--primary-white); + border-radius: 16px; + padding: 16px; + transition: 0.3s ease; + @include theme.shadows(); + + &:hover { @include theme.hoverBorder(); } + + .header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .title { + @include fonts.urbanist-font(26px, 600); + } + } + + .contentExpanded { + display: flex; + flex-direction: column; + gap: 16px; + filter: opacity(1); + height: auto; + } + + .contentCollapsed { + display: none; + filter: opacity(0); + height: 0; + } +} \ No newline at end of file diff --git a/src/shared/components/selector/selector.component.tsx b/src/shared/components/selector/selector.component.tsx index 4d52bc3..3af5a0b 100644 --- a/src/shared/components/selector/selector.component.tsx +++ b/src/shared/components/selector/selector.component.tsx @@ -17,22 +17,20 @@ const Selector: FC = ({ field, handleSetValue, list }) => { }; return ( -
- + + {list.map((item, index) => ( + - {list.map((item, index) => ( - - ))} - -
+ ))} + ); }; diff --git a/src/shared/components/selector/styles.module.scss b/src/shared/components/selector/styles.module.scss index 4f33558..65702c8 100644 --- a/src/shared/components/selector/styles.module.scss +++ b/src/shared/components/selector/styles.module.scss @@ -1,15 +1,22 @@ +@use '../../assets/styles/fonts' as fonts; +@use '../../assets/styles/theme' as theme; + .selector { - background-color: rgba(255, 255, 255, 0.2); // прозрачный белый - border: 2px solid var(--primary-white); // белая рамка - border-radius: 8px; // закруглённые углы - color: var(--primary-white); // белый текст - padding: 8px; - font-size: 16px; - cursor: pointer; - - option { - background-color: rgba(255, 255, 255, 0.2); // цвет фона для выпадающего списка - color: var(--primary-white); // белый текст в выпадающем списке - } + background-color: var(--primary-white); // прозрачный белый + border: 2px solid var(--secondary-gray); // белая рамка + border-radius: 8px; // закруглённые углы + color: var(--primary-black); // белый текст + padding: 8px; + font-size: 16px; + cursor: pointer; + @include fonts.urbanist-font(20px, 600); + @include theme.shadows(); + + option { + color: var(--primary-black); // белый текст в выпадающем списке } - \ No newline at end of file + + &:hover { @include theme.hoverBorder(); } + + &:focus { @include theme.hoverBorder(); } +} \ No newline at end of file diff --git a/src/shared/types/predict.ts b/src/shared/types/predict.ts index 600b449..17359bc 100644 --- a/src/shared/types/predict.ts +++ b/src/shared/types/predict.ts @@ -13,5 +13,5 @@ export type PredictRequestType = { }; export type PredictResponseType = { - predicted_price: number; + predicted_price?: number; }; diff --git a/src/widgets/form/form.widget.tsx b/src/widgets/form/form.widget.tsx index 96c22bf..944efe5 100644 --- a/src/widgets/form/form.widget.tsx +++ b/src/widgets/form/form.widget.tsx @@ -8,6 +8,7 @@ import classes from './styles.module.scss'; import { Button } from '@/shared/components/button'; import { Selector } from '@/shared/components/selector'; import { mockUpOptions } from '@/shared/constants'; +import { Expander } from '@/shared/components/expander'; const Form = () => { const [request, setRequest] = useState({ @@ -24,7 +25,7 @@ const Form = () => { display_type: '4K', }); const [response, setResponse] = useState({ - predicted_price: -1, + predicted_price: undefined, }); const fields = Object.keys(request); @@ -54,19 +55,17 @@ const Form = () => {
{fields.map((field) => ( - + + + ))}
- + {response.predicted_price && ( Ответ: {response.predicted_price} diff --git a/src/widgets/form/styles.module.scss b/src/widgets/form/styles.module.scss index 2512773..be14042 100644 --- a/src/widgets/form/styles.module.scss +++ b/src/widgets/form/styles.module.scss @@ -4,12 +4,10 @@ display: flex; flex-direction: column; gap: 18px; - background-color: var(--transparent-black); - backdrop-filter: blur(10px); - width: 100%; + background-color: var(--secondary-gray); justify-content: center; - padding: 25px; - border-radius: 8px; + padding: 16px; + border-radius: 24px; .selectorList { display: flex; diff --git a/src/widgets/navbar/navbar.widget.tsx b/src/widgets/navbar/navbar.widget.tsx index 20a35a5..721d5d9 100644 --- a/src/widgets/navbar/navbar.widget.tsx +++ b/src/widgets/navbar/navbar.widget.tsx @@ -5,8 +5,8 @@ const Navbar = () => { diff --git a/src/widgets/navbar/styles.module.scss b/src/widgets/navbar/styles.module.scss index 04f3cf2..e4a323a 100644 --- a/src/widgets/navbar/styles.module.scss +++ b/src/widgets/navbar/styles.module.scss @@ -1,11 +1,17 @@ @use '../../shared/assets/styles/adaptive' as adaptive; +@use '../../shared/assets/styles/fonts' as fonts; +@use '../../shared/assets/styles/theme' as theme; + +$adaptive: ( + +); .navbar { display: flex; - background-color: var(--transparent-black); - backdrop-filter: blur(10px); - width: 100%; justify-content: center; + background-color: var(--secondary-gray); + border-radius: 16px; + margin: 16px; .container { padding: 15px; @@ -14,14 +20,27 @@ .logo { display: flex; flex-direction: row; - justify-content: start; + justify-content: flex-start; align-items: end; gap: 8px; - color: var(--primary-white); + color: var(--primary-black); .title { margin: 0; + transition: 0.3s ease; + @include fonts.urbanist-font(36px, 600); + + &:hover { @include theme.hoverLink(); } } } + + .version { + background-color: var(--primary-white); + color: var(--primary-black); + border-radius: 25px; + padding: 4px 16px; + @include fonts.urbanist-font(20px, 500); + @include theme.shadows(); + } } } \ No newline at end of file