fix: align sign-in methods display and cells

Signed-off-by: David Dal Busco <[email protected]>
junobuild · Nov 14, 2023 · 941a353 · 941a353
1 parent 832c84a
commit 941a353
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/src/frontend/src/lib/components/auth/SignInMethod.svelte b/src/frontend/src/lib/components/auth/SignInMethod.svelte
@@ -18,7 +18,7 @@
 			<tr>
 				<td
 					><ExternalLink href="https://internetcomputer.org/internet-identity"
-						><IconIC /> Internet Identity</ExternalLink
+						><span class="icon"><IconIC /></span> Internet Identity</ExternalLink
 					></td
 				>
 				<td class="status">{$i18n.users.enabled}</td>
@@ -40,10 +40,15 @@
 
 		@include media.min-width(medium) {
 			display: table-cell;
+			vertical-align: middle;
 		}
 	}
 
 	tr:last-of-type td {
 		padding-bottom: var(--padding-1_5x);
 	}
+
+	.icon {
+		margin: 0 var(--padding-0_5x) 0 0;
+	}
 </style>
diff --git a/src/frontend/src/lib/components/auth/User.svelte b/src/frontend/src/lib/components/auth/User.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <tr>
-	<td><Identifier identifier={owner.toText()} /></td>
+	<td><Identifier small={false} identifier={owner.toText()} /></td>
 	<td class="providers">
 		{#if provider === 'internet_identity'}
 			<IconIC title="Internet Identity" />

diff --git a/src/frontend/src/lib/components/icons/IconArrowOutward.svelte b/src/frontend/src/lib/components/icons/IconArrowOutward.svelte
@@ -17,5 +17,6 @@
 <style lang="scss">
 	svg {
 		min-width: 14px;
+		margin: var(--padding-0_25x) 0 0;
 	}
 </style>
diff --git a/src/frontend/src/lib/components/ui/ExternalLink.svelte b/src/frontend/src/lib/components/ui/ExternalLink.svelte
@@ -21,7 +21,9 @@
 
 <style lang="scss">
 	a {
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--padding-0_5x);
 
 		&:not(.underline) {
 			text-decoration: none;

diff --git a/src/frontend/src/lib/styles/global/table.scss b/src/frontend/src/lib/styles/global/table.scss
@@ -28,7 +28,7 @@ th,
 td,
 .td {
 	padding: var(--padding) var(--padding-2x);
-	vertical-align: text-top;
+	vertical-align: middle;
 
 	&:not(.actions) {
 		@include text.truncate;