New UI

apps/passport-client/components/shared/AppContainer.tsx

@@ -11,7 +11,8 @@ import { ScreenLoader } from "./ScreenLoader";
 
 // Wrapper for all screens.
 export function AppContainer({
-  children
+  children,
+  bg
 }: {
   bg: "primary" | "gray";
   children?: ReactNode;
@@ -25,7 +26,8 @@ export function AppContainer({
     [dispatch]
   );
 
-  const col = "var(--bg-dark-primary)";
+  const col =
+    bg === "gray" ? "var(--dot-pattern-bg)" : "var(--bg-dark-primary)";
   return (
     <>
       <GlobalBackground color={col} />
@@ -53,7 +55,7 @@ export function AppContainer({
 
 export const GlobalBackground = createGlobalStyle<{ color: string }>`
   html {
-    background-color: ${(p): string => p.color};
+    background: ${(p): string => p.color};
   }
 `;
 

apps/passport-client/new-components/ComponentsScreen.tsx

@@ -0,0 +1,18 @@
+import { CenterColumn, TextCenter } from "../components/core";
+import { AppContainer } from "../components/shared/AppContainer";
+import { BigInput } from "./Input";
+import { Typography } from "./Typography";
+
+const ComponentsScreen = (): JSX.Element => {
+  return (
+    <AppContainer bg="gray">
+      <TextCenter>Hello, world!</TextCenter>
+      <Typography>Typography component</Typography>
+      <CenterColumn>
+        <BigInput placeholder="placeholder" />
+      </CenterColumn>
+    </AppContainer>
+  );
+};
+
+export default ComponentsScreen;

apps/passport-client/new-components/Input.tsx

@@ -0,0 +1,42 @@
+import { InputHTMLAttributes, Ref } from "react";
+import styled from "styled-components";
+
+export const BigInput = styled.input`
+  width: 100%;
+  height: 54px;
+  border-radius: 200px;
+  padding: 8px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  border: 1px solid rgba(var(--white-rgb), 0.3);
+  background: white;
+  color: var(--text-tertiary);
+  box-shadow: 0px 1px 2px 0px #0000000d;
+
+  &::placeholder {
+    color: var(--white-rgb);
+  }
+
+  &:disabled {
+    user-select: none;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+interface EmailCodeInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  ref?: Ref<HTMLInputElement>;
+}
+
+export const ConfirmationCodeInput = (
+  inputProps: EmailCodeInputProps
+): JSX.Element => {
+  return (
+    <BigInput
+      type="text"
+      inputMode="numeric"
+      pattern="[0-9]*"
+      {...inputProps}
+    />
+  );
+};

apps/passport-client/new-components/Typography.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+const TypographyText = styled.span`
+  font-family: "Barlow", sans-serif;
+  color: rgba(0, 0, 0, 1);
+`;
+interface TypographyProps {
+  children?: React.ReactNode;
+}
+export const Typography: React.FC<TypographyProps> = ({
+  children
+}): JSX.Element => {
+  return <TypographyText>{children}</TypographyText>;
+};

apps/passport-client/pages/index.tsx

@@ -63,6 +63,7 @@ import { loadInitialState } from "../src/loadInitialState";
 import { registerServiceWorker } from "../src/registerServiceWorker";
 import { AppState, StateEmitter } from "../src/state";
 import { useZappServer } from "../src/zapp/useZappServer";
+import ComponentsScreen from "../new-components/ComponentsScreen";
 
 function App(): JSX.Element {
   useBackgroundJobs();
@@ -129,6 +130,10 @@ function RouterImpl(): JSX.Element {
           <Route path="terms" element={<TermsScreen />} />
           <Route index element={<HomeScreen />} />
           <Route path="login" element={<LoginScreen />} />
+
+          {appConfig.devMode && (
+            <Route path="components" element={<ComponentsScreen />} />
+          )}
           <Route
             path="login-interstitial"
             element={<LoginInterstitialScreen />}

apps/passport-client/public/global-zupass.css

@@ -19,6 +19,24 @@ html {
   --black: #000000;
   --black-rgb: 0, 0, 0;
 
+  --text-tertiary: #8b94ac;
+  --dot-bg: #ececec;
+  --dot-color: #e4e4e4;
+  --dot-size: 3px;
+  --dot-space: 22px;
+  --dot-pattern-bg: linear-gradient(
+        90deg,
+        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
+        transparent 1%
+      )
+      center / var(--dot-space) var(--dot-space),
+    linear-gradient(
+        var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
+        transparent 1%
+      )
+      center / var(--dot-space) var(--dot-space),
+    var(--dot-color);
+
   background: var(--bg-dark-primary);
   color: var(--white);
   font:
@@ -37,11 +55,56 @@ a:visited {
   color: var(--accent-dark);
   text-decoration: none;
 }
+
 a:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
+/* Barlow */
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 200;
+  src: url(/fonts/Barlow-ExtraLight.ttf) format("truetype")
+    url(/fonts/Barlow-ExtraLight.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/Barlow-Light.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: italic;
+  font-weight: 300;
+  src: url(/fonts/Barlow-LightItalic.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/Barlow-Regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  src: url(/fonts/Barlow-Medium.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  src: url(/fonts/Barlow-SemiBold.ttf) format("truetype");
+}
+
 /* IBM Plex Sans */
 @font-face {
   font-family: "PlexSans";
@@ -50,45 +113,52 @@ a:hover {
   src: url(/fonts/IBMPlexSans-ExtraLight.ttf) format("truetype")
     url(/fonts/IBMPlexSans-ExtraLight.woff) format("woff");
 }
+
 @font-face {
   font-family: "PlexSans";
   font-style: normal;
   font-weight: 300;
   src: url(/fonts/IBMPlexSans-Light.ttf) format("truetype")
     url(/fonts/IBMPlexSans-Light.woff) format("woff");
 }
+
 @font-face {
   font-family: "PlexSans";
   font-style: italic;
   font-weight: 300;
   src: url(/fonts/IBMPlexSans-LightItalic.ttf) format("truetype")
     url(/fonts/IBMPlexSans-LightItalic.woff) format("woff");
 }
+
 @font-face {
   font-family: "PlexSans";
   font-style: normal;
   font-weight: 400;
   src: url(/fonts/IBMPlexSans-Regular.ttf) format("truetype")
     url(/fonts/IBMPlexSans-Regular.woff) format("woff");
 }
+
 @font-face {
   font-family: "PlexSans";
   font-style: normal;
   font-weight: 500;
   src: url(/fonts/IBMPlexSans-Medium.ttf) format("truetype")
     url(/fonts/IBMPlexSans-Medium.woff) format("woff");
 }
+
 @font-face {
   font-family: "PlexSans";
   font-style: normal;
   font-weight: 600;
   src: url(/fonts/IBMPlexSans-SemiBold.ttf) format("truetype")
     url(/fonts/IBMPlexSans-SemiBold.woff) format("woff");
 }
+
 @font-face {
   font-family: "SuperFunky";
   src: url(/fonts/SuperFunky.ttf) format("truetype");
 }
+
 @font-face {
   font-family: "PressStart2P";
   src: url(/fonts/PressStart2P.ttf) format("truetype");
@@ -121,6 +191,7 @@ h6 {
   margin: 0;
   padding: 0;
 }
+
 h1,
 h2,
 h3,
@@ -130,34 +201,42 @@ h6 {
   font-size: 100%;
   font-weight: normal;
 }
+
 ul {
   list-style: none;
 }
+
 button,
 input,
 select {
   margin: 0;
 }
+
 html {
   box-sizing: border-box;
 }
+
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
+
 img,
 video {
   height: auto;
   max-width: 100%;
 }
+
 iframe {
   border: 0;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
 td,
 th {
   padding: 0;
@@ -197,13 +276,15 @@ img {
   width: 80px;
   height: 80px;
 }
+
 .loader > div {
   position: absolute;
   border: 4px solid var(--accent-dark);
   opacity: 1;
   border-radius: 50%;
   animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
+
 .loader > div:nth-child(2) {
   animation-delay: -0.5s;
 }
@@ -216,20 +297,23 @@ img {
     height: 0;
     opacity: 0;
   }
+
   4.9% {
     top: 36px;
     left: 36px;
     width: 0;
     height: 0;
     opacity: 0;
   }
+
   5% {
     top: 36px;
     left: 36px;
     width: 0;
     height: 0;
     opacity: 1;
   }
+
   100% {
     top: 0px;
     left: 0px;

apps/passport-client/public/index.hbs

@@ -26,6 +26,27 @@
       type="font/woff"
       crossorigin="anonymous"
     />
+    <link
+      rel="preload"
+      href="/fonts/Barlow-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="/fonts/Barlow-Light.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="/fonts/Barlow-ExtraLight.ttf"
+      as="font"
+      type="font/ttf"
+      crossorigin="anonymous"
+    />
     <script defer src="/js/index.js"></script>
     {{!-- Lazily load zxcvbn.js since it contains 700KB+ of data --}}
     <script async type="text/javascript" src="zxcvbn.js"></script>

apps/passport-client/src/worker/service-worker.ts

@@ -61,6 +61,12 @@ const STABLE_CACHE_RESOURCES = new Set([
   "/semaphore-artifacts/16.zkey",
   "/artifacts/zk-eddsa-event-ticket-pcd/circuit.wasm",
   "/artifacts/zk-eddsa-event-ticket-pcd/circuit.zkey",
+  "/fonts/Barlow-ExtraLight.ttf",
+  "/fonts/Barlow-Light.ttf",
+  "/fonts/Barlow-LightItalic.ttf",
+  "/fonts/Barlow-Regular.ttf",
+  "/fonts/Barlow-Medium.ttf",
+  "/fonts/Barlow-SemiBold.ttf",
   "/fonts/IBMPlexSans-ExtraLight.woff",
   "/fonts/IBMPlexSans-Light.woff",
   "/fonts/IBMPlexSans-LightItalic.woff",