[#6] [UI] As a user, I can see the Sign In page

.stylelintrc

@@ -1,3 +1,12 @@
 {
-  "extends": ["@nimblehq/stylelint-config-nimble"]
+  "extends": ["@nimblehq/stylelint-config-nimble"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["tailwind", "apply", "screen"]
+      }
+    ]
+  }
 }

cypress/e2e/init.spec.ts → cypress/e2e/SignIn/index.spec.ts

@@ -5,7 +5,6 @@ describe('Cypress', () => {
 
   it('visits the app', () => {
     cy.visit('/');
-
-    cy.findByTestId('app-link').should('be.visible');
+    // TODO Write UI test in integration task
   });
 });

package.json

@@ -55,6 +55,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",
+    "autoprefixer": "10.4.14",
     "concurrently": "8.2.0",
     "cypress": "12.14.0",
     "cypress-react-selector": "3.0.0",

src/App.tsx

@@ -4,7 +4,7 @@ import { useRoutes } from 'react-router-dom';
 import 'dummy.scss';
 import 'assets/stylesheets/application.scss';
 
-import routes from 'routes';
+import routes from './routes';
 
 const App = (): JSX.Element => {
   const appRoutes = useRoutes(routes);

src/assets/stylesheets/application.scss

@@ -1,3 +1,25 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+// Base
+@import './base';
+
+@layer base {
+  body {
+    @apply font-neuzeit;
+  }
+}
+
+// Tailwind autofill doesn't work at all. Work-around by adding these attributes. Ref: https://github.com/tailwindlabs/tailwindcss/discussions/8679#discussioncomment-3880770
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: #fff;
+  /* -webkit-box-shadow: 0 0 0px 1000px #1b1b6c inset; */
+  transition: background-color 5000s ease-in-out 0s;
+
+  background-color: #fff;
+}

src/assets/stylesheets/base/_font.scss

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Neuzeit S LT Std';
+
+  src: url('/assets/fonts/Neuzeit-S-LT-Std.ttf');
+}
+
+@font-face {
+  font-family: 'Neuzeit S LT Std';
+  font-weight: 800;
+
+  src: url('/assets/fonts/Neuzeit-S-LT-Std-Bold.ttf');
+}

src/assets/stylesheets/base/_tailwindcss.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/assets/stylesheets/base/index.scss

@@ -0,0 +1,2 @@
+@import './font';
+@import './tailwindcss';

src/components/ElevatedButton/index.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import ElevatedButton from '.';
+
+describe('ElevatedButton', () => {
+  const label = 'Sign in';
+  const dataTestId = 'sign-in_button';
+  it('renders a full-width button', () => {
+    render(
+      <ElevatedButton isFullSize data-test-id={dataTestId}>
+        {label}
+      </ElevatedButton>
+    );
+
+    const button = screen.getByTestId(dataTestId);
+
+    expect(button).toBeVisible();
+    expect(button).toHaveTextContent(label);
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button).toHaveClass('w-full');
+  });
+
+  it('renders a wrap-content button', () => {
+    render(
+      <ElevatedButton isFullSize={false} data-test-id={dataTestId}>
+        {label}
+      </ElevatedButton>
+    );
+
+    const button = screen.getByTestId(dataTestId);
+
+    expect(button).toBeVisible();
+    expect(button).toHaveTextContent(label);
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button).not.toHaveClass('w-full');
+  });
+});

src/components/ElevatedButton/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ElevatedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  isFullSize: boolean;
+}
+
+const ElevatedButton = ({ children, isFullSize, ...attributes }: ElevatedButtonProps): JSX.Element => {
+  const fullWidth = isFullSize ? 'w-full' : '';
+  return (
+    <button
+      type="button"
+      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}
+    </button>
+  );
+};
+
+export default ElevatedButton;

src/components/TextInput/index.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import TextInput from '.';
+
+describe('TextInput', () => {
+  const label = 'Email';
+  const labelDataTestId = 'email-label';
+  const inputDataTestId = 'text-input';
+  const inputType = 'email';
+  const inputPlaceholder = 'input placeholder';
+  it('renders a text input with a label', () => {
+    const inputProps = {
+      label: label,
+      labelDataTestId: labelDataTestId,
+      inputAttributes: {
+        id: 'sign-in-email',
+        required: true,
+        type: inputType,
+        placeholder: inputPlaceholder,
+        'data-test-id': inputDataTestId,
+      },
+    };
+    render(<TextInput {...inputProps} />);
+
+    const inputLabel = screen.getByTestId(labelDataTestId);
+    const textInput = screen.getByTestId(inputDataTestId);
+
+    expect(inputLabel).toBeVisible();
+    expect(inputLabel).toHaveTextContent(label);
+
+    expect(textInput).toBeVisible();
+    expect(textInput).toHaveAttribute('type', inputType);
+    expect(textInput).toHaveAttribute('placeholder', inputPlaceholder);
+  });
+
+  it('renders a text input without a label', () => {
+    const inputProps = {
+      inputAttributes: {
+        id: 'sign-in-email',
+        required: true,
+        type: inputType,
+        placeholder: inputPlaceholder,
+        'data-test-id': inputDataTestId,
+      },
+    };
+    render(<TextInput {...inputProps} />);
+
+    expect(screen.queryByRole('label')).not.toBeInTheDocument();
+  });
+});

src/components/TextInput/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+type TextInputProps = {
+  label?: string;
+  labelDataTestId?: string;
+  inputAttributes: {
+    id: string;
+    type: string;
+    required?: boolean;
+    placeholder?: string;
+    'data-test-id'?: string;
+  };
+  extraClassName?: string;
+};
+
+const TextInput = ({ label, labelDataTestId, inputAttributes, extraClassName }: TextInputProps): JSX.Element => {
+  return (
+    <div>
+      {label !== null && (
+        <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 mt-2 text-white text-regular tracking-survey-tight focus:bg-opacity-30 ${extraClassName}`}
+        placeholder={inputAttributes.placeholder}
+      />
+    </div>
+  );
+};
+
+export default TextInput;

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 />,
   },
 ];
 

src/screens/SignIn/index.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import SignInScreen, { signInScreenTestIds } from '.';
+
+describe('SignInScreen', () => {
+  it('renders Sign In form and its components', () => {
+    render(<SignInScreen />);
+    const emailLabel = screen.getByTestId(signInScreenTestIds.emailLabel);
+    const emailField = screen.getByTestId(signInScreenTestIds.emailField);
+    const passwordLabel = screen.getByTestId(signInScreenTestIds.passwordLabel);
+    const passwordField = screen.getByTestId(signInScreenTestIds.passwordField);
+    const forgotButton = screen.getByTestId(signInScreenTestIds.forgotButton);
+    const signInButton = screen.getByTestId(signInScreenTestIds.signInButton);
+    const nimbleLogo = screen.getByTestId(signInScreenTestIds.nimbleLogo);
+
+    expect(emailLabel).toBeVisible();
+    expect(emailLabel).toHaveTextContent('Email');
+
+    expect(emailField).toBeVisible();
+    expect(emailField).toHaveAttribute('type', 'email');
+
+    expect(passwordLabel).toBeVisible();
+    expect(passwordLabel).toHaveTextContent('Password');
+
+    expect(passwordField).toBeVisible();
+    expect(passwordField).toHaveAttribute('type', 'password');
+
+    expect(forgotButton).toBeVisible();
+    expect(forgotButton).toHaveTextContent('Forgot?');
+
+    expect(signInButton).toBeVisible();
+    expect(signInButton).toHaveTextContent('Sign in');
+
+    expect(nimbleLogo).toBeVisible();
+  });
+});