Fix margin on DeleteModal overlay (#998)

* Fix margin on DeleteModal overlay * Update chromatic ci triggers * Update chromatic ci triggers
2023-07-30 13:17:33 -07:00
parent be835af48b
commit eafa30a9cf
24 changed files with 388 additions and 335 deletions
--- a/front/src/pages/auth/CreateProfile.tsx
+++ b/front/src/pages/auth/CreateProfile.tsx
@ -17,7 +17,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateUserMutation } from '~/generated/graphql';

@ -128,11 +128,11 @@ export function CreateProfile() {
      <SubTitle>How you'll be identified on the app.</SubTitle>
      <StyledContentContainer>
        <StyledSectionContainer>
-          <SubSectionTitle title="Picture" />
+          <H2Title title="Picture" />
          <ProfilePictureUploader />
        </StyledSectionContainer>
        <StyledSectionContainer>
-          <SubSectionTitle
+          <H2Title
            title="Name"
            description="Your name as it will be displayed on the app"
          />
--- a/front/src/pages/auth/CreateWorkspace.tsx
+++ b/front/src/pages/auth/CreateWorkspace.tsx
@ -14,7 +14,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';

@ -107,11 +107,11 @@ export function CreateWorkspace() {
      </SubTitle>
      <StyledContentContainer>
        <StyledSectionContainer>
-          <SubSectionTitle title="Workspace logo" />
+          <H2Title title="Workspace logo" />
          <WorkspaceLogoUploader />
        </StyledSectionContainer>
        <StyledSectionContainer>
-          <SubSectionTitle
+          <H2Title
            title="Workspace name"
            description="The name of your organization"
          />
--- a/front/src/pages/settings/SettingsExperience.tsx
+++ b/front/src/pages/settings/SettingsExperience.tsx
@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicker';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+import { Section } from '@/ui/section/components/Section';
 import { useColorScheme } from '@/ui/themes/hooks/useColorScheme';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';

 const StyledContainer = styled.div`
  display: flex;
@ -13,15 +14,6 @@ const StyledContainer = styled.div`
  padding: ${({ theme }) => theme.spacing(8)};
  padding-bottom: ${({ theme }) => theme.spacing(10)};
  width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;

 export function SettingsExperience() {
@ -29,15 +21,13 @@ export function SettingsExperience() {

  return (
    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
-      <div>
-        <StyledContainer>
-          <MainSectionTitle>Experience</MainSectionTitle>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Appearance" />
-            <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
-          </StyledSectionContainer>
-        </StyledContainer>
-      </div>
+      <StyledContainer>
+        <H1Title title="Experience" />
+        <Section>
+          <H2Title title="Appearance" />
+          <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
+        </Section>
+      </StyledContainer>
    </SubMenuTopBarContainer>
  );
 }
--- a/front/src/pages/settings/SettingsProfile.tsx
+++ b/front/src/pages/settings/SettingsProfile.tsx
@ -6,24 +6,18 @@ import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';

 const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
+  height: fit-content;
  padding: ${({ theme }) => theme.spacing(8)};
  padding-bottom: ${({ theme }) => theme.spacing(10)};
+  padding-bottom: 30px;
  width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;

 export function SettingsProfile() {
@ -31,29 +25,28 @@ export function SettingsProfile() {
    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
      <>
        <StyledContainer>
-          <MainSectionTitle>Profile</MainSectionTitle>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Picture" />
+          <H1Title title="Profile" />
+          <Section>
+            <H2Title title="Picture" />
            <ProfilePictureUploader />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
+          </Section>
+          <Section>
+            <H2Title
              title="Name"
              description="Your name as it will be displayed"
            />
            <NameFields />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
+          </Section>
+          <Section>
+            <H2Title
              title="Email"
              description="The email associated to your account"
            />
            <EmailField />
-          </StyledSectionContainer>
-
-          <StyledSectionContainer>
+          </Section>
+          <Section>
            <DeleteAccount />
-          </StyledSectionContainer>
+          </Section>
        </StyledContainer>
      </>
    </SubMenuTopBarContainer>
--- a/front/src/pages/settings/SettingsWorkspace.tsx
+++ b/front/src/pages/settings/SettingsWorkspace.tsx
@ -5,23 +5,15 @@ import { NameField } from '@/settings/workspace/components/NameField';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';

 const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: ${({ theme }) => theme.spacing(8)};
  width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;

 export function SettingsWorksapce() {
@ -29,22 +21,19 @@ export function SettingsWorksapce() {
    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
      <div>
        <StyledContainer>
-          <MainSectionTitle>General</MainSectionTitle>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Picture" />
+          <H1Title title="General" />
+          <Section>
+            <H2Title title="Picture" />
            <WorkspaceLogoUploader />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
-              title="Name"
-              description="Name of your workspace"
-            />
+          </Section>
+          <Section>
+            <H2Title title="Name" description="Name of your workspace" />
            <NameField />
-          </StyledSectionContainer>
+          </Section>

-          <StyledSectionContainer>
+          <Section>
            <DeleteWorkspace />
-          </StyledSectionContainer>
+          </Section>
        </StyledContainer>
      </div>
    </SubMenuTopBarContainer>
--- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/front/src/pages/settings/SettingsWorkspaceMembers.tsx
@ -10,8 +10,9 @@ import {
 } from '@/ui/button/components/Button';
 import { IconSettings, IconTrash } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard';
 import {
@ -22,11 +23,9 @@ import {
 const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
+  margin-top: ${({ theme }) => theme.spacing(8)};
  padding: ${({ theme }) => theme.spacing(8)};
  width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
 `;

 const ButtonContainer = styled.div`
@ -81,40 +80,44 @@ export function SettingsWorkspaceMembers() {
  return (
    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
      <StyledContainer>
-        <MainSectionTitle>Members</MainSectionTitle>
+        <H1Title title="Members" />
        {workspace?.inviteHash && (
-          <>
-            <SubSectionTitle
+          <Section>
+            <H2Title
              title="Invite"
              description="Send an invitation to use Twenty"
            />
            <WorkspaceInviteLink
              inviteLink={`${window.location.origin}/invite/${workspace?.inviteHash}`}
            />
-          </>
+          </Section>
        )}
-        <SubSectionTitle
-          title="Members"
-          description="Manage the members of your space here"
-        />
-        {data?.workspaceMembers?.map((member) => (
-          <WorkspaceMemberCard
-            key={member.user.id}
-            workspaceMember={{ user: member.user }}
-            accessory={
-              currentUser?.id !== member.user.id && (
-                <ButtonContainer>
-                  <Button
-                    onClick={() => handleRemoveWorkspaceMember(member.user.id)}
-                    variant={ButtonVariant.Tertiary}
-                    size={ButtonSize.Small}
-                    icon={<IconTrash size={theme.icon.size.md} />}
-                  />
-                </ButtonContainer>
-              )
-            }
+        <Section>
+          <H2Title
+            title="Members"
+            description="Manage the members of your space here"
          />
-        ))}
+          {data?.workspaceMembers?.map((member) => (
+            <WorkspaceMemberCard
+              key={member.user.id}
+              workspaceMember={{ user: member.user }}
+              accessory={
+                currentUser?.id !== member.user.id && (
+                  <ButtonContainer>
+                    <Button
+                      onClick={() =>
+                        handleRemoveWorkspaceMember(member.user.id)
+                      }
+                      variant={ButtonVariant.Tertiary}
+                      size={ButtonSize.Small}
+                      icon={<IconTrash size={theme.icon.size.md} />}
+                    />
+                  </ButtonContainer>
+                )
+              }
+            />
+          ))}
+        </Section>
      </StyledContainer>
    </SubMenuTopBarContainer>
  );