[Task-6] As a user, I can view the sign in page

[gutakk]

Resolve #4

What happened 👀

• Style the sign in page following the Figma design
• Add necessary attributes to HTML element
• Add a necessary component (Alert, AuthLogo and Background)
• Add necessary env to test workflow
• Add UI test using Cypress
• Update README

Insight 📝

Mock the HTTP request in the UI test using cy.intercept() and add the mock response to fixtures

Proof Of Work 📹

• Sign in page
  

• CI was passed (Unit and UI test)
  https://github.com/gutakk/react-surveyor/actions/runs/935566078

[gutakk]

@rafayet-monon Sorry I didn't notice Cypress convention. I will try to update the code to follow the convention.

[carryall]

@gutakk Not sure why do you desire to put this here, IMO this is not quite related to the logo but more like a page title or a form title. So how about moving it out of this component?

[gutakk]

Because I think all auth page have the same layout that's why I named this component as AuthLogo but maybe we can change to AuthTitle to make it clearer. What do you think?

[carryall]

@gutakk How about page-heder or auth-header, since the title sounds more like the component going to cover only the title? 🤔

[gutakk]

Sounds great. Fixed in 1323a67

[carryall]

@gutakk One last concern seems like the font-weight does nothing. These two labels with font-weight 800 and 400 look exactly the same 😅

<label class="form-input-group__label" for="password">Password</label>
<label class="form-input-group__label" for="password" style="
    font-weight: 400;
">Password</label>

You might need to convert the font face to web fonts to fix it. Here's the generator that can help you, at least provide woff woff2 you can take a look at the example from The1 project

[carryall]

@gutakk How about page-heder or auth-header, since the title sounds more like the component going to cover only the title? 🤔

[gutakk]

@gutakk One last concern seems like the font-weight does nothing. These two labels with font-weight 800 and 400 look exactly the same 😅

<label class="form-input-group__label" for="password">Password</label>
<label class="form-input-group__label" for="password" style="
    font-weight: 400;
">Password</label>

You might need to convert the font face to web fonts to fix it. Here's the generator that can help you, at least provide woff woff2 you can take a look at the example from The1 project

Fixed in 810a1d6