From 73c63e8740f1c95d6b9946d60b64e6d5673b04b7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:49:56 +0200
Subject: [PATCH 01/27] feat: breadcrumbs update on name change

---
 .../[project]/users/teams/[team]/index.svelte   |  5 ++++-
 .../[project]/users/user/[user]/index.svelte    | 17 +++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index 57b1a3dc4..5fc5e0a63 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -7,7 +7,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
-    import { title } from '$lib/stores/layout';
+    import { title, breadcrumbs } from '$lib/stores/layout';
     import DeleteTeam from './_deleteTeam.svelte';
     import { onMount } from 'svelte';
 
@@ -35,6 +35,9 @@
             await sdkForProject.teams.update($page.params.team, teamName);
             $team.name = teamName;
             title.set(teamName);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            breadcrumb.title = teamName;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index da8f82ec3..63a3b772c 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -17,7 +17,7 @@
     import DeleteUser from './_deleteUser.svelte';
     import { user } from './store';
     import { onMount } from 'svelte';
-    import { title } from '$lib/stores/layout';
+    import { title, breadcrumbs } from '$lib/stores/layout';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -113,6 +113,10 @@
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
             title.set(userName);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            breadcrumb.title = userName;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+
             showError = false;
             addNotification({
                 message: 'Name has been updated',
@@ -423,14 +427,15 @@
                     </ul>
                     <Button
                         text
+                        disabled={prefs?.length
+                            ? !prefs[prefs.length - 1][0] || !prefs[prefs.length - 1][1]
+                            : true}
                         on:click={() => {
-                            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                                prefs.push(['', '']);
-                                prefs = prefs;
-                            }
+                            prefs.push(['', '']);
+                            prefs = prefs;
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Preference </span></Button>
+                        <span class="text"> Add preference </span></Button>
                 </form>
             </svelte:fragment>
 

From d66ce9232e15b2ef9fa83bf0cdd4b0e196500dbf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:50:29 +0200
Subject: [PATCH 02/27] disabled not implemented section

---
 src/routes/console/[project]/users/security.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index d65672589..cfa9dec9a 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -143,8 +143,9 @@
         <svelte:fragment slot="aside">
             <form class="form u-grid u-gap-16">
                 <ul class="form-list is-multiple">
-                    <InputNumber id="length" label="Length" value={1} />
+                    <InputNumber disabled id="length" label="Length" value={1} />
                     <InputSelect
+                        disabled
                         id="period"
                         {options}
                         label="Time Period"

From cfc6e7003914d15b1d57584a2eab4b366ec9b7e5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:57:57 +0200
Subject: [PATCH 03/27] chore: renamed route `users` to `authentication`

---
 README.md                                              |  2 +-
 src/lib/layout/navigation.svelte                       |  8 +++++---
 src/lib/stores/oauth-providers.ts                      | 10 +++++-----
 .../{users => authentication}/__layout.svelte          |  0
 .../{users => authentication}/_appleOAuth.svelte       |  0
 .../{users => authentication}/_auth0OAuth.svelte       |  0
 .../{users => authentication}/_createTeam.svelte       |  0
 .../{users => authentication}/_createUser.svelte       |  0
 .../{users => authentication}/_mainOAuth.svelte        |  0
 .../{users => authentication}/_microsoftOAuth.svelte   |  0
 .../{users => authentication}/_oktaOAuth.svelte        |  0
 .../{users => authentication}/authentication.svelte    |  0
 .../[project]/{users => authentication}/index.svelte   |  5 +++--
 .../{users => authentication}/security.svelte          |  0
 .../[project]/{users => authentication}/store.ts       |  0
 .../[project]/{users => authentication}/teams.svelte   |  5 +++--
 .../teams/[team]/__layout.svelte                       |  2 +-
 .../teams/[team]/_createMembership.svelte              |  2 +-
 .../teams/[team]/_deleteMembership.svelte              |  2 +-
 .../teams/[team]/_deleteTeam.svelte                    |  2 +-
 .../teams/[team]/activity.svelte                       |  0
 .../teams/[team]/index.svelte                          |  0
 .../teams/[team]/members.svelte                        |  6 ++++--
 .../{users => authentication}/teams/[team]/store.ts    |  0
 .../[project]/{users => authentication}/usage.svelte   |  0
 .../user/[user]/__layout.svelte                        |  2 +-
 .../user/[user]/_deleteAllMemberships.svelte           |  4 +++-
 .../user/[user]/_deleteAllSessions.svelte              |  0
 .../user/[user]/_deleteMembership.svelte               |  2 +-
 .../user/[user]/_deleteSession.svelte                  |  0
 .../user/[user]/_deleteUser.svelte                     |  2 +-
 .../user/[user]/activity.svelte                        |  2 +-
 .../{users => authentication}/user/[user]/index.svelte |  0
 .../user/[user]/memberships.svelte                     |  4 ++--
 .../user/[user]/sessions.svelte                        |  2 +-
 .../{users => authentication}/user/[user]/store.ts     |  0
 36 files changed, 35 insertions(+), 27 deletions(-)
 rename src/routes/console/[project]/{users => authentication}/__layout.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_appleOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_auth0OAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_createTeam.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_createUser.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_mainOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_microsoftOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_oktaOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/authentication.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/index.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/security.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/store.ts (100%)
 rename src/routes/console/[project]/{users => authentication}/teams.svelte (95%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/__layout.svelte (94%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_createMembership.svelte (97%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_deleteMembership.svelte (93%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_deleteTeam.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/activity.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/index.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/members.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/store.ts (100%)
 rename src/routes/console/[project]/{users => authentication}/usage.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/__layout.svelte (95%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteAllMemberships.svelte (90%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteAllSessions.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteMembership.svelte (93%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteSession.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteUser.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/activity.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/index.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/memberships.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/sessions.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/store.ts (100%)

diff --git a/README.md b/README.md
index f4e2dbffb..76f82ba16 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ Adding a new dependency should have vital value on the product with minimum poss
 │       │   │   │   ├── _create.svelte  // Component to Create collections
 │       │   │   │   └── index.svelte    // Entrypoint for "/console/[PROJECT_ID]/database"
 │       │   │   ├── storage             // Storage Service "/console/[PROJECT]/storage"
-│       │   │   └── users               // Users Service "/console/[PROJECT]/users"
+│       │   │   └── authentication      // Users Service "/console/[PROJECT]/authentication"
 │       │   └──...
 │       ├── login.svelte                // Component for Login "/console/login"
 │       └── register.svelte             // Component for Register "/console/register"
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 6c2f519f5..4e7018963 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -41,10 +41,12 @@
                     <li class="drop-list-item">
                         <a
                             class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/users`)}
-                            href={`${path}/users`}>
+                            class:is-selected={$page.url.pathname.startsWith(
+                                `${path}/authentication`
+                            )}
+                            href={`${path}/authentication`}>
                             <span class="icon-user-group" aria-hidden="true" />
-                            <span class="text">Users</span>
+                            <span class="text">Authentication</span>
                         </a>
                     </li>
                     <li class="drop-list-item">
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 45512bc7c..68baf0ff4 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,11 +1,11 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 import type { SvelteComponent } from 'svelte';
-import Apple from '../../routes/console/[project]/users/_appleOAuth.svelte';
-import Microsoft from '../../routes/console/[project]/users/_microsoftOAuth.svelte';
-import Okta from '../../routes/console/[project]/users/_oktaOAuth.svelte';
-import Auth0 from '../../routes/console/[project]/users/_auth0OAuth.svelte';
-import Main from '../../routes/console/[project]/users/_mainOAuth.svelte';
+import Apple from '../../routes/console/[project]/authentication/_appleOAuth.svelte';
+import Microsoft from '../../routes/console/[project]/authentication/_microsoftOAuth.svelte';
+import Okta from '../../routes/console/[project]/authentication/_oktaOAuth.svelte';
+import Auth0 from '../../routes/console/[project]/authentication/_auth0OAuth.svelte';
+import Main from '../../routes/console/[project]/authentication/_mainOAuth.svelte';
 
 export type Provider = {
     name: string;
diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/users/__layout.svelte
rename to src/routes/console/[project]/authentication/__layout.svelte
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/authentication/_appleOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_appleOAuth.svelte
rename to src/routes/console/[project]/authentication/_appleOAuth.svelte
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_auth0OAuth.svelte
rename to src/routes/console/[project]/authentication/_auth0OAuth.svelte
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/authentication/_createTeam.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_createTeam.svelte
rename to src/routes/console/[project]/authentication/_createTeam.svelte
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/authentication/_createUser.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_createUser.svelte
rename to src/routes/console/[project]/authentication/_createUser.svelte
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/authentication/_mainOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_mainOAuth.svelte
rename to src/routes/console/[project]/authentication/_mainOAuth.svelte
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_microsoftOAuth.svelte
rename to src/routes/console/[project]/authentication/_microsoftOAuth.svelte
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_oktaOAuth.svelte
rename to src/routes/console/[project]/authentication/_oktaOAuth.svelte
diff --git a/src/routes/console/[project]/users/authentication.svelte b/src/routes/console/[project]/authentication/authentication.svelte
similarity index 100%
rename from src/routes/console/[project]/users/authentication.svelte
rename to src/routes/console/[project]/authentication/authentication.svelte
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/authentication/index.svelte
similarity index 96%
rename from src/routes/console/[project]/users/index.svelte
rename to src/routes/console/[project]/authentication/index.svelte
index b581e6ab3..78f43d7b2 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/authentication/index.svelte
@@ -31,7 +31,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
-        await goto(`${base}/console/${project}/users/user/${event.detail.$id}`);
+        await goto(`${base}/console/${project}/authentication/user/${event.detail.$id}`);
     };
 
     $: usersList.load(search, limit, offset ?? 0);
@@ -78,7 +78,8 @@
             </TableHeader>
             <TableBody>
                 {#each $usersList.users as user}
-                    <TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
+                    <TableRowLink
+                        href={`${base}/console/${project}/authentication/user/${user.$id}`}>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={32} src={getAvatar(user.name)} name={user.name} />
diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/authentication/security.svelte
similarity index 100%
rename from src/routes/console/[project]/users/security.svelte
rename to src/routes/console/[project]/authentication/security.svelte
diff --git a/src/routes/console/[project]/users/store.ts b/src/routes/console/[project]/authentication/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/store.ts
rename to src/routes/console/[project]/authentication/store.ts
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/authentication/teams.svelte
similarity index 95%
rename from src/routes/console/[project]/users/teams.svelte
rename to src/routes/console/[project]/authentication/teams.svelte
index 376f3578c..0638f36c1 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/authentication/teams.svelte
@@ -30,7 +30,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
-        await goto(`${base}/console/${project}/users/teams/${event.detail.$id}`);
+        await goto(`${base}/console/${project}/authentication/teams/${event.detail.$id}`);
     };
     $: teamsList.load(search, limit, offset);
     $: if (search) offset = 0;
@@ -71,7 +71,8 @@
             </TableHeader>
             <TableBody>
                 {#each $teamsList.teams as team}
-                    <TableRowLink href={`${base}/console/${project}/users/teams/${team.$id}`}>
+                    <TableRowLink
+                        href={`${base}/console/${project}/authentication/teams/${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
diff --git a/src/routes/console/[project]/users/teams/[team]/__layout.svelte b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
similarity index 94%
rename from src/routes/console/[project]/users/teams/[team]/__layout.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
index e756409f8..3e9540e70 100644
--- a/src/routes/console/[project]/users/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
@@ -21,7 +21,7 @@
             navigate: event,
             level: 4,
             title: $team.name,
-            back: `${base}/console/${$page.params.project}/users/teams`,
+            back: `${base}/console/${$page.params.project}/authentication/teams`,
             breadcrumbs: {
                 title: $team.name,
                 href: `teams/${teamId}`
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
similarity index 97%
rename from src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
index b58a92960..03438bb2f 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
@@ -14,7 +14,7 @@
     let name: string, email: string, roles: [];
 
     const create = async () => {
-        const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
+        const url = `${$page.url.origin}/console/${$page.params.project}/authentication/teams/${$page.params.team}/members`;
 
         try {
             const user = await sdkForProject.teams.createMembership(
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
similarity index 93%
rename from src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
index 22c68152f..0ea4aa7e0 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/users/teams/${selectedMembership.teamId}/members`
+                `${base}/console/${$page.params.project}/authentication/teams/${selectedMembership.teamId}/members`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
similarity index 98%
rename from src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
index 1b1a18398..d192856a7 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
@@ -15,7 +15,7 @@
         try {
             await sdkForProject.teams.delete(team.$id);
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/users/teams`);
+            await goto(`${base}/console/${$page.params.project}/authentication/teams`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/activity.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/activity.svelte
diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/index.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/index.svelte
diff --git a/src/routes/console/[project]/users/teams/[team]/members.svelte b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
similarity index 96%
rename from src/routes/console/[project]/users/teams/[team]/members.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/members.svelte
index bc3bdc60e..d2bc1506c 100644
--- a/src/routes/console/[project]/users/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
@@ -38,7 +38,9 @@
 
     const memberCreated = async (event: CustomEvent<Models.Membership>) => {
         memberships.load($page.params.team, search, limit, offset ?? 0);
-        await goto(`${base}/console/${project}/users/teams/${event.detail.teamId}/members`);
+        await goto(
+            `${base}/console/${project}/authentication/teams/${event.detail.teamId}/members`
+        );
     };
 </script>
 
@@ -60,7 +62,7 @@
             <TableBody>
                 {#each $memberships.memberships as membership}
                     <TableRowLink
-                        href={`${base}/console/${project}/users/user/${membership.userId}`}>
+                        href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
                                 <Avatar
diff --git a/src/routes/console/[project]/users/teams/[team]/store.ts b/src/routes/console/[project]/authentication/teams/[team]/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/store.ts
rename to src/routes/console/[project]/authentication/teams/[team]/store.ts
diff --git a/src/routes/console/[project]/users/usage.svelte b/src/routes/console/[project]/authentication/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/users/usage.svelte
rename to src/routes/console/[project]/authentication/usage.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/__layout.svelte b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
similarity index 95%
rename from src/routes/console/[project]/users/user/[user]/__layout.svelte
rename to src/routes/console/[project]/authentication/user/[user]/__layout.svelte
index 88f449418..c3361abe4 100644
--- a/src/routes/console/[project]/users/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
@@ -25,7 +25,7 @@
                 title: $user.name,
                 href: `user/${userId}`
             },
-            back: `${base}/console/${$page.params.project}/users`,
+            back: `${base}/console/${$page.params.project}/authentication`,
             copy: {
                 text: 'User ID',
                 value: userId
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
similarity index 90%
rename from src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
index f5c76479c..a94217241 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
@@ -14,7 +14,9 @@
         try {
             await sdkForProject.teams.deleteMembership('tmpstring', 'tmpstring2');
             showDeleteAll = false;
-            await goto(`${base}/console/${$page.params.project}/users/${$user.$id}/membeships`);
+            await goto(
+                `${base}/console/${$page.params.project}/authentication/${$user.$id}/membeships`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
similarity index 93%
rename from src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
index 4d5cf77f8..09268f061 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/users/user/${selectedMembership.userId}/memberships`
+                `${base}/console/${$page.params.project}/authentication/user/${selectedMembership.userId}/memberships`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
index 2b2d31892..e33c24137 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
@@ -19,7 +19,7 @@
                 type: 'success',
                 message: `${$user.name} has been deleted`
             });
-            await goto(`${base}/console/${$page.params.project}/users`);
+            await goto(`${base}/console/${$page.params.project}/authentication`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/activity.svelte
rename to src/routes/console/[project]/authentication/user/[user]/activity.svelte
index 54bb14966..a4695372d 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -89,7 +89,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetLogs"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetLogs"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/index.svelte
rename to src/routes/console/[project]/authentication/user/[user]/index.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/memberships.svelte b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
similarity index 96%
rename from src/routes/console/[project]/users/user/[user]/memberships.svelte
rename to src/routes/console/[project]/authentication/user/[user]/memberships.svelte
index db1ec6dea..0e87bf573 100644
--- a/src/routes/console/[project]/users/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
@@ -51,7 +51,7 @@
                 <TableBody>
                     {#each response.memberships as membership}
                         <TableRowLink
-                            href={`${base}/console/${project}/users/user/${membership.userId}`}>
+                            href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar
@@ -87,7 +87,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetMemberships"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetMemberships"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/sessions.svelte
rename to src/routes/console/[project]/authentication/user/[user]/sessions.svelte
index ca1057375..c0a39a3ba 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
@@ -94,7 +94,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetSessions"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/store.ts b/src/routes/console/[project]/authentication/user/[user]/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/store.ts
rename to src/routes/console/[project]/authentication/user/[user]/store.ts

From ffe28a4b27f4be1286d115af8eb4b514149f00d7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 14:03:26 +0200
Subject: [PATCH 04/27] fix: users tabs

---
 .../console/[project]/authentication/__layout.svelte   | 10 +++++-----
 .../{authentication.svelte => settings.svelte}         |  0
 .../authentication/teams/[team]/__layout.svelte        |  2 +-
 .../authentication/user/[user]/__layout.svelte         |  2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/routes/console/[project]/authentication/{authentication.svelte => settings.svelte} (100%)

diff --git a/src/routes/console/[project]/authentication/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
index a5ccdc10f..1cd29c7c1 100644
--- a/src/routes/console/[project]/authentication/__layout.svelte
+++ b/src/routes/console/[project]/authentication/__layout.svelte
@@ -3,7 +3,7 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
 
-    const path = 'users';
+    const path = 'authentication';
 
     onMount(handle);
     afterNavigate(handle);
@@ -28,10 +28,6 @@
                     href: `${path}/teams`,
                     title: 'Teams'
                 },
-                {
-                    href: `${path}/authentication`,
-                    title: 'Authentication'
-                },
                 {
                     href: `${path}/usage`,
                     title: 'Usage'
@@ -39,6 +35,10 @@
                 {
                     href: `${path}/security`,
                     title: 'Security'
+                },
+                {
+                    href: `${path}/settings`,
+                    title: 'Settings'
                 }
             ]
         });
diff --git a/src/routes/console/[project]/authentication/authentication.svelte b/src/routes/console/[project]/authentication/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/authentication.svelte
rename to src/routes/console/[project]/authentication/settings.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
index 3e9540e70..d9ca9bb49 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
@@ -7,7 +7,7 @@
     import { onMount } from 'svelte';
 
     const teamId = $page.params.team;
-    const path = `users/teams/${teamId}`;
+    const path = `authentication/teams/${teamId}`;
 
     onMount(handle);
     afterNavigate(handle);
diff --git a/src/routes/console/[project]/authentication/user/[user]/__layout.svelte b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
index c3361abe4..dd75f563e 100644
--- a/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
@@ -7,7 +7,7 @@
     import { user } from './store';
 
     const userId = $page.params.user;
-    const path = `users/user/${userId}`;
+    const path = `authentication/user/${userId}`;
 
     onMount(handle);
     afterNavigate(handle);

From 9d7eefe3707fe9753138467e79fc74bfd4c41426 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 14:04:53 +0200
Subject: [PATCH 05/27] chore: remove old unused component

---
 src/lib/components/index.ts                   |  2 -
 src/lib/components/switchBox.svelte           | 48 ------------
 src/lib/components/switchBoxes.svelte         | 13 ----
 .../unit/components/switchBox.test.ignore.ts  | 74 -------------------
 4 files changed, 137 deletions(-)
 delete mode 100644 src/lib/components/switchBox.svelte
 delete mode 100644 src/lib/components/switchBoxes.svelte
 delete mode 100644 tests/unit/components/switchBox.test.ignore.ts

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 19350c38f..cf6f6b43b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -20,8 +20,6 @@ export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export { default as Avatar } from './avatar.svelte';
-export { default as SwitchBox } from './switchBox.svelte';
-export { default as SwitchBoxes } from './switchBoxes.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
diff --git a/src/lib/components/switchBox.svelte b/src/lib/components/switchBox.svelte
deleted file mode 100644
index 53ef2a1a7..000000000
--- a/src/lib/components/switchBox.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
-    type SwitchBox = {
-        label: string;
-        id: string;
-        src: string;
-        alt: string;
-        href: string;
-        linkText: string;
-        value: boolean;
-        required: boolean;
-        disabled: boolean;
-        wip: boolean;
-    };
-
-    export let box: SwitchBox;
-
-    let { label, id, src, alt, href, linkText, disabled, required, value, wip } = box;
-
-    const dispatch = createEventDispatcher();
-
-    //TODO: move SwitchBox type outside  component
-</script>
-
-<li class="card">
-    <label class="switch-box" for={id}>
-        <div class="switch-box-image">
-            <img height="50" width="50" src={src || 'https://via.placeholder.com/50'} {alt} />
-        </div>
-        <span class="switch-box-title">{label}</span>
-        {#if !wip}
-            <a {href} class="link" target="_blank">
-                <span class="text">{linkText || 'Docs'} </span>
-                <span class="icon-link-ext" aria-hidden="true" />
-            </a>
-            <input
-                {id}
-                {disabled}
-                {required}
-                type="checkbox"
-                class="switch"
-                role="switch"
-                bind:checked={value}
-                on:change={() => dispatch('updated', { value, id })} />
-        {/if}
-    </label>
-</li>
diff --git a/src/lib/components/switchBoxes.svelte b/src/lib/components/switchBoxes.svelte
deleted file mode 100644
index 9bbec18f9..000000000
--- a/src/lib/components/switchBoxes.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-    import SwitchBox from './switchBox.svelte';
-    import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-
-    export let boxes;
-</script>
-
-<ul class="grid-box">
-    {#each boxes as box}
-        <SwitchBox {box} on:updated={(e) => dispatch('updated', e.detail)} />
-    {/each}
-</ul>
diff --git a/tests/unit/components/switchBox.test.ignore.ts b/tests/unit/components/switchBox.test.ignore.ts
deleted file mode 100644
index a2f4c538d..000000000
--- a/tests/unit/components/switchBox.test.ignore.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, fireEvent } from '@testing-library/svelte';
-import { SwitchBox } from '../../../src/lib/components';
-
-const box = {
-    id: 'input',
-    src: 'https://via.placeholder.com/50',
-    label: 'Bool',
-    alt: 'image',
-    required: false,
-    disabled: false,
-    value: false
-};
-
-test('shows boolean input', () => {
-    const { getByText, getByRole, getByAltText } = render(SwitchBox, {
-        box
-    });
-    const checkbox = getByRole('switch');
-    const img = getByAltText('image');
-
-    expect(getByText('Bool')).toBeInTheDocument();
-    expect(img).toBeInTheDocument();
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('type', 'checkbox');
-});
-
-test('shows boolean input - required', () => {
-    box.required = true;
-    const { getByRole } = render(SwitchBox, { box });
-
-    expect(getByRole('switch')).toBeRequired();
-});
-
-test('shows boolean input - disabled', () => {
-    box.disabled = true;
-    const { getByRole } = render(SwitchBox, { box });
-
-    expect(getByRole('switch')).toBeDisabled();
-});
-
-test('state', async () => {
-    const { getByRole, component } = render(SwitchBox, { box });
-    const checkbox = getByRole('switch');
-
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-
-    await fireEvent.click(checkbox);
-    setTimeout(() => {
-        expect(checkbox).toBeChecked();
-        expect(component.box.value).toStrictEqual(true);
-    }, 1);
-
-    await fireEvent.click(checkbox);
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-
-    component.box.value = true;
-    setTimeout(() => {
-        expect(checkbox).toBeChecked();
-        expect(component.box.value).toStrictEqual(true);
-    }, 1);
-
-    component.box.value = false;
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-});

From c6f3bad7ee75aa302c8d71a8284fc25a70bd0637 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:02:25 +0200
Subject: [PATCH 06/27] style: update activity page

---
 .../teams/[team]/activity.svelte               |  4 ++--
 .../authentication/user/[user]/activity.svelte | 18 +++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index dabae43a0..3f2881bd7 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -39,7 +39,7 @@
                         <TableRow>
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="image-item">
+                                    <div class="avatar is-small">
                                         <img
                                             height="20"
                                             width="20"
@@ -48,7 +48,7 @@
                                             }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
                                             alt={log.clientName} />
                                     </div>
-                                    <p class="u-line-height-1-5">
+                                    <p class="text u-trim">
                                         {log.clientName}
                                         {log.clientVersion}
                                         on {log.osName}
diff --git a/src/routes/console/[project]/authentication/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
index a4695372d..8100cd430 100644
--- a/src/routes/console/[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -39,7 +39,7 @@
                         <TableRow>
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="image-item">
+                                    <div class="avatar is-small">
                                         <img
                                             height="20"
                                             width="20"
@@ -48,16 +48,12 @@
                                             }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
                                             alt={log.clientName} />
                                     </div>
-                                    <span class="u-line-height-1-5">
-                                        <p>
-                                            {log.clientName}
-                                            {log.clientVersion}
-                                        </p>
-                                        <span class="u-small">
-                                            on {log.osName}
-                                            {log.osVersion}
-                                        </span>
-                                    </span>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
                                 </div>
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>

From 02d28678bb697834716ff491e9e38763eb5112ec Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:37:33 +0200
Subject: [PATCH 07/27] chore: update css

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 965d160ca..1ae439b95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-37",
-                "@aw-labs/ui": "0.0.0-37",
+                "@aw-labs/icons": "0.0.0-39",
+                "@aw-labs/ui": "0.0.0-39",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -69,14 +69,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-37.tgz",
-            "integrity": "sha512-4II+SFnVlDWuFwlzU2pMAy5y9Bq09bOEP1mEknZ+0BlPhDlvks742N5m0cNjlTQFCZwa/Y5YxzLNXgVszFqEfA=="
+            "version": "0.0.0-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
+            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-37.tgz",
-            "integrity": "sha512-OxAM0ZDedo6yipN3I5CcHt1Jbc7v3vZk9k+hAVWc7F6OPF5JJ7R3ZadVvyl4fxEMo2ooK+jbbkeG62/PxgwEWw==",
+            "version": "0.0.0-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
+            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -8060,14 +8060,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-37.tgz",
-            "integrity": "sha512-4II+SFnVlDWuFwlzU2pMAy5y9Bq09bOEP1mEknZ+0BlPhDlvks742N5m0cNjlTQFCZwa/Y5YxzLNXgVszFqEfA=="
+            "version": "0.0.0-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
+            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-37.tgz",
-            "integrity": "sha512-OxAM0ZDedo6yipN3I5CcHt1Jbc7v3vZk9k+hAVWc7F6OPF5JJ7R3ZadVvyl4fxEMo2ooK+jbbkeG62/PxgwEWw==",
+            "version": "0.0.0-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
+            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 973a854ac..397458ba9 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-37",
-        "@aw-labs/ui": "0.0.0-37",
+        "@aw-labs/icons": "0.0.0-39",
+        "@aw-labs/ui": "0.0.0-39",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From a224a5d2bd35cdf350c8862d33d2bb96b2718d03 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:37:59 +0200
Subject: [PATCH 08/27] feat: move tag to top right

---
 .../authentication/user/[user]/index.svelte   | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index 63a3b772c..eff6a55a1 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -193,37 +193,39 @@
             <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
                 <Avatar size={48} name={$user.name} src={getAvatar($user.name)} />
                 <h6 class="heading-level-7">{$user.name}</h6>
-                {#if !$user.status}
-                    <Pill danger>blocked</Pill>
-                {:else if $user.email && $user.phone}
-                    <Pill success={$user.emailVerification || $user.phoneVerification}>
-                        {$user.emailVerification && $user.phoneVerification
-                            ? 'verified'
-                            : $user.emailVerification
-                            ? 'verified email'
-                            : $user.phoneVerification
-                            ? 'verified phone'
-                            : 'unverified'}
-                    </Pill>
-                {:else}
-                    <Pill success={$user.emailVerification || $user.phoneVerification}>
-                        {$user.emailVerification
-                            ? 'verified '
-                            : $user.phoneVerification
-                            ? 'verified '
-                            : 'unverified'}
-                    </Pill>
-                {/if}
             </div>
             <svelte:fragment slot="aside">
-                <div>
-                    {#if $user.email}
-                        <p class="title">{$user.email}</p>
+                <div class="u-flex u-main-space-between">
+                    <div>
+                        {#if $user.email}
+                            <p class="title">{$user.email}</p>
+                        {/if}
+                        {#if $user.phone}
+                            <p class="title">{$user.phone}</p>
+                        {/if}
+                        <p>Joined: {toLocaleDateTime($user.registration)}</p>
+                    </div>
+                    {#if !$user.status}
+                        <Pill danger>blocked</Pill>
+                    {:else if $user.email && $user.phone}
+                        <Pill success={$user.emailVerification || $user.phoneVerification}>
+                            {$user.emailVerification && $user.phoneVerification
+                                ? 'verified'
+                                : $user.emailVerification
+                                ? 'verified email'
+                                : $user.phoneVerification
+                                ? 'verified phone'
+                                : 'unverified'}
+                        </Pill>
+                    {:else}
+                        <Pill success={$user.emailVerification || $user.phoneVerification}>
+                            {$user.emailVerification
+                                ? 'verified '
+                                : $user.phoneVerification
+                                ? 'verified '
+                                : 'unverified'}
+                        </Pill>
                     {/if}
-                    {#if $user.phone}
-                        <p class="title">{$user.phone}</p>
-                    {/if}
-                    <p>Joined: {toLocaleDateTime($user.registration)}</p>
                 </div>
             </svelte:fragment>
 

From a68b3339a741ace19d8f64550e8c131537eb2315 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 13:10:52 +0200
Subject: [PATCH 09/27] typo: auth methods label

---
 src/lib/stores/auth-methods.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index 82b7ecb6d..8ca530178 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -5,7 +5,7 @@ function createAuthMethods() {
     const { subscribe, set } = writable({
         list: [
             {
-                label: 'Password',
+                label: 'Email/Password',
                 method: 'email-password',
                 value: null
             },
@@ -43,7 +43,7 @@ function createAuthMethods() {
         load: (project: Models.Project) => {
             const list = [
                 {
-                    label: 'Password',
+                    label: 'Email/Password',
                     method: 'email-password',
                     value: project.authEmailPassword
                 },

From f82b8410f5023ee7f104a1092574f91d459a29f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 16:55:24 +0200
Subject: [PATCH 10/27] chore: add missing browser icons

---
 static/icons/dark/color/firefox.svg           | 106 ++++++++++++++++++
 static/icons/dark/color/microsoft_edge.svg    |  41 +++++++
 static/icons/dark/color/opera.svg             |  17 +++
 static/icons/dark/color/safari.svg            |  42 +++++++
 static/icons/dark/grayscale/firefox.svg       |   3 +
 .../icons/dark/grayscale/microsoft_edge.svg   |   3 +
 static/icons/dark/grayscale/opera.svg         |   3 +
 static/icons/dark/grayscale/safari.svg        |   3 +
 static/icons/light/color/firefox.svg          | 106 ++++++++++++++++++
 static/icons/light/color/microsoft_edge.svg   |  41 +++++++
 static/icons/light/color/opera.svg            |  17 +++
 static/icons/light/color/safari.svg           |  42 +++++++
 static/icons/light/grayscale/firefox.svg      |   3 +
 .../icons/light/grayscale/microsoft_edge.svg  |   3 +
 static/icons/light/grayscale/opera.svg        |   3 +
 static/icons/light/grayscale/safari.svg       |   3 +
 16 files changed, 436 insertions(+)
 create mode 100644 static/icons/dark/color/firefox.svg
 create mode 100644 static/icons/dark/color/microsoft_edge.svg
 create mode 100644 static/icons/dark/color/opera.svg
 create mode 100644 static/icons/dark/color/safari.svg
 create mode 100644 static/icons/dark/grayscale/firefox.svg
 create mode 100644 static/icons/dark/grayscale/microsoft_edge.svg
 create mode 100644 static/icons/dark/grayscale/opera.svg
 create mode 100644 static/icons/dark/grayscale/safari.svg
 create mode 100644 static/icons/light/color/firefox.svg
 create mode 100644 static/icons/light/color/microsoft_edge.svg
 create mode 100644 static/icons/light/color/opera.svg
 create mode 100644 static/icons/light/color/safari.svg
 create mode 100644 static/icons/light/grayscale/firefox.svg
 create mode 100644 static/icons/light/grayscale/microsoft_edge.svg
 create mode 100644 static/icons/light/grayscale/opera.svg
 create mode 100644 static/icons/light/grayscale/safari.svg

diff --git a/static/icons/dark/color/firefox.svg b/static/icons/dark/color/firefox.svg
new file mode 100644
index 000000000..2c2d6095e
--- /dev/null
+++ b/static/icons/dark/color/firefox.svg
@@ -0,0 +1,106 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6185 9.33929C20.2208 8.38252 19.4142 7.34949 18.7826 7.02293C19.233 7.89514 19.5457 8.83184 19.7094 9.79973L19.7111 9.81507C18.6764 7.23662 16.9225 6.19533 15.4892 3.93092C15.4167 3.8164 15.3442 3.70164 15.2736 3.58051C15.2332 3.51133 15.2009 3.44899 15.1728 3.39161C15.1134 3.27652 15.0676 3.15488 15.0363 3.02917C15.0364 3.02337 15.0343 3.01775 15.0304 3.0134C15.0266 3.00904 15.0213 3.00625 15.0155 3.00555C15.0099 3.00401 15.0039 3.00401 14.9983 3.00555C14.9971 3.00555 14.9952 3.00768 14.9938 3.00815C14.9924 3.00862 14.9893 3.01075 14.9872 3.01169L14.9907 3.00555C12.6921 4.35145 11.9117 6.84254 11.8409 8.08926C10.9226 8.15222 10.0446 8.49049 9.32146 9.05996C9.24604 8.99608 9.16721 8.93633 9.08533 8.88098C8.87683 8.15111 8.86795 7.37867 9.0596 6.64419C8.21543 7.05311 7.46534 7.63282 6.85681 8.34663H6.85256C6.48988 7.8869 6.51538 6.371 6.53616 6.05436C6.42887 6.09748 6.32645 6.15186 6.23062 6.21658C5.91045 6.44508 5.61113 6.70149 5.33619 6.98279C5.02288 7.30045 4.73672 7.64379 4.48072 8.00921V8.01063V8.00898C3.89243 8.84287 3.47512 9.78502 3.25289 10.781L3.24061 10.8415C3.22337 10.922 3.16127 11.3253 3.15065 11.4129C3.15065 11.4198 3.14923 11.4261 3.14852 11.433C3.06842 11.8493 3.01878 12.271 3 12.6946V12.7418C3.00404 15.0318 3.86647 17.2372 5.41703 18.9224C6.96759 20.6077 9.0936 21.6504 11.3754 21.8447C13.6572 22.0391 15.9289 21.3709 17.7421 19.9722C19.5553 18.5734 20.7783 16.5457 21.1696 14.2893C21.1849 14.1713 21.1974 14.0544 21.2111 13.9352C21.3996 12.3772 21.1956 10.7968 20.6175 9.33787L20.6185 9.33929ZM10.0709 16.5032C10.1136 16.5238 10.1538 16.546 10.1977 16.5656L10.2041 16.5696C10.1597 16.5483 10.1153 16.5262 10.0709 16.5032ZM19.7113 9.81767V9.80893L19.7129 9.81862L19.7113 9.81767Z" fill="url(#paint0_linear_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint1_radial_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint2_radial_4475_59607)"/>
+<path d="M16.1699 10.4137C16.1898 10.4276 16.2082 10.4415 16.2268 10.4554C15.997 10.0478 15.7108 9.67463 15.3768 9.34686C12.5315 6.50159 14.6314 3.17935 14.9853 3.00935L14.9889 3.00415C12.6902 4.35005 11.9098 6.84113 11.839 8.08785C11.9457 8.08053 12.0515 8.07156 12.1606 8.07156C12.9761 8.07314 13.7767 8.29063 14.4809 8.70192C15.1851 9.11322 15.7679 9.70365 16.1699 10.4132V10.4137Z" fill="url(#paint3_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint4_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint5_radial_4475_59607)"/>
+<path d="M8.89265 8.75618C8.96679 8.8034 9.02795 8.84449 9.08155 8.88156C8.87305 8.15169 8.86416 7.37925 9.05581 6.64478C8.21164 7.05369 7.46155 7.6334 6.85303 8.34721C6.89765 8.34603 8.22513 8.32219 8.89265 8.75618Z" fill="url(#paint6_radial_4475_59607)"/>
+<path d="M3.08267 12.9592C3.78891 17.1315 7.57135 20.3192 11.864 20.4396C15.838 20.552 18.3763 18.2451 19.4247 15.9958C20.3129 14.0506 20.4149 11.8374 19.7094 9.81882V9.81008C19.7094 9.80323 19.708 9.79922 19.7094 9.80135L19.7111 9.81669C20.0357 11.9364 18.9576 13.989 17.2719 15.3797L17.2667 15.3915C13.9823 18.0668 10.8395 17.0052 10.2043 16.5721C10.1599 16.5509 10.1156 16.5288 10.0712 16.5058C8.15646 15.5906 7.36521 13.8471 7.53522 12.35C7.08071 12.3568 6.63401 12.2315 6.24924 11.9895C5.86447 11.7475 5.55815 11.399 5.36738 10.9864C5.87004 10.6785 6.44317 10.5045 7.03217 10.4808C7.62116 10.4572 8.2064 10.5847 8.73212 10.8514C9.81575 11.3433 11.0488 11.3917 12.1677 10.9864C12.1642 10.9121 10.5715 10.2781 9.95051 9.66652C9.61876 9.33949 9.46127 9.182 9.32172 9.0637C9.2463 8.99982 9.16748 8.94007 9.0856 8.88472C9.03129 8.84765 8.97013 8.80751 8.8967 8.75934C8.22918 8.32535 6.9017 8.3492 6.85779 8.35038H6.85354C6.49085 7.89065 6.51635 6.37474 6.53713 6.05811C6.42984 6.10123 6.32742 6.1556 6.23159 6.22032C5.91142 6.44883 5.6121 6.70523 5.33716 6.98654C5.02273 7.3033 4.73538 7.64585 4.47815 8.0106V8.01201V8.01036C3.88986 8.84425 3.47255 9.7864 3.25032 10.7824C3.24583 10.8011 2.92069 12.2225 3.08102 12.9597L3.08267 12.9592Z" fill="url(#paint7_radial_4475_59607)"/>
+<path d="M15.3766 9.34646C15.7107 9.6746 15.9969 10.0482 16.2267 10.4562C16.2769 10.4943 16.3239 10.532 16.3638 10.5686C18.4386 12.4812 17.3515 15.1848 17.2705 15.3761C18.956 13.9874 20.0332 11.9334 19.7097 9.81304C18.6745 7.23223 16.9187 6.19093 15.4878 3.92652C15.4153 3.812 15.3428 3.69725 15.2722 3.57612C15.2319 3.50693 15.1995 3.4446 15.1714 3.38722C15.112 3.27212 15.0662 3.15048 15.0349 3.02477C15.035 3.01897 15.0329 3.01336 15.0291 3.009C15.0252 3.00465 15.0199 3.00186 15.0142 3.00116C15.0085 2.99961 15.0026 2.99961 14.9969 3.00116C14.9957 3.00116 14.9939 3.00329 14.9924 3.00376C14.991 3.00423 14.988 3.00636 14.9858 3.0073C14.6319 3.17518 12.5325 6.49954 15.3778 9.34245L15.3766 9.34646Z" fill="url(#paint8_radial_4475_59607)"/>
+<path d="M16.3635 10.5695C16.3236 10.5329 16.2766 10.4951 16.2264 10.4571C16.2077 10.4432 16.1893 10.4293 16.1694 10.4153C15.5257 9.96946 14.7394 9.77853 13.9629 9.87957C17.2544 11.5253 16.3713 17.1923 11.8097 16.9798C11.4035 16.9631 11.0022 16.8856 10.6189 16.75C10.5294 16.7165 10.4398 16.6798 10.3502 16.64C10.2985 16.6164 10.2468 16.5927 10.1958 16.5663L10.2022 16.5703C10.8383 17.0045 13.9801 18.0654 17.2646 15.3897L17.2698 15.3779C17.3517 15.1866 18.4388 12.483 16.3631 10.5705L16.3635 10.5695Z" fill="url(#paint9_radial_4475_59607)"/>
+<path d="M8.04026 13.5683C8.04026 13.5683 8.46268 11.994 11.065 11.994C11.3462 11.994 12.1511 11.2089 12.1655 10.9813C11.0466 11.3866 9.8136 11.3381 8.72997 10.8462C8.20425 10.5796 7.61901 10.452 7.03002 10.4757C6.44102 10.4993 5.86789 10.6734 5.36523 10.9813C5.556 11.3939 5.86232 11.7423 6.24709 11.9843C6.63186 12.2264 7.07856 12.3516 7.53307 12.3449C7.36353 13.8412 8.15454 15.5845 10.069 16.5007C10.1118 16.5212 10.1519 16.5434 10.1958 16.563C9.07825 15.9857 8.15549 14.8938 8.04026 13.569V13.5683Z" fill="url(#paint10_radial_4475_59607)"/>
+<path d="M20.6184 9.33929C20.2207 8.38252 19.4141 7.34949 18.7825 7.02293C19.2329 7.89514 19.5456 8.83184 19.7093 9.79973L19.7109 9.81507C18.6763 7.23662 16.9223 6.19533 15.4891 3.93092C15.4166 3.8164 15.3441 3.70164 15.2735 3.58051C15.2331 3.51133 15.2008 3.44899 15.1727 3.39161C15.1133 3.27652 15.0674 3.15488 15.0362 3.02917C15.0362 3.02337 15.0342 3.01775 15.0303 3.0134C15.0265 3.00904 15.0212 3.00625 15.0154 3.00555C15.0098 3.00401 15.0038 3.00401 14.9982 3.00555C14.997 3.00555 14.9951 3.00768 14.9937 3.00815C14.9923 3.00862 14.9892 3.01075 14.9871 3.01169L14.9906 3.00555C12.692 4.35145 11.9116 6.84254 11.8408 8.08926C11.9475 8.08194 12.0533 8.07297 12.1624 8.07297C12.9779 8.07454 13.7785 8.29204 14.4827 8.70333C15.1869 9.11462 15.7697 9.70505 16.1717 10.4146C15.528 9.96872 14.7417 9.77779 13.9652 9.87883C17.2567 11.5246 16.3736 17.1915 11.812 16.979C11.4058 16.9623 11.0044 16.8849 10.6212 16.7493C10.5316 16.7157 10.4421 16.6791 10.3525 16.6392C10.3008 16.6156 10.2491 16.592 10.1981 16.5656L10.2044 16.5696C10.1601 16.5483 10.1157 16.5262 10.0713 16.5032C10.114 16.5238 10.1542 16.546 10.1981 16.5656C9.0805 15.988 8.15774 14.8962 8.04251 13.5715C8.04251 13.5715 8.46493 11.9973 11.0672 11.9973C11.3485 11.9973 12.1534 11.2122 12.1678 10.9846C12.1643 10.9102 10.5716 10.2762 9.95061 9.66466C9.61886 9.33764 9.46137 9.18014 9.32182 9.06184C9.2464 8.99796 9.16758 8.93822 9.0857 8.88286C8.8772 8.15299 8.86831 7.38056 9.05996 6.64608C8.21579 7.055 7.46571 7.63471 6.85718 8.34852H6.85293C6.49025 7.88879 6.51575 6.37289 6.53653 6.05625C6.42923 6.09937 6.32681 6.15375 6.23099 6.21847C5.91081 6.44697 5.6115 6.70338 5.33656 6.98468C5.02324 7.30234 4.73709 7.64568 4.48109 8.0111V8.01252V8.01087C3.8928 8.84476 3.47549 9.78691 3.25325 10.7829L3.24097 10.8434C3.22374 10.9239 3.14653 11.3329 3.13543 11.4207C3.0648 11.8429 3.0197 12.2689 3.00037 12.6965V12.7437C3.00441 15.0337 3.86684 17.239 5.41739 18.9243C6.96795 20.6095 9.09396 21.6523 11.3757 21.8466C13.6575 22.0409 15.9293 21.3728 17.7425 19.974C19.5557 18.5753 20.7787 16.5476 21.1699 14.2912C21.1853 14.1732 21.1978 14.0563 21.2115 13.9371C21.4 12.3791 21.1959 10.7987 20.6179 9.33976L20.6184 9.33929ZM19.7105 9.80941L19.7121 9.81909L19.7105 9.80941Z" fill="url(#paint11_linear_4475_59607)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59607" x1="19.4072" y1="5.92872" x2="4.21438" y2="20.5872" gradientUnits="userSpaceOnUse">
+<stop offset="0.048" stop-color="#FFF44F"/>
+<stop offset="0.111" stop-color="#FFE847"/>
+<stop offset="0.225" stop-color="#FFC830"/>
+<stop offset="0.368" stop-color="#FF980E"/>
+<stop offset="0.401" stop-color="#FF8B16"/>
+<stop offset="0.462" stop-color="#FF672A"/>
+<stop offset="0.534" stop-color="#FF3647"/>
+<stop offset="0.705" stop-color="#E31587"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8192 5.12925) scale(19.0786)">
+<stop offset="0.129" stop-color="#FFBD4F"/>
+<stop offset="0.186" stop-color="#FFAC31"/>
+<stop offset="0.247" stop-color="#FF9D17"/>
+<stop offset="0.283" stop-color="#FF980E"/>
+<stop offset="0.403" stop-color="#FF563B"/>
+<stop offset="0.467" stop-color="#FF3750"/>
+<stop offset="0.71" stop-color="#F5156C"/>
+<stop offset="0.782" stop-color="#EB0878"/>
+<stop offset="0.86" stop-color="#E50080"/>
+</radialGradient>
+<radialGradient id="paint2_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.7355 12.9213) scale(19.0786)">
+<stop offset="0.3" stop-color="#960E18"/>
+<stop offset="0.351" stop-color="#B11927" stop-opacity="0.74"/>
+<stop offset="0.435" stop-color="#DB293D" stop-opacity="0.343"/>
+<stop offset="0.497" stop-color="#F5334B" stop-opacity="0.094"/>
+<stop offset="0.53" stop-color="#FF3750" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0968 0.879053) scale(13.8202)">
+<stop offset="0.132" stop-color="#FFF44F"/>
+<stop offset="0.252" stop-color="#FFDC3E"/>
+<stop offset="0.506" stop-color="#FF9D12"/>
+<stop offset="0.526" stop-color="#FF980E"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.61049 17.88) scale(9.08361)">
+<stop offset="0.353" stop-color="#3A8EE6"/>
+<stop offset="0.472" stop-color="#5C79F0"/>
+<stop offset="0.669" stop-color="#9059FF"/>
+<stop offset="1" stop-color="#C139E6"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.6583 11.2837) rotate(-13.5916) scale(4.81691 5.6394)">
+<stop offset="0.206" stop-color="#9059FF" stop-opacity="0"/>
+<stop offset="0.278" stop-color="#8C4FF3" stop-opacity="0.064"/>
+<stop offset="0.747" stop-color="#7716A8" stop-opacity="0.45"/>
+<stop offset="0.975" stop-color="#6E008B" stop-opacity="0.6"/>
+</radialGradient>
+<radialGradient id="paint6_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 4.42098) scale(6.53585 6.53585)">
+<stop stop-color="#FFE226"/>
+<stop offset="0.121" stop-color="#FFDB27"/>
+<stop offset="0.295" stop-color="#FFC82A"/>
+<stop offset="0.502" stop-color="#FFA930"/>
+<stop offset="0.732" stop-color="#FF7E37"/>
+<stop offset="0.792" stop-color="#FF7139"/>
+</radialGradient>
+<radialGradient id="paint7_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.6942 0.170877) scale(27.886 27.886)">
+<stop offset="0.113" stop-color="#FFF44F"/>
+<stop offset="0.456" stop-color="#FF980E"/>
+<stop offset="0.622" stop-color="#FF5634"/>
+<stop offset="0.716" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint8_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.3764 1.71689) rotate(83.976) scale(20.4353 13.4115)">
+<stop stop-color="#FFF44F"/>
+<stop offset="0.06" stop-color="#FFE847"/>
+<stop offset="0.168" stop-color="#FFC830"/>
+<stop offset="0.304" stop-color="#FF980E"/>
+<stop offset="0.356" stop-color="#FF8B16"/>
+<stop offset="0.455" stop-color="#FF672A"/>
+<stop offset="0.57" stop-color="#FF3647"/>
+<stop offset="0.737" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint9_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 6.78212) scale(17.4069)">
+<stop offset="0.137" stop-color="#FFF44F"/>
+<stop offset="0.48" stop-color="#FF980E"/>
+<stop offset="0.592" stop-color="#FF5634"/>
+<stop offset="0.655" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint10_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9858 7.7266) scale(19.0527)">
+<stop offset="0.094" stop-color="#FFF44F"/>
+<stop offset="0.231" stop-color="#FFE141"/>
+<stop offset="0.509" stop-color="#FFAF1E"/>
+<stop offset="0.626" stop-color="#FF980E"/>
+</radialGradient>
+<linearGradient id="paint11_linear_4475_59607" x1="19.2229" y1="5.8508" x2="6.29757" y2="18.7785" gradientUnits="userSpaceOnUse">
+<stop offset="0.167" stop-color="#FFF44F" stop-opacity="0.8"/>
+<stop offset="0.266" stop-color="#FFF44F" stop-opacity="0.634"/>
+<stop offset="0.489" stop-color="#FFF44F" stop-opacity="0.217"/>
+<stop offset="0.6" stop-color="#FFF44F" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/microsoft_edge.svg b/static/icons/dark/color/microsoft_edge.svg
new file mode 100644
index 000000000..07a4e636c
--- /dev/null
+++ b/static/icons/dark/color/microsoft_edge.svg
@@ -0,0 +1,41 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint0_linear_4475_59727)"/>
+<path opacity="0.35" d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint1_radial_4475_59727)"/>
+<path d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint2_linear_4475_59727)"/>
+<path opacity="0.41" d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint3_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint4_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint5_radial_4475_59727)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59727" x1="7.13306" y1="15.4626" x2="19.6942" y2="15.4626" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C59A4"/>
+<stop offset="1" stop-color="#114A8B"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0684 15.5573) scale(6.71711 6.38126)">
+<stop offset="0.7" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<linearGradient id="paint2_linear_4475_59727" x1="13.7517" y1="10.0128" x2="5.91502" y2="18.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B9DE2"/>
+<stop offset="0.2" stop-color="#1595DF"/>
+<stop offset="0.7" stop-color="#0680D7"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<radialGradient id="paint3_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.96782 17.0071) rotate(-81.3844) scale(10.0958 8.1564)">
+<stop offset="0.8" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.82291 6.33152) rotate(92.2906) scale(14.2624 30.3759)">
+<stop stop-color="#35C1F1"/>
+<stop offset="0.1" stop-color="#34C1ED"/>
+<stop offset="0.2" stop-color="#2FC2DF"/>
+<stop offset="0.3" stop-color="#2BC3D2"/>
+<stop offset="0.7" stop-color="#36C752"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.9026 8.44269) rotate(73.7398) scale(6.85089 5.57115)">
+<stop stop-color="#66EB6E"/>
+<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/opera.svg b/static/icons/dark/color/opera.svg
new file mode 100644
index 000000000..0efa1752f
--- /dev/null
+++ b/static/icons/dark/color/opera.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2051 2.58969C7.1213 2.58969 3 6.71099 3 11.7948C3 16.7315 6.88651 20.7606 11.7667 20.9892C11.9124 20.9961 12.0582 21 12.2053 21C14.562 21 16.7114 20.1138 18.34 18.6574C17.2609 19.373 15.9994 19.7848 14.6512 19.7848C12.4591 19.7848 10.4958 18.6973 9.17542 16.9823C8.15755 15.7808 7.49829 14.0047 7.45338 12.0115V11.578C7.49826 9.58484 8.15752 7.8084 9.17516 6.60718C10.4958 4.89225 12.459 3.80476 14.651 3.80476C15.9995 3.80476 17.2612 4.2165 18.3404 4.93255C16.7198 3.48281 14.5834 2.59844 12.2398 2.58974C12.2281 2.58974 12.2166 2.58928 12.2049 2.58928L12.2051 2.58969Z" fill="url(#paint0_linear_4475_59675)"/>
+<path d="M9.17529 6.6077C10.02 5.61045 11.111 5.00909 12.3029 5.00909C14.9828 5.00909 17.1549 8.04738 17.1549 11.7952C17.1549 15.5431 14.9826 18.5814 12.3029 18.5814C11.111 18.5814 10.02 17.9803 9.17552 16.983C10.4959 18.6979 12.459 19.7854 14.6513 19.7854C15.9996 19.7854 17.2611 19.3737 18.3401 18.6581C20.2242 16.9725 21.4106 14.5225 21.4106 11.7953C21.4106 9.06843 20.2244 6.61858 18.3407 4.93317C17.2615 4.21711 15.9997 3.80537 14.6513 3.80537C12.4592 3.80537 10.496 4.89287 9.17555 6.6078" fill="url(#paint1_linear_4475_59675)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59675" x1="10.6704" y1="2.88975" x2="10.6704" y2="20.7324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF1B2D"/>
+<stop offset="0.3" stop-color="#FF1B2D"/>
+<stop offset="0.614" stop-color="#FF1B2D"/>
+<stop offset="1" stop-color="#A70014"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4475_59675" x1="15.2928" y1="3.94157" x2="15.2928" y2="19.7224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9C0000"/>
+<stop offset="0.7" stop-color="#FF4B4B"/>
+<stop offset="1" stop-color="#FF4B4B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/safari.svg b/static/icons/dark/color/safari.svg
new file mode 100644
index 000000000..3b7c36e91
--- /dev/null
+++ b/static/icons/dark/color/safari.svg
@@ -0,0 +1,42 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4475_59705)">
+<g opacity="0.53" filter="url(#filter0_f_4475_59705)">
+<path d="M20.6716 12.7379C20.6716 13.8343 20.4473 14.92 20.0116 15.933C19.5758 16.946 18.9371 17.8664 18.132 18.6417C17.3268 19.417 16.371 20.032 15.319 20.4516C14.267 20.8712 13.1395 21.0872 12.0009 21.0872C10.8622 21.0872 9.73473 20.8712 8.68276 20.4516C7.63078 20.032 6.67493 19.417 5.86979 18.6417C5.06464 17.8664 4.42596 16.946 3.99022 15.933C3.55447 14.92 3.3302 13.8343 3.3302 12.7379C3.3302 10.5235 4.24372 8.39981 5.86979 6.83401C7.49585 5.26821 9.70128 4.38855 12.0009 4.38855C13.1395 4.38855 14.267 4.60451 15.319 5.0241C16.371 5.4437 17.3268 6.0587 18.132 6.83401C18.9371 7.60931 19.5758 8.52973 20.0116 9.54272C20.4473 10.5557 20.6716 11.6414 20.6716 12.7379Z" fill="black" fill-opacity="0.5"/>
+</g>
+<path d="M21.0018 12.0009C21.0018 13.1829 20.769 14.3533 20.3166 15.4454C19.8643 16.5374 19.2013 17.5297 18.3655 18.3655C17.5297 19.2013 16.5374 19.8643 15.4454 20.3166C14.3533 20.769 13.1829 21.0018 12.0009 21.0018C9.6137 21.0018 7.32429 20.0535 5.6363 18.3655C3.9483 16.6775 3 14.3881 3 12.0009C3 9.6137 3.9483 7.32429 5.6363 5.6363C7.32429 3.94831 9.6137 3 12.0009 3C13.1829 3 14.3533 3.23282 15.4454 3.68515C16.5374 4.13749 17.5297 4.80049 18.3655 5.6363C19.2013 6.47211 19.8643 7.46436 20.3166 8.5564C20.769 9.64843 21.0018 10.8189 21.0018 12.0009Z" fill="url(#paint0_linear_4475_59705)" stroke="#CDCDCD" stroke-width="0.351543" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2964 12.0009C20.2964 14.201 19.4224 16.311 17.8666 17.8668C16.3109 19.4225 14.2009 20.2965 12.0008 20.2965C9.80066 20.2965 7.69064 19.4225 6.13492 17.8668C4.5792 16.311 3.7052 14.201 3.7052 12.0009C3.7052 9.80078 4.5792 7.69077 6.13492 6.13504C7.69064 4.57932 9.80066 3.70532 12.0008 3.70532C14.2009 3.70532 16.3109 4.57932 17.8666 6.13504C19.4224 7.69077 20.2964 9.80078 20.2964 12.0009Z" fill="url(#paint1_radial_4475_59705)"/>
+<path d="M12.0009 4.13794C11.9339 4.13794 11.8799 4.19188 11.8799 4.25888V5.65396C11.8799 5.72096 11.9339 5.7749 12.0009 5.7749C12.0679 5.7749 12.1218 5.72096 12.1218 5.65396V4.25888C12.1218 4.19188 12.0679 4.13794 12.0009 4.13794ZM11.2097 4.18795C11.2016 4.18709 11.1934 4.18709 11.1851 4.18805C11.1184 4.195 11.0704 4.25425 11.0773 4.32089L11.1383 4.90453C11.1452 4.97117 11.2045 5.01923 11.2711 5.01227C11.3378 5.00532 11.3858 4.94607 11.3789 4.87942L11.318 4.29579C11.3119 4.23748 11.2657 4.19339 11.2096 4.18795H11.2097ZM12.7976 4.18852C12.7416 4.19392 12.6954 4.238 12.6893 4.29631L12.6279 4.8799C12.6209 4.94654 12.6689 5.00584 12.7356 5.01285C12.8022 5.01986 12.8615 4.97185 12.8685 4.90521L12.9299 4.32158C12.9369 4.25494 12.8888 4.19568 12.8222 4.18868C12.8138 4.18781 12.8057 4.18781 12.7976 4.18853V4.18852ZM10.3969 4.30581C10.3888 4.30587 10.3806 4.30667 10.3724 4.3084C10.3069 4.32228 10.2653 4.38624 10.2792 4.45179L10.5681 5.81658C10.582 5.88214 10.6459 5.92374 10.7115 5.90987C10.777 5.89599 10.8186 5.83208 10.8047 5.76653L10.5158 4.40168C10.5037 4.34432 10.4532 4.3053 10.3969 4.30574L10.3969 4.30581ZM13.6104 4.30696C13.554 4.30639 13.5036 4.34545 13.4914 4.4028L13.2015 5.76743C13.1875 5.83298 13.2291 5.89695 13.2946 5.91088C13.3602 5.92481 13.4242 5.88324 13.4381 5.8177L13.728 4.45306C13.7419 4.38752 13.7003 4.32354 13.6348 4.30962C13.6266 4.3079 13.6184 4.30703 13.6104 4.30703L13.6104 4.30696ZM9.62118 4.52452C9.60552 4.52309 9.58935 4.52481 9.57341 4.5301C9.50969 4.55082 9.47504 4.61874 9.49575 4.68247L9.67709 5.24058C9.6978 5.30431 9.76578 5.33896 9.82951 5.31825C9.89324 5.29753 9.92784 5.22956 9.90713 5.16583L9.72579 4.60772C9.71027 4.55993 9.66815 4.52851 9.62118 4.52451V4.52452ZM14.3817 4.52481C14.3347 4.52881 14.2926 4.56022 14.2771 4.60801L14.0956 5.16608C14.0749 5.2298 14.1095 5.29778 14.1732 5.3185C14.237 5.33921 14.305 5.30459 14.3257 5.24088L14.5071 4.68276C14.5278 4.61904 14.4932 4.55106 14.4295 4.53034C14.4136 4.52517 14.3973 4.52348 14.3817 4.5248V4.52481ZM8.85412 4.80523C8.8384 4.80551 8.8225 4.80896 8.80719 4.81577C8.746 4.84298 8.71859 4.91416 8.7458 4.97539L9.31243 6.2502C9.33964 6.31142 9.41082 6.3388 9.47205 6.31158C9.53324 6.28437 9.56071 6.21319 9.53349 6.15196L8.96681 4.87716C8.94641 4.83123 8.90125 4.80431 8.85412 4.80523ZM15.1574 4.8095C15.1103 4.80864 15.0651 4.83539 15.0446 4.88128L14.4763 6.1553C14.449 6.21649 14.4762 6.28773 14.5374 6.31503C14.5986 6.34233 14.6699 6.31504 14.6972 6.25385L15.2655 4.97983C15.2928 4.91864 15.2655 4.8474 15.2043 4.8201C15.189 4.81329 15.1731 4.80985 15.1574 4.8095V4.8095ZM8.14212 5.18195C8.1189 5.18022 8.09498 5.18539 8.07322 5.19798C8.01519 5.23148 7.99545 5.30516 8.02895 5.36319L8.32236 5.8714C8.35587 5.92943 8.42955 5.94917 8.48758 5.91566C8.54561 5.88216 8.56534 5.80848 8.53184 5.75045L8.23843 5.24225C8.21748 5.20598 8.18083 5.18466 8.14212 5.18195V5.18195ZM15.8596 5.18195C15.8209 5.18453 15.7843 5.20597 15.7634 5.24224L15.4699 5.75044C15.4364 5.80847 15.4562 5.88215 15.5142 5.91565C15.5723 5.94916 15.6459 5.92942 15.6794 5.87139L15.9729 5.36318C16.0064 5.30515 15.9866 5.23147 15.9286 5.19797C15.9068 5.18541 15.8829 5.18033 15.8596 5.18194V5.18195ZM7.45074 5.61316C7.42747 5.61402 7.40417 5.62149 7.38383 5.63623C7.32959 5.67558 7.3176 5.75091 7.35696 5.80515L8.17612 6.93437C8.21546 6.98861 8.29085 7.0006 8.34508 6.96127C8.39932 6.92192 8.41131 6.84659 8.37195 6.79235L7.55274 5.66313C7.52815 5.62923 7.48951 5.61185 7.45074 5.61317V5.61316ZM16.5597 5.61931C16.5209 5.61787 16.4823 5.63526 16.4576 5.66911L15.6369 6.79723C15.5975 6.85141 15.6094 6.92678 15.6636 6.9662C15.7178 7.00562 15.7931 6.99376 15.8325 6.93959L16.6532 5.81147C16.6926 5.75728 16.6807 5.68192 16.6266 5.6425C16.6062 5.62773 16.5829 5.62014 16.5597 5.61931ZM6.83276 6.13143C6.80189 6.12971 6.77038 6.14002 6.74548 6.16244C6.69568 6.20727 6.69168 6.28344 6.73652 6.33324L7.12916 6.76941C7.17399 6.81921 7.25015 6.82322 7.29995 6.77837C7.34976 6.73354 7.35377 6.65733 7.30892 6.60753L6.91634 6.1714C6.89392 6.14649 6.86364 6.13304 6.83276 6.13142V6.13143ZM17.1699 6.1323C17.139 6.13402 17.1087 6.14738 17.0863 6.17228L16.6937 6.60835C16.6488 6.65815 16.6528 6.73436 16.7026 6.7792C16.7524 6.82403 16.8286 6.82001 16.8734 6.77023L17.2661 6.33416C17.3109 6.28436 17.3069 6.20815 17.2571 6.16332C17.2322 6.1409 17.2008 6.13069 17.1699 6.13231L17.1699 6.1323ZM6.24046 6.70038C6.20959 6.7021 6.17935 6.71546 6.15694 6.74036C6.11211 6.79016 6.11612 6.86633 6.16591 6.91116L7.20273 7.84452C7.25254 7.88936 7.3287 7.88535 7.37352 7.83556C7.41836 7.78576 7.4144 7.70959 7.36459 7.66476L6.32771 6.7314C6.3028 6.70898 6.27131 6.69877 6.24043 6.70039L6.24046 6.70038ZM17.7651 6.70445C17.7342 6.70273 17.7026 6.71302 17.6777 6.73541L16.6403 7.66805C16.5904 7.71284 16.5863 7.78901 16.6311 7.83885C16.6759 7.88868 16.7522 7.89272 16.802 7.84793L17.8395 6.91529C17.8893 6.87049 17.8934 6.79432 17.8486 6.74449C17.8262 6.71958 17.7959 6.7061 17.7651 6.70445H17.7651ZM5.74791 7.33372C5.70913 7.33228 5.67048 7.34975 5.64586 7.38362C5.60648 7.43783 5.61842 7.51315 5.67264 7.55253L6.14739 7.89747C6.2016 7.93685 6.27692 7.92496 6.3163 7.87074C6.35569 7.81653 6.34377 7.74116 6.28958 7.70178L5.81483 7.35685C5.79452 7.34208 5.77118 7.33455 5.74791 7.33371L5.74791 7.33372ZM18.2571 7.33811C18.2339 7.33898 18.2106 7.34642 18.1902 7.36119L17.7153 7.70581C17.661 7.74516 17.649 7.82054 17.6884 7.87478C17.7277 7.92901 17.803 7.94095 17.8573 7.90161L18.3323 7.55699C18.3865 7.51765 18.3985 7.44231 18.3591 7.38808C18.3345 7.35418 18.2959 7.3368 18.2571 7.33812V7.33811ZM5.28762 8.00929C5.24892 8.01188 5.21231 8.03331 5.19137 8.06958C5.15786 8.12761 5.1776 8.20129 5.23563 8.23479L6.44377 8.93232C6.5018 8.96583 6.57548 8.94609 6.60899 8.88806C6.64249 8.83003 6.62275 8.75635 6.56472 8.72285L5.35657 8.02531C5.33482 8.01275 5.31084 8.00767 5.28762 8.00928V8.00929ZM18.7141 8.00929C18.6909 8.00757 18.6669 8.01274 18.6452 8.02532L17.437 8.72286C17.379 8.75636 17.3593 8.83004 17.3928 8.88807C17.4263 8.9461 17.5 8.96584 17.558 8.93233L18.7662 8.2348C18.8242 8.2013 18.8439 8.12762 18.8104 8.06959C18.7895 8.03332 18.7528 8.01201 18.7141 8.0093V8.00929ZM4.9396 8.72937C4.89247 8.72822 4.84727 8.75521 4.8268 8.80109C4.7995 8.86229 4.82679 8.93353 4.88798 8.96082L5.42396 9.1999C5.48516 9.22719 5.5564 9.19991 5.58369 9.13872C5.61099 9.07752 5.58365 9.00629 5.52246 8.97899L4.98654 8.73992C4.97125 8.73308 4.95531 8.72969 4.9396 8.72937ZM19.0645 8.73434C19.0488 8.73463 19.0328 8.73808 19.0175 8.74489L18.4814 8.98354C18.4202 9.01081 18.3928 9.082 18.4201 9.14322C18.4474 9.20443 18.5186 9.23181 18.5798 9.20456L19.1159 8.96585C19.1771 8.93861 19.2045 8.86738 19.1772 8.80617C19.1568 8.76026 19.1116 8.73341 19.0645 8.73434ZM4.62944 9.48199C4.58247 9.48593 4.54035 9.51731 4.52479 9.56509C4.50404 9.6288 4.53857 9.69681 4.60229 9.71757L5.92873 10.1498C5.99243 10.1705 6.06044 10.136 6.0812 10.0723C6.10195 10.0085 6.06741 9.94054 6.00368 9.91979L4.67726 9.48757C4.66134 9.48237 4.6451 9.48068 4.62944 9.482V9.48199ZM19.3741 9.48717C19.3584 9.48573 19.3423 9.48745 19.3263 9.49274L17.9996 9.92401C17.9359 9.94472 17.9013 10.0127 17.922 10.0764C17.9427 10.1402 18.0107 10.1748 18.0744 10.154L19.4011 9.72278C19.4648 9.70206 19.4995 9.63408 19.4788 9.57036C19.4632 9.52257 19.4211 9.49114 19.3741 9.48716V9.48717ZM4.4362 10.272C4.37986 10.2715 4.32932 10.3106 4.31713 10.3679C4.3032 10.4335 4.34478 10.4974 4.41031 10.5114L4.98434 10.6334C5.04988 10.6473 5.11385 10.6057 5.12778 10.5402C5.14172 10.4746 5.10015 10.4107 5.03461 10.3967L4.46063 10.2747C4.45244 10.273 4.44425 10.2722 4.4362 10.2722V10.272ZM19.5658 10.2732C19.5578 10.2732 19.5496 10.2743 19.5415 10.2758L18.9674 10.3977C18.9019 10.4116 18.8603 10.4756 18.8742 10.5411C18.8882 10.6066 18.9521 10.6482 19.0177 10.6343L19.5917 10.5124C19.6572 10.4985 19.6988 10.4345 19.6849 10.3689C19.6727 10.3116 19.6222 10.2726 19.5658 10.2731L19.5658 10.2732ZM4.28994 11.0667C4.23385 11.0721 4.18768 11.1161 4.18152 11.1744C4.17448 11.241 4.22242 11.3004 4.28905 11.3074L5.6764 11.4541C5.74303 11.4611 5.80236 11.4131 5.8094 11.3465C5.81644 11.2799 5.76845 11.2205 5.70182 11.2135L4.31447 11.0668C4.30614 11.066 4.29796 11.066 4.28994 11.0667V11.0667ZM19.7131 11.0771C19.7051 11.0763 19.6969 11.0763 19.6885 11.0772L18.301 11.222C18.2344 11.229 18.1863 11.2882 18.1933 11.3549C18.2002 11.4215 18.2595 11.4696 18.3261 11.4626L19.7136 11.3178C19.7803 11.3109 19.8283 11.2516 19.8214 11.185C19.8153 11.1267 19.7692 11.0826 19.7131 11.0771L19.7131 11.0771ZM4.26645 11.8802C4.19944 11.8802 4.14551 11.9341 4.14551 12.0011C4.14551 12.0681 4.19944 12.1221 4.26645 12.1221H4.85328C4.92028 12.1221 4.97427 12.0681 4.97427 12.0011C4.97427 11.9341 4.92028 11.8802 4.85328 11.8802H4.26645ZM19.1485 11.8802C19.0815 11.8802 19.0275 11.9341 19.0275 12.0011C19.0275 12.0681 19.0815 12.1221 19.1485 12.1221H19.7353C19.8023 12.1221 19.8563 12.0681 19.8563 12.0011C19.8563 11.9341 19.8023 11.8802 19.7353 11.8802H19.1485ZM5.7002 12.5395C5.69219 12.5386 5.68399 12.5386 5.67566 12.5396L4.28811 12.6844C4.22146 12.6913 4.17342 12.7506 4.18037 12.8172C4.18733 12.8839 4.24657 12.9319 4.31321 12.925L5.70077 12.7802C5.76742 12.7732 5.81546 12.714 5.80851 12.6473C5.80242 12.589 5.75628 12.5449 5.70019 12.5395H5.7002ZM18.3008 12.5481C18.2447 12.5534 18.1986 12.5974 18.1924 12.6557C18.1854 12.7224 18.2333 12.7817 18.2999 12.7887L19.6873 12.9354C19.7539 12.9425 19.8132 12.8945 19.8203 12.8278C19.8273 12.7612 19.7793 12.7019 19.7127 12.6948L18.3254 12.5482C18.3171 12.5473 18.3088 12.5473 18.3008 12.5481L18.3008 12.5481ZM5.00856 13.3651C5.00052 13.3652 4.99233 13.366 4.98414 13.3677L4.41011 13.4897C4.34456 13.5036 4.30301 13.5676 4.31693 13.6331C4.33087 13.6986 4.39483 13.7402 4.46038 13.7263L5.03441 13.6044C5.09995 13.5905 5.1415 13.5265 5.12758 13.4609C5.1154 13.4036 5.06492 13.3646 5.00857 13.3651L5.00856 13.3651ZM18.993 13.3663C18.9367 13.3657 18.8862 13.4048 18.874 13.4621C18.8601 13.5277 18.9016 13.5916 18.9672 13.6056L19.5412 13.7275C19.6067 13.7415 19.6707 13.7 19.6846 13.6344C19.6986 13.5689 19.657 13.5049 19.5915 13.4909L19.0175 13.3689C19.0093 13.3672 19.0011 13.3664 18.993 13.3664L18.993 13.3663ZM5.97519 13.8426C5.95953 13.8412 5.94335 13.8429 5.92742 13.8482L4.60068 14.2795C4.53695 14.3002 4.50234 14.3682 4.52306 14.4319C4.54378 14.4956 4.61175 14.5302 4.67548 14.5095L6.00218 14.0783C6.0659 14.0575 6.10056 13.9896 6.07984 13.9258C6.0643 13.878 6.02216 13.8466 5.97519 13.8426V13.8426ZM18.0253 13.8469C17.9783 13.8509 17.9362 13.8822 17.9206 13.93C17.8999 13.9937 17.9344 14.0617 17.9981 14.0825L19.3246 14.5147C19.3883 14.5355 19.4563 14.5009 19.477 14.4372C19.4978 14.3735 19.4632 14.3055 19.3995 14.2847L18.0731 13.8525C18.0572 13.8473 18.0409 13.8456 18.0253 13.8469V13.8469ZM5.46891 14.7872C5.45319 14.7875 5.43728 14.7909 5.42198 14.7977L4.88584 15.0364C4.82463 15.0637 4.79731 15.1349 4.82456 15.1961C4.85183 15.2573 4.92303 15.2846 4.98424 15.2574L5.52037 15.0187C5.58158 14.9915 5.60891 14.9203 5.58166 14.8591C5.56123 14.8132 5.51604 14.7863 5.46891 14.7872V14.7872ZM18.5309 14.7918C18.4838 14.7907 18.4386 14.8177 18.4181 14.8636C18.3908 14.9248 18.4181 14.996 18.4793 15.0233L19.0152 15.2624C19.0764 15.2897 19.1477 15.2624 19.175 15.2012C19.2023 15.14 19.175 15.0688 19.1138 15.0415L18.5779 14.8024C18.5626 14.7955 18.5466 14.7922 18.5309 14.7918V14.7918ZM6.51273 15.0539C6.48952 15.0522 6.46554 15.0574 6.44377 15.07L5.23563 15.7675C5.1776 15.801 5.15786 15.8747 5.19137 15.9327C5.22487 15.9907 5.29854 16.0105 5.35657 15.977L6.56472 15.2795C6.62275 15.246 6.64249 15.1723 6.60899 15.1142C6.58804 15.078 6.55143 15.0566 6.51273 15.0539V15.0539ZM17.4891 15.0539C17.4504 15.0565 17.4137 15.078 17.3928 15.1142C17.3593 15.1722 17.379 15.246 17.437 15.2795L18.6452 15.977C18.7032 16.0105 18.7769 15.9907 18.8104 15.9327C18.8439 15.8747 18.8242 15.801 18.7662 15.7675L17.558 15.07C17.5362 15.0574 17.5123 15.0523 17.4891 15.0539V15.0539ZM6.21138 16.0776C6.18811 16.0784 6.16481 16.0859 6.14447 16.1007L5.6695 16.4453C5.61527 16.4846 5.60327 16.56 5.64261 16.6142C5.68196 16.6685 5.7573 16.6804 5.81153 16.6411L6.28654 16.2965C6.34078 16.2571 6.35277 16.1818 6.31343 16.1276C6.28884 16.0937 6.25016 16.0762 6.21138 16.0775V16.0776ZM17.7875 16.0816C17.7487 16.0802 17.7101 16.0977 17.6855 16.1315C17.6461 16.1857 17.658 16.2611 17.7122 16.3005L18.187 16.6454C18.2412 16.6848 18.3165 16.6729 18.3559 16.6187C18.3953 16.5644 18.3834 16.4891 18.3292 16.4497L17.8544 16.1048C17.8341 16.09 17.8108 16.0824 17.7875 16.0816L17.7875 16.0816ZM7.2871 16.1234C7.25623 16.1217 7.22474 16.132 7.19982 16.1543L6.16232 17.087C6.11249 17.1318 6.10844 17.2079 6.15324 17.2578C6.19803 17.3076 6.2742 17.3117 6.32404 17.2669L7.36154 16.3342C7.41137 16.2894 7.41542 16.2133 7.37062 16.1634C7.34824 16.1385 7.31797 16.125 7.2871 16.1234ZM16.7118 16.1267C16.6809 16.1284 16.6506 16.1418 16.6282 16.1667C16.5834 16.2165 16.5874 16.2927 16.6372 16.3375L17.674 17.2709C17.7238 17.3157 17.8 17.3117 17.8449 17.2619C17.8897 17.2121 17.8857 17.1359 17.8359 17.0911L16.799 16.1577C16.7741 16.1353 16.7427 16.1251 16.7118 16.1267V16.1267ZM8.27136 17.0128C8.23259 17.0113 8.1939 17.0287 8.16926 17.0625L7.34859 18.1907C7.30917 18.2449 7.32104 18.3202 7.3752 18.3596C7.42938 18.3991 7.50475 18.3872 7.54417 18.333L8.36484 17.2049C8.40426 17.1507 8.3924 17.0753 8.33824 17.0359C8.31792 17.0211 8.29463 17.0136 8.27136 17.0128ZM15.7237 17.0178C15.7004 17.0187 15.6771 17.0261 15.6567 17.0409C15.6025 17.0802 15.5905 17.1556 15.6298 17.2098L16.449 18.339C16.4883 18.3933 16.5637 18.4052 16.6179 18.3659C16.6722 18.3266 16.6841 18.2512 16.6448 18.197L15.8257 17.0678C15.8011 17.0339 15.7624 17.0165 15.7237 17.0178V17.0178ZM7.21193 17.192C7.18106 17.1938 7.15078 17.2071 7.12837 17.232L6.73572 17.6681C6.69088 17.7179 6.69485 17.7941 6.74466 17.839C6.79445 17.8838 6.87062 17.8798 6.91545 17.83L7.30814 17.3939C7.35299 17.3441 7.34897 17.2679 7.29918 17.223C7.27427 17.2006 7.24283 17.1904 7.21195 17.192L7.21193 17.192ZM16.7891 17.1926C16.7582 17.1909 16.7268 17.2012 16.7019 17.2236C16.6521 17.2685 16.6481 17.3446 16.6929 17.3944L17.0855 17.8306C17.1303 17.8804 17.2065 17.8844 17.2563 17.8396C17.3061 17.7947 17.3101 17.7185 17.2652 17.6687L16.8726 17.2326C16.8502 17.2077 16.8199 17.1942 16.7891 17.1926L16.7891 17.1926ZM9.4174 17.6764C9.37027 17.6753 9.32512 17.7022 9.30465 17.7481L8.73625 19.0221C8.70896 19.0833 8.73624 19.1546 8.79743 19.1819C8.85862 19.2092 8.92986 19.1819 8.95716 19.1207L9.52555 17.8467C9.55285 17.7855 9.52557 17.7142 9.46437 17.6869C9.44909 17.6801 9.43311 17.6767 9.4174 17.6764ZM14.5767 17.6799C14.561 17.6802 14.545 17.6836 14.5297 17.6904C14.4685 17.7176 14.4411 17.7888 14.4683 17.85L15.0349 19.1248C15.0622 19.186 15.1334 19.2134 15.1946 19.1862C15.2558 19.159 15.2832 19.0878 15.256 19.0266L14.6894 17.7518C14.669 17.7059 14.6238 17.679 14.5767 17.6799ZM8.41862 18.0703C8.37992 18.0729 8.3433 18.0943 8.32236 18.1306L8.02895 18.6388C7.99545 18.6968 8.01519 18.7705 8.07322 18.804C8.13124 18.8375 8.20493 18.8178 8.23843 18.7597L8.53184 18.2515C8.56534 18.1935 8.54561 18.1198 8.48758 18.0863C8.46583 18.0738 8.44184 18.0687 8.41862 18.0703V18.0703ZM15.5831 18.0703C15.5599 18.0686 15.536 18.0738 15.5142 18.0863C15.4562 18.1198 15.4365 18.1935 15.47 18.2515L15.7634 18.7598C15.7969 18.8178 15.8706 18.8375 15.9286 18.804C15.9866 18.7705 16.0064 18.6968 15.9729 18.6388L15.6794 18.1306C15.6585 18.0943 15.6218 18.073 15.5831 18.0703V18.0703ZM10.6827 18.0885C10.6264 18.0879 10.5759 18.127 10.5637 18.1844L10.2738 19.549C10.2599 19.6145 10.3015 19.6785 10.367 19.6924C10.4325 19.7064 10.4965 19.6648 10.5104 19.5993L10.8004 18.2346C10.8143 18.1691 10.7727 18.1051 10.7072 18.0912C10.699 18.0895 10.6908 18.0886 10.6828 18.0886L10.6827 18.0885ZM13.3147 18.0894C13.3067 18.0894 13.2986 18.0902 13.2904 18.092C13.2248 18.1058 13.1832 18.1698 13.1971 18.2353L13.486 19.6002C13.4999 19.6657 13.5638 19.7073 13.6294 19.6934C13.6949 19.6796 13.7365 19.6156 13.7227 19.55L13.4337 18.1853C13.4215 18.1279 13.3711 18.0889 13.3147 18.0893L13.3147 18.0894ZM12.0009 18.227C11.9339 18.227 11.8799 18.281 11.8799 18.348V19.743C11.8799 19.8101 11.9339 19.864 12.0009 19.864C12.0679 19.864 12.1218 19.8101 12.1218 19.743V18.348C12.1218 18.281 12.0679 18.227 12.0009 18.227ZM9.78075 18.6778C9.73378 18.6818 9.69163 18.7132 9.6761 18.761L9.4947 19.3191C9.47399 19.3829 9.50861 19.4508 9.57233 19.4716C9.63605 19.4923 9.70403 19.4576 9.72475 19.3939L9.90614 18.8358C9.92685 18.7721 9.89223 18.7041 9.82852 18.6834C9.8126 18.6782 9.79641 18.6765 9.78075 18.6778V18.6778ZM14.2201 18.6781C14.2044 18.6767 14.1882 18.6784 14.1723 18.6837C14.1086 18.7044 14.0739 18.7724 14.0946 18.8361L14.276 19.3942C14.2967 19.4579 14.3647 19.4925 14.4284 19.4718C14.4921 19.4511 14.5268 19.3832 14.5061 19.3194L14.3247 18.7613C14.3091 18.7135 14.267 18.6821 14.2201 18.6781V18.6781ZM11.2417 18.989C11.1856 18.9944 11.1394 19.0384 11.1333 19.0967L11.0719 19.6803C11.0649 19.747 11.1129 19.8062 11.1796 19.8132C11.2462 19.8202 11.3055 19.7722 11.3125 19.7056L11.3739 19.122C11.3809 19.0554 11.3329 18.9961 11.2662 18.9891C11.2579 18.9882 11.2497 18.9882 11.2417 18.989L11.2417 18.989ZM12.7552 18.9895C12.7472 18.9887 12.7389 18.9887 12.7306 18.9896C12.664 18.9966 12.6159 19.0558 12.6229 19.1225L12.6838 19.7062C12.6908 19.7728 12.75 19.8208 12.8167 19.8139C12.8833 19.8069 12.9314 19.7476 12.9244 19.681L12.8635 19.0974C12.8574 19.0391 12.8113 18.995 12.7552 18.9895L12.7552 18.9895Z" fill="#F4F2F3"/>
+<g opacity="0.409" filter="url(#filter1_f_4475_59705)">
+<path d="M17.6697 7.16309L11.0525 11.0077L6.86865 17.5943L12.9893 13.0608L17.6697 7.16309Z" fill="black"/>
+</g>
+<path d="M12.9491 12.9939L11.0524 11.0077L17.7807 6.48153L12.9491 12.9939Z" fill="#FF5150"/>
+<path d="M12.9492 12.994L11.0525 11.0077L6.22085 17.5201L12.9492 12.994Z" fill="#F1F1F1"/>
+<path opacity="0.243" d="M6.22095 17.5201L12.9493 12.994L17.7809 6.48157L6.22095 17.5201Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_f_4475_59705" x="-0.6698" y="0.38855" width="25.3414" height="24.6986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<filter id="filter1_f_4475_59705" x="4.3238" y="4.61823" width="15.8907" height="15.5209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.27243" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<linearGradient id="paint0_linear_4475_59705" x1="12.0009" y1="21.0018" x2="12.0009" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDBDBD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59705" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.0385 10.7914) scale(9.00093 9.00092)">
+<stop stop-color="#06C2E7"/>
+<stop offset="0.25" stop-color="#0DB8EC"/>
+<stop offset="0.5" stop-color="#12AEF1"/>
+<stop offset="0.75" stop-color="#1F86F9"/>
+<stop offset="1" stop-color="#107DDD"/>
+</radialGradient>
+<clipPath id="clip0_4475_59705">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/dark/grayscale/firefox.svg b/static/icons/dark/grayscale/firefox.svg
new file mode 100644
index 000000000..d73dc97f5
--- /dev/null
+++ b/static/icons/dark/grayscale/firefox.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3467 9.03797C19.9351 8.12658 19.1707 7.15823 18.5238 6.81646C19.0531 7.78481 19.3471 8.75316 19.4647 9.49367C18.465 7.0443 16.701 6.01899 15.2897 3.85443C15.2309 3.74051 15.1721 3.62658 15.0545 3.51266C14.9957 3.4557 14.9957 3.39873 14.9369 3.34177C14.8781 3.22785 14.8193 3.11392 14.8193 3C12.82 4.13924 11.9968 6.13291 11.7616 7.38608C11.1147 7.44304 10.5267 7.55696 9.99749 7.84177C9.87988 7.89873 9.82108 8.01266 9.87988 8.12658C9.93869 8.24051 10.0563 8.29747 10.1739 8.24051C10.6443 8.01266 11.1735 7.89873 11.7616 7.84177H11.8204C11.8792 7.84177 11.9968 7.84177 12.0556 7.84177C12.4672 7.84177 12.9376 7.89873 13.3492 8.01266H13.408C13.4668 8.01266 13.5256 8.06962 13.6432 8.06962C13.702 8.06962 13.7608 8.12658 13.8196 8.12658C13.8784 8.12658 13.8784 8.18354 13.9372 8.18354C13.9961 8.18354 14.0549 8.24051 14.1137 8.29747L14.1725 8.35443C14.2313 8.41139 14.2901 8.41139 14.3489 8.46835C14.4077 8.46835 14.4077 8.52532 14.4665 8.52532C15.1133 8.92405 15.6425 9.43671 16.0541 10.1203C15.5837 9.77848 14.7017 9.49367 13.8784 9.60759C17.1126 11.2025 16.2305 16.6139 11.7616 16.3861C11.3499 16.3861 10.9383 16.2722 10.5855 16.1582C10.4679 16.1013 10.4091 16.1013 10.2915 16.0443C10.2327 16.0443 10.1739 15.9873 10.1151 15.9873C8.99785 15.4177 8.11581 14.3924 7.99821 13.1392C7.99821 13.1392 8.40982 11.6582 10.9971 11.6582C11.2911 11.6582 12.0556 10.9177 12.0556 10.6899C12.0556 10.6329 10.4679 10.0063 9.87988 9.43671C9.52707 9.1519 9.40946 8.98101 9.23306 8.86709C9.17425 8.81013 9.05665 8.75316 8.99785 8.6962C8.82144 8.01266 8.76264 7.27215 8.99785 6.53165C8.05701 6.87342 7.29258 7.5 6.76336 8.06962C6.41054 7.61392 6.46934 6.18987 6.46934 5.90506C6.46934 5.90506 6.17533 6.01899 6.17533 6.07595C5.88132 6.24684 5.5285 6.53165 5.29329 6.75949C4.99928 7.0443 4.70527 7.38608 4.47006 7.72785C3.88204 8.52532 3.47042 9.43671 3.23521 10.3481C3.23521 10.3481 3.17641 10.6899 3.1176 11.1456C3.1176 11.2025 3.1176 11.2595 3.0588 11.3734C3.0588 11.5443 3 11.7152 3 11.8861C3 12 3 12.057 3 12.1709V12.2278C3 17.1266 6.99856 21 11.9968 21C16.4658 21 20.1703 17.8671 20.8759 13.7089C20.8759 13.5949 20.8759 13.481 20.9347 13.3671C21.1111 11.943 20.9347 10.3481 20.3467 9.03797Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/microsoft_edge.svg b/static/icons/dark/grayscale/microsoft_edge.svg
new file mode 100644
index 000000000..1a54e0f1f
--- /dev/null
+++ b/static/icons/dark/grayscale/microsoft_edge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9915 15.0939C10.3709 14.3974 9.94825 13.5653 9.81334 12.6338C9.54354 13.0498 9.3187 13.502 9.15681 13.9904C8.32941 16.4777 9.76837 19.58 12.2146 20.4845C14.3191 21.1899 16.6844 19.9327 18.2403 18.558C18.4741 18.2414 20.3178 16.6043 19.4005 16.4234C16.6844 17.8253 13.087 17.4274 10.9915 15.0939ZM11.5311 9.83897C12.4664 9.82993 11.5671 9.45006 11.1804 9.16063C10.245 8.64509 9.14782 8.39184 8.08658 8.39184C4.62406 8.42802 2.11936 10.6078 3.29302 14.2166C4.13841 17.7259 7.16924 20.5478 10.7487 21C8.90499 19.8332 7.78979 17.6445 7.78979 15.4647C7.86174 13.1764 9.26474 10.4902 11.5311 9.83897ZM3.72471 8.64509C6.45875 6.6191 10.8116 6.7819 13.1679 9.33248C14.0853 10.3364 14.7148 12.0459 13.8784 13.285C12.3135 14.9853 16.6484 15.2115 17.5748 14.9582C20.9384 14.307 21.8287 10.3726 20.2279 7.65923C18.699 4.58407 15.3084 2.97413 11.9808 3.00126C8.32941 2.93795 5.04676 5.26241 3.72471 8.64509Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/opera.svg b/static/icons/dark/grayscale/opera.svg
new file mode 100644
index 000000000..57a6f9113
--- /dev/null
+++ b/static/icons/dark/grayscale/opera.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.039 6.92844C8.0418 8.10292 7.3983 9.84079 7.3533 11.7884V12.2114C7.3992 14.1598 8.0427 15.895 9.0381 17.0713C10.3287 18.7471 12.2475 19.8108 14.3931 19.8108C15.6773 19.8079 16.9318 19.4239 17.9976 18.7075C16.241 20.2863 13.9314 21.1064 11.5725 20.9889C9.26213 20.8795 7.08262 19.8846 5.48637 18.2108C3.89012 16.537 2.99972 14.3128 3 11.9999C3 7.02834 7.0302 3 12 3H12.0333C14.2355 3.00591 16.3587 3.82145 17.9985 5.29136C16.9312 4.57592 15.6762 4.19203 14.3913 4.18798C12.2475 4.18798 10.3287 5.25266 9.0363 6.92844H9.0381H9.039ZM21 11.9999C21.0016 13.2666 20.735 14.5193 20.2177 15.6755C19.7003 16.8318 18.944 17.8654 17.9985 18.7084C15.69 19.8333 13.539 19.0467 12.8262 18.5554C15.0942 18.0568 16.8069 15.3154 16.8069 11.9999C16.8069 8.68341 15.0942 5.94295 12.8262 5.44526C13.5381 4.95477 15.69 4.16728 17.9985 5.29136C18.9441 6.13424 19.7005 7.16784 20.2178 8.32411C20.7352 9.48039 21.0017 10.7331 21 11.9999Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/safari.svg b/static/icons/dark/grayscale/safari.svg
new file mode 100644
index 000000000..4c38e6ebb
--- /dev/null
+++ b/static/icons/dark/grayscale/safari.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02846 3 3 7.02846 3 12C3 16.9715 7.02846 21 12 21C16.9715 21 21 16.9715 21 12C21 7.02846 16.9715 3 12 3ZM13.3985 4.24771L13.6739 4.30317L13.3444 5.95782L13.069 5.90267L13.3985 4.24771ZM10.6015 19.7493L10.3261 19.6938L10.6556 18.0392L10.931 18.0943L10.6015 19.7493ZM14.1509 4.42211L14.4197 4.50415L14.1745 5.31204L13.9058 5.23L14.1509 4.42211ZM9.84906 19.5769L9.58032 19.4948L9.82546 18.6869L10.0942 18.769L9.84906 19.5769ZM15.1445 4.7775L14.4984 6.33681L14.2386 6.22886L14.8844 4.66956L15.1445 4.77753V4.7775ZM8.85782 19.2215L9.50357 17.6625L9.76336 17.7705L9.11761 19.3295L8.85782 19.2215V19.2215ZM15.588 4.98816L15.8351 5.12068L15.4381 5.86448L15.1906 5.73158L15.588 4.98816ZM8.41201 19.0112L8.16485 18.8783L8.56315 18.1349L8.81065 18.2674L8.41201 19.0112ZM19.0125 8.4117L18.2694 8.80967L18.1368 8.56217L18.8793 8.1642C18.7995 8.02075 18.7151 7.87993 18.6262 7.74199L17.2237 8.68043L17.0695 8.44525L18.4723 7.50681C18.378 7.37293 18.28 7.24372 18.1777 7.11317L17.5276 7.64766L17.3486 7.42941L17.9986 6.89492C17.8927 6.77134 17.7804 6.65175 17.6678 6.53284L17.2276 6.97299L13.1251 13.1255L6.97232 17.2284L6.52949 17.6685C6.64874 17.7811 6.76934 17.8934 6.89492 17.999L7.42941 17.3489L7.64766 17.528L7.11317 18.1781C7.24038 18.2794 7.37293 18.3751 7.50681 18.4694L8.43859 17.0666L8.67377 17.2207L7.73535 18.6232C8.72293 19.26 9.85769 19.6816 11.0822 19.8224L11.1632 18.9823L11.4442 19.0102L11.3632 19.8503C11.5283 19.8649 11.6904 19.8716 11.8558 19.8752V18.1874H12.1372V19.8752C12.3026 19.8716 12.4681 19.8639 12.6302 19.8503L12.5461 19.0102L12.8272 18.9823L12.9112 19.8224C13.0763 19.8031 13.2381 19.7782 13.4002 19.7493L13.071 18.0963L13.3467 18.0412L13.6756 19.6949C13.837 19.66 13.9945 19.6188 14.1519 19.5739L13.9064 18.7667L14.1752 18.6847L14.4207 19.4926L14.1579 19.5729C14.4054 19.5025 14.6466 19.4198 14.8834 19.3271L14.2386 17.7705L14.4984 17.6625L15.1435 19.2195C15.294 19.1544 15.4402 19.0843 15.5856 19.0099L15.188 18.2674L15.4355 18.1349L15.8335 18.878C15.9776 18.7979 16.1201 18.7155 16.258 18.6262L15.3196 17.2237L15.5547 17.0696L16.4932 18.4724C16.6271 18.378 16.7563 18.2801 16.8868 18.1777L16.3523 17.5276L16.5706 17.3486L17.1051 18.002C17.2273 17.8964 17.3482 17.7841 17.4672 17.6712L16.2759 16.4799L16.4759 16.2796L17.6675 17.4712C17.7801 17.3516 17.8924 17.2327 17.9983 17.1054L17.3482 16.5709L17.5273 16.3527L18.1774 16.8872L18.1781 16.8869C18.2794 16.7563 18.3784 16.6271 18.4694 16.4999L17.0666 15.5614L17.2207 15.3262L18.6232 16.2646C18.8524 15.9095 19.0514 15.5338 19.2221 15.1432L17.6632 14.4977L17.7711 14.238L19.3304 14.8837C19.5749 14.2629 19.7433 13.6052 19.8224 12.9179L18.9823 12.8368L19.0102 12.5558L19.8503 12.6368C19.8649 12.4717 19.8715 12.3096 19.8752 12.1442L18.1874 12.1439V11.8628H19.8752C19.8715 11.6974 19.8639 11.532 19.8503 11.3699L19.0102 11.4539L18.9823 11.1729L19.8224 11.0888C19.7155 10.155 19.4411 9.24818 19.0125 8.4117H19.0125ZM4.99277 15.588L5.73521 15.1904L5.86777 15.4379L5.12498 15.8358C5.20402 15.98 5.28642 16.1205 5.37577 16.258L6.77862 15.3196L6.93376 15.5548L5.53091 16.4932V16.4922C5.62524 16.6261 5.71991 16.7589 5.82226 16.8858L6.47234 16.3514L6.65138 16.5696L6.0013 17.1041C6.10725 17.2267 6.21955 17.3473 6.33217 17.4665L6.77232 17.0264L10.8748 10.8736L17.0276 6.77103L17.4774 6.33087C17.3578 6.21826 17.2389 6.10598 17.1117 6.00001L16.5772 6.65012L16.3589 6.47107L16.8935 5.82094C16.7679 5.71997 16.6337 5.62429 16.4998 5.52962L15.5614 6.93244L15.3262 6.77733L16.2646 5.37448C15.277 4.73801 14.1423 4.31614 12.9178 4.1756L12.8367 5.01569L12.5557 4.98748L12.6368 4.14739C12.4717 4.1331 12.3096 4.12612 12.1441 4.12281V5.81031H11.8618V4.12281C11.6963 4.12612 11.5309 4.13377 11.3688 4.14739L11.4532 4.98748L11.1721 5.01572L11.0878 4.17562C9.86497 4.31614 8.72892 4.73469 7.74128 5.3715L8.67973 6.77432L8.44455 6.92946L7.5061 5.52664C7.37223 5.62229 7.24268 5.72028 7.11247 5.8226L7.64662 6.47271L7.4287 6.65175L6.89422 5.99832C6.7703 6.1043 6.65105 6.21657 6.5318 6.32918L7.72337 7.52042L7.52306 7.72073L6.33149 6.52949C6.21888 6.64874 6.1066 6.76934 6.00097 6.89492L6.65105 7.42941L6.472 7.64766L5.82189 7.11317C5.72059 7.24038 5.62491 7.37293 5.53057 7.50681L6.93674 8.43859L6.7816 8.6738L5.37876 7.73535C5.28817 7.87589 5.2022 8.01936 5.12099 8.16552L5.86442 8.56183L5.73156 8.81065L4.98844 8.41333C4.91442 8.55856 4.84485 8.70601 4.77983 8.85548L6.3388 9.5016L6.23083 9.76136L4.6722 9.11561C4.61173 9.26839 4.55694 9.42386 4.50578 9.58133L5.31199 9.82647L5.22995 10.0952L4.42504 9.85072C4.38054 10.0075 4.34201 10.166 4.3068 10.3268L5.95678 10.6556L5.90129 10.931L4.25131 10.6025C4.22206 10.7606 4.19849 10.9214 4.17956 11.0822L5.01999 11.1632L4.99176 11.4442L4.15166 11.3632C4.13704 11.5283 4.1304 11.6904 4.12708 11.8558L5.81458 11.8562V12.1372H4.12708C4.1304 12.3026 4.13805 12.4681 4.15166 12.6302L4.99176 12.5461L5.01999 12.8272L4.17956 12.9112C4.19849 13.0753 4.22408 13.2367 4.25232 13.3975L5.90264 13.069L5.95777 13.3443L4.3068 13.6732C4.34168 13.835 4.38352 13.9938 4.42802 14.1516L5.23093 13.9077L5.313 14.1765L4.50877 14.4207C4.55915 14.5767 4.61443 14.7312 4.67453 14.8837L6.22883 14.24L6.33681 14.4997L4.78183 15.1438C4.84694 15.295 4.91801 15.4421 4.99277 15.588ZM19.2214 8.85785L19.3294 9.11761L17.7704 9.76339L17.6625 9.50362L19.2214 8.85785ZM19.5759 9.8501L18.768 10.0956L18.6859 9.82684L19.4938 9.58136L19.5759 9.8501ZM19.7493 10.6015L18.0943 10.931L18.0392 10.6557L19.6938 10.3261L19.7493 10.6015ZM19.6951 13.6739L18.0405 13.3444L18.0956 13.069L19.7506 13.3985L19.6951 13.6739V13.6739ZM19.4938 14.4197L18.6859 14.1745L18.768 13.9058L19.5759 14.151L19.4938 14.4197ZM4.68187 9.09072L4.77888 8.85785C4.7454 8.93499 4.71306 9.01262 4.68187 9.09072ZM18.8773 15.8351L18.1322 15.4382L18.2647 15.1907L19.0098 15.588L18.8773 15.8351ZM8.16122 5.12074L8.40872 4.98818L8.80733 5.73164L8.55983 5.8645L8.16122 5.12074ZM9.11761 4.67161L9.76336 6.23092L9.5036 6.33886L8.85785 4.77989L9.11761 4.67161ZM9.84908 4.42214L10.0942 5.23003L9.82549 5.31207L9.58032 4.50418L9.84908 4.42214ZM10.6028 4.25007L10.9323 5.90469L10.6569 5.96018L10.3274 4.3052L10.6028 4.25007H10.6028ZM19.847 11.3118L19.829 11.1251C19.8327 11.1878 19.8393 11.2473 19.847 11.3118ZM18.6162 7.72511L18.489 7.5351C18.5305 7.59788 18.573 7.66099 18.6162 7.72511ZM18.1279 7.05343L18.0502 6.95873C18.0781 6.99029 18.103 7.02185 18.1279 7.05343ZM17.0376 5.94657L16.9433 5.86883C16.9782 5.89673 17.0064 5.92132 17.0376 5.94657ZM16.465 5.50973L16.2749 5.38385C16.3377 5.42702 16.4022 5.46822 16.465 5.50973ZM12.875 4.17464L12.685 4.15672C12.7477 4.16038 12.8122 4.16702 12.875 4.17467V4.17464ZM11.3117 4.15307L11.1217 4.17101C11.1845 4.16736 11.2472 4.16072 11.3117 4.15307ZM7.72503 5.38382L7.53502 5.50973C7.59782 5.46687 7.66093 5.4257 7.72503 5.38385V5.38382ZM7.05335 5.87215L6.96233 5.94657C6.99355 5.92199 7.02179 5.89707 7.05335 5.87215ZM5.94649 6.96239L5.86875 7.05675C5.89668 7.02519 5.92126 6.99364 5.94649 6.96239ZM5.50968 7.5351L5.38376 7.72511C5.42696 7.66231 5.46814 7.5992 5.50968 7.5351ZM4.17461 11.125L4.1567 11.315C4.16035 11.2522 4.16699 11.1891 4.17461 11.125ZM4.15304 12.6896L4.17098 12.8796C4.16733 12.8169 4.16066 12.7528 4.15304 12.6896ZM5.38379 16.2716L5.50971 16.4616C5.46684 16.4022 5.42564 16.3391 5.38379 16.2716ZM5.94652 17.0377C5.92193 17.0064 5.89702 16.9782 5.87212 16.9467L5.94652 17.0377ZM6.96236 18.0535L7.05337 18.1279C7.02182 18.1033 6.99358 18.0787 6.96236 18.0535ZM7.53504 18.4867L7.72506 18.6139C7.66228 18.5757 7.59917 18.5328 7.53504 18.4867ZM11.125 19.8254L11.315 19.8433C11.2522 19.8397 11.1891 19.833 11.125 19.8254V19.8254ZM12.6896 19.847L12.8763 19.829C12.8135 19.8327 12.7537 19.8393 12.6896 19.847H12.6896ZM16.2749 18.6162L16.465 18.489C16.4022 18.5305 16.3377 18.573 16.2749 18.6162ZM16.9466 18.1279L17.0413 18.0502C17.0097 18.0781 16.9782 18.103 16.9466 18.1279ZM17.5622 17.5755L17.5755 17.5622L17.5622 17.5755ZM18.0535 17.0377L18.1312 16.9433C18.1033 16.9749 18.0787 17.0064 18.0535 17.0377ZM19.847 12.685C19.8403 12.7478 19.8367 12.8122 19.829 12.875L19.847 12.685ZM18.6162 16.2749C18.5744 16.3377 18.5318 16.4022 18.489 16.465L18.6162 16.2749Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/light/color/firefox.svg b/static/icons/light/color/firefox.svg
new file mode 100644
index 000000000..2c2d6095e
--- /dev/null
+++ b/static/icons/light/color/firefox.svg
@@ -0,0 +1,106 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6185 9.33929C20.2208 8.38252 19.4142 7.34949 18.7826 7.02293C19.233 7.89514 19.5457 8.83184 19.7094 9.79973L19.7111 9.81507C18.6764 7.23662 16.9225 6.19533 15.4892 3.93092C15.4167 3.8164 15.3442 3.70164 15.2736 3.58051C15.2332 3.51133 15.2009 3.44899 15.1728 3.39161C15.1134 3.27652 15.0676 3.15488 15.0363 3.02917C15.0364 3.02337 15.0343 3.01775 15.0304 3.0134C15.0266 3.00904 15.0213 3.00625 15.0155 3.00555C15.0099 3.00401 15.0039 3.00401 14.9983 3.00555C14.9971 3.00555 14.9952 3.00768 14.9938 3.00815C14.9924 3.00862 14.9893 3.01075 14.9872 3.01169L14.9907 3.00555C12.6921 4.35145 11.9117 6.84254 11.8409 8.08926C10.9226 8.15222 10.0446 8.49049 9.32146 9.05996C9.24604 8.99608 9.16721 8.93633 9.08533 8.88098C8.87683 8.15111 8.86795 7.37867 9.0596 6.64419C8.21543 7.05311 7.46534 7.63282 6.85681 8.34663H6.85256C6.48988 7.8869 6.51538 6.371 6.53616 6.05436C6.42887 6.09748 6.32645 6.15186 6.23062 6.21658C5.91045 6.44508 5.61113 6.70149 5.33619 6.98279C5.02288 7.30045 4.73672 7.64379 4.48072 8.00921V8.01063V8.00898C3.89243 8.84287 3.47512 9.78502 3.25289 10.781L3.24061 10.8415C3.22337 10.922 3.16127 11.3253 3.15065 11.4129C3.15065 11.4198 3.14923 11.4261 3.14852 11.433C3.06842 11.8493 3.01878 12.271 3 12.6946V12.7418C3.00404 15.0318 3.86647 17.2372 5.41703 18.9224C6.96759 20.6077 9.0936 21.6504 11.3754 21.8447C13.6572 22.0391 15.9289 21.3709 17.7421 19.9722C19.5553 18.5734 20.7783 16.5457 21.1696 14.2893C21.1849 14.1713 21.1974 14.0544 21.2111 13.9352C21.3996 12.3772 21.1956 10.7968 20.6175 9.33787L20.6185 9.33929ZM10.0709 16.5032C10.1136 16.5238 10.1538 16.546 10.1977 16.5656L10.2041 16.5696C10.1597 16.5483 10.1153 16.5262 10.0709 16.5032ZM19.7113 9.81767V9.80893L19.7129 9.81862L19.7113 9.81767Z" fill="url(#paint0_linear_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint1_radial_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint2_radial_4475_59607)"/>
+<path d="M16.1699 10.4137C16.1898 10.4276 16.2082 10.4415 16.2268 10.4554C15.997 10.0478 15.7108 9.67463 15.3768 9.34686C12.5315 6.50159 14.6314 3.17935 14.9853 3.00935L14.9889 3.00415C12.6902 4.35005 11.9098 6.84113 11.839 8.08785C11.9457 8.08053 12.0515 8.07156 12.1606 8.07156C12.9761 8.07314 13.7767 8.29063 14.4809 8.70192C15.1851 9.11322 15.7679 9.70365 16.1699 10.4132V10.4137Z" fill="url(#paint3_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint4_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint5_radial_4475_59607)"/>
+<path d="M8.89265 8.75618C8.96679 8.8034 9.02795 8.84449 9.08155 8.88156C8.87305 8.15169 8.86416 7.37925 9.05581 6.64478C8.21164 7.05369 7.46155 7.6334 6.85303 8.34721C6.89765 8.34603 8.22513 8.32219 8.89265 8.75618Z" fill="url(#paint6_radial_4475_59607)"/>
+<path d="M3.08267 12.9592C3.78891 17.1315 7.57135 20.3192 11.864 20.4396C15.838 20.552 18.3763 18.2451 19.4247 15.9958C20.3129 14.0506 20.4149 11.8374 19.7094 9.81882V9.81008C19.7094 9.80323 19.708 9.79922 19.7094 9.80135L19.7111 9.81669C20.0357 11.9364 18.9576 13.989 17.2719 15.3797L17.2667 15.3915C13.9823 18.0668 10.8395 17.0052 10.2043 16.5721C10.1599 16.5509 10.1156 16.5288 10.0712 16.5058C8.15646 15.5906 7.36521 13.8471 7.53522 12.35C7.08071 12.3568 6.63401 12.2315 6.24924 11.9895C5.86447 11.7475 5.55815 11.399 5.36738 10.9864C5.87004 10.6785 6.44317 10.5045 7.03217 10.4808C7.62116 10.4572 8.2064 10.5847 8.73212 10.8514C9.81575 11.3433 11.0488 11.3917 12.1677 10.9864C12.1642 10.9121 10.5715 10.2781 9.95051 9.66652C9.61876 9.33949 9.46127 9.182 9.32172 9.0637C9.2463 8.99982 9.16748 8.94007 9.0856 8.88472C9.03129 8.84765 8.97013 8.80751 8.8967 8.75934C8.22918 8.32535 6.9017 8.3492 6.85779 8.35038H6.85354C6.49085 7.89065 6.51635 6.37474 6.53713 6.05811C6.42984 6.10123 6.32742 6.1556 6.23159 6.22032C5.91142 6.44883 5.6121 6.70523 5.33716 6.98654C5.02273 7.3033 4.73538 7.64585 4.47815 8.0106V8.01201V8.01036C3.88986 8.84425 3.47255 9.7864 3.25032 10.7824C3.24583 10.8011 2.92069 12.2225 3.08102 12.9597L3.08267 12.9592Z" fill="url(#paint7_radial_4475_59607)"/>
+<path d="M15.3766 9.34646C15.7107 9.6746 15.9969 10.0482 16.2267 10.4562C16.2769 10.4943 16.3239 10.532 16.3638 10.5686C18.4386 12.4812 17.3515 15.1848 17.2705 15.3761C18.956 13.9874 20.0332 11.9334 19.7097 9.81304C18.6745 7.23223 16.9187 6.19093 15.4878 3.92652C15.4153 3.812 15.3428 3.69725 15.2722 3.57612C15.2319 3.50693 15.1995 3.4446 15.1714 3.38722C15.112 3.27212 15.0662 3.15048 15.0349 3.02477C15.035 3.01897 15.0329 3.01336 15.0291 3.009C15.0252 3.00465 15.0199 3.00186 15.0142 3.00116C15.0085 2.99961 15.0026 2.99961 14.9969 3.00116C14.9957 3.00116 14.9939 3.00329 14.9924 3.00376C14.991 3.00423 14.988 3.00636 14.9858 3.0073C14.6319 3.17518 12.5325 6.49954 15.3778 9.34245L15.3766 9.34646Z" fill="url(#paint8_radial_4475_59607)"/>
+<path d="M16.3635 10.5695C16.3236 10.5329 16.2766 10.4951 16.2264 10.4571C16.2077 10.4432 16.1893 10.4293 16.1694 10.4153C15.5257 9.96946 14.7394 9.77853 13.9629 9.87957C17.2544 11.5253 16.3713 17.1923 11.8097 16.9798C11.4035 16.9631 11.0022 16.8856 10.6189 16.75C10.5294 16.7165 10.4398 16.6798 10.3502 16.64C10.2985 16.6164 10.2468 16.5927 10.1958 16.5663L10.2022 16.5703C10.8383 17.0045 13.9801 18.0654 17.2646 15.3897L17.2698 15.3779C17.3517 15.1866 18.4388 12.483 16.3631 10.5705L16.3635 10.5695Z" fill="url(#paint9_radial_4475_59607)"/>
+<path d="M8.04026 13.5683C8.04026 13.5683 8.46268 11.994 11.065 11.994C11.3462 11.994 12.1511 11.2089 12.1655 10.9813C11.0466 11.3866 9.8136 11.3381 8.72997 10.8462C8.20425 10.5796 7.61901 10.452 7.03002 10.4757C6.44102 10.4993 5.86789 10.6734 5.36523 10.9813C5.556 11.3939 5.86232 11.7423 6.24709 11.9843C6.63186 12.2264 7.07856 12.3516 7.53307 12.3449C7.36353 13.8412 8.15454 15.5845 10.069 16.5007C10.1118 16.5212 10.1519 16.5434 10.1958 16.563C9.07825 15.9857 8.15549 14.8938 8.04026 13.569V13.5683Z" fill="url(#paint10_radial_4475_59607)"/>
+<path d="M20.6184 9.33929C20.2207 8.38252 19.4141 7.34949 18.7825 7.02293C19.2329 7.89514 19.5456 8.83184 19.7093 9.79973L19.7109 9.81507C18.6763 7.23662 16.9223 6.19533 15.4891 3.93092C15.4166 3.8164 15.3441 3.70164 15.2735 3.58051C15.2331 3.51133 15.2008 3.44899 15.1727 3.39161C15.1133 3.27652 15.0674 3.15488 15.0362 3.02917C15.0362 3.02337 15.0342 3.01775 15.0303 3.0134C15.0265 3.00904 15.0212 3.00625 15.0154 3.00555C15.0098 3.00401 15.0038 3.00401 14.9982 3.00555C14.997 3.00555 14.9951 3.00768 14.9937 3.00815C14.9923 3.00862 14.9892 3.01075 14.9871 3.01169L14.9906 3.00555C12.692 4.35145 11.9116 6.84254 11.8408 8.08926C11.9475 8.08194 12.0533 8.07297 12.1624 8.07297C12.9779 8.07454 13.7785 8.29204 14.4827 8.70333C15.1869 9.11462 15.7697 9.70505 16.1717 10.4146C15.528 9.96872 14.7417 9.77779 13.9652 9.87883C17.2567 11.5246 16.3736 17.1915 11.812 16.979C11.4058 16.9623 11.0044 16.8849 10.6212 16.7493C10.5316 16.7157 10.4421 16.6791 10.3525 16.6392C10.3008 16.6156 10.2491 16.592 10.1981 16.5656L10.2044 16.5696C10.1601 16.5483 10.1157 16.5262 10.0713 16.5032C10.114 16.5238 10.1542 16.546 10.1981 16.5656C9.0805 15.988 8.15774 14.8962 8.04251 13.5715C8.04251 13.5715 8.46493 11.9973 11.0672 11.9973C11.3485 11.9973 12.1534 11.2122 12.1678 10.9846C12.1643 10.9102 10.5716 10.2762 9.95061 9.66466C9.61886 9.33764 9.46137 9.18014 9.32182 9.06184C9.2464 8.99796 9.16758 8.93822 9.0857 8.88286C8.8772 8.15299 8.86831 7.38056 9.05996 6.64608C8.21579 7.055 7.46571 7.63471 6.85718 8.34852H6.85293C6.49025 7.88879 6.51575 6.37289 6.53653 6.05625C6.42923 6.09937 6.32681 6.15375 6.23099 6.21847C5.91081 6.44697 5.6115 6.70338 5.33656 6.98468C5.02324 7.30234 4.73709 7.64568 4.48109 8.0111V8.01252V8.01087C3.8928 8.84476 3.47549 9.78691 3.25325 10.7829L3.24097 10.8434C3.22374 10.9239 3.14653 11.3329 3.13543 11.4207C3.0648 11.8429 3.0197 12.2689 3.00037 12.6965V12.7437C3.00441 15.0337 3.86684 17.239 5.41739 18.9243C6.96795 20.6095 9.09396 21.6523 11.3757 21.8466C13.6575 22.0409 15.9293 21.3728 17.7425 19.974C19.5557 18.5753 20.7787 16.5476 21.1699 14.2912C21.1853 14.1732 21.1978 14.0563 21.2115 13.9371C21.4 12.3791 21.1959 10.7987 20.6179 9.33976L20.6184 9.33929ZM19.7105 9.80941L19.7121 9.81909L19.7105 9.80941Z" fill="url(#paint11_linear_4475_59607)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59607" x1="19.4072" y1="5.92872" x2="4.21438" y2="20.5872" gradientUnits="userSpaceOnUse">
+<stop offset="0.048" stop-color="#FFF44F"/>
+<stop offset="0.111" stop-color="#FFE847"/>
+<stop offset="0.225" stop-color="#FFC830"/>
+<stop offset="0.368" stop-color="#FF980E"/>
+<stop offset="0.401" stop-color="#FF8B16"/>
+<stop offset="0.462" stop-color="#FF672A"/>
+<stop offset="0.534" stop-color="#FF3647"/>
+<stop offset="0.705" stop-color="#E31587"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8192 5.12925) scale(19.0786)">
+<stop offset="0.129" stop-color="#FFBD4F"/>
+<stop offset="0.186" stop-color="#FFAC31"/>
+<stop offset="0.247" stop-color="#FF9D17"/>
+<stop offset="0.283" stop-color="#FF980E"/>
+<stop offset="0.403" stop-color="#FF563B"/>
+<stop offset="0.467" stop-color="#FF3750"/>
+<stop offset="0.71" stop-color="#F5156C"/>
+<stop offset="0.782" stop-color="#EB0878"/>
+<stop offset="0.86" stop-color="#E50080"/>
+</radialGradient>
+<radialGradient id="paint2_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.7355 12.9213) scale(19.0786)">
+<stop offset="0.3" stop-color="#960E18"/>
+<stop offset="0.351" stop-color="#B11927" stop-opacity="0.74"/>
+<stop offset="0.435" stop-color="#DB293D" stop-opacity="0.343"/>
+<stop offset="0.497" stop-color="#F5334B" stop-opacity="0.094"/>
+<stop offset="0.53" stop-color="#FF3750" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0968 0.879053) scale(13.8202)">
+<stop offset="0.132" stop-color="#FFF44F"/>
+<stop offset="0.252" stop-color="#FFDC3E"/>
+<stop offset="0.506" stop-color="#FF9D12"/>
+<stop offset="0.526" stop-color="#FF980E"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.61049 17.88) scale(9.08361)">
+<stop offset="0.353" stop-color="#3A8EE6"/>
+<stop offset="0.472" stop-color="#5C79F0"/>
+<stop offset="0.669" stop-color="#9059FF"/>
+<stop offset="1" stop-color="#C139E6"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.6583 11.2837) rotate(-13.5916) scale(4.81691 5.6394)">
+<stop offset="0.206" stop-color="#9059FF" stop-opacity="0"/>
+<stop offset="0.278" stop-color="#8C4FF3" stop-opacity="0.064"/>
+<stop offset="0.747" stop-color="#7716A8" stop-opacity="0.45"/>
+<stop offset="0.975" stop-color="#6E008B" stop-opacity="0.6"/>
+</radialGradient>
+<radialGradient id="paint6_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 4.42098) scale(6.53585 6.53585)">
+<stop stop-color="#FFE226"/>
+<stop offset="0.121" stop-color="#FFDB27"/>
+<stop offset="0.295" stop-color="#FFC82A"/>
+<stop offset="0.502" stop-color="#FFA930"/>
+<stop offset="0.732" stop-color="#FF7E37"/>
+<stop offset="0.792" stop-color="#FF7139"/>
+</radialGradient>
+<radialGradient id="paint7_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.6942 0.170877) scale(27.886 27.886)">
+<stop offset="0.113" stop-color="#FFF44F"/>
+<stop offset="0.456" stop-color="#FF980E"/>
+<stop offset="0.622" stop-color="#FF5634"/>
+<stop offset="0.716" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint8_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.3764 1.71689) rotate(83.976) scale(20.4353 13.4115)">
+<stop stop-color="#FFF44F"/>
+<stop offset="0.06" stop-color="#FFE847"/>
+<stop offset="0.168" stop-color="#FFC830"/>
+<stop offset="0.304" stop-color="#FF980E"/>
+<stop offset="0.356" stop-color="#FF8B16"/>
+<stop offset="0.455" stop-color="#FF672A"/>
+<stop offset="0.57" stop-color="#FF3647"/>
+<stop offset="0.737" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint9_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 6.78212) scale(17.4069)">
+<stop offset="0.137" stop-color="#FFF44F"/>
+<stop offset="0.48" stop-color="#FF980E"/>
+<stop offset="0.592" stop-color="#FF5634"/>
+<stop offset="0.655" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint10_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9858 7.7266) scale(19.0527)">
+<stop offset="0.094" stop-color="#FFF44F"/>
+<stop offset="0.231" stop-color="#FFE141"/>
+<stop offset="0.509" stop-color="#FFAF1E"/>
+<stop offset="0.626" stop-color="#FF980E"/>
+</radialGradient>
+<linearGradient id="paint11_linear_4475_59607" x1="19.2229" y1="5.8508" x2="6.29757" y2="18.7785" gradientUnits="userSpaceOnUse">
+<stop offset="0.167" stop-color="#FFF44F" stop-opacity="0.8"/>
+<stop offset="0.266" stop-color="#FFF44F" stop-opacity="0.634"/>
+<stop offset="0.489" stop-color="#FFF44F" stop-opacity="0.217"/>
+<stop offset="0.6" stop-color="#FFF44F" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/microsoft_edge.svg b/static/icons/light/color/microsoft_edge.svg
new file mode 100644
index 000000000..07a4e636c
--- /dev/null
+++ b/static/icons/light/color/microsoft_edge.svg
@@ -0,0 +1,41 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint0_linear_4475_59727)"/>
+<path opacity="0.35" d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint1_radial_4475_59727)"/>
+<path d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint2_linear_4475_59727)"/>
+<path opacity="0.41" d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint3_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint4_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint5_radial_4475_59727)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59727" x1="7.13306" y1="15.4626" x2="19.6942" y2="15.4626" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C59A4"/>
+<stop offset="1" stop-color="#114A8B"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0684 15.5573) scale(6.71711 6.38126)">
+<stop offset="0.7" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<linearGradient id="paint2_linear_4475_59727" x1="13.7517" y1="10.0128" x2="5.91502" y2="18.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B9DE2"/>
+<stop offset="0.2" stop-color="#1595DF"/>
+<stop offset="0.7" stop-color="#0680D7"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<radialGradient id="paint3_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.96782 17.0071) rotate(-81.3844) scale(10.0958 8.1564)">
+<stop offset="0.8" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.82291 6.33152) rotate(92.2906) scale(14.2624 30.3759)">
+<stop stop-color="#35C1F1"/>
+<stop offset="0.1" stop-color="#34C1ED"/>
+<stop offset="0.2" stop-color="#2FC2DF"/>
+<stop offset="0.3" stop-color="#2BC3D2"/>
+<stop offset="0.7" stop-color="#36C752"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.9026 8.44269) rotate(73.7398) scale(6.85089 5.57115)">
+<stop stop-color="#66EB6E"/>
+<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/opera.svg b/static/icons/light/color/opera.svg
new file mode 100644
index 000000000..0efa1752f
--- /dev/null
+++ b/static/icons/light/color/opera.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2051 2.58969C7.1213 2.58969 3 6.71099 3 11.7948C3 16.7315 6.88651 20.7606 11.7667 20.9892C11.9124 20.9961 12.0582 21 12.2053 21C14.562 21 16.7114 20.1138 18.34 18.6574C17.2609 19.373 15.9994 19.7848 14.6512 19.7848C12.4591 19.7848 10.4958 18.6973 9.17542 16.9823C8.15755 15.7808 7.49829 14.0047 7.45338 12.0115V11.578C7.49826 9.58484 8.15752 7.8084 9.17516 6.60718C10.4958 4.89225 12.459 3.80476 14.651 3.80476C15.9995 3.80476 17.2612 4.2165 18.3404 4.93255C16.7198 3.48281 14.5834 2.59844 12.2398 2.58974C12.2281 2.58974 12.2166 2.58928 12.2049 2.58928L12.2051 2.58969Z" fill="url(#paint0_linear_4475_59675)"/>
+<path d="M9.17529 6.6077C10.02 5.61045 11.111 5.00909 12.3029 5.00909C14.9828 5.00909 17.1549 8.04738 17.1549 11.7952C17.1549 15.5431 14.9826 18.5814 12.3029 18.5814C11.111 18.5814 10.02 17.9803 9.17552 16.983C10.4959 18.6979 12.459 19.7854 14.6513 19.7854C15.9996 19.7854 17.2611 19.3737 18.3401 18.6581C20.2242 16.9725 21.4106 14.5225 21.4106 11.7953C21.4106 9.06843 20.2244 6.61858 18.3407 4.93317C17.2615 4.21711 15.9997 3.80537 14.6513 3.80537C12.4592 3.80537 10.496 4.89287 9.17555 6.6078" fill="url(#paint1_linear_4475_59675)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59675" x1="10.6704" y1="2.88975" x2="10.6704" y2="20.7324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF1B2D"/>
+<stop offset="0.3" stop-color="#FF1B2D"/>
+<stop offset="0.614" stop-color="#FF1B2D"/>
+<stop offset="1" stop-color="#A70014"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4475_59675" x1="15.2928" y1="3.94157" x2="15.2928" y2="19.7224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9C0000"/>
+<stop offset="0.7" stop-color="#FF4B4B"/>
+<stop offset="1" stop-color="#FF4B4B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/safari.svg b/static/icons/light/color/safari.svg
new file mode 100644
index 000000000..3b7c36e91
--- /dev/null
+++ b/static/icons/light/color/safari.svg
@@ -0,0 +1,42 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4475_59705)">
+<g opacity="0.53" filter="url(#filter0_f_4475_59705)">
+<path d="M20.6716 12.7379C20.6716 13.8343 20.4473 14.92 20.0116 15.933C19.5758 16.946 18.9371 17.8664 18.132 18.6417C17.3268 19.417 16.371 20.032 15.319 20.4516C14.267 20.8712 13.1395 21.0872 12.0009 21.0872C10.8622 21.0872 9.73473 20.8712 8.68276 20.4516C7.63078 20.032 6.67493 19.417 5.86979 18.6417C5.06464 17.8664 4.42596 16.946 3.99022 15.933C3.55447 14.92 3.3302 13.8343 3.3302 12.7379C3.3302 10.5235 4.24372 8.39981 5.86979 6.83401C7.49585 5.26821 9.70128 4.38855 12.0009 4.38855C13.1395 4.38855 14.267 4.60451 15.319 5.0241C16.371 5.4437 17.3268 6.0587 18.132 6.83401C18.9371 7.60931 19.5758 8.52973 20.0116 9.54272C20.4473 10.5557 20.6716 11.6414 20.6716 12.7379Z" fill="black" fill-opacity="0.5"/>
+</g>
+<path d="M21.0018 12.0009C21.0018 13.1829 20.769 14.3533 20.3166 15.4454C19.8643 16.5374 19.2013 17.5297 18.3655 18.3655C17.5297 19.2013 16.5374 19.8643 15.4454 20.3166C14.3533 20.769 13.1829 21.0018 12.0009 21.0018C9.6137 21.0018 7.32429 20.0535 5.6363 18.3655C3.9483 16.6775 3 14.3881 3 12.0009C3 9.6137 3.9483 7.32429 5.6363 5.6363C7.32429 3.94831 9.6137 3 12.0009 3C13.1829 3 14.3533 3.23282 15.4454 3.68515C16.5374 4.13749 17.5297 4.80049 18.3655 5.6363C19.2013 6.47211 19.8643 7.46436 20.3166 8.5564C20.769 9.64843 21.0018 10.8189 21.0018 12.0009Z" fill="url(#paint0_linear_4475_59705)" stroke="#CDCDCD" stroke-width="0.351543" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2964 12.0009C20.2964 14.201 19.4224 16.311 17.8666 17.8668C16.3109 19.4225 14.2009 20.2965 12.0008 20.2965C9.80066 20.2965 7.69064 19.4225 6.13492 17.8668C4.5792 16.311 3.7052 14.201 3.7052 12.0009C3.7052 9.80078 4.5792 7.69077 6.13492 6.13504C7.69064 4.57932 9.80066 3.70532 12.0008 3.70532C14.2009 3.70532 16.3109 4.57932 17.8666 6.13504C19.4224 7.69077 20.2964 9.80078 20.2964 12.0009Z" fill="url(#paint1_radial_4475_59705)"/>
+<path d="M12.0009 4.13794C11.9339 4.13794 11.8799 4.19188 11.8799 4.25888V5.65396C11.8799 5.72096 11.9339 5.7749 12.0009 5.7749C12.0679 5.7749 12.1218 5.72096 12.1218 5.65396V4.25888C12.1218 4.19188 12.0679 4.13794 12.0009 4.13794ZM11.2097 4.18795C11.2016 4.18709 11.1934 4.18709 11.1851 4.18805C11.1184 4.195 11.0704 4.25425 11.0773 4.32089L11.1383 4.90453C11.1452 4.97117 11.2045 5.01923 11.2711 5.01227C11.3378 5.00532 11.3858 4.94607 11.3789 4.87942L11.318 4.29579C11.3119 4.23748 11.2657 4.19339 11.2096 4.18795H11.2097ZM12.7976 4.18852C12.7416 4.19392 12.6954 4.238 12.6893 4.29631L12.6279 4.8799C12.6209 4.94654 12.6689 5.00584 12.7356 5.01285C12.8022 5.01986 12.8615 4.97185 12.8685 4.90521L12.9299 4.32158C12.9369 4.25494 12.8888 4.19568 12.8222 4.18868C12.8138 4.18781 12.8057 4.18781 12.7976 4.18853V4.18852ZM10.3969 4.30581C10.3888 4.30587 10.3806 4.30667 10.3724 4.3084C10.3069 4.32228 10.2653 4.38624 10.2792 4.45179L10.5681 5.81658C10.582 5.88214 10.6459 5.92374 10.7115 5.90987C10.777 5.89599 10.8186 5.83208 10.8047 5.76653L10.5158 4.40168C10.5037 4.34432 10.4532 4.3053 10.3969 4.30574L10.3969 4.30581ZM13.6104 4.30696C13.554 4.30639 13.5036 4.34545 13.4914 4.4028L13.2015 5.76743C13.1875 5.83298 13.2291 5.89695 13.2946 5.91088C13.3602 5.92481 13.4242 5.88324 13.4381 5.8177L13.728 4.45306C13.7419 4.38752 13.7003 4.32354 13.6348 4.30962C13.6266 4.3079 13.6184 4.30703 13.6104 4.30703L13.6104 4.30696ZM9.62118 4.52452C9.60552 4.52309 9.58935 4.52481 9.57341 4.5301C9.50969 4.55082 9.47504 4.61874 9.49575 4.68247L9.67709 5.24058C9.6978 5.30431 9.76578 5.33896 9.82951 5.31825C9.89324 5.29753 9.92784 5.22956 9.90713 5.16583L9.72579 4.60772C9.71027 4.55993 9.66815 4.52851 9.62118 4.52451V4.52452ZM14.3817 4.52481C14.3347 4.52881 14.2926 4.56022 14.2771 4.60801L14.0956 5.16608C14.0749 5.2298 14.1095 5.29778 14.1732 5.3185C14.237 5.33921 14.305 5.30459 14.3257 5.24088L14.5071 4.68276C14.5278 4.61904 14.4932 4.55106 14.4295 4.53034C14.4136 4.52517 14.3973 4.52348 14.3817 4.5248V4.52481ZM8.85412 4.80523C8.8384 4.80551 8.8225 4.80896 8.80719 4.81577C8.746 4.84298 8.71859 4.91416 8.7458 4.97539L9.31243 6.2502C9.33964 6.31142 9.41082 6.3388 9.47205 6.31158C9.53324 6.28437 9.56071 6.21319 9.53349 6.15196L8.96681 4.87716C8.94641 4.83123 8.90125 4.80431 8.85412 4.80523ZM15.1574 4.8095C15.1103 4.80864 15.0651 4.83539 15.0446 4.88128L14.4763 6.1553C14.449 6.21649 14.4762 6.28773 14.5374 6.31503C14.5986 6.34233 14.6699 6.31504 14.6972 6.25385L15.2655 4.97983C15.2928 4.91864 15.2655 4.8474 15.2043 4.8201C15.189 4.81329 15.1731 4.80985 15.1574 4.8095V4.8095ZM8.14212 5.18195C8.1189 5.18022 8.09498 5.18539 8.07322 5.19798C8.01519 5.23148 7.99545 5.30516 8.02895 5.36319L8.32236 5.8714C8.35587 5.92943 8.42955 5.94917 8.48758 5.91566C8.54561 5.88216 8.56534 5.80848 8.53184 5.75045L8.23843 5.24225C8.21748 5.20598 8.18083 5.18466 8.14212 5.18195V5.18195ZM15.8596 5.18195C15.8209 5.18453 15.7843 5.20597 15.7634 5.24224L15.4699 5.75044C15.4364 5.80847 15.4562 5.88215 15.5142 5.91565C15.5723 5.94916 15.6459 5.92942 15.6794 5.87139L15.9729 5.36318C16.0064 5.30515 15.9866 5.23147 15.9286 5.19797C15.9068 5.18541 15.8829 5.18033 15.8596 5.18194V5.18195ZM7.45074 5.61316C7.42747 5.61402 7.40417 5.62149 7.38383 5.63623C7.32959 5.67558 7.3176 5.75091 7.35696 5.80515L8.17612 6.93437C8.21546 6.98861 8.29085 7.0006 8.34508 6.96127C8.39932 6.92192 8.41131 6.84659 8.37195 6.79235L7.55274 5.66313C7.52815 5.62923 7.48951 5.61185 7.45074 5.61317V5.61316ZM16.5597 5.61931C16.5209 5.61787 16.4823 5.63526 16.4576 5.66911L15.6369 6.79723C15.5975 6.85141 15.6094 6.92678 15.6636 6.9662C15.7178 7.00562 15.7931 6.99376 15.8325 6.93959L16.6532 5.81147C16.6926 5.75728 16.6807 5.68192 16.6266 5.6425C16.6062 5.62773 16.5829 5.62014 16.5597 5.61931ZM6.83276 6.13143C6.80189 6.12971 6.77038 6.14002 6.74548 6.16244C6.69568 6.20727 6.69168 6.28344 6.73652 6.33324L7.12916 6.76941C7.17399 6.81921 7.25015 6.82322 7.29995 6.77837C7.34976 6.73354 7.35377 6.65733 7.30892 6.60753L6.91634 6.1714C6.89392 6.14649 6.86364 6.13304 6.83276 6.13142V6.13143ZM17.1699 6.1323C17.139 6.13402 17.1087 6.14738 17.0863 6.17228L16.6937 6.60835C16.6488 6.65815 16.6528 6.73436 16.7026 6.7792C16.7524 6.82403 16.8286 6.82001 16.8734 6.77023L17.2661 6.33416C17.3109 6.28436 17.3069 6.20815 17.2571 6.16332C17.2322 6.1409 17.2008 6.13069 17.1699 6.13231L17.1699 6.1323ZM6.24046 6.70038C6.20959 6.7021 6.17935 6.71546 6.15694 6.74036C6.11211 6.79016 6.11612 6.86633 6.16591 6.91116L7.20273 7.84452C7.25254 7.88936 7.3287 7.88535 7.37352 7.83556C7.41836 7.78576 7.4144 7.70959 7.36459 7.66476L6.32771 6.7314C6.3028 6.70898 6.27131 6.69877 6.24043 6.70039L6.24046 6.70038ZM17.7651 6.70445C17.7342 6.70273 17.7026 6.71302 17.6777 6.73541L16.6403 7.66805C16.5904 7.71284 16.5863 7.78901 16.6311 7.83885C16.6759 7.88868 16.7522 7.89272 16.802 7.84793L17.8395 6.91529C17.8893 6.87049 17.8934 6.79432 17.8486 6.74449C17.8262 6.71958 17.7959 6.7061 17.7651 6.70445H17.7651ZM5.74791 7.33372C5.70913 7.33228 5.67048 7.34975 5.64586 7.38362C5.60648 7.43783 5.61842 7.51315 5.67264 7.55253L6.14739 7.89747C6.2016 7.93685 6.27692 7.92496 6.3163 7.87074C6.35569 7.81653 6.34377 7.74116 6.28958 7.70178L5.81483 7.35685C5.79452 7.34208 5.77118 7.33455 5.74791 7.33371L5.74791 7.33372ZM18.2571 7.33811C18.2339 7.33898 18.2106 7.34642 18.1902 7.36119L17.7153 7.70581C17.661 7.74516 17.649 7.82054 17.6884 7.87478C17.7277 7.92901 17.803 7.94095 17.8573 7.90161L18.3323 7.55699C18.3865 7.51765 18.3985 7.44231 18.3591 7.38808C18.3345 7.35418 18.2959 7.3368 18.2571 7.33812V7.33811ZM5.28762 8.00929C5.24892 8.01188 5.21231 8.03331 5.19137 8.06958C5.15786 8.12761 5.1776 8.20129 5.23563 8.23479L6.44377 8.93232C6.5018 8.96583 6.57548 8.94609 6.60899 8.88806C6.64249 8.83003 6.62275 8.75635 6.56472 8.72285L5.35657 8.02531C5.33482 8.01275 5.31084 8.00767 5.28762 8.00928V8.00929ZM18.7141 8.00929C18.6909 8.00757 18.6669 8.01274 18.6452 8.02532L17.437 8.72286C17.379 8.75636 17.3593 8.83004 17.3928 8.88807C17.4263 8.9461 17.5 8.96584 17.558 8.93233L18.7662 8.2348C18.8242 8.2013 18.8439 8.12762 18.8104 8.06959C18.7895 8.03332 18.7528 8.01201 18.7141 8.0093V8.00929ZM4.9396 8.72937C4.89247 8.72822 4.84727 8.75521 4.8268 8.80109C4.7995 8.86229 4.82679 8.93353 4.88798 8.96082L5.42396 9.1999C5.48516 9.22719 5.5564 9.19991 5.58369 9.13872C5.61099 9.07752 5.58365 9.00629 5.52246 8.97899L4.98654 8.73992C4.97125 8.73308 4.95531 8.72969 4.9396 8.72937ZM19.0645 8.73434C19.0488 8.73463 19.0328 8.73808 19.0175 8.74489L18.4814 8.98354C18.4202 9.01081 18.3928 9.082 18.4201 9.14322C18.4474 9.20443 18.5186 9.23181 18.5798 9.20456L19.1159 8.96585C19.1771 8.93861 19.2045 8.86738 19.1772 8.80617C19.1568 8.76026 19.1116 8.73341 19.0645 8.73434ZM4.62944 9.48199C4.58247 9.48593 4.54035 9.51731 4.52479 9.56509C4.50404 9.6288 4.53857 9.69681 4.60229 9.71757L5.92873 10.1498C5.99243 10.1705 6.06044 10.136 6.0812 10.0723C6.10195 10.0085 6.06741 9.94054 6.00368 9.91979L4.67726 9.48757C4.66134 9.48237 4.6451 9.48068 4.62944 9.482V9.48199ZM19.3741 9.48717C19.3584 9.48573 19.3423 9.48745 19.3263 9.49274L17.9996 9.92401C17.9359 9.94472 17.9013 10.0127 17.922 10.0764C17.9427 10.1402 18.0107 10.1748 18.0744 10.154L19.4011 9.72278C19.4648 9.70206 19.4995 9.63408 19.4788 9.57036C19.4632 9.52257 19.4211 9.49114 19.3741 9.48716V9.48717ZM4.4362 10.272C4.37986 10.2715 4.32932 10.3106 4.31713 10.3679C4.3032 10.4335 4.34478 10.4974 4.41031 10.5114L4.98434 10.6334C5.04988 10.6473 5.11385 10.6057 5.12778 10.5402C5.14172 10.4746 5.10015 10.4107 5.03461 10.3967L4.46063 10.2747C4.45244 10.273 4.44425 10.2722 4.4362 10.2722V10.272ZM19.5658 10.2732C19.5578 10.2732 19.5496 10.2743 19.5415 10.2758L18.9674 10.3977C18.9019 10.4116 18.8603 10.4756 18.8742 10.5411C18.8882 10.6066 18.9521 10.6482 19.0177 10.6343L19.5917 10.5124C19.6572 10.4985 19.6988 10.4345 19.6849 10.3689C19.6727 10.3116 19.6222 10.2726 19.5658 10.2731L19.5658 10.2732ZM4.28994 11.0667C4.23385 11.0721 4.18768 11.1161 4.18152 11.1744C4.17448 11.241 4.22242 11.3004 4.28905 11.3074L5.6764 11.4541C5.74303 11.4611 5.80236 11.4131 5.8094 11.3465C5.81644 11.2799 5.76845 11.2205 5.70182 11.2135L4.31447 11.0668C4.30614 11.066 4.29796 11.066 4.28994 11.0667V11.0667ZM19.7131 11.0771C19.7051 11.0763 19.6969 11.0763 19.6885 11.0772L18.301 11.222C18.2344 11.229 18.1863 11.2882 18.1933 11.3549C18.2002 11.4215 18.2595 11.4696 18.3261 11.4626L19.7136 11.3178C19.7803 11.3109 19.8283 11.2516 19.8214 11.185C19.8153 11.1267 19.7692 11.0826 19.7131 11.0771L19.7131 11.0771ZM4.26645 11.8802C4.19944 11.8802 4.14551 11.9341 4.14551 12.0011C4.14551 12.0681 4.19944 12.1221 4.26645 12.1221H4.85328C4.92028 12.1221 4.97427 12.0681 4.97427 12.0011C4.97427 11.9341 4.92028 11.8802 4.85328 11.8802H4.26645ZM19.1485 11.8802C19.0815 11.8802 19.0275 11.9341 19.0275 12.0011C19.0275 12.0681 19.0815 12.1221 19.1485 12.1221H19.7353C19.8023 12.1221 19.8563 12.0681 19.8563 12.0011C19.8563 11.9341 19.8023 11.8802 19.7353 11.8802H19.1485ZM5.7002 12.5395C5.69219 12.5386 5.68399 12.5386 5.67566 12.5396L4.28811 12.6844C4.22146 12.6913 4.17342 12.7506 4.18037 12.8172C4.18733 12.8839 4.24657 12.9319 4.31321 12.925L5.70077 12.7802C5.76742 12.7732 5.81546 12.714 5.80851 12.6473C5.80242 12.589 5.75628 12.5449 5.70019 12.5395H5.7002ZM18.3008 12.5481C18.2447 12.5534 18.1986 12.5974 18.1924 12.6557C18.1854 12.7224 18.2333 12.7817 18.2999 12.7887L19.6873 12.9354C19.7539 12.9425 19.8132 12.8945 19.8203 12.8278C19.8273 12.7612 19.7793 12.7019 19.7127 12.6948L18.3254 12.5482C18.3171 12.5473 18.3088 12.5473 18.3008 12.5481L18.3008 12.5481ZM5.00856 13.3651C5.00052 13.3652 4.99233 13.366 4.98414 13.3677L4.41011 13.4897C4.34456 13.5036 4.30301 13.5676 4.31693 13.6331C4.33087 13.6986 4.39483 13.7402 4.46038 13.7263L5.03441 13.6044C5.09995 13.5905 5.1415 13.5265 5.12758 13.4609C5.1154 13.4036 5.06492 13.3646 5.00857 13.3651L5.00856 13.3651ZM18.993 13.3663C18.9367 13.3657 18.8862 13.4048 18.874 13.4621C18.8601 13.5277 18.9016 13.5916 18.9672 13.6056L19.5412 13.7275C19.6067 13.7415 19.6707 13.7 19.6846 13.6344C19.6986 13.5689 19.657 13.5049 19.5915 13.4909L19.0175 13.3689C19.0093 13.3672 19.0011 13.3664 18.993 13.3664L18.993 13.3663ZM5.97519 13.8426C5.95953 13.8412 5.94335 13.8429 5.92742 13.8482L4.60068 14.2795C4.53695 14.3002 4.50234 14.3682 4.52306 14.4319C4.54378 14.4956 4.61175 14.5302 4.67548 14.5095L6.00218 14.0783C6.0659 14.0575 6.10056 13.9896 6.07984 13.9258C6.0643 13.878 6.02216 13.8466 5.97519 13.8426V13.8426ZM18.0253 13.8469C17.9783 13.8509 17.9362 13.8822 17.9206 13.93C17.8999 13.9937 17.9344 14.0617 17.9981 14.0825L19.3246 14.5147C19.3883 14.5355 19.4563 14.5009 19.477 14.4372C19.4978 14.3735 19.4632 14.3055 19.3995 14.2847L18.0731 13.8525C18.0572 13.8473 18.0409 13.8456 18.0253 13.8469V13.8469ZM5.46891 14.7872C5.45319 14.7875 5.43728 14.7909 5.42198 14.7977L4.88584 15.0364C4.82463 15.0637 4.79731 15.1349 4.82456 15.1961C4.85183 15.2573 4.92303 15.2846 4.98424 15.2574L5.52037 15.0187C5.58158 14.9915 5.60891 14.9203 5.58166 14.8591C5.56123 14.8132 5.51604 14.7863 5.46891 14.7872V14.7872ZM18.5309 14.7918C18.4838 14.7907 18.4386 14.8177 18.4181 14.8636C18.3908 14.9248 18.4181 14.996 18.4793 15.0233L19.0152 15.2624C19.0764 15.2897 19.1477 15.2624 19.175 15.2012C19.2023 15.14 19.175 15.0688 19.1138 15.0415L18.5779 14.8024C18.5626 14.7955 18.5466 14.7922 18.5309 14.7918V14.7918ZM6.51273 15.0539C6.48952 15.0522 6.46554 15.0574 6.44377 15.07L5.23563 15.7675C5.1776 15.801 5.15786 15.8747 5.19137 15.9327C5.22487 15.9907 5.29854 16.0105 5.35657 15.977L6.56472 15.2795C6.62275 15.246 6.64249 15.1723 6.60899 15.1142C6.58804 15.078 6.55143 15.0566 6.51273 15.0539V15.0539ZM17.4891 15.0539C17.4504 15.0565 17.4137 15.078 17.3928 15.1142C17.3593 15.1722 17.379 15.246 17.437 15.2795L18.6452 15.977C18.7032 16.0105 18.7769 15.9907 18.8104 15.9327C18.8439 15.8747 18.8242 15.801 18.7662 15.7675L17.558 15.07C17.5362 15.0574 17.5123 15.0523 17.4891 15.0539V15.0539ZM6.21138 16.0776C6.18811 16.0784 6.16481 16.0859 6.14447 16.1007L5.6695 16.4453C5.61527 16.4846 5.60327 16.56 5.64261 16.6142C5.68196 16.6685 5.7573 16.6804 5.81153 16.6411L6.28654 16.2965C6.34078 16.2571 6.35277 16.1818 6.31343 16.1276C6.28884 16.0937 6.25016 16.0762 6.21138 16.0775V16.0776ZM17.7875 16.0816C17.7487 16.0802 17.7101 16.0977 17.6855 16.1315C17.6461 16.1857 17.658 16.2611 17.7122 16.3005L18.187 16.6454C18.2412 16.6848 18.3165 16.6729 18.3559 16.6187C18.3953 16.5644 18.3834 16.4891 18.3292 16.4497L17.8544 16.1048C17.8341 16.09 17.8108 16.0824 17.7875 16.0816L17.7875 16.0816ZM7.2871 16.1234C7.25623 16.1217 7.22474 16.132 7.19982 16.1543L6.16232 17.087C6.11249 17.1318 6.10844 17.2079 6.15324 17.2578C6.19803 17.3076 6.2742 17.3117 6.32404 17.2669L7.36154 16.3342C7.41137 16.2894 7.41542 16.2133 7.37062 16.1634C7.34824 16.1385 7.31797 16.125 7.2871 16.1234ZM16.7118 16.1267C16.6809 16.1284 16.6506 16.1418 16.6282 16.1667C16.5834 16.2165 16.5874 16.2927 16.6372 16.3375L17.674 17.2709C17.7238 17.3157 17.8 17.3117 17.8449 17.2619C17.8897 17.2121 17.8857 17.1359 17.8359 17.0911L16.799 16.1577C16.7741 16.1353 16.7427 16.1251 16.7118 16.1267V16.1267ZM8.27136 17.0128C8.23259 17.0113 8.1939 17.0287 8.16926 17.0625L7.34859 18.1907C7.30917 18.2449 7.32104 18.3202 7.3752 18.3596C7.42938 18.3991 7.50475 18.3872 7.54417 18.333L8.36484 17.2049C8.40426 17.1507 8.3924 17.0753 8.33824 17.0359C8.31792 17.0211 8.29463 17.0136 8.27136 17.0128ZM15.7237 17.0178C15.7004 17.0187 15.6771 17.0261 15.6567 17.0409C15.6025 17.0802 15.5905 17.1556 15.6298 17.2098L16.449 18.339C16.4883 18.3933 16.5637 18.4052 16.6179 18.3659C16.6722 18.3266 16.6841 18.2512 16.6448 18.197L15.8257 17.0678C15.8011 17.0339 15.7624 17.0165 15.7237 17.0178V17.0178ZM7.21193 17.192C7.18106 17.1938 7.15078 17.2071 7.12837 17.232L6.73572 17.6681C6.69088 17.7179 6.69485 17.7941 6.74466 17.839C6.79445 17.8838 6.87062 17.8798 6.91545 17.83L7.30814 17.3939C7.35299 17.3441 7.34897 17.2679 7.29918 17.223C7.27427 17.2006 7.24283 17.1904 7.21195 17.192L7.21193 17.192ZM16.7891 17.1926C16.7582 17.1909 16.7268 17.2012 16.7019 17.2236C16.6521 17.2685 16.6481 17.3446 16.6929 17.3944L17.0855 17.8306C17.1303 17.8804 17.2065 17.8844 17.2563 17.8396C17.3061 17.7947 17.3101 17.7185 17.2652 17.6687L16.8726 17.2326C16.8502 17.2077 16.8199 17.1942 16.7891 17.1926L16.7891 17.1926ZM9.4174 17.6764C9.37027 17.6753 9.32512 17.7022 9.30465 17.7481L8.73625 19.0221C8.70896 19.0833 8.73624 19.1546 8.79743 19.1819C8.85862 19.2092 8.92986 19.1819 8.95716 19.1207L9.52555 17.8467C9.55285 17.7855 9.52557 17.7142 9.46437 17.6869C9.44909 17.6801 9.43311 17.6767 9.4174 17.6764ZM14.5767 17.6799C14.561 17.6802 14.545 17.6836 14.5297 17.6904C14.4685 17.7176 14.4411 17.7888 14.4683 17.85L15.0349 19.1248C15.0622 19.186 15.1334 19.2134 15.1946 19.1862C15.2558 19.159 15.2832 19.0878 15.256 19.0266L14.6894 17.7518C14.669 17.7059 14.6238 17.679 14.5767 17.6799ZM8.41862 18.0703C8.37992 18.0729 8.3433 18.0943 8.32236 18.1306L8.02895 18.6388C7.99545 18.6968 8.01519 18.7705 8.07322 18.804C8.13124 18.8375 8.20493 18.8178 8.23843 18.7597L8.53184 18.2515C8.56534 18.1935 8.54561 18.1198 8.48758 18.0863C8.46583 18.0738 8.44184 18.0687 8.41862 18.0703V18.0703ZM15.5831 18.0703C15.5599 18.0686 15.536 18.0738 15.5142 18.0863C15.4562 18.1198 15.4365 18.1935 15.47 18.2515L15.7634 18.7598C15.7969 18.8178 15.8706 18.8375 15.9286 18.804C15.9866 18.7705 16.0064 18.6968 15.9729 18.6388L15.6794 18.1306C15.6585 18.0943 15.6218 18.073 15.5831 18.0703V18.0703ZM10.6827 18.0885C10.6264 18.0879 10.5759 18.127 10.5637 18.1844L10.2738 19.549C10.2599 19.6145 10.3015 19.6785 10.367 19.6924C10.4325 19.7064 10.4965 19.6648 10.5104 19.5993L10.8004 18.2346C10.8143 18.1691 10.7727 18.1051 10.7072 18.0912C10.699 18.0895 10.6908 18.0886 10.6828 18.0886L10.6827 18.0885ZM13.3147 18.0894C13.3067 18.0894 13.2986 18.0902 13.2904 18.092C13.2248 18.1058 13.1832 18.1698 13.1971 18.2353L13.486 19.6002C13.4999 19.6657 13.5638 19.7073 13.6294 19.6934C13.6949 19.6796 13.7365 19.6156 13.7227 19.55L13.4337 18.1853C13.4215 18.1279 13.3711 18.0889 13.3147 18.0893L13.3147 18.0894ZM12.0009 18.227C11.9339 18.227 11.8799 18.281 11.8799 18.348V19.743C11.8799 19.8101 11.9339 19.864 12.0009 19.864C12.0679 19.864 12.1218 19.8101 12.1218 19.743V18.348C12.1218 18.281 12.0679 18.227 12.0009 18.227ZM9.78075 18.6778C9.73378 18.6818 9.69163 18.7132 9.6761 18.761L9.4947 19.3191C9.47399 19.3829 9.50861 19.4508 9.57233 19.4716C9.63605 19.4923 9.70403 19.4576 9.72475 19.3939L9.90614 18.8358C9.92685 18.7721 9.89223 18.7041 9.82852 18.6834C9.8126 18.6782 9.79641 18.6765 9.78075 18.6778V18.6778ZM14.2201 18.6781C14.2044 18.6767 14.1882 18.6784 14.1723 18.6837C14.1086 18.7044 14.0739 18.7724 14.0946 18.8361L14.276 19.3942C14.2967 19.4579 14.3647 19.4925 14.4284 19.4718C14.4921 19.4511 14.5268 19.3832 14.5061 19.3194L14.3247 18.7613C14.3091 18.7135 14.267 18.6821 14.2201 18.6781V18.6781ZM11.2417 18.989C11.1856 18.9944 11.1394 19.0384 11.1333 19.0967L11.0719 19.6803C11.0649 19.747 11.1129 19.8062 11.1796 19.8132C11.2462 19.8202 11.3055 19.7722 11.3125 19.7056L11.3739 19.122C11.3809 19.0554 11.3329 18.9961 11.2662 18.9891C11.2579 18.9882 11.2497 18.9882 11.2417 18.989L11.2417 18.989ZM12.7552 18.9895C12.7472 18.9887 12.7389 18.9887 12.7306 18.9896C12.664 18.9966 12.6159 19.0558 12.6229 19.1225L12.6838 19.7062C12.6908 19.7728 12.75 19.8208 12.8167 19.8139C12.8833 19.8069 12.9314 19.7476 12.9244 19.681L12.8635 19.0974C12.8574 19.0391 12.8113 18.995 12.7552 18.9895L12.7552 18.9895Z" fill="#F4F2F3"/>
+<g opacity="0.409" filter="url(#filter1_f_4475_59705)">
+<path d="M17.6697 7.16309L11.0525 11.0077L6.86865 17.5943L12.9893 13.0608L17.6697 7.16309Z" fill="black"/>
+</g>
+<path d="M12.9491 12.9939L11.0524 11.0077L17.7807 6.48153L12.9491 12.9939Z" fill="#FF5150"/>
+<path d="M12.9492 12.994L11.0525 11.0077L6.22085 17.5201L12.9492 12.994Z" fill="#F1F1F1"/>
+<path opacity="0.243" d="M6.22095 17.5201L12.9493 12.994L17.7809 6.48157L6.22095 17.5201Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_f_4475_59705" x="-0.6698" y="0.38855" width="25.3414" height="24.6986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<filter id="filter1_f_4475_59705" x="4.3238" y="4.61823" width="15.8907" height="15.5209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.27243" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<linearGradient id="paint0_linear_4475_59705" x1="12.0009" y1="21.0018" x2="12.0009" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDBDBD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59705" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.0385 10.7914) scale(9.00093 9.00092)">
+<stop stop-color="#06C2E7"/>
+<stop offset="0.25" stop-color="#0DB8EC"/>
+<stop offset="0.5" stop-color="#12AEF1"/>
+<stop offset="0.75" stop-color="#1F86F9"/>
+<stop offset="1" stop-color="#107DDD"/>
+</radialGradient>
+<clipPath id="clip0_4475_59705">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/light/grayscale/firefox.svg b/static/icons/light/grayscale/firefox.svg
new file mode 100644
index 000000000..692e2ec0d
--- /dev/null
+++ b/static/icons/light/grayscale/firefox.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3467 9.03797C19.9351 8.12658 19.1707 7.15823 18.5238 6.81646C19.0531 7.78481 19.3471 8.75316 19.4647 9.49367C18.465 7.0443 16.701 6.01899 15.2897 3.85443C15.2309 3.74051 15.1721 3.62658 15.0545 3.51266C14.9957 3.4557 14.9957 3.39873 14.9369 3.34177C14.8781 3.22785 14.8193 3.11392 14.8193 3C12.82 4.13924 11.9968 6.13291 11.7616 7.38608C11.1147 7.44304 10.5267 7.55696 9.99749 7.84177C9.87988 7.89873 9.82108 8.01266 9.87988 8.12658C9.93869 8.24051 10.0563 8.29747 10.1739 8.24051C10.6443 8.01266 11.1735 7.89873 11.7616 7.84177H11.8204C11.8792 7.84177 11.9968 7.84177 12.0556 7.84177C12.4672 7.84177 12.9376 7.89873 13.3492 8.01266H13.408C13.4668 8.01266 13.5256 8.06962 13.6432 8.06962C13.702 8.06962 13.7608 8.12658 13.8196 8.12658C13.8784 8.12658 13.8784 8.18354 13.9372 8.18354C13.9961 8.18354 14.0549 8.24051 14.1137 8.29747L14.1725 8.35443C14.2313 8.41139 14.2901 8.41139 14.3489 8.46835C14.4077 8.46835 14.4077 8.52532 14.4665 8.52532C15.1133 8.92405 15.6425 9.43671 16.0541 10.1203C15.5837 9.77848 14.7017 9.49367 13.8784 9.60759C17.1126 11.2025 16.2305 16.6139 11.7616 16.3861C11.3499 16.3861 10.9383 16.2722 10.5855 16.1582C10.4679 16.1013 10.4091 16.1013 10.2915 16.0443C10.2327 16.0443 10.1739 15.9873 10.1151 15.9873C8.99785 15.4177 8.11581 14.3924 7.99821 13.1392C7.99821 13.1392 8.40982 11.6582 10.9971 11.6582C11.2911 11.6582 12.0556 10.9177 12.0556 10.6899C12.0556 10.6329 10.4679 10.0063 9.87988 9.43671C9.52707 9.1519 9.40946 8.98101 9.23306 8.86709C9.17425 8.81013 9.05665 8.75316 8.99785 8.6962C8.82144 8.01266 8.76264 7.27215 8.99785 6.53165C8.05701 6.87342 7.29258 7.5 6.76336 8.06962C6.41054 7.61392 6.46934 6.18987 6.46934 5.90506C6.46934 5.90506 6.17533 6.01899 6.17533 6.07595C5.88132 6.24684 5.5285 6.53165 5.29329 6.75949C4.99928 7.0443 4.70527 7.38608 4.47006 7.72785C3.88204 8.52532 3.47042 9.43671 3.23521 10.3481C3.23521 10.3481 3.17641 10.6899 3.1176 11.1456C3.1176 11.2025 3.1176 11.2595 3.0588 11.3734C3.0588 11.5443 3 11.7152 3 11.8861C3 12 3 12.057 3 12.1709V12.2278C3 17.1266 6.99856 21 11.9968 21C16.4658 21 20.1703 17.8671 20.8759 13.7089C20.8759 13.5949 20.8759 13.481 20.9347 13.3671C21.1111 11.943 20.9347 10.3481 20.3467 9.03797Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/microsoft_edge.svg b/static/icons/light/grayscale/microsoft_edge.svg
new file mode 100644
index 000000000..c5450831b
--- /dev/null
+++ b/static/icons/light/grayscale/microsoft_edge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9915 15.0939C10.3709 14.3974 9.94825 13.5653 9.81334 12.6338C9.54354 13.0498 9.3187 13.502 9.15681 13.9904C8.32941 16.4777 9.76837 19.58 12.2146 20.4845C14.3191 21.1899 16.6844 19.9327 18.2403 18.558C18.4741 18.2414 20.3178 16.6043 19.4005 16.4234C16.6844 17.8253 13.087 17.4274 10.9915 15.0939ZM11.5311 9.83897C12.4664 9.82993 11.5671 9.45006 11.1804 9.16063C10.245 8.64509 9.14782 8.39184 8.08658 8.39184C4.62406 8.42802 2.11936 10.6078 3.29302 14.2166C4.13841 17.7259 7.16924 20.5478 10.7487 21C8.90499 19.8332 7.78979 17.6445 7.78979 15.4647C7.86174 13.1764 9.26474 10.4902 11.5311 9.83897ZM3.72471 8.64509C6.45875 6.6191 10.8116 6.7819 13.1679 9.33248C14.0853 10.3364 14.7148 12.0459 13.8784 13.285C12.3135 14.9853 16.6484 15.2115 17.5748 14.9582C20.9384 14.307 21.8287 10.3726 20.2279 7.65923C18.699 4.58407 15.3084 2.97413 11.9808 3.00126C8.32941 2.93795 5.04676 5.26241 3.72471 8.64509Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/opera.svg b/static/icons/light/grayscale/opera.svg
new file mode 100644
index 000000000..4fdf7668d
--- /dev/null
+++ b/static/icons/light/grayscale/opera.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.039 6.92844C8.0418 8.10292 7.3983 9.84079 7.3533 11.7884V12.2114C7.3992 14.1598 8.0427 15.895 9.0381 17.0713C10.3287 18.7471 12.2475 19.8108 14.3931 19.8108C15.6773 19.8079 16.9318 19.4239 17.9976 18.7075C16.241 20.2863 13.9314 21.1064 11.5725 20.9889C9.26213 20.8795 7.08262 19.8846 5.48637 18.2108C3.89012 16.537 2.99972 14.3128 3 11.9999C3 7.02834 7.0302 3 12 3H12.0333C14.2355 3.00591 16.3587 3.82145 17.9985 5.29136C16.9312 4.57592 15.6762 4.19203 14.3913 4.18798C12.2475 4.18798 10.3287 5.25266 9.0363 6.92844H9.0381H9.039ZM21 11.9999C21.0016 13.2666 20.735 14.5193 20.2177 15.6755C19.7003 16.8318 18.944 17.8654 17.9985 18.7084C15.69 19.8333 13.539 19.0467 12.8262 18.5554C15.0942 18.0568 16.8069 15.3154 16.8069 11.9999C16.8069 8.68341 15.0942 5.94295 12.8262 5.44526C13.5381 4.95477 15.69 4.16728 17.9985 5.29136C18.9441 6.13424 19.7005 7.16784 20.2178 8.32411C20.7352 9.48039 21.0017 10.7331 21 11.9999Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/safari.svg b/static/icons/light/grayscale/safari.svg
new file mode 100644
index 000000000..09b484189
--- /dev/null
+++ b/static/icons/light/grayscale/safari.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02846 3 3 7.02846 3 12C3 16.9715 7.02846 21 12 21C16.9715 21 21 16.9715 21 12C21 7.02846 16.9715 3 12 3ZM13.3985 4.24771L13.6739 4.30317L13.3444 5.95782L13.069 5.90267L13.3985 4.24771ZM10.6015 19.7493L10.3261 19.6938L10.6556 18.0392L10.931 18.0943L10.6015 19.7493ZM14.1509 4.42211L14.4197 4.50415L14.1745 5.31204L13.9058 5.23L14.1509 4.42211ZM9.84906 19.5769L9.58032 19.4948L9.82546 18.6869L10.0942 18.769L9.84906 19.5769ZM15.1445 4.7775L14.4984 6.33681L14.2386 6.22886L14.8844 4.66956L15.1445 4.77753V4.7775ZM8.85782 19.2215L9.50357 17.6625L9.76336 17.7705L9.11761 19.3295L8.85782 19.2215V19.2215ZM15.588 4.98816L15.8351 5.12068L15.4381 5.86448L15.1906 5.73158L15.588 4.98816ZM8.41201 19.0112L8.16485 18.8783L8.56315 18.1349L8.81065 18.2674L8.41201 19.0112ZM19.0125 8.4117L18.2694 8.80967L18.1368 8.56217L18.8793 8.1642C18.7995 8.02075 18.7151 7.87993 18.6262 7.74199L17.2237 8.68043L17.0695 8.44525L18.4723 7.50681C18.378 7.37293 18.28 7.24372 18.1777 7.11317L17.5276 7.64766L17.3486 7.42941L17.9986 6.89492C17.8927 6.77134 17.7804 6.65175 17.6678 6.53284L17.2276 6.97299L13.1251 13.1255L6.97232 17.2284L6.52949 17.6685C6.64874 17.7811 6.76934 17.8934 6.89492 17.999L7.42941 17.3489L7.64766 17.528L7.11317 18.1781C7.24038 18.2794 7.37293 18.3751 7.50681 18.4694L8.43859 17.0666L8.67377 17.2207L7.73535 18.6232C8.72293 19.26 9.85769 19.6816 11.0822 19.8224L11.1632 18.9823L11.4442 19.0102L11.3632 19.8503C11.5283 19.8649 11.6904 19.8716 11.8558 19.8752V18.1874H12.1372V19.8752C12.3026 19.8716 12.4681 19.8639 12.6302 19.8503L12.5461 19.0102L12.8272 18.9823L12.9112 19.8224C13.0763 19.8031 13.2381 19.7782 13.4002 19.7493L13.071 18.0963L13.3467 18.0412L13.6756 19.6949C13.837 19.66 13.9945 19.6188 14.1519 19.5739L13.9064 18.7667L14.1752 18.6847L14.4207 19.4926L14.1579 19.5729C14.4054 19.5025 14.6466 19.4198 14.8834 19.3271L14.2386 17.7705L14.4984 17.6625L15.1435 19.2195C15.294 19.1544 15.4402 19.0843 15.5856 19.0099L15.188 18.2674L15.4355 18.1349L15.8335 18.878C15.9776 18.7979 16.1201 18.7155 16.258 18.6262L15.3196 17.2237L15.5547 17.0696L16.4932 18.4724C16.6271 18.378 16.7563 18.2801 16.8868 18.1777L16.3523 17.5276L16.5706 17.3486L17.1051 18.002C17.2273 17.8964 17.3482 17.7841 17.4672 17.6712L16.2759 16.4799L16.4759 16.2796L17.6675 17.4712C17.7801 17.3516 17.8924 17.2327 17.9983 17.1054L17.3482 16.5709L17.5273 16.3527L18.1774 16.8872L18.1781 16.8869C18.2794 16.7563 18.3784 16.6271 18.4694 16.4999L17.0666 15.5614L17.2207 15.3262L18.6232 16.2646C18.8524 15.9095 19.0514 15.5338 19.2221 15.1432L17.6632 14.4977L17.7711 14.238L19.3304 14.8837C19.5749 14.2629 19.7433 13.6052 19.8224 12.9179L18.9823 12.8368L19.0102 12.5558L19.8503 12.6368C19.8649 12.4717 19.8715 12.3096 19.8752 12.1442L18.1874 12.1439V11.8628H19.8752C19.8715 11.6974 19.8639 11.532 19.8503 11.3699L19.0102 11.4539L18.9823 11.1729L19.8224 11.0888C19.7155 10.155 19.4411 9.24818 19.0125 8.4117H19.0125ZM4.99277 15.588L5.73521 15.1904L5.86777 15.4379L5.12498 15.8358C5.20402 15.98 5.28642 16.1205 5.37577 16.258L6.77862 15.3196L6.93376 15.5548L5.53091 16.4932V16.4922C5.62524 16.6261 5.71991 16.7589 5.82226 16.8858L6.47234 16.3514L6.65138 16.5696L6.0013 17.1041C6.10725 17.2267 6.21955 17.3473 6.33217 17.4665L6.77232 17.0264L10.8748 10.8736L17.0276 6.77103L17.4774 6.33087C17.3578 6.21826 17.2389 6.10598 17.1117 6.00001L16.5772 6.65012L16.3589 6.47107L16.8935 5.82094C16.7679 5.71997 16.6337 5.62429 16.4998 5.52962L15.5614 6.93244L15.3262 6.77733L16.2646 5.37448C15.277 4.73801 14.1423 4.31614 12.9178 4.1756L12.8367 5.01569L12.5557 4.98748L12.6368 4.14739C12.4717 4.1331 12.3096 4.12612 12.1441 4.12281V5.81031H11.8618V4.12281C11.6963 4.12612 11.5309 4.13377 11.3688 4.14739L11.4532 4.98748L11.1721 5.01572L11.0878 4.17562C9.86497 4.31614 8.72892 4.73469 7.74128 5.3715L8.67973 6.77432L8.44455 6.92946L7.5061 5.52664C7.37223 5.62229 7.24268 5.72028 7.11247 5.8226L7.64662 6.47271L7.4287 6.65175L6.89422 5.99832C6.7703 6.1043 6.65105 6.21657 6.5318 6.32918L7.72337 7.52042L7.52306 7.72073L6.33149 6.52949C6.21888 6.64874 6.1066 6.76934 6.00097 6.89492L6.65105 7.42941L6.472 7.64766L5.82189 7.11317C5.72059 7.24038 5.62491 7.37293 5.53057 7.50681L6.93674 8.43859L6.7816 8.6738L5.37876 7.73535C5.28817 7.87589 5.2022 8.01936 5.12099 8.16552L5.86442 8.56183L5.73156 8.81065L4.98844 8.41333C4.91442 8.55856 4.84485 8.70601 4.77983 8.85548L6.3388 9.5016L6.23083 9.76136L4.6722 9.11561C4.61173 9.26839 4.55694 9.42386 4.50578 9.58133L5.31199 9.82647L5.22995 10.0952L4.42504 9.85072C4.38054 10.0075 4.34201 10.166 4.3068 10.3268L5.95678 10.6556L5.90129 10.931L4.25131 10.6025C4.22206 10.7606 4.19849 10.9214 4.17956 11.0822L5.01999 11.1632L4.99176 11.4442L4.15166 11.3632C4.13704 11.5283 4.1304 11.6904 4.12708 11.8558L5.81458 11.8562V12.1372H4.12708C4.1304 12.3026 4.13805 12.4681 4.15166 12.6302L4.99176 12.5461L5.01999 12.8272L4.17956 12.9112C4.19849 13.0753 4.22408 13.2367 4.25232 13.3975L5.90264 13.069L5.95777 13.3443L4.3068 13.6732C4.34168 13.835 4.38352 13.9938 4.42802 14.1516L5.23093 13.9077L5.313 14.1765L4.50877 14.4207C4.55915 14.5767 4.61443 14.7312 4.67453 14.8837L6.22883 14.24L6.33681 14.4997L4.78183 15.1438C4.84694 15.295 4.91801 15.4421 4.99277 15.588ZM19.2214 8.85785L19.3294 9.11761L17.7704 9.76339L17.6625 9.50362L19.2214 8.85785ZM19.5759 9.8501L18.768 10.0956L18.6859 9.82684L19.4938 9.58136L19.5759 9.8501ZM19.7493 10.6015L18.0943 10.931L18.0392 10.6557L19.6938 10.3261L19.7493 10.6015ZM19.6951 13.6739L18.0405 13.3444L18.0956 13.069L19.7506 13.3985L19.6951 13.6739V13.6739ZM19.4938 14.4197L18.6859 14.1745L18.768 13.9058L19.5759 14.151L19.4938 14.4197ZM4.68187 9.09072L4.77888 8.85785C4.7454 8.93499 4.71306 9.01262 4.68187 9.09072ZM18.8773 15.8351L18.1322 15.4382L18.2647 15.1907L19.0098 15.588L18.8773 15.8351ZM8.16122 5.12074L8.40872 4.98818L8.80733 5.73164L8.55983 5.8645L8.16122 5.12074ZM9.11761 4.67161L9.76336 6.23092L9.5036 6.33886L8.85785 4.77989L9.11761 4.67161ZM9.84908 4.42214L10.0942 5.23003L9.82549 5.31207L9.58032 4.50418L9.84908 4.42214ZM10.6028 4.25007L10.9323 5.90469L10.6569 5.96018L10.3274 4.3052L10.6028 4.25007H10.6028ZM19.847 11.3118L19.829 11.1251C19.8327 11.1878 19.8393 11.2473 19.847 11.3118ZM18.6162 7.72511L18.489 7.5351C18.5305 7.59788 18.573 7.66099 18.6162 7.72511ZM18.1279 7.05343L18.0502 6.95873C18.0781 6.99029 18.103 7.02185 18.1279 7.05343ZM17.0376 5.94657L16.9433 5.86883C16.9782 5.89673 17.0064 5.92132 17.0376 5.94657ZM16.465 5.50973L16.2749 5.38385C16.3377 5.42702 16.4022 5.46822 16.465 5.50973ZM12.875 4.17464L12.685 4.15672C12.7477 4.16038 12.8122 4.16702 12.875 4.17467V4.17464ZM11.3117 4.15307L11.1217 4.17101C11.1845 4.16736 11.2472 4.16072 11.3117 4.15307ZM7.72503 5.38382L7.53502 5.50973C7.59782 5.46687 7.66093 5.4257 7.72503 5.38385V5.38382ZM7.05335 5.87215L6.96233 5.94657C6.99355 5.92199 7.02179 5.89707 7.05335 5.87215ZM5.94649 6.96239L5.86875 7.05675C5.89668 7.02519 5.92126 6.99364 5.94649 6.96239ZM5.50968 7.5351L5.38376 7.72511C5.42696 7.66231 5.46814 7.5992 5.50968 7.5351ZM4.17461 11.125L4.1567 11.315C4.16035 11.2522 4.16699 11.1891 4.17461 11.125ZM4.15304 12.6896L4.17098 12.8796C4.16733 12.8169 4.16066 12.7528 4.15304 12.6896ZM5.38379 16.2716L5.50971 16.4616C5.46684 16.4022 5.42564 16.3391 5.38379 16.2716ZM5.94652 17.0377C5.92193 17.0064 5.89702 16.9782 5.87212 16.9467L5.94652 17.0377ZM6.96236 18.0535L7.05337 18.1279C7.02182 18.1033 6.99358 18.0787 6.96236 18.0535ZM7.53504 18.4867L7.72506 18.6139C7.66228 18.5757 7.59917 18.5328 7.53504 18.4867ZM11.125 19.8254L11.315 19.8433C11.2522 19.8397 11.1891 19.833 11.125 19.8254V19.8254ZM12.6896 19.847L12.8763 19.829C12.8135 19.8327 12.7537 19.8393 12.6896 19.847H12.6896ZM16.2749 18.6162L16.465 18.489C16.4022 18.5305 16.3377 18.573 16.2749 18.6162ZM16.9466 18.1279L17.0413 18.0502C17.0097 18.0781 16.9782 18.103 16.9466 18.1279ZM17.5622 17.5755L17.5755 17.5622L17.5622 17.5755ZM18.0535 17.0377L18.1312 16.9433C18.1033 16.9749 18.0787 17.0064 18.0535 17.0377ZM19.847 12.685C19.8403 12.7478 19.8367 12.8122 19.829 12.875L19.847 12.685ZM18.6162 16.2749C18.5744 16.3377 18.5318 16.4022 18.489 16.465L18.6162 16.2749Z" fill="#373B4D"/>
+</svg>

From 39d6b1f04517b0679ac318d2bd461f7fc8bc3b9d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 17:42:33 +0200
Subject: [PATCH 11/27] feat: add fallback for missing browser icons

---
 .../teams/[team]/activity.svelte              | 26 ++++++++++++++-----
 .../user/[user]/activity.svelte               | 26 ++++++++++++++-----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index 3f2881bd7..5e297e945 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -19,6 +19,14 @@
     const limit = 5;
 
     $: request = sdkForProject.teams.listLogs($page.params.team, limit, offset);
+
+    let browsers = {
+        firefox: 'firefox',
+        chrome: 'chrome',
+        safari: 'safari',
+        opera: 'opera',
+        edge: 'edge'
+    };
 </script>
 
 <Container>
@@ -40,13 +48,17 @@
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={`/icons/${
-                                                $app.themeInUse
-                                            }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                            alt={log.clientName} />
+                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={`/icons/${
+                                                    $app.themeInUse
+                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                                alt={log.clientName} />
+                                        {:else}
+                                            <span class="icon-globe-alt" />
+                                        {/if}
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}
diff --git a/src/routes/console/[project]/authentication/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
index 8100cd430..bc592f64f 100644
--- a/src/routes/console/[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -19,6 +19,14 @@
     const limit = 25;
 
     $: request = sdkForProject.users.getLogs($page.params.user, limit, offset);
+
+    let browsers = {
+        firefox: 'firefox',
+        chrome: 'chrome',
+        safari: 'safari',
+        opera: 'opera',
+        edge: 'edge'
+    };
 </script>
 
 <Container>
@@ -40,13 +48,17 @@
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={`/icons/${
-                                                $app.themeInUse
-                                            }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                            alt={log.clientName} />
+                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={`/icons/${
+                                                    $app.themeInUse
+                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                                alt={log.clientName} />
+                                        {:else}
+                                            <span class="icon-globe-alt" />
+                                        {/if}
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}

From bbef22b1d504b1445b10014568ea9b36b4c1b0f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 11:00:59 +0200
Subject: [PATCH 12/27] feat: add notifications

---
 src/lib/stores/auth-methods.ts                       |  6 ++++++
 .../[project]/authentication/_appleOAuth.svelte      |  6 ++++++
 .../[project]/authentication/_auth0OAuth.svelte      |  6 ++++++
 .../[project]/authentication/_mainOAuth.svelte       |  6 ++++++
 .../[project]/authentication/_microsoftOAuth.svelte  |  6 ++++++
 .../[project]/authentication/_oktaOAuth.svelte       |  7 ++++++-
 .../console/[project]/authentication/settings.svelte | 12 +++++++-----
 7 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index 8ca530178..b4fbd07b9 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -1,6 +1,12 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 
+export type AuthMethod = {
+    label: string;
+    method: string;
+    value: boolean | null;
+};
+
 function createAuthMethods() {
     const { subscribe, set } = writable({
         list: [
diff --git a/src/routes/console/[project]/authentication/_appleOAuth.svelte b/src/routes/console/[project]/authentication/_appleOAuth.svelte
index 157ce1900..f7e18291b 100644
--- a/src/routes/console/[project]/authentication/_appleOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_appleOAuth.svelte
@@ -29,6 +29,12 @@
                 secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_auth0OAuth.svelte b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
index ee16907db..7baa58b4d 100644
--- a/src/routes/console/[project]/authentication/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
@@ -29,6 +29,12 @@
                 secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_mainOAuth.svelte b/src/routes/console/[project]/authentication/_mainOAuth.svelte
index 85677ab84..f874c8198 100644
--- a/src/routes/console/[project]/authentication/_mainOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_mainOAuth.svelte
@@ -25,6 +25,12 @@
                 provider.secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
index 432e54569..fc3bff73a 100644
--- a/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
@@ -29,6 +29,12 @@
             );
 
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_oktaOAuth.svelte b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
index 32bb06db6..fb32e4b64 100644
--- a/src/routes/console/[project]/authentication/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
@@ -28,8 +28,13 @@
                 provider.id,
                 secret
             );
-
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/settings.svelte b/src/routes/console/[project]/authentication/settings.svelte
index d30450a32..41972c7d3 100644
--- a/src/routes/console/[project]/authentication/settings.svelte
+++ b/src/routes/console/[project]/authentication/settings.svelte
@@ -6,7 +6,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../store';
-    import { authMethods } from '$lib/stores/auth-methods';
+    import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { OAuthProviders } from '$lib/stores/oauth-providers';
     import { event } from '$lib/actions/analytics';
     import type { Provider } from '$lib/stores/oauth-providers';
@@ -17,12 +17,14 @@
     $: OAuthProviders.load($project);
     let showModal = false;
 
-    const authUpdate = async (id: string, value: boolean) => {
+    const authUpdate = async (box: AuthMethod) => {
         try {
-            await sdkForConsole.projects.updateAuthStatus(projectId, id, value);
+            await sdkForConsole.projects.updateAuthStatus(projectId, box.method, box.value);
             addNotification({
                 type: 'success',
-                message: 'Updated project authentication status successfully'
+                message: `${box.label} authentication has been ${
+                    box.value ? 'enabled' : 'disabled'
+                }`
             });
         } catch (error) {
             addNotification({
@@ -50,7 +52,7 @@
                             id={box.method}
                             bind:value={box.value}
                             on:change={() => {
-                                authUpdate(box.method, box.value);
+                                authUpdate(box);
                             }} />
                     {/each}
                 </ul>

From 7ee1a0aa328735275a037f753e283f123d5cf829 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 11:08:53 +0200
Subject: [PATCH 13/27] fix: copyInput readonly, typos

---
 src/lib/components/copyInput.svelte                         | 2 +-
 src/routes/console/[project]/authentication/settings.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index 7eb0900e7..5eb558fc3 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div class="input-text-wrapper is-with-end-button">
-    <input {value} type="text" class="input-text" disabled />
+    <input {value} type="text" class="input-text" readonly />
     <button type="button" class="input-button tooltip" aria-label="Click to copy." on:click={copy}>
         <span class="icon-duplicate" aria-hidden="true" />
         <div class="tootip">
diff --git a/src/routes/console/[project]/authentication/settings.svelte b/src/routes/console/[project]/authentication/settings.svelte
index 41972c7d3..801a6ce52 100644
--- a/src/routes/console/[project]/authentication/settings.svelte
+++ b/src/routes/console/[project]/authentication/settings.svelte
@@ -87,7 +87,7 @@
                     <p class="u-margin-block-start-8">{provider.name}</p>
                     <div class="u-margin-block-start-24">
                         <Pill success={provider.active}>
-                            {provider.active ? 'Enabled' : 'Disabled'}
+                            {provider.active ? 'enabled' : 'disabled'}
                         </Pill>
                     </div>
                 </button>

From 21798dfed46856e8bbdc7622889623fb6c9811c1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 15:26:00 +0200
Subject: [PATCH 14/27] typo: renamed route

---
 src/routes/console/[project]/authentication/__layout.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/[project]/authentication/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
index 1cd29c7c1..16b0c10d1 100644
--- a/src/routes/console/[project]/authentication/__layout.svelte
+++ b/src/routes/console/[project]/authentication/__layout.svelte
@@ -13,10 +13,10 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Users',
+            title: 'Authentication',
             level: 3,
             breadcrumbs: {
-                title: 'Users',
+                title: 'Authentication',
                 href: path
             },
             tabs: [

From c64d04891a7861eb6e5a0c8f12fbf29991faaf29 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 10:30:33 +0200
Subject: [PATCH 15/27] test: fix copyinput from disabled to readonly

---
 tests/unit/components/copyInput.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/components/copyInput.test.ts b/tests/unit/components/copyInput.test.ts
index 95c0ff689..f4d9986dc 100644
--- a/tests/unit/components/copyInput.test.ts
+++ b/tests/unit/components/copyInput.test.ts
@@ -13,7 +13,7 @@ test('shows CopyInput component', () => {
     expect(input).toBeInTheDocument();
     expect(button).toBeInTheDocument();
     expect(input).toHaveAttribute('type', 'text');
-    expect(input).toBeDisabled();
+    expect(input).toHaveAttribute('readonly');
 });
 
 test('copy to clipboard function called on click', async () => {

From ac5633bc8171cd2f05d63abcfe089578e8f45367 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 11:30:43 +0200
Subject: [PATCH 16/27] fix: verify dropdown closes after click

---
 .../console/[project]/authentication/user/[user]/index.svelte   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index eff6a55a1..b359a5ac1 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -60,6 +60,7 @@
     }
 
     async function updateVerificationEmail() {
+        showVerifcationDropdown = false;
         try {
             await sdkForProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
             $user.emailVerification = !$user.emailVerification;
@@ -77,6 +78,7 @@
         }
     }
     async function updateVerificationPhone() {
+        showVerifcationDropdown = false;
         try {
             await sdkForProject.users.updatePhoneVerification($user.$id, !$user.phoneVerification);
             $user.phoneVerification = !$user.phoneVerification;

From 9d3f28adaac9a40b7ac6f82c2da18d1c971233bc Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 12:09:42 +0200
Subject: [PATCH 17/27] chore: bump css to 0.0.0-42

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 723c064e4..527e5e2cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-39",
-                "@aw-labs/ui": "0.0.0-39",
+                "@aw-labs/icons": "0.0.0-42",
+                "@aw-labs/ui": "0.0.0-42",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
-            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
+            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
-            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
+            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
-            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
+            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
-            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
+            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index b6d28173a..3ed5a44f5 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-39",
-        "@aw-labs/ui": "0.0.0-39",
+        "@aw-labs/icons": "0.0.0-42",
+        "@aw-labs/ui": "0.0.0-42",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 484443485fc7b558348984ebea817d81091a616c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 14:24:36 +0200
Subject: [PATCH 18/27] chore: bump css to 0.0.0-43

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 527e5e2cc..b1c2ca235 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-42",
-                "@aw-labs/ui": "0.0.0-42",
+                "@aw-labs/icons": "0.0.0-43",
+                "@aw-labs/ui": "0.0.0-43",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
-            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
+            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
-            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
+            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
-            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
+            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
-            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
+            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 3ed5a44f5..6609e3147 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-42",
-        "@aw-labs/ui": "0.0.0-42",
+        "@aw-labs/icons": "0.0.0-43",
+        "@aw-labs/ui": "0.0.0-43",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 8da86b532b36ad7ea79e3d01eaea3e2b5eec1687 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:20:30 +0200
Subject: [PATCH 19/27] feat: remove unused links

---
 src/lib/layout/navigation.svelte | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 4e7018963..e3eff9729 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -58,24 +58,6 @@
                             <span class="text">Functions</span>
                         </a>
                     </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/webhooks`)}
-                            href={`${path}/webhooks`}>
-                            <span class="icon-link" aria-hidden="true" />
-                            <span class="text">Webhooks</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/keys`)}
-                            href={`${path}/keys`}>
-                            <span class="icon-key" aria-hidden="true" />
-                            <span class="text">API Keys</span>
-                        </a>
-                    </li>
                 </ul>
             </section>
         </div>

From 0337fc8ae9c561ade88ad0b58055329b11dfb7c4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:21:25 +0200
Subject: [PATCH 20/27] feat: add const for page limit & some fixes

---
 src/lib/stores/layout.ts                           |  4 +++-
 .../console/[project]/authentication/index.svelte  |  8 ++++----
 .../[project]/authentication/security.svelte       |  2 +-
 .../authentication/teams/[team]/index.svelte       |  4 ++--
 .../authentication/user/[user]/index.svelte        |  4 ++--
 .../[project]/storage/bucket/[bucket]/index.svelte | 14 +++++++-------
 6 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 1e4f55518..43c374ed5 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,5 +1,5 @@
 import { project } from '../../routes/console/[project]/store';
-import { get, writable } from 'svelte/store';
+import { get, readable, writable } from 'svelte/store';
 
 export type Tab = {
     href: string;
@@ -64,3 +64,5 @@ export function updateLayout(args: updateLayoutArguments) {
         }
     }
 }
+
+export const pageLimit = readable(12); // default page limit
diff --git a/src/routes/console/[project]/authentication/index.svelte b/src/routes/console/[project]/authentication/index.svelte
index 0d77ec369..db078a2c7 100644
--- a/src/routes/console/[project]/authentication/index.svelte
+++ b/src/routes/console/[project]/authentication/index.svelte
@@ -21,12 +21,12 @@
     import { base } from '$app/paths';
     import { usersList } from './store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
@@ -34,7 +34,7 @@
     };
 
     $: if (search) offset = 0;
-    $: usersList.load(search, limit, offset ?? 0);
+    $: usersList.load(search, $pageLimit, offset ?? 0);
 </script>
 
 <Container>
@@ -99,7 +99,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.total}</p>
-            <Pagination {limit} bind:offset sum={$usersList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else if search}
         <Empty>
@@ -115,7 +115,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.total}</p>
-            <Pagination {limit} bind:offset sum={$usersList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else}
         <Empty dashed centered>
diff --git a/src/routes/console/[project]/authentication/security.svelte b/src/routes/console/[project]/authentication/security.svelte
index cfa9dec9a..f2467c717 100644
--- a/src/routes/console/[project]/authentication/security.svelte
+++ b/src/routes/console/[project]/authentication/security.svelte
@@ -135,7 +135,7 @@
     </CardGrid>
 
     <CardGrid>
-        <h2 class="heading-level-6">Session Length</h2>
+        <h2 class="heading-level-6">Session Length - (Coming Soon)</h2>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
diff --git a/src/routes/console/[project]/authentication/teams/[team]/index.svelte b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
index 5fc5e0a63..17849fdcf 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
@@ -35,9 +35,9 @@
             await sdkForProject.teams.update($page.params.team, teamName);
             $team.name = teamName;
             title.set(teamName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
             breadcrumb.title = teamName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index b359a5ac1..ea5d12cca 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -115,9 +115,9 @@
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
             title.set(userName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
             breadcrumb.title = userName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
 
             showError = false;
             addNotification({
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index d3b437560..3d8647b4e 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -25,6 +25,7 @@
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
     import { goto } from '$app/navigation';
+    import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
     let showCreate = false;
@@ -33,7 +34,6 @@
     let selectedFile: Models.File = null;
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const bucket = $page.params.bucket;
 
@@ -42,20 +42,20 @@
 
     const fileCreated = () => {
         showCreate = false;
-        files.load(bucket, search, limit, offset);
+        files.load(bucket, search, $pageLimit, offset);
     };
 
     const fileDeleted = (event: CustomEvent<Models.File>) => {
         showDelete = false;
         uploader.removeFile(event.detail);
-        files.load(bucket, search, limit, offset);
+        files.load(bucket, search, $pageLimit, offset);
     };
 
     const deleteFile = async (file: Models.File) => {
         try {
             await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
             uploader.removeFile(file);
-            files.load(bucket, search, limit, offset);
+            files.load(bucket, search, $pageLimit, offset);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -64,7 +64,7 @@
         }
     };
 
-    $: files.load(bucket, search, limit, offset);
+    $: files.load(bucket, search, $pageLimit, offset);
     $: if (search) offset = 0;
 </script>
 
@@ -175,7 +175,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$files.total}</p>
-            <Pagination {limit} bind:offset sum={$files.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$files.total} />
         </div>
     {:else if search}
         <Empty>
@@ -191,7 +191,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$files?.total}</p>
-            <Pagination {limit} bind:offset sum={$files?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
         </div>
     {:else}
         <Empty dashed centered>

From fe377d077fc85226cb328dc805a4d90fdc7d2c9b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:24:06 +0200
Subject: [PATCH 21/27] fix: back button alignment

---
 src/lib/layout/shell.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..111165f91 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -78,12 +78,12 @@
     <section class="main-content">
         <Cover>
             <svelte:fragment slot="header">
-                {#if $backButton}
-                    <a class="back-button" href={$backButton} aria-label="page back">
-                        <span class="icon-cheveron-left" aria-hidden="true" />
-                    </a>
-                {/if}
                 <h1 class="heading-level-4">
+                    {#if $backButton}
+                        <a class="back-button" href={$backButton} aria-label="page back">
+                            <span class="icon-cheveron-left" aria-hidden="true" />
+                        </a>
+                    {/if}
                     <span class="text"> {$title}</span>
                 </h1>
                 {#if $copyData?.value}

From a1f9bcdeea08392d314474908af995d4293c0149 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:25:58 +0200
Subject: [PATCH 22/27] style: fix spacing that bugged Eldad

---
 src/lib/layout/header.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 9cdaaec94..6929557d1 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -27,7 +27,8 @@
             href="https://appwrite.io/support"
             target="_blank"
             rel="noopener noreferrer"
-            class="button is-small is-text"><span class="text">Support</span></a>
+            class="button is-small is-text u-margin-inline-end-16"
+            ><span class="text">Support</span></a>
         <button class="button is-small is-secondary"><span class="text">Upgrade</span></button>
     </nav>
     <nav class="user-profile">

From 98c4f1a4b0c082273b9ad1d4b5f1e2724d80b4f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 12:20:17 +0200
Subject: [PATCH 23/27] chore: bump css to 0.0.0-44

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b1c2ca235..7d3cfe055 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-43",
-                "@aw-labs/ui": "0.0.0-43",
+                "@aw-labs/icons": "0.0.0-44",
+                "@aw-labs/ui": "0.0.0-44",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
-            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
+            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
-            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-44.tgz",
+            "integrity": "sha512-po8t4/8XUMCJZCwvv6hB6HmHEQQBPDqHEoJLeimZrR+HQam8bbPJ1a7jAj/JfH6mHFiE3qk0nM4PHTnHbYo4QA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
-            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
+            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
-            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-44.tgz",
+            "integrity": "sha512-po8t4/8XUMCJZCwvv6hB6HmHEQQBPDqHEoJLeimZrR+HQam8bbPJ1a7jAj/JfH6mHFiE3qk0nM4PHTnHbYo4QA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 6609e3147..2ed5cac14 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-43",
-        "@aw-labs/ui": "0.0.0-43",
+        "@aw-labs/icons": "0.0.0-44",
+        "@aw-labs/ui": "0.0.0-44",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 7a15dbe41e266a0e4480f03475cc34df1ff05a99 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 12:20:56 +0200
Subject: [PATCH 24/27] style: remove inline padding from button

---
 .../[project]/authentication/user/[user]/index.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index ea5d12cca..0d1c478ad 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -429,8 +429,8 @@
                             {/each}
                         {/if}
                     </ul>
-                    <Button
-                        text
+                    <button
+                        class="button is-text u-padding-inline-0"
                         disabled={prefs?.length
                             ? !prefs[prefs.length - 1][0] || !prefs[prefs.length - 1][1]
                             : true}
@@ -439,7 +439,7 @@
                             prefs = prefs;
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add preference </span></Button>
+                        <span class="text"> Add preference </span></button>
                 </form>
             </svelte:fragment>
 

From 939a351ea371a99744396d2594d708d661cc7d59 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 14:37:41 +0200
Subject: [PATCH 25/27] feat: add limit of 3 notifications

---
 src/lib/stores/notifications.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/stores/notifications.ts b/src/lib/stores/notifications.ts
index 0642824df..397b578e4 100644
--- a/src/lib/stores/notifications.ts
+++ b/src/lib/stores/notifications.ts
@@ -32,7 +32,13 @@ export const addNotification = (notification: Omit<Notification, 'id'>) => {
     };
 
     const n = { ...defaults, ...notification };
-    notifications.update((all) => [n, ...all]);
+    notifications.update((all) => {
+        if (all.length < 3) {
+            return [n, ...all];
+        } else {
+            return [n, ...all.slice(0, 2)];
+        }
+    });
 
     if (n.timeout) setTimeout(() => dismissNotification(n.id), n.timeout);
 };

From 59938e8540fee52816b30233a6585e269aa85c4e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 17:19:42 +0200
Subject: [PATCH 26/27] reodered auth methods

---
 src/lib/stores/auth-methods.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index b4fbd07b9..2f8d50f13 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -15,6 +15,11 @@ function createAuthMethods() {
                 method: 'email-password',
                 value: null
             },
+            {
+                label: 'Phone',
+                method: 'phone',
+                value: null
+            },
             {
                 label: 'Magic URL',
                 method: 'magic-url',
@@ -34,11 +39,6 @@ function createAuthMethods() {
                 label: 'JWT',
                 method: 'jwt',
                 value: null
-            },
-            {
-                label: 'Phone',
-                method: 'phone',
-                value: null
             }
         ]
     });
@@ -53,6 +53,11 @@ function createAuthMethods() {
                     method: 'email-password',
                     value: project.authEmailPassword
                 },
+                {
+                    label: 'Phone',
+                    method: 'phone',
+                    value: project.authPhone
+                },
                 {
                     label: 'Magic URL',
                     method: 'magic-url',
@@ -72,11 +77,6 @@ function createAuthMethods() {
                     label: 'JWT',
                     method: 'jwt',
                     value: project.authJWT
-                },
-                {
-                    label: 'Phone',
-                    method: 'phone',
-                    value: project.authPhone
                 }
             ];
             set({ list });

From 465dcb0ab5e2fb022ff087384779bf6e1d8af7c2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Aug 2022 10:14:55 +0200
Subject: [PATCH 27/27] feat: increased the limit

---
 .../authentication/teams/[team]/activity.svelte     |  6 +++---
 .../authentication/teams/[team]/members.svelte      | 13 ++++++-------
 .../authentication/user/[user]/sessions.svelte      |  4 ++--
 src/routes/console/[project]/storage/index.svelte   |  8 ++++----
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index 5e297e945..7e2d74f89 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -14,11 +14,11 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import { app } from '$lib/stores/app';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
-    const limit = 5;
 
-    $: request = sdkForProject.teams.listLogs($page.params.team, limit, offset);
+    $: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset);
 
     let browsers = {
         firefox: 'firefox',
@@ -100,7 +100,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/[project]/authentication/teams/[team]/members.svelte b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
index d2bc1506c..3a4920973 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
@@ -19,9 +19,10 @@
     import { memberships } from './store';
     import CreateMember from './_createMembership.svelte';
     import DeleteMembership from './_deleteMembership.svelte';
+    import { pageLimit } from '$lib/stores/layout';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
-    const deleted = () => memberships.load($page.params.team, search, limit, offset ?? 0);
+    const deleted = () => memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
 
     const project = $page.params.project;
 
@@ -31,13 +32,11 @@
     let offset: number = null;
     let selectedMembership: Models.Membership;
 
-    const limit = 5;
-
     $: if (search) offset = 0;
-    $: memberships.load($page.params.team, search, limit, offset ?? 0);
+    $: memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
 
     const memberCreated = async (event: CustomEvent<Models.Membership>) => {
-        memberships.load($page.params.team, search, limit, offset ?? 0);
+        memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
         await goto(
             `${base}/console/${project}/authentication/teams/${event.detail.teamId}/members`
         );
@@ -95,7 +94,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {$memberships.total}</p>
-            <Pagination {limit} bind:offset sum={$memberships.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else if search}
         <Empty>
@@ -113,7 +112,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {$memberships.total}</p>
-            <Pagination {limit} bind:offset sum={$memberships.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else}
         <Empty dashed centered>
diff --git a/src/routes/console/[project]/authentication/user/[user]/sessions.svelte b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
index c0a39a3ba..e5ef924bd 100644
--- a/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
@@ -16,13 +16,13 @@
     import DeleteSessions from './_deleteSession.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { app } from '$lib/stores/app';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
     let showDelete = false;
     let showDeleteAll = false;
     let selectedSessionId: string = null;
 
-    const limit = 5;
     const request = sdkForProject.users.getSessions($page.params.user);
 
     //TODO: replace session.expire with "last activity"
@@ -104,7 +104,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/[project]/storage/index.svelte
index 3c16cd351..d65192ec9 100644
--- a/src/routes/console/[project]/storage/index.svelte
+++ b/src/routes/console/[project]/storage/index.svelte
@@ -10,19 +10,19 @@
     import { base } from '$app/paths';
     import { bucketList } from './store';
     import { tooltip } from '$lib/actions/tooltip';
+    import { pageLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const bucketCreated = async (event: CustomEvent<Models.Bucket>) => {
         showCreate = false;
         await goto(`${base}/console/${project}/storage/bucket/${event.detail.$id}`);
     };
 
-    $: bucketList.load(search, limit, offset ?? 0);
+    $: bucketList.load(search, $pageLimit, offset ?? 0);
     $: if (search) offset = 0;
 </script>
 
@@ -97,7 +97,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList.total}</p>
-            <Pagination {limit} bind:offset sum={$bucketList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$bucketList.total} />
         </div>
     {:else if search}
         <Empty>
@@ -113,7 +113,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList?.total}</p>
-            <Pagination {limit} bind:offset sum={$bucketList?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
         </div>
     {:else}
         <Empty dashed centered>