Header redesign (#562)

* Header redesign * Continue header redesign * Add headerauth login button back in * Fix e2e tests with header redesign * Abstract new icons for header redesign
StevenWeathers · Apr 7, 2024 · 6a06324 · 6a06324
1 parent 0ebd6d9
commit 6a06324
Show file tree

Hide file tree

Showing 18 changed files with 591 additions and 347 deletions.
diff --git a/e2e/tests/login.spec.ts b/e2e/tests/login.spec.ts
@@ -13,7 +13,7 @@ test.describe("The Login Page", () => {
 
     // UI should reflect this user being logged in
     await expect(
-      loginPage.page.locator('[data-testid="userprofile-link"]'),
+      loginPage.page.locator('[data-testid="usernav-name"]'),
     ).toHaveText(registeredUser.name);
   });
 });
diff --git a/e2e/tests/profile.spec.ts b/e2e/tests/profile.spec.ts
@@ -322,7 +322,7 @@ test.describe("User Profile page", () => {
 
     await expect(profilePage.page.locator("h1")).toHaveText("Your Profile");
     await expect(
-      profilePage.page.locator("data-testid=userprofile-link"),
+      profilePage.page.locator("data-testid=usernav-name"),
     ).toHaveText(registeredPage.user.name);
   });
 
@@ -333,7 +333,7 @@ test.describe("User Profile page", () => {
     await expect(profilePage.page.locator("h1")).toHaveText("Your Profile");
 
     await expect(
-      profilePage.page.locator("data-testid=userprofile-link"),
+      profilePage.page.locator("data-testid=usernav-name"),
     ).toBeVisible();
 
     await profilePage.page
@@ -346,7 +346,7 @@ test.describe("User Profile page", () => {
       "Thunderdome is an Agile Planning Poker app with a fun theme",
     );
     await expect(
-      profilePage.page.locator("data-testid=userprofile-link"),
+      profilePage.page.locator("data-testid=usernav-name"),
     ).not.toBeVisible();
   });
 
@@ -359,7 +359,7 @@ test.describe("User Profile page", () => {
     await expect(profilePage.page.locator("h1")).toHaveText("Your Profile");
 
     await expect(
-      profilePage.page.locator("data-testid=userprofile-link"),
+      profilePage.page.locator("data-testid=usernav-name"),
     ).toBeVisible();
 
     await profilePage.page
@@ -372,7 +372,7 @@ test.describe("User Profile page", () => {
       "Thunderdome is an Agile Planning Poker app with a fun theme",
     );
     await expect(
-      profilePage.page.locator("data-testid=userprofile-link"),
+      profilePage.page.locator("data-testid=usernav-name"),
     ).not.toBeVisible();
   });
 });
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
@@ -159,7 +159,7 @@
     currentPage = {
       route: Teams,
       params: {},
-      name: 'Teams',
+      name: 'teams',
     };
   });
   router.on(appRoutes.subscriptionPricing, () => {
@@ -173,7 +173,7 @@
     currentPage = {
       route: Confirmation,
       params: {},
-      name: 'Subscription Confirmation',
+      name: 'subscription-confirmation',
     };
   });
   router.on(`${appRoutes.register}/subscription`, () => {
@@ -201,7 +201,7 @@
     currentPage = {
       route: Organization,
       params,
-      name: 'organizations',
+      name: 'organization',
     };
   });
   router.on(
@@ -220,7 +220,7 @@
       currentPage = {
         route: TeamCheckin,
         params,
-        name: 'team',
+        name: 'team-checkin',
       };
     },
   );
@@ -250,7 +250,7 @@
       currentPage = {
         route: TeamCheckin,
         params,
-        name: 'team',
+        name: 'team-checkin',
       };
     },
   );
@@ -265,7 +265,7 @@
     currentPage = {
       route: TeamCheckin,
       params,
-      name: 'team',
+      name: 'team-checkin',
     };
   });
   router.on(appRoutes.admin, () => {
@@ -279,28 +279,28 @@
     currentPage = {
       route: AdminUser,
       params: params,
-      name: 'admin',
+      name: 'admin-user',
     };
   });
   router.on(`${appRoutes.adminUsers}`, () => {
     currentPage = {
       route: AdminUsers,
       params: {},
-      name: 'admin',
+      name: 'admin-users',
     };
   });
   router.on(`${appRoutes.adminOrganizations}`, () => {
     currentPage = {
       route: AdminOrganizations,
       params: {},
-      name: 'admin',
+      name: 'admin-organizations',
     };
   });
   router.on(`${appRoutes.adminOrganizations}/:organizationId`, params => {
     currentPage = {
       route: AdminOrganization,
       params: params,
-      name: 'admin',
+      name: 'admin-organization',
     };
   });
   router.on(
@@ -309,7 +309,7 @@
       currentPage = {
         route: AdminTeam,
         params: params,
-        name: 'admin',
+        name: 'admin-team',
       };
     },
   );
