Breaking: Complete CSS Rewrite (#800)

* fix(unkown-anchor-page): nicer semantics

* fix(navbar): removes point as a (screen) readable character and makes it part of the css

* fix(recovery-mechanism): uses correct HTML element & hides icons form screen-readers

* fix(wraning): uses correct HTML element & hides icons form screen-readers

* fix(accessibility): removes banner for alert

* fix(html): better semantics

* feat(css): Adds a proper CSS reset

* feat(layout): introduces card and container as individual conepts

* style(typescript): prettier

* test(e2e): adapts test do accomodate new dom structure

* 🤖 Selenium screenshots auto-update

* design(CSS): removes CSS and adds base framework

* components(navlinks): creates a single component out of the nav links

* fix(knowAnchor): Makes the known anchor page look a bit nicer

* fix(links): Adds pointer cursor to pseudo-links

* design(css): Adjusts the titles line-height for a better reading experience

* design(css): Adds basic input styles

* fix(unkwownAnchor): applies the new classes

* fix(design): makes sure inputs still look like inputs in dark mode

* style(prettier): satisfly prettier rules

* style(CSS): adds better comments

* style(CSS): adds better comments

* feat(CSS): Adds concepts of titles with complications

* feat(card): Separates the fancy looking card from the layout

* feat(recovery): Styles recovery page

* feat(addDevice): Styles add device page

* feat(warnings): styles various warnings

* lint(format): satisfy code formatting

* fix(welcome): fixes spaces

* lint(format): satisfy code formatting

* lint(format): satisfy code formatting

* feat(CSS): adds variables for z-indexes

* test(e2e): removes questionable whitespace from test string

* fix(CSS): restores the more classical design

* feat(CSS): introduces a proper list style

* fix(CSS): adds more missing styles

* fix(CSS): reitroduces basic responsiveness

* feat(FAQ): reitroduces FAW styles

* 🤖 Selenium screenshots auto-update

* feat(input): adds conept of a read only input

* test(e2e): fixes userNumber tests

* lint(format): stisfy formatting

* test(e2e): copies test to see if it fails

* feat(seedphrase): re-adds styling for seed-phrase recovery and display

* fix(CSS): fixes faulty comment

* Revert "test(e2e): copies test to see if it fails"

This reverts commit b1bda05.

* feat(about): styles about page

* lint(formatter): stisfy formatter

* feat(pages): styes browser support page

* feat(pages): styles pick recovery device

* feat(pages): styles showcase page

* fix(unknownAnchor): closes unclosed link

* fix(logo): adds more space around the logo

* fix(footer): makes the footer look a bit nicer

* fix(css): make the trumps overwrite every other rule

* fix(css): makes sure the dot between the two navigation items is exactly centered

* fix(css): comment out dark-mode

* style(HTML): removes double spaces in between class-names

* style(links): underlines most links

* style(logo): replaces logo with a properly sized and compressed one

* linting(logo): stisfy formatter

* feat(authenticate): style authenticate page

* linting(authenticate): satisfy formatter

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* fix(responsiveness): nicer mobile styles

* fix(captcha): makes sure the captcha can be as wide as it can be

* fix(newDevice): adds some space on top of list

* fix(newDevice): adds some space on top of list

* feat(deviceAlias): styles device alias page

* feat(styles): styles more missing pages

* feat(styles): styles more missing pages

* feat(styles): styles editable inputs

* Update src/frontend/src/styles/main.css

Co-authored-by: Nicolas Mattia <nicolas.mattia@dfinity.org>

* docs(css): clarify comment

* Style veryTentativeDevice correctly

* Add minimum styles for warning boxes

* add data-usernumber to fix the tests

* satisfy formater

* 🤖 Selenium screenshots auto-update

* makes warning boxes less high by moving the icon to the top right

* fix typo in css comment

* makes sure the logo has the right size on all views

* satisfy formatter

* makes the single device warning look nicer

* makes warnboxes even nicer

* makes Device Verification look better

* fixed button class on Congratulation screen

* removes commented out dark mode and blurry background

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* fixes two more views

* make sure the logo also looks ok if it follows a title

* relace data tags by output elements

* fix typo in card component

* add summary/detail arrows

* intruduce a t-vip--small mod

* makes the displayError message a bit nicer

* change some CSS comments to be a bit more descriptive

* 🤖 Selenium screenshots auto-update

* make some VIP fildes a bit smaller and nicer to read

* 🤖 Selenium screenshots auto-update

* Fix FAQ, ol, and font size

* Fix displaySafariWarning

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* Add styling to promptUserNumber

* 🤖 Selenium screenshots auto-update

* make sure the loader is on top of things

* remvoes list style from summary elements

* fix error icon

* fix error icon

* make sure some of the tooltips only show when the element is disabled

* add a hover effect to the Anchor Management settings

* remove hover effects on links if they are disabled or if a parent is

* add input error styles

* uses correct button classes

* adds space between devices in anchor management

* 🤖 Selenium screenshots auto-update

* Remove nested warnings in recovery phrase

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

Co-authored-by: Nicolas Mattia <nicolas.mattia@dfinity.org>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/frontend/assets/index.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" type="image/jpg" href="./favicon.ico" />
   </head>
   <body>
-    <main id="pageContent" aria-live="polite"></main>
+    <main id="pageContent" class="l-wrap" aria-live="polite"></main>
     <div id="notification"></div>
     <div id="loaderContainer"></div>
 

src/frontend/src/components/compatibilityChart.ts

@@ -19,11 +19,11 @@ export const compatibilityData = {
 };
 
 export const compatibilityChart = html`<p>${compatibilityData.note}</p>
-  <h3>For Desktop</h3>
-  <ul>
+  <h3 class="t-title">For Desktop</h3>
+  <ul class="c-list c-list--bulleted l-section">
     ${compatibilityData.desktop.map((browser) => html`<li>${browser}</li>`)}
   </ul>
-  <h3>For Mobile</h3>
-  <ul>
+  <h3 class="t-title">For Mobile</h3>
+  <ul class="c-list c-list--bulleted l-section">
     ${compatibilityData.mobile.map((browser) => html`<li>${browser}</li>`)}
   </ul>`;

src/frontend/src/components/displayError.ts

@@ -9,38 +9,28 @@ export type ErrorOptions = {
 };
 
 const pageContent = (options: ErrorOptions) => html`
-  <style>
-    #errorContainer {
-      min-height: 15rem;
-    }
-    .displayErrorDetail {
-      overflow: auto;
-      margin-bottom: 2rem;
-      flex-grow: 1;
-    }
-    .displayErrorMessage {
-      flex-grow: 1;
-    }
-    .warningIcon {
-      align-self: center;
-      width: 3rem;
-      height: 3rem;
-      margin-bottom: 1.5rem;
-    }
-  </style>
-  <div id="errorContainer" class="container">
-    ${warningIcon}
-    <h1>${options.title}</h1>
-    <p class="displayErrorMessage">${options.message}</p>
+  <div
+    id="errorContainer"
+    class="l-container c-card c-card--highlight c-card--warning"
+  >
+    <span class="c-card__icon"> ${warningIcon} </span>
+    <hgroup>
+      <h1 class="t-title t-title--primary">${options.title}</h1>
+      <p class="displayErrorMessage t-lead">${options.message}</p>
+    </hgroup>
     ${options.detail !== undefined
-      ? html` <details class="displayErrorDetail">
-          <summary>Error details</summary>
-          <pre>${options.detail}</pre>
+      ? html`<details class="displayErrorDetail">
+          <summary class="c-summary">
+            <span class="c-summary__link t-link">Error details</span>
+          </summary>
+          <pre class="t-paragraph">${options.detail}</pre>
         </details>`
       : ""}
