From eb1a0729c74973c85ea5840d69a5256b3c4a57cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Guimar=C3=A3es?= <62889807+alvarogfn@users.noreply.github.com> Date: Tue, 21 Nov 2023 18:34:23 -0300 Subject: [PATCH 01/39] feat: add portal component --- src/components/Portal/Portal.module.scss | 12 +++++++ src/components/Portal/Portal.spec.tsx | 33 +++++++++++++++++++ src/components/Portal/Portal.tsx | 40 ++++++++++++++++++++++++ src/components/Portal/Portal.types.ts | 7 +++++ src/pages/home/home.tsx | 13 ++++++++ 5 files changed, 105 insertions(+) create mode 100644 src/components/Portal/Portal.module.scss create mode 100644 src/components/Portal/Portal.spec.tsx create mode 100644 src/components/Portal/Portal.tsx create mode 100644 src/components/Portal/Portal.types.ts diff --git a/src/components/Portal/Portal.module.scss b/src/components/Portal/Portal.module.scss new file mode 100644 index 000000000..f292305eb --- /dev/null +++ b/src/components/Portal/Portal.module.scss @@ -0,0 +1,12 @@ +.container { + display: flex; + + align-items: center; + justify-content: center; + + position: absolute; + z-index: 1000; + + background-color: #0004; + inset: 0; +} diff --git a/src/components/Portal/Portal.spec.tsx b/src/components/Portal/Portal.spec.tsx new file mode 100644 index 000000000..2b207ac18 --- /dev/null +++ b/src/components/Portal/Portal.spec.tsx @@ -0,0 +1,33 @@ +import { render, screen } from '@testing-library/react'; + +import Portal from './Portal'; + +import { TPortalProps } from './Portal.types'; + +const makeSut = ({ + isOpen = false, + children =
{props.title}
+ {!props.hideCloseButton && ( + + )} + + } + content={props.children} + /> + ); +} + +export default AccordionTab; diff --git a/src/components/AccordionTab/AccordionTab.types.ts b/src/components/AccordionTab/AccordionTab.types.ts new file mode 100644 index 000000000..50d3f318b --- /dev/null +++ b/src/components/AccordionTab/AccordionTab.types.ts @@ -0,0 +1,11 @@ +import { PropsWithChildren } from 'react'; + +type TOnChangeOpen = (newIsOpen: boolean) => void; + +export type TAccordionTabProps = PropsWithChildren<{ + title?: string; + isOpen?: boolean; + className?: string; + onChangeOpen?: TOnChangeOpen; + hideCloseButton?: boolean; +}>; From e5119c6c1e5a01144d65364f4609565ae5042fd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Guimar=C3=A3es?= <62889807+alvarogfn@users.noreply.github.com> Date: Tue, 21 Nov 2023 22:33:30 -0300 Subject: [PATCH 04/39] feat: adjust InputSearch width --- src/components/InputSearch/InputSearch.module.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/InputSearch/InputSearch.module.scss b/src/components/InputSearch/InputSearch.module.scss index 5dcdacf6c..7f837edae 100644 --- a/src/components/InputSearch/InputSearch.module.scss +++ b/src/components/InputSearch/InputSearch.module.scss @@ -15,10 +15,12 @@ } .container { + width: 100%; + color: global.$secondaryGray; font-size: 1.4rem; - margin-top: 3rem; + margin-top: 1rem; margin-bottom: 2.4rem; letter-spacing: 0; @@ -36,7 +38,7 @@ } .inputWrapper { - width: 28.2rem; + width: 100%; height: 5.6rem; display: flex; From 1984f363f19704861b3c11ebbfc0672799e1f0c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvaro=20Guimar=C3=A3es?= <62889807+alvarogfn@users.noreply.github.com> Date: Tue, 21 Nov 2023 22:33:49 -0300 Subject: [PATCH 05/39] feat: add new account button --- .../components/Sidebar/Sidebar.module.scss | 119 +++++++++++------- src/pages/home/components/Sidebar/Sidebar.tsx | 34 +++-- 2 files changed, 103 insertions(+), 50 deletions(-) diff --git a/src/pages/home/components/Sidebar/Sidebar.module.scss b/src/pages/home/components/Sidebar/Sidebar.module.scss index 0594020f9..4cc1e7607 100644 --- a/src/pages/home/components/Sidebar/Sidebar.module.scss +++ b/src/pages/home/components/Sidebar/Sidebar.module.scss @@ -1,9 +1,15 @@ -@use '../../../../styles/global'; +@use '../../../../styles/global' as *; -.sidebar { +.container { width: 100%; - font-family: global.$mainFont; + display: flex; + flex-direction: column; + + align-items: center; + justify-content: stretch; + + font-family: $mainFont; font-size: 1.6rem; @@ -12,64 +18,93 @@ background-color: #f5eff4; box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.1); border-radius: 1.2rem 1.2rem 0 0; +} - .titleContainer { - display: flex; - gap: 2.1rem; +.header { + width: 100%; - align-items: center; + display: flex; + gap: 2.1rem; - color: #fff; - font-size: 1.4rem; - line-height: 1; + align-items: center; - padding: 2.1rem; + color: #fff; + font-size: 1.4rem; + line-height: 1; - position: relative; + padding: 2.1rem; - background-color: global.$secondaryPurple; - border-radius: 1.2rem 1.2rem 0 0; + position: relative; - &::before { - width: 8px; - height: 8px; + background-color: $secondaryPurple; + border-radius: 1.2rem 1.2rem 0 0; - display: block; + &::before { + width: 8px; + height: 8px; - margin-bottom: 2px; + display: block; - background-color: global.$primaryWhite; - border-radius: 50%; + margin-bottom: 2px; - content: ''; - } + background-color: $primaryWhite; + border-radius: 50%; - .dotSvg { - width: 3.4rem; - } + content: ''; } - .itemsContainer { - max-height: 50rem; - overflow-y: auto; + .dotSvg { + width: 3.4rem; + } +} + +.content { + display: flex; + flex-direction: column; + + align-items: center; + + padding: 1rem; +} + +.searchBar { + max-width: 10px; +} - margin-right: 0.1rem; +.items { + width: 100%; + max-height: 50rem; + overflow-y: auto; - &::-webkit-scrollbar { - width: 0.4rem; + margin-right: 0.1rem; - border: 0; + &::-webkit-scrollbar { + width: 0.4rem; - background: none; - } + border: 0; - &::-webkit-scrollbar-thumb { - background: global.$secondaryGray; - border-radius: 8px; - } + background: none; + } - .sidebarMain { - padding: 0 1.2rem; - } + &::-webkit-scrollbar-thumb { + background: $secondaryGray; + border-radius: 8px; } } + +.newAccountButton { + margin-top: 5rem; + margin-bottom: 2rem; + padding: 1rem 4rem; +} + +// TODO: remove when define we create modal design; +.modalContent { + padding: 5rem; + + background-color: $primaryWhite; + + box-shadow: 3px 3px 3px #0003; + + border-radius: 5px; +} diff --git a/src/pages/home/components/Sidebar/Sidebar.tsx b/src/pages/home/components/Sidebar/Sidebar.tsx index 054b878f5..af8e7d3e5 100644 --- a/src/pages/home/components/Sidebar/Sidebar.tsx +++ b/src/pages/home/components/Sidebar/Sidebar.tsx @@ -1,22 +1,28 @@ import { useRef, useState } from 'react'; +import AccordionTab from '~components/AccordionTab/AccordionTab'; +import Button from '~components/Button/Button'; import InputSearch from '~components/InputSearch/InputSearch'; import { TInputComponent } from '~components/InputSearch/InputSearch.types'; +import Portal from '~components/Portal/Portal'; import SearchClue from '~components/SearchClue/SearchClue'; -import scss from './Sidebar.module.scss'; +import styles from './Sidebar.module.scss'; function Sidebar() { const [value, setValue] = useState(''); + const [isOpen, setOpen] = useState(false); const inputSearchRef = useRef