From bdfcadfee321a73bec45a60312cc6a5380bfc9f7 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 9 May 2023 10:20:07 -0700
Subject: [PATCH] Replace image-item with avatar class

The image-item class had a bug where the width could be incorrect
causing the iamge to look squished. The new avatar class fixes this
problem.
---
 .../project-[project]/auth/settings/+page.svelte   | 14 +++++++-------
 .../auth/user-[user]/sessions/+page.svelte         | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index eba59cea4..42f640d07 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
+    import { app } from '$lib/stores/app';
+    import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { addNotification } from '$lib/stores/notifications';
+    import type { Provider } from '$lib/stores/oauth-providers';
+    import { OAuthProviders } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
-    import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
-    import { OAuthProviders } from '$lib/stores/oauth-providers';
-    import { app } from '$lib/stores/app';
-    import { page } from '$app/stores';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
 
     const projectId = $page.params.project;
 
@@ -78,7 +78,7 @@
                                     provider: provider.name.toLowerCase()
                                 });
                             }}>
-                            <div class="image-item">
+                            <div class="avatar">
                                 <img
                                     height="20"
                                     width="20"
diff --git a/src/routes/console/project-[project]/auth/user-[user]/sessions/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/sessions/+page.svelte
index 29aef6a74..eaa1e1cc2 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/sessions/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { EmptySearch } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
-        TableHeader,
-        TableRow,
-        TableCellHead,
         TableCell,
-        TableCellText
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
     } from '$lib/elements/table';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import DeleteAllSessions from '../deleteAllSessions.svelte';
@@ -47,7 +47,7 @@
                     <TableRow>
                         <TableCell title="Client">
                             <div class="u-flex u-gap-12 u-cross-center">
-                                <div class="image-item">
+                                <div class="avatar">
                                     <img
                                         height="20"
                                         width="20"