-    <button id="displayErrorPrimary" class="primary">
-      ${options.primaryButton}
-    </button>
+    <div class="l-section">
+      <button id="displayErrorPrimary" class="c-button c-button--primary">
+        ${options.primaryButton}
+      </button>
+    </div>
   </div>
 `;
 

src/frontend/src/components/footer.ts

@@ -1,8 +1,8 @@
 import { html } from "lit-html";
 
-export const footer = html`<footer>
+export const footer = html`<footer class="l-footer">
   <a
-    class="powered-by-link"
+    class="page-signature"
     aria-label="DFINITY homepage"
     href="https://dfinity.org"
     target="_blank"

src/frontend/src/components/icons.ts

@@ -106,6 +106,7 @@ export const warningIcon = html`
     <path
       d="M22.3988 20.0625L12.6488 3.1875C12.5035 2.93672 12.2527 2.8125 11.9996 2.8125C11.7465 2.8125 11.4934 2.93672 11.3504 3.1875L1.6004 20.0625C1.31212 20.5641 1.67305 21.1875 2.24962 21.1875H21.7496C22.3262 21.1875 22.6871 20.5641 22.3988 20.0625ZM11.2496 9.75C11.2496 9.64687 11.334 9.5625 11.4371 9.5625H12.5621C12.6652 9.5625 12.7496 9.64687 12.7496 9.75V14.0625C12.7496 14.1656 12.6652 14.25 12.5621 14.25H11.4371C11.334 14.25 11.2496 14.1656 11.2496 14.0625V9.75ZM11.9996 18C11.7052 17.994 11.4249 17.8728 11.2188 17.6625C11.0128 17.4522 10.8973 17.1695 10.8973 16.875C10.8973 16.5805 11.0128 16.2978 11.2188 16.0875C11.4249 15.8772 11.7052 15.756 11.9996 15.75C12.294 15.756 12.5743 15.8772 12.7804 16.0875C12.9865 16.2978 13.1019 16.5805 13.1019 16.875C13.1019 17.1695 12.9865 17.4522 12.7804 17.6625C12.5743 17.8728 12.294 17.994 11.9996 18V18Z"
       fill="#292A2E"
