From 19a1f2b9f8583cf2ad6ac6a9ca5018cc5c68437f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Fri, 30 Jun 2023 11:35:01 +0200 Subject: [PATCH] feat: ui settings (#465) --- .../section-titles/MainSectionTitle.tsx | 1 + .../section-titles/SubSectionTitle.tsx | 32 +++++++-- front/src/pages/auth/CreateProfile.tsx | 6 +- front/src/pages/auth/CreateWorkspace.tsx | 6 +- front/src/pages/auth/PasswordLogin.tsx | 6 +- front/src/pages/settings/SettingsProfile.tsx | 71 +++++++++++++++---- 6 files changed, 91 insertions(+), 31 deletions(-) diff --git a/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx b/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx index 1065cd368..c0dc5e24c 100644 --- a/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx +++ b/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx @@ -10,6 +10,7 @@ const StyledMainSectionTitle = styled.h2` font-size: ${({ theme }) => theme.font.size.xl}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 1.5; + margin: 0; `; export function MainSectionTitle({ children }: OwnProps) { diff --git a/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx b/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx index 18a194057..832b49b58 100644 --- a/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx +++ b/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx @@ -1,17 +1,35 @@ -import { ReactNode } from 'react'; import styled from '@emotion/styled'; -type OwnProps = { - children: ReactNode; +type Props = { + title: string; + description?: string; }; -const StyledSubSectionTitle = styled.h2` +const StyledContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledTitle = styled.h2` color: ${({ theme }) => theme.font.color.primary}; font-size: ${({ theme }) => theme.font.size.md}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; - line-height: 1.5; + margin: 0; `; -export function SubSectionTitle({ children }: OwnProps) { - return {children}; +const StyledDescription = styled.h3` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.md}; + font-weight: ${({ theme }) => theme.font.weight.regular}; + margin: 0; + margin-top: ${({ theme }) => theme.spacing(1)}; +`; + +export function SubSectionTitle({ title, description }: Props) { + return ( + + {title} + {description && {description}} + + ); } diff --git a/front/src/pages/auth/CreateProfile.tsx b/front/src/pages/auth/CreateProfile.tsx index 086a31d3a..fe6fe33b6 100644 --- a/front/src/pages/auth/CreateProfile.tsx +++ b/front/src/pages/auth/CreateProfile.tsx @@ -3,12 +3,12 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; -import { Section } from '@/auth/components/ui/Section'; import { SubTitle } from '@/auth/components/ui/SubTitle'; import { Title } from '@/auth/components/ui/Title'; import { MainButton } from '@/ui/components/buttons/MainButton'; import { ImageInput } from '@/ui/components/inputs/ImageInput'; import { TextInput } from '@/ui/components/inputs/TextInput'; +import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle'; const StyledContentContainer = styled.div` width: 100%; @@ -60,11 +60,11 @@ export function CreateProfile() { How you'll be identify on the app. -
+ -
diff --git a/front/src/pages/auth/CreateWorkspace.tsx b/front/src/pages/auth/CreateWorkspace.tsx index 3d992ca54..93a6f4471 100644 --- a/front/src/pages/auth/CreateWorkspace.tsx +++ b/front/src/pages/auth/CreateWorkspace.tsx @@ -3,12 +3,12 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; -import { Section } from '@/auth/components/ui/Section'; import { SubTitle } from '@/auth/components/ui/SubTitle'; import { Title } from '@/auth/components/ui/Title'; import { MainButton } from '@/ui/components/buttons/MainButton'; import { ImageInput } from '@/ui/components/inputs/ImageInput'; import { TextInput } from '@/ui/components/inputs/TextInput'; +import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle'; const StyledContentContainer = styled.div` width: 100%; @@ -55,11 +55,11 @@ export function CreateWorkspace() { -
+ -
diff --git a/front/src/pages/auth/PasswordLogin.tsx b/front/src/pages/auth/PasswordLogin.tsx index b4d6aa5af..397aa0fef 100644 --- a/front/src/pages/auth/PasswordLogin.tsx +++ b/front/src/pages/auth/PasswordLogin.tsx @@ -5,7 +5,6 @@ import { motion } from 'framer-motion'; import { useRecoilState } from 'recoil'; import { Logo } from '@/auth/components/ui/Logo'; -import { Section } from '@/auth/components/ui/Section'; import { SubTitle } from '@/auth/components/ui/SubTitle'; import { Title } from '@/auth/components/ui/Title'; import { useAuth } from '@/auth/hooks/useAuth'; @@ -14,6 +13,7 @@ import { isMockModeState } from '@/auth/states/isMockModeState'; import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState'; import { MainButton } from '@/ui/components/buttons/MainButton'; import { TextInput } from '@/ui/components/inputs/TextInput'; +import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle'; const StyledContentContainer = styled.div` width: 100%; @@ -101,7 +101,7 @@ export function PasswordLogin() { -
+ -
+ theme.spacing(8)}; - width: 490px; + width: 350px; + > * + * { + margin-top: ${({ theme }) => theme.spacing(8)}; + } `; + +const StyledSectionContainer = styled.div` + > * + * { + margin-top: ${({ theme }) => theme.spacing(4)}; + } +`; + +const StyledComboInputContainer = styled.div` + display: flex; + flex-direction: row; + > * + * { + margin-left: ${({ theme }) => theme.spacing(4)}; + } +`; + export function SettingsProfile() { const currentUser = useRecoilValue(currentUserState); return ( Profile - Name - - Email - + + + + + + + + + + + + + + + );