nicer styles

dfinity · Sep 1, 2022 · 4416935 · 4416935
1 parent f45b508
commit 4416935
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/frontend/src/flows/login/knownAnchor.ts b/src/frontend/src/flows/login/knownAnchor.ts
@@ -16,10 +16,12 @@ const pageContent = (userNumber: bigint) => html`
       <h1 class="t-title t-title--main">Welcome back!</h1>
       <p class="t-lead">Authenticate using Internet Identity.</p>
     <hgroup>
-    <output class="c-input c-input--readonly t-vip" aria-label="User Number" data-usernumber>${userNumber}</output>
-    <button type="button" id="login" class="c-button">Authenticate</button>
-    <div class="l-divider l-divider--text" aria-label="Other Options">
-      <span class="l-divider__label" aria-hidden>Or</span>
+    <div class="l-section">
+      <output class="c-input c-input--readonly t-vip" aria-label="User Number" data-usernumber>${userNumber}</output>
+      <button type="button" id="login" class="c-button">Authenticate</button>
+      <div class="l-divider l-divider--text" aria-label="Other Options">
+        <span class="l-divider__label" aria-hidden>Or</span>
+      </div>
     </div>
     <button type="button" id="loginDifferent" class="c-button c-button--secondary">
       Use a different Identity Anchor

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -158,6 +158,7 @@
   --rs-button-stack: var(--vs-stack);
 
   --rs-input-bezel: var(--rs-button-bezel);
+  --rs-input-bezel-narrow: calc(var(--rs-button-bezel) * 0.75);
   --rs-input-stack: var(--rs-button-stack);
 
   --vs-line-height: 1.35;
@@ -506,6 +507,7 @@ a:hover,
 }
 
 .c-card--highlight {
+  padding: calc(var(--rs-card-bezel) * 1.25);
   background-color: var(--rc-background-transparent);
   border: var(--vs-line) solid var(--rc-line);
 }
@@ -664,7 +666,7 @@ a:hover,
   position: relative;
   display: block;
   width: 100%;
-  padding: var(--rs-input-bezel);
+  padding: var(--rs-input-bezel-narrow) var(--rs-input-bezel);
   margin-top: var(--rs-input-stack);
   background: var(--rc-input);
   color: var(--rc-onInput);