feat: ui settings (#465)

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) {

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 <StyledSubSectionTitle>{children}</StyledSubSectionTitle>;
+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 (
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
+  );
 }

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() {
       <SubTitle>How you'll be identify on the app.</SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>
-          <Section title="Picture" />
+          <SubSectionTitle title="Picture" />
           <ImageInput picture={null} disabled />
         </StyledSectionContainer>
         <StyledSectionContainer>
-          <Section
+          <SubSectionTitle
             title="Name"
             description="Your name as it will be displayed on the app"
           />

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() {
       </SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>
-          <Section title="Workspace logo" />
+          <SubSectionTitle title="Workspace logo" />
           <ImageInput picture={null} disabled />
         </StyledSectionContainer>
         <StyledSectionContainer>
-          <Section
+          <SubSectionTitle
             title="Workspace name"
             description="The name of your organization"
           />

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() {
       <StyledAnimatedContent>
         <StyledContentContainer>
           <StyledSectionContainer>
-            <Section title="Email" />
+            <SubSectionTitle title="Email" />
             <TextInput
               value={authFlowUserEmail}
               placeholder="Email"
@@ -110,7 +110,7 @@ export function PasswordLogin() {
             />
           </StyledSectionContainer>
           <StyledSectionContainer>
-            <Section title="Password" />
+            <SubSectionTitle title="Password" />
             <TextInput
               value={internalPassword}
               placeholder="Password"

front/src/pages/settings/SettingsProfile.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
@@ -11,28 +12,68 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => 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 (
     <NoTopBarContainer>
       <StyledContainer>
         <MainSectionTitle>Profile</MainSectionTitle>
-        <SubSectionTitle>Name</SubSectionTitle>
-        <TextInput
-          value={currentUser?.displayName}
-          disabled
-          fullWidth
-          key={'id-' + currentUser?.id}
-        />
-        <SubSectionTitle>Email</SubSectionTitle>
-        <TextInput
-          value={currentUser?.email}
-          disabled
-          fullWidth
-          key={'email-' + currentUser?.id}
-        />
+        <StyledSectionContainer>
+          <SubSectionTitle title="Picture" />
+          <ImageInput picture={null} disabled />
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <SubSectionTitle
+            title="Name"
+            description="Your name as it will be displayed"
+          />
+          <StyledComboInputContainer>
+            <TextInput
+              label="First Name"
+              value={currentUser?.displayName}
+              placeholder="Tim"
+              fullWidth
+            />
+            <TextInput
+              label="Last Name"
+              value=""
+              placeholder="Cook"
+              fullWidth
+            />
+          </StyledComboInputContainer>
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <SubSectionTitle
+            title="Email"
+            description="The email associated to your account"
+          />
+          <TextInput
+            value={currentUser?.email}
+            disabled
+            fullWidth
+            key={'email-' + currentUser?.id}
+          />
+        </StyledSectionContainer>
       </StyledContainer>
     </NoTopBarContainer>
   );