+      paint-order="stroke"
     />
   </svg>
 `;

src/frontend/src/components/loader.ts

@@ -3,6 +3,7 @@ import { html, render } from "lit-html";
 const loader = () => html`<style>
     #loader {
       position: fixed;
+      z-index: var(--vz-loader);
       top: 0;
       left: 0;
       width: 100vw;

src/frontend/src/components/logout.ts

@@ -6,22 +6,15 @@ import { logoutIcon } from "./icons";
 
 export const logoutSection = (
   alternativeLabel?: string
-): TemplateResult => html`<style>
-    #logoutIcon {
-      position: relative;
-      top: 6px;
-    }
-    #logoutBox {
-      margin-top: 3rem;
-    }
-  </style>
-  <div id="logoutBox">
-    <hr />
-    <button type="button" class="linkStyle" id="logoutButton">
-      ${logoutIcon}
-      ${alternativeLabel !== undefined ? alternativeLabel : "Logout"}
-    </button>
-  </div>`;
+): TemplateResult => html`<div
+  id="logoutBox"
+  class="l-section l-section--spacious"
+>
+  <button type="button" class="t-link" id="logoutButton">
+    <i class="t-link__icon">${logoutIcon}</i>
+    ${alternativeLabel !== undefined ? alternativeLabel : "Logout"}
+  </button>
+</div>`;
 
 export const initLogout = (): void => {
   const logoutButton = document.getElementById("logoutButton") as HTMLElement;

src/frontend/src/components/navbar.ts

@@ -1,10 +1,21 @@
 import { html } from "lit-html";
-import { aboutLink } from "../components/aboutLink";
-import { faqLink } from "../components/faqLink";
+import { navigationLink } from "../components/navigationLink";
 
 export const navbar = html` <aside aria-label="General links">
-  <ul class="nav-links">
-    <li>${aboutLink}</li>
-    <li>${faqLink}</li>
+  <ul class="c-nav-links">
+    <li>
+      ${navigationLink({
+        labelText: "About",
+        uuid: "aboutLink",
+        url: "/about",
+      })}
+    </li>
+    <li>
+      ${navigationLink({
+        labelText: "FAQ",
+        uuid: "faqLink",
+        url: "/faq",
+      })}
+    </li>
   </ul>
 </aside>`;

src/frontend/src/components/navigationLink.ts

@@ -0,0 +1,15 @@
+import { html, TemplateResult } from "lit-html";
+
+export const navigationLink = (
+  props = {
+    labelText: "About",
+    uuid: "aboutLink",
+    url: "/about",
+  }
+): TemplateResult => html`<a
+  id="${props.uuid}"
+  class="c-nav-links__link t-link t-link--discreet"
+  href="${props.url}"
+  target="_blank"
+  >${props.labelText}</a
+>`;

src/frontend/src/components/warnBox.ts

@@ -20,15 +20,19 @@ export const warnBox = ({
   htmlElement = "aside",
 }: warnBoxProps): TemplateResult => {
   const contents: TemplateResult = html`
-    <div class="warnIcon">${warningIcon}</div>
-    <div class="warnContent">
-      <div class="warnTitle">${title}</div>
-      <div class="warnMessage">${message}</div>
+    <span class="c-card__icon" aria-hidden>${warningIcon}</span>
+    <div class="c-card__content">
+      <h3 class="t-title c-card__title">${title}</h3>
+      <div class="t-paragraph c-card__paragraph">${message}</div>
       ${slot}
     </div>
   `;
 
   return html`${htmlElement === "aside"
-    ? html` <aside class="warnBox">${contents}</aside>`
-    : html` <div class="warnBox">${contents}</div> `}`;
+    ? html` <aside class="c-card c-card--narrow c-card--warning">
+        ${contents}
+      </aside>`
+    : html`
+        <div class="c-card c-card--narrow c-card--warning">${contents}</div>
+      `}`;
 };

src/frontend/src/flows/about/index.ts

@@ -3,43 +3,38 @@ import { compatibilityData } from "../../components/compatibilityChart";
 
 // The About page
 const pageContent = html`
-  <div class="about__container">
-    <h1 class="about__title">About</h1>
-    <div class="about__section">
-      <h2 class="about__subtitle">Internet Identity</h2>
-      <div class="about__section-title-underline"></div>
-      <p>
+  <div class="l-container l-container--wide c-card c-card--highlight">
+    <h1 class="t-title t-title--main">About</h1>
+    <div class="l-section">
+      <h2 class="t-title">Internet Identity</h2>
+      <p class="t-paragraph">
         Internet Identity is the identity provider for the Internet Computer: A
         dapp facilitating authentication on the Internet Computer.
-        <br />
-        <br />
-
+      </p>
+      <p class="t-paragraph">
         For frequently asked questions, check the
         <a href="/faq" title="Go to the Internet Identity FAQ page">FAQ page</a
         >.
       </p>
     </div>
-    <div class="about__section">
-      <h2 class="about__subtitle">Compatibility</h2>
-      <div class="about__section-title-underline"></div>
-      <p>${compatibilityData.note}</p>
+    <div class="l-section">
+      <h2 class="t-title">Compatibility</h2>
+      <p class="t-paragraph">${compatibilityData.note}</p>
 
-      <div class="about__compatibility-flexparent">
+      <div class="l-horizontal l-section">
         <div class="about__compatibility-flexchild">
-          <h3 class="about__compatibility-type">For Desktop</h3>
-          <ul class="about__compatibility-list">
+          <h3 class="t-title">For Desktop</h3>
+          <ul class="c-list c-list--bulleted l-section">
             ${compatibilityData.desktop.map(
-              (browser) =>
-                html`<li class="about__compatibility-list-item">${browser}</li>`
+              (browser) => html`<li>${browser}</li>`
             )}
           </ul>
         </div>
         <div class="about__compatibility-flexchild">
-          <h3 class="about__compatibility-type">For Mobile</h3>
-          <ul class="about__compatibility-list">
+          <h3 class="t-title">For Mobile</h3>
+          <ul class="c-list c-list--bulleted l-section">
             ${compatibilityData.mobile.map(
-              (browser) =>
-                html`<li class="about__compatibility-list-item">${browser}</li>`
+              (browser) => html`<li>${browser}</li>`
             )}
           </ul>
         </div>

src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts

@@ -7,12 +7,14 @@ import { validateAlias } from "../validateAlias";
 // Bad examples: "2019 macbook!", "2010 macbook_", "space trails at end "
 
 const pageContent = () => html`
-  <div class="container">
-    <h1>New Device</h1>
+  <article class="l-container c-card c-card--highlight">
+    <hgroup>
+      <h1 class="t-title t-title--main">New Device</h1>
+      <p class="t-lead">Please provide a name for your new device</p>
+    </hgroup>
     <form id="deviceAliasForm">
-      <p>Please provide a name for your new device</p>
       <input
-        class="inputDeviceAlias"
+        class="c-input inputDeviceAlias"
         aria-label="device name"
         id="deviceAlias"
         placeholder="Device alias"
@@ -22,13 +24,21 @@ const pageContent = () => html`
         pattern="^[A-Za-z0-9]+((-|\\s|_)*[A-Za-z0-9])*$"
         spellcheck="false"
       />
-      <button type="submit" id="deviceAliasContinue" class="primary">
-        Add Device
-      </button>
-      <button type="button" id="deviceAliasCancel">Cancel</button>
+      <div class="l-section">
+        <button type="submit" id="deviceAliasContinue" class="c-button">
+          Add Device
+        </button>
+        <button
+          type="button"
+          id="deviceAliasCancel"
+          class="c-button c-button--secondary"
+        >
+          Cancel
+        </button>
+      </div>
     </form>
     ${logoutSection()}
-  </div>
+  </article>
 `;
 
 /**