Renaming "Experience" to "Appearance" (twentyhq#2776)

* refining settings * Delete .idea/workspace.xml * Update .gitignore
quockhanhtn · Nov 30, 2023 · c2131a2 · c2131a2
1 parent 1822370
commit c2131a2
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 **/**/.env
 .DS_Store
+.idea/workspace.xml
 node_modules/
 # yarn is the recommended package manager across the project
-.package-lock.json
+.package-lock.json
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -22,7 +22,7 @@ import { SettingsObjects } from '~/pages/settings/data-model/SettingsObjects';
 import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
 import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
 import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
-import { SettingsExperience } from '~/pages/settings/SettingsExperience';
+import { SettingsAppearance } from '~/pages/settings/SettingsAppearance';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
@@ -66,8 +66,8 @@ export const App = () => {
                   element={<SettingsProfile />}
                 />
                 <Route
-                  path={SettingsPath.Experience}
-                  element={<SettingsExperience />}
+                  path={SettingsPath.Appearance}
+                  element={<SettingsAppearance />}
                 />
                 <Route
                   path={SettingsPath.WorkspaceMembersPage}

diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx
@@ -41,12 +41,12 @@ export const SettingsNavbar = () => {
         }
       />
       <NavItem
-        label="Experience"
-        to="/settings/profile/experience"
+        label="Appearance"
+        to="/settings/profile/appearance"
         Icon={IconColorSwatch}
         active={
           !!useMatch({
-            path: useResolvedPath('/settings/profile/experience').pathname,
+            path: useResolvedPath('/settings/profile/appearance').pathname,
             end: true,
           })
         }

diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts
@@ -1,6 +1,6 @@
 export enum SettingsPath {
   ProfilePage = 'profile',
-  Experience = 'profile/experience',
+  Appearance = 'profile/appearance',
   Objects = 'objects',
   ObjectDetail = 'objects/:objectSlug',
   ObjectEdit = 'objects/:objectSlug/edit',

diff --git a/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx b/front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx
@@ -31,8 +31,8 @@ const navItems = (
       active
     />
     <NavItem
-      label="Experience"
-      to="/settings/profile/experience"
+      label="Appearance"
+      to="/settings/profile/appearance"
       Icon={IconColorSwatch}
     />
     <NavTitle label="Workspace" />

diff --git a/...src/pages/settings/SettingsExperience.tsx → ...src/pages/settings/SettingsAppearance.tsx b/...src/pages/settings/SettingsExperience.tsx → ...src/pages/settings/SettingsAppearance.tsx
@@ -13,15 +13,15 @@ const StyledH1Title = styled(H1Title)`
   margin-bottom: 0;
 `;
 
-export const SettingsExperience = () => {
+export const SettingsAppearance = () => {
   const { colorScheme, setColorScheme } = useColorScheme();
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <StyledH1Title title="Experience" />
+        <StyledH1Title title="Appearance" />
         <Section>
-          <H2Title title="Appearance" />
+          <H2Title title="Theme" />
           <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
         </Section>
       </SettingsPageContainer>

diff --git a/..._stories__/SettingsExperience.stories.tsx → ..._stories__/SettingsAppearance.stories.tsx b/..._stories__/SettingsExperience.stories.tsx → ..._stories__/SettingsAppearance.stories.tsx
@@ -6,20 +6,20 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
-import { SettingsExperience } from '../SettingsExperience';
+import { SettingsAppearance } from '../SettingsAppearance';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/SettingsExperience',
-  component: SettingsExperience,
+  title: 'Pages/Settings/SettingsAppearance',
+  component: SettingsAppearance,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/experience' },
+  args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,
   },
 };
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsExperience>;
+export type Story = StoryObj<typeof SettingsAppearance>;
 
 export const Default: Story = {};
diff --git a/front/src/utils/title-utils.ts b/front/src/utils/title-utils.ts
@@ -22,8 +22,8 @@ export const getPageTitleFromPath = (pathname: string): string => {
       return 'Opportunities';
     case `${AppBasePath.Settings}/${SettingsPath.ProfilePage}`:
       return 'Profile';
-    case `${AppBasePath.Settings}/${SettingsPath.Experience}`:
-      return 'Experience';
+    case `${AppBasePath.Settings}/${SettingsPath.Appearance}`:
+      return 'Appearance';
     case `${AppBasePath.Settings}/${SettingsPath.WorkspaceMembersPage}`:
       return 'Workspace Members';
     case `${AppBasePath.Settings}/${SettingsPath.Workspace}`: