[#6] Create SignInScreen

manh-t · Jun 12, 2023 · 5ea773a · 5ea773a
1 parent ae4365c
commit 5ea773a
Show file tree

Hide file tree

Showing 19 changed files with 171 additions and 67 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -28,7 +25,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="root-container"></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/App.tsx b/src/App.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
 import 'dummy.css';
-import 'assets/stylesheets/application.css';
+import 'assets/stylesheets/application.scss';
 
-import routes from 'routes';
+import routes from './routes';
 
 const App = (): JSX.Element => {
   const appRoutes = useRoutes(routes);

diff --git a/src/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf b/src/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf
diff --git a/src/assets/fonts/Neuzeit-S-LT-Std.ttf b/src/assets/fonts/Neuzeit-S-LT-Std.ttf
diff --git a/src/assets/images/icons/nimble-logo-white.svg b/src/assets/images/icons/nimble-logo-white.svg
diff --git a/src/assets/images/illustrations/background-sign-in.png b/src/assets/images/illustrations/background-sign-in.png
diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css
diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss
@@ -0,0 +1,12 @@
+// @tailwind base;
+// @tailwind components;
+// @tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+// Base
+@import './base';
+
+// Layouts
+@import 'layouts/main';
diff --git a/src/assets/stylesheets/base/_font.scss b/src/assets/stylesheets/base/_font.scss
@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Neuzeit';
+  font-style: normal;
+  font-display: swap;
+
+  src: url('/assets/fonts/Neuzeit-S-LT-Std.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Neuzeit';
+  font-weight: bold;
+  font-display: swap;
+
+  src: url('/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf') format('truetype');
+}
+
+html,
+body {
+  font-family: 'Neuzeit', sans-serif;
+}
diff --git a/src/assets/stylesheets/base/index.scss b/src/assets/stylesheets/base/index.scss
@@ -0,0 +1 @@
+@import './font';
diff --git a/src/assets/stylesheets/layouts/main/index.scss b/src/assets/stylesheets/layouts/main/index.scss
@@ -0,0 +1,15 @@
+html,
+body {
+  top: 0;
+  height: 100%; // Enables min-height 100% in .root-container
+
+  background-color: #fff;
+
+  .root-container {
+    display: grid;
+    grid-auto-flow: row;
+    min-height: 100%;
+
+    background-color: #fff;
+  }
+}
diff --git a/src/assets/stylesheets/main.scss b/src/assets/stylesheets/main.scss
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface TextInputProps {
+  label?: string;
+  inputAttributes: {
+    id: string;
+    type: string;
+    required?: boolean;
+    placeholder?: string;
+    'data-test-id'?: string;
+  };
+}
+const TextInput = ({ label, inputAttributes }: TextInputProps): JSX.Element => {
+  return (
+    <div>
+      {label !== null && (
+        <label className="text-white text-[15px] 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]"
+        placeholder={inputAttributes.placeholder}
+      />
+    </div>
+  );
+};
+
+export default TextInput;
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { RouteObject } from 'react-router-dom';
 
-import HomeScreen from 'screens/Home';
+import SignInScreen from 'screens/SignIn';
 
 const routes: RouteObject[] = [
   {
     path: '/',
-    element: <HomeScreen />,
+    element: <SignInScreen />,
   },
 ];
 

diff --git a/src/screens/Home/index.test.tsx b/src/screens/Home/index.test.tsx
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
diff --git a/src/screens/SignIn/index.test.tsx b/src/screens/SignIn/index.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import SignInScreen from '.';
+
+describe('SignInScreen', () => {
+  it('renders learn react link', () => {
+    render(<SignInScreen />);
+
+    const logoElement = screen.getByTestId('nimble-logo-img');
+
+    expect(logoElement).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/SignIn/index.tsx b/src/screens/SignIn/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import nimbleLogoWhite from 'assets/images/icons/nimble-logo-white.svg';
+import background from 'assets/images/illustrations/background-sign-in.png';
+import TextInput from 'components/TextInput';
+
+const SignInScreen = (): JSX.Element => {
+  return (
+    <div
+      className="sign-in bg-cover min-h-screen flex flex-col justify-center items-center"
+      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>
+      <form className="w-80">
+        <div className="mb-6">
+          <TextInput
+            label="Email"
+            inputAttributes={{
+              id: 'form-sign-in-email',
+              required: true,
+              type: 'text',
+            }}
+          />
+        </div>
+        <div className="mb-6">
+          <TextInput
+            label="Password"
+            inputAttributes={{
+              id: 'form-sign-in-password',
+              required: true,
+              type: 'password',
+            }}
+          />
+        </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"
+        >
+          Sign In
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default SignInScreen;