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

* refining settings

* Delete .idea/workspace.xml

* Update .gitignore

.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

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}
+                  path={SettingsPath.Appearance}
-                  element={<SettingsExperience />}
+                  element={<SettingsAppearance />}
                 />
                 <Route
                   path={SettingsPath.WorkspaceMembersPage}

front/src/modules/settings/components/SettingsNavbar.tsx

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

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',

front/src/modules/ui/navigation/navbar/components/__stories__/SubMenuNavbar.stories.tsx

@@ -31,8 +31,8 @@ const navItems = (
       active
     />
     <NavItem
-      label="Experience"
+      label="Appearance"
-      to="/settings/profile/experience"
+      to="/settings/profile/appearance"
       Icon={IconColorSwatch}
     />
     <NavTitle label="Workspace" />

front/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>

front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx

@@ -6,13 +6,13 @@ 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',
+  title: 'Pages/Settings/SettingsAppearance',
-  component: SettingsExperience,
+  component: SettingsAppearance,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/experience' },
+  args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,
   },
@@ -20,6 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsExperience>;
+export type Story = StoryObj<typeof SettingsAppearance>;
 
 export const Default: Story = {};

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}`:
+    case `${AppBasePath.Settings}/${SettingsPath.Appearance}`:
-      return 'Experience';
+      return 'Appearance';
     case `${AppBasePath.Settings}/${SettingsPath.WorkspaceMembersPage}`:
       return 'Workspace Members';
     case `${AppBasePath.Settings}/${SettingsPath.Workspace}`: