Tweak spaces, buttons and link (#1745)

tweak spaces, buttons and link
dfinity · Jul 13, 2023 · 8eb8bf5 · 8eb8bf5
1 parent c167b64
commit 8eb8bf5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 19 deletions.
diff --git a/src/frontend/src/components/anchorInput.ts b/src/frontend/src/components/anchorInput.ts
@@ -114,7 +114,7 @@ export const mkAnchorInput = ({
     ? new Chan(defaultClass)
     : classes_.map((clzs) => [defaultClass, ...clzs].join(" "));
 
-  const template = html` <div class="c-input--anchor l-stack">
+  const template = html` <div class="c-input--anchor">
     <label class=${asyncReplace(classes)} aria-label="Identity Anchor">
       <input
         ${ref(userNumberInput)}

diff --git a/src/frontend/src/components/authenticateBox.ts b/src/frontend/src/components/authenticateBox.ts
@@ -236,15 +236,15 @@ export const authnTemplates = (
             Continue
           </button>
         </div>
-        <div class="t-centered l-stack">
-          <a
-            @click=${() =>
-              withUserNumber((userNumber) => props.addDevice(userNumber))}
-            id="addNewDeviceButton"
-            class="t-link"
-            >Continue with another device</a
-          >
-        </div>
+        <button
+          @click=${() =>
+            withUserNumber((userNumber) => props.addDevice(userNumber))}
+          id="addNewDeviceButton"
+          class="c-button c-button--textOnly"
+        >
+          Continue with another device
+        </button>
+
         <ul class="c-link-group">
           <li>
             <button @click=${() => props.register()} class="t-link">

diff --git a/src/frontend/src/flows/authorize/index.ts b/src/frontend/src/flows/authorize/index.ts
@@ -37,10 +37,7 @@ export const authnTemplateAuthorize = ({
   const strong = (slot: TemplateElement) =>
     html`<strong class="t-strong">${slot}</strong>`;
   const h1 = (slot: TemplateElement) =>
-    html`<h1
-      class="t-title t-title--main"
-      style="text-align: left; display: inline;"
-    >
+    html`<h1 class="t-title t-title--main" style="display: inline;">
       ${slot}
     </h1>`;
 

diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
@@ -63,7 +63,7 @@ export const authnTemplateManage = ({
     showDapps?: boolean;
   }): TemplateResult => html`
     ${showDapps ? dappsHeader({ dapps, clickable: false }) : undefined}
-    <header class="t-centered" style="text-align: left;">
+    <header class="l-stack">
       <h1 class="t-title t-title--main">${title}</h1>
       ${nonNullish(subtitle)
         ? html` <p class="t-lead l-stack">${subtitle}</p>`

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -279,7 +279,7 @@
   --rs-irregularity-stack: calc(var(--vs-stack) * 0.5);
   --rs-toast-stack: var(--rs-irregularity-stack);
 
-  --rs-button-bezel: calc(var(--vs-bezel) * 1.2);
+  --rs-button-bezel: calc(var(--vs-bezel) * 1.5);
   --rs-button-stack: var(--vs-stack);
   --rs-button-radius: var(--vs-border-radius);
 
@@ -582,6 +582,8 @@ a:hover,
 .t-link:not([disabled]):focus,
 .t-link:not([disabled]):hover {
   text-decoration: underline;
+  text-decoration-thickness: var(--rs-line);
+  text-underline-offset: 0.5ex;
 }
 
 .t-link--discreet:not([disabled]):focus,
@@ -1283,7 +1285,7 @@ by all browsers (FF is missing) */
   width: 100%;
   text-align: center;
   border-radius: var(--rs-button-radius);
-  font-size: 1.4rem;
+  font-size: inherit;
 
   font-weight: 600;
 }
@@ -1319,6 +1321,12 @@ by all browsers (FF is missing) */
   border: var(--rs-line) solid var(--rc-line-interaction);
 }
 
+.c-button--textOnly {
+  background: transparent;
+  color: var(--rc-interaction-text);
+  border: none;
+}
+
 .c-button:not([disabled]):focus,
 .c-button:not([disabled]):hover {
   opacity: 0.9;
@@ -1435,10 +1443,10 @@ by all browsers (FF is missing) */
 .c-link-group {
   display: flex;
   gap: var(--rs-inline-button-gap);
-  margin-top: calc(var(--vs-stack) * 4);
   justify-content: space-between;
   border-top: var(--rs-line) solid var(--rc-line);
-  padding-top: var(--vs-stack);
+  margin-top: calc(var(--vs-stack) * 6);
+  padding-top: calc(var(--vs-stack) * 2);
 }
 
 /**
@@ -1481,6 +1489,7 @@ by all browsers (FF is missing) */
   --bezel-top: calc(1.2 * var(--rs-input-bezel));
   --bezel-bottom: var(--rs-input-bezel);
   font-size: 1.4em;
+  margin-top: calc(var(--rs-input-stack) * 1.5);
 }
 
 .c-input--vip::placeholder {