[#6] Add Forgot text to the password field

manh-t · Jun 13, 2023 · 8847e7f · 8847e7f
1 parent 235026c
commit 8847e7f
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 50 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="root-container"></div>
+    <div id="root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
@@ -1,9 +1,12 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 // Base
 @import './base';
 
-// Layouts
-@import 'layouts/main';
+@layer base {
+  body {
+    @apply font-neuzeit;
+  }
+}
diff --git a/src/assets/stylesheets/base/_font.scss b/src/assets/stylesheets/base/_font.scss
@@ -1,20 +1,12 @@
 @font-face {
-  font-family: 'Neuzeit';
-  font-style: normal;
-  font-display: swap;
+  font-family: 'Neuzeit S LT Std';
 
-  src: url('/assets/fonts/Neuzeit-S-LT-Std.ttf') format('truetype');
+  src: url('/assets/fonts/Neuzeit-S-LT-Std.ttf');
 }
 
 @font-face {
-  font-family: 'Neuzeit';
-  font-weight: bold;
-  font-display: swap;
+  font-family: 'Neuzeit S LT Std';
+  font-weight: 800;
 
-  src: url('/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf') format('truetype');
-}
-
-html,
-body {
-  font-family: 'Neuzeit', sans-serif;
+  src: url('/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf');
 }
diff --git a/src/assets/stylesheets/layouts/main/index.scss b/src/assets/stylesheets/layouts/main/index.scss
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -9,18 +9,22 @@ interface TextInputProps {
     placeholder?: string;
     'data-test-id'?: string;
   };
+  extraClassName?: string;
 }
-const TextInput = ({ label, inputAttributes }: TextInputProps): JSX.Element => {
+const TextInput = ({ label, inputAttributes, extraClassName }: TextInputProps): JSX.Element => {
   return (
     <div>
       {label !== null && (
-        <label className="text-white text-[15px] font-extrabold" htmlFor={inputAttributes.id}>
+        <label className="text-white text-small font-extrabold" htmlFor={inputAttributes.id}>
           {label}
         </label>
       )}
       <input
         {...inputAttributes}
-        className="block appearance-none bg-white bg-opacity-[.18] rounded-[12px] w-full h-14 focus:outline-none focus:ring-transparent px-3 text-white text-[17px]"
+        className={
+          'block appearance-none bg-white bg-opacity-[.18] rounded-[12px] w-full h-14 focus:outline-none focus:ring-transparent px-3 text-white text-regular ' +
+          extraClassName
+        }
         placeholder={inputAttributes.placeholder}
       />
     </div>

diff --git a/src/screens/SignIn/index.tsx b/src/screens/SignIn/index.tsx
@@ -11,7 +11,7 @@ const SignInScreen = (): JSX.Element => {
       style={{ backgroundImage: 'url(' + background + ')' }}
     >
       <img className="mx-auto" src={nimbleLogoWhite} alt="nimble logo" data-test-id="nimble-logo-img" />
-      <div className="mt-6 mb-8 text-white opacity-60 text-[17px]">Sign in to Nimble</div>
+      <div className="mt-6 mb-8 text-white opacity-60 text-regular">Sign in to Nimble</div>
       <form className="w-80">
         <div className="mb-6">
           <TextInput
@@ -23,19 +23,23 @@ const SignInScreen = (): JSX.Element => {
             }}
           />
         </div>
-        <div className="mb-6">
-          <TextInput
-            label="Password"
-            inputAttributes={{
-              id: 'form-sign-in-password',
-              required: true,
-              type: 'password',
-            }}
-          />
+        <div className="mb-6 relative">
+          <span className="block w-full">
+            <TextInput
+              label="Password"
+              inputAttributes={{
+                id: 'form-sign-in-password',
+                required: true,
+                type: 'password',
+              }}
+              extraClassName="pr-16"
+            />
+          </span>
+          <button className="text-white text-opacity-50 text-small absolute right-3 bottom-4">Forgot?</button>
         </div>
         <button
-          className="bg-white text-[#15151A] font-bold text-[17px] rounded-[10px] focus:outline-none focus:shadow-outline w-full h-14"
-          type="button"
+          className="bg-white text-black-chinese font-bold text-regular rounded-[10px] focus:outline-none focus:shadow-outline w-full h-14"
+          type="submit"
         >
           Sign In
         </button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,18 @@
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        neuzeit: 'Neuzeit S LT Std',
+      },
+      colors: {
+        'black-chinese': '#15151A',
+      },
+      fontSize: {
+        small: ['15px', '20px'],
+        regular: ['17px', '22px'],
+      },
+    },
   },
   plugins: [],
 };