Remove unnecessary top margin

dfinity · Jul 9, 2024 · bf0d3da · bf0d3da
1 parent 812c5c7
commit bf0d3da
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/src/frontend/src/flows/authorize/index.ts b/src/frontend/src/flows/authorize/index.ts
@@ -97,7 +97,7 @@ export const authnTemplateAuthorize = ({
   const firstTimeUnknown = (action: "pick" | "use_existing" | "first_time") => {
     const altOrigin = isAltOriginOf(action);
     return html`
-      <div class="l-stack">
+      <div>
         ${h1(copy.first_time_create)}
         <p class="t-lead l-stack">${copy.first_time_unknown_subtitle}</p>
         ${nonNullish(altOrigin)
@@ -110,8 +110,11 @@ export const authnTemplateAuthorize = ({
   // Variation: the user has used II before
   const returning = (action: "pick" | "use_existing") => {
     const altOrigin = isAltOriginOf(action);
+    // The "use_existing" screen has a different layout (mainWindow) than the "pick" screen (landingPage).
+    // Ideally the outer space would be handled by the parent.
+    const className = action === "use_existing" ? "l-stack" : undefined;
     return html`
-      <div class="l-stack">
+      <div class="${className}">
         ${h1(html`${copy[`${action}_title_1`]}`)}
         <p class="t-lead l-stack">
           ${copy[`${action}_subtitle`]} ${copy[`${action}_subtitle_join`]}

diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
@@ -55,44 +55,37 @@ export const authnTemplateManage = ({
 }: {
   dapps: KnownDapp[];
 }): AuthnTemplates => {
-  const wrap = ({
-    title,
-    subtitle,
-    showDapps = false,
-  }: {
-    title: TemplateElement;
-    subtitle?: string;
-    showDapps?: boolean;
-  }): TemplateResult => html`
-    ${showDapps ? dappsHeader({ dapps, clickable: false }) : undefined}
-    <header class="l-stack">
-      <h1 class="t-title t-title--main">${title}</h1>
-      ${nonNullish(subtitle)
-        ? html` <p class="t-lead l-stack">${subtitle}</p>`
-        : undefined}
-    </header>
-  `;
+  const title = (title: string) =>
+    html`<h1 class="t-title t-title--main">${title}</h1>`;
+
+  const subtitle = (subtitle: string) =>
+    `<p class="t-lead l-stack">${subtitle}</p>`;
+
   return {
     firstTime: {
-      slot: wrap({
-        title: "Securely connect to dapps on the Internet Computer",
-        showDapps: true,
-      }),
+      slot: html`
+        ${dappsHeader({ dapps, clickable: false })}
+        <header>
+          ${title("Securely connect to dapps on the Internet Computer")}
+        </header>
+      `,
       useExistingText: "Use existing",
       createAnchorText: "Create Internet Identity",
     },
     useExisting: {
-      slot: wrap({
-        title: html`Enter Identity 🔑`,
-        subtitle: "to continue",
-      }),
+      slot: html`
+        <header class="l-stack">
+          ${title("Enter Identity 🔑")} ${subtitle("to continue")}
+        </header>
+      `,
     },
 
     pick: {
-      slot: wrap({
-        title: html`Choose Identity 🔑`,
-        subtitle: "to continue",
-      }),
+      slot: html`
+        <header>
+          ${title("Choose Identity 🔑")} ${subtitle("to continue")}
+        </header>
+      `,
     },
   };
 };