Update authentication mobile styles (#674)

* style: update authentication page styles to display more info on mobile

* style: update "on chain" logo

* chore: prettify

* 🤖 Selenium screenshots auto-update

* fix: avoid x-overflow on extremely small devices

* 🤖 Selenium screenshots auto-update

* Trigger CI

* style: undo global container changes

* style: restyle authenticate container

* chore: formatting

* 🤖 Selenium screenshots auto-update

* chore: minify svg

* style: container desktop styles

* chore: svg update

* 🤖 Selenium screenshots auto-update

* Trigger CI

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frederik Rothenberger <frederik.rothenberger@dfinity.org>

src/frontend/src/flows/authenticate/index.ts

@@ -50,10 +50,6 @@ const pageContent = (hostName: string, userNumber?: bigint) => html` <style>
       );
     }
 
-    .modeContainer {
-      min-height: 7rem;
-    }
-
     .childContainer {
       position: relative;
       margin-bottom: 0.5rem;
@@ -78,49 +74,71 @@ const pageContent = (hostName: string, userNumber?: bigint) => html` <style>
     }
 
     .hostName {
-      font-size: 1rem;
+      padding: 1rem 0;
+      font-size: 0.8rem;
       font-weight: 400;
     }
 
-    .sectionTitle {
-      margin: 0.5rem 0 0.5rem 0;
-      font-size: 1rem;
-      font-weight: normal;
-      color: black;
-    }
-
     .buttonContainer {
       margin: 0.5rem 0;
     }
 
+    button.primary {
+      margin-top: 1rem;
+    }
+
     hr {
       border: none;
       border-top-color: var(--grey-050);
       border-top-style: solid;
       margin: 0.5rem 0;
     }
+
+    .anchor-error-message .error-message {
+      margin-bottom: 1rem;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .host-name {
+      padding: 1rem 0.5rem;
+    }
+
+    .container {
+      padding: 3.5rem 1rem 2rem;
+    }
+    @media (min-width: 512px) {
+      .container {
+        padding: 3.5rem 2.5rem 2rem;
+      }
+    }
   </style>
   <div class="container">
     ${icLogo}
     <h1>Internet Identity</h1>
-    <h2 class="sectionTitle">Authenticate to service:</h2>
-    <div class="highlightBox hostName">${hostName}</div>
-    <h2 class="sectionTitle">Use Identity Anchor:</h2>
-    <div class="modeContainer">
-      <div class="childContainer">
-        <input
-          class="anchorText"
-          type="text"
-          id="userNumberInput"
-          placeholder="Enter anchor"
-          value="${userNumber !== undefined ? userNumber : ""}"
-        />
-        <button id="editAnchorButton">${editIcon}</button>
-      </div>
-      <div id="invalidAnchorMessage" class="error-message-hidden">
-        The Identity Anchor is not valid. Please try again.
-      </div>
+    <p>Authenticate to service:</p>
+    <div class="host-name highlightBox hostName">${hostName}</div>
+    <p>Use Identity Anchor:</p>
+
+    <div class="childContainer">
+      <input
+        class="anchorText"
+        type="text"
+        id="userNumberInput"
+        placeholder="Enter anchor"
+        value="${userNumber !== undefined ? userNumber : ""}"
+      />
+      <button id="editAnchorButton">${editIcon}</button>
     </div>
+    <div
+      id="invalidAnchorMessage"
+      class="anchor-error-message error-message-hidden"
+    >
+      The Identity Anchor is not valid. Please try again.
+    </div>
+
     <button type="button" id="authorizeButton" class="primary">
       Start Session
     </button>

src/frontend/src/styles/main.css

@@ -34,14 +34,22 @@ body {
 }
 
 footer {
-  padding: 2em 2em 0;
+  padding: 1em 2em 0.5rem;
+}
+@media (min-width: 512px) {
+  footer {
+    padding: 2em 2em 1rem;
+  }
 }
 
 .powered-by-link {
   padding: 0.5em;
   display: inline-block;
   transition: background 0.2s;
 }
+.powered-by-link img {
+  max-width: 100%;
+}
 
 .powered-by-link:hover,
 .powered-by-link:focus {
@@ -323,7 +331,12 @@ hr {
 }
 
 nav {
-  margin-top: 2em;
+  margin-top: 1.5em;
+}
+@media (min-width: 512px) {
+  nav {
+    margin-top: 2em;
+  }
 }
 
 .nav-links {