@@ -319,7 +319,7 @@
       currentPage = {
         route: AdminDepartment,
         params: params,
-        name: 'admin',
+        name: 'admin-department',
       };
     },
   );
@@ -329,36 +329,36 @@
       currentPage = {
         route: AdminTeam,
         params: params,
-        name: 'admin',
+        name: 'admin-team',
       };
     },
   );
   router.on(`${appRoutes.adminTeams}`, () => {
     currentPage = {
       route: AdminTeams,
       params: {},
-      name: 'admin',
+      name: 'admin-teams',
     };
   });
   router.on(`${appRoutes.adminTeams}/:teamId`, params => {
     currentPage = {
       route: AdminTeam,
       params: params,
-      name: 'admin',
+      name: 'admin-team',
     };
   });
   router.on(`${appRoutes.adminApiKeys}`, () => {
     currentPage = {
       route: AdminApikeys,
       params: {},
-      name: 'admin',
+      name: 'admin-apikeys',
     };
   });
   router.on(`${appRoutes.adminAlerts}`, () => {
     currentPage = {
       route: AdminAlerts,
       params: {},
-      name: 'admin',
+      name: 'admin-alerts',
     };
   });
 
@@ -381,14 +381,14 @@
       currentPage = {
         route: AdminBattles,
         params: {},
-        name: 'admin',
+        name: 'admin-games',
       };
     });
     router.on(`${appRoutes.adminPokerGames}/:battleId`, params => {
       currentPage = {
         route: AdminBattle,
         params: params,
-        name: 'admin',
+        name: 'admin-poker',
       };
     });
     router.on(`${appRoutes.register}/battle/:battleId`, params => {
@@ -426,14 +426,14 @@
       currentPage = {
         route: AdminRetros,
         params: {},
-        name: 'admin',
+        name: 'admin-retros',
       };
     });
     router.on(`${appRoutes.adminRetros}/:retroId`, params => {
       currentPage = {
         route: AdminRetro,
         params: params,
-        name: 'admin',
+        name: 'admin-retro',
       };
     });
     router.on(`${appRoutes.register}/retro/:retroId`, params => {
@@ -471,14 +471,14 @@
       currentPage = {
         route: AdminStoryboards,
         params: {},
-        name: 'admin',
+        name: 'admin-storyboards',
       };
     });
     router.on(`${appRoutes.adminStoryboards}/:storyboardId`, params => {
       currentPage = {
         route: AdminStoryboard,
         params: params,
-        name: 'admin',
+        name: 'admin-storyboard',
       };
     });
     router.on(`${appRoutes.register}/storyboard/:storyboardId`, params => {
@@ -502,14 +502,14 @@
       currentPage = {
         route: AdminSubscriptions,
         params: {},
-        name: 'admin',
+        name: 'admin-subscriptions',
       };
     });
     router.on(`${appRoutes.adminSubscriptions}/:subscriptionId`, params => {
       currentPage = {
         route: AdminSubscription,
         params,
-        name: 'admin',
+        name: 'admin-subscription',
       };
     });
   }

diff --git a/ui/src/components/auth/LoginForm.svelte b/ui/src/components/auth/LoginForm.svelte
@@ -70,8 +70,10 @@
           user.create(newUser);
           if (u.theme !== 'auto') {
             localStorage.setItem('theme', u.theme);
-            window.setTheme();
+          } else {
+            localStorage.removeItem('theme');
           }
+          window.setTheme();
           eventTag('login', 'engagement', 'success', () => {
             // setupI18n({
             //     withLocale: newUser.locale,
@@ -187,7 +189,7 @@
       <div class="flex items-center">
         <!--                        <input id="remember_me" name="remember_me" type="checkbox"-->
         <!--                               class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:text-white dark:border-gray-600 dark:focus:ring-indigo-400 disabled:cursor-wait disabled:opacity-50">-->
-        <!--                        <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-white">Remember-->
+        <!--                        <label for="remember_me" class="ms-2 block text-sm text-gray-900 dark:text-white">Remember-->
         <!--                            me</label>-->
       </div>
       <div class="text-sm">