[#6] Add the letter spacing to the components

manh-t · Jun 21, 2023 · 901d40d · 901d40d
1 parent 8230dfe
commit 901d40d
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/src/components/ElevatedButton/index.tsx b/src/components/ElevatedButton/index.tsx
@@ -10,7 +10,7 @@ const ElevatedButton = ({ children, isFullSize, ...attributes }: ElevatedButtonP
   return (
     <button
       type="button"
-      className={`bg-white text-black-chinese font-bold text-regular rounded-[10px] focus:outline-none focus:shadow-outline h-14 ${fullWidth}`}
+      className={`bg-white text-black-chinese font-bold text-regular tracking-survey-tight rounded-[10px] focus:outline-none focus:shadow-outline h-14 ${fullWidth}`}
       {...attributes}
     >
       {children}

diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -17,13 +17,17 @@ const TextInput = ({ label, labelDataTestId, inputAttributes, extraClassName }:
   return (
     <div>
       {label !== null && (
-        <label className="text-white text-small font-extrabold" htmlFor={inputAttributes.id} data-test-id={labelDataTestId}>
+        <label
+          className="text-white text-small tracking-survey-normal font-extrabold"
+          htmlFor={inputAttributes.id}
+          data-test-id={labelDataTestId}
+        >
           {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-regular focus:bg-opacity-30 ${extraClassName}`}
+        className={`block appearance-none bg-white bg-opacity-[.18] rounded-[12px] w-full h-14 focus:outline-none focus:ring-transparent px-3 mt-2 text-white text-regular tracking-survey-tight focus:bg-opacity-30 ${extraClassName}`}
         placeholder={inputAttributes.placeholder}
       />
     </div>

diff --git a/src/screens/SignIn/index.test.tsx b/src/screens/SignIn/index.test.tsx
@@ -31,7 +31,7 @@ describe('SignInScreen', () => {
     expect(forgotButton).toHaveTextContent('Forgot?');
 
     expect(signInButton).toBeVisible();
-    expect(signInButton).toHaveTextContent('Sign In');
+    expect(signInButton).toHaveTextContent('Sign in');
 
     expect(nimbleLogo).toBeVisible();
   });

diff --git a/src/screens/SignIn/index.tsx b/src/screens/SignIn/index.tsx
@@ -19,7 +19,7 @@ const SignInScreen = (): JSX.Element => {
   return (
     <div className="sign-in bg-cover min-h-screen flex flex-col justify-center items-center bg-sign-in">
       <img className="mx-auto" src={nimbleLogoWhite} alt="nimble logo" data-test-id={signInScreenTestIds.nimbleLogo} />
-      <div className="mt-6 mb-8 text-white opacity-60 text-regular">Sign in to Nimble</div>
+      <div className="mt-6 mb-8 text-white opacity-60 text-regular tracking-survey-tight">Sign in to Nimble</div>
       <form className="w-80" data-test-id={signInScreenTestIds.signInForm}>
         <div className="mb-6">
           <TextInput
@@ -48,14 +48,14 @@ const SignInScreen = (): JSX.Element => {
             />
           </span>
           <button
-            className="text-white text-opacity-50 text-small absolute right-3 bottom-4"
+            className="text-white text-opacity-50 text-small tracking-survey-normal absolute right-3 bottom-4"
             data-test-id={signInScreenTestIds.forgotButton}
           >
             Forgot?
           </button>
         </div>
         <ElevatedButton isFullSize={true} type="submit" data-test-id={signInScreenTestIds.signInButton}>
-          Sign In
+          Sign in
         </ElevatedButton>
       </form>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,14 @@ module.exports = {
       backgroundImage: {
         'sign-in': "url('assets/images/illustrations/background-sign-in.png')",
       },
+      letterSpacing: {
+        'survey-tighest': '-1px',
+        'survey-tighter': '-0.5px',
+        'survey-tight': '-0.41px',
+        'survey-normal': '-0.24px',
+        'survey-wide': '-0.08px',
+        'survey-wider': '0.38px',
+      },
     },
   },
   plugins: [],