feat(auth): add AccountModal base and login button

src/components/Header/Header.tsx

@@ -9,6 +9,7 @@ import SearchIcon from '../../icons/Search';
 import CloseIcon from '../../icons/Close';
 import IconButton from '../../components/IconButton/IconButton';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import Button from '../Button/Button';
 
 import styles from './Header.module.scss';
 
@@ -23,6 +24,7 @@ type Props = {
   searchActive: boolean;
   onSearchButtonClick?: () => void;
   onCloseSearchButtonClick?: () => void;
+  onLoginButtonClick?: () => void;
   children?: ReactFragment;
 };
 
@@ -36,6 +38,7 @@ const Header: React.FC<Props> = ({
   onSearchButtonClick,
   searchEnabled,
   onCloseSearchButtonClick,
+  onLoginButtonClick,
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -95,6 +98,7 @@ const Header: React.FC<Props> = ({
           {logoLoaded ? children : null}
         </nav>
         <div className={styles.search}>{searchEnabled ? search : null}</div>
+        <div><Button onClick={onLoginButtonClick} label="Login" /></div>
       </div>
     </header>
   );

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -68,6 +68,15 @@ exports[`<Header /> renders header 1`] = `
           />
         </div>
       </div>
+      <div>
+        <button
+          class="button default outlined"
+        >
+          <span>
+            Login
+          </span>
+        </button>
+      </div>
     </div>
   </header>
 </div>

src/components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, FC, useState, useContext, useRef, useEffect } from 'react';
+import React, { FC, ReactNode, useContext, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
@@ -11,6 +11,7 @@ import Sidebar from '../Sidebar/Sidebar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import MenuButton from '../../components/MenuButton/MenuButton';
+import { AccountModalView, AccountStore } from '../../stores/AccountStore';
 
 import styles from './Layout.module.scss';
 
@@ -52,6 +53,13 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     });
   };
 
+  const loginButtonClickHandler = () => {
+    AccountStore.update(s => {
+      s.modal.open = true;
+      s.modal.view = AccountModalView.LOGIN;
+    })
+  };
+
   return (
     <div className={styles.layout}>
       <Helmet>
@@ -77,6 +85,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
           searchActive={searchActive}
           onSearchButtonClick={searchButtonClickHandler}
           onCloseSearchButtonClick={closeSearchButtonClickHandler}
+          onLoginButtonClick={loginButtonClickHandler}
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

src/components/Layout/__snapshots__/Layout.test.tsx.snap

@@ -49,6 +49,15 @@ exports[`<Layout /> renders layout 1`] = `
           <div
             class="search"
           />
+          <div>
+            <button
+              class="button default outlined"
+            >
+              <span>
+                Login
+              </span>
+            </button>
+          </div>
         </div>
       </header>
       <div

src/components/Root/Root.test.tsx

@@ -5,18 +5,12 @@ import { mockWindowLocation, render } from '../../testUtils';
 import Root from './Root';
 
 describe('<Root />', () => {
-  it('renders and matches snapshot', () => {
-    mockWindowLocation('/');
-    const { container } = render(<Root />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders error page when error prop is passed', () => {
     mockWindowLocation('/');
     const error = new Error();
-    const { container } = render(<Root error={error} />);
+    const { queryByText } = render(<Root error={error} />);
 
-    expect(container).toMatchSnapshot();
+    expect(queryByText('generic_error_heading')).toBeDefined();
+    expect(queryByText('generic_error_description')).toBeDefined();
   });
 });

src/components/Root/Root.tsx

@@ -10,6 +10,7 @@ import Settings from '../../screens/Settings/Settings';
 import Movie from '../../screens/Movie/Movie';
 import Search from '../../screens/Search/Search';
 import ErrorPage from '../ErrorPage/ErrorPage';
+import AccountModal from '../../containers/AccountModal/AccountModal';
 
 type Props = {
   error?: Error | null;
@@ -36,6 +37,7 @@ const Root: FC<Props> = ({ error }: Props) => {
         <Route path="/s/:id/:slug?" component={Series} />
         <Route path="/q/:query?" component={Search} />
       </Switch>
+      <AccountModal />
     </Layout>
   );
 };

src/containers/AccountModal/AccountModal.module.scss

@@ -0,0 +1,25 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.accountModal {
+  max-width: 450px;
+  padding: 24px;
+  color: theme.$modal-color;
+  background-color: theme.$modal-bg;
+  border-radius: 6px;
+}
+
+.banner {
+  text-align: center;
+
+  > img {
+    max-width: 50%;
+  }
+}
+
+.title {
+  margin-bottom: 24px;
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  font-size: 24px;
+}

src/containers/AccountModal/AccountModal.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import AccountModal from './AccountModal';
+
+describe('<AccountModal>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<AccountModal />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/containers/AccountModal/AccountModal.tsx

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+
+import Modal from '../../components/Modal/Modal';
+import { AccountStore } from '../../stores/AccountStore';
+import Button from '../../components/Button/Button';
+import { ConfigContext } from '../../providers/ConfigProvider';
+
+import styles from './AccountModal.module.scss';
+
+const AccountModal = () => {
+  const {
+    assets: { banner },
+  } = useContext(ConfigContext);
+  const { open } = AccountStore.useState((s) => s.modal);
+  const closeHandler = () =>
+    AccountStore.update((s) => {
+      s.modal.open = false;
+    });
+
+  return (
+    <Modal open={open} onClose={closeHandler} className={styles.accountModal} closeButtonVisible>
+      <div className={styles.banner}>{banner ? <img src={banner} onLoad={() => undefined} alt="" /> : null}</div>
+      <h2 className={styles.title}>Login!</h2>
+      <form>form</form>
+      <Button label="Sign in" variant="contained" color="primary" fullWidth />
+    </Modal>
+  );
+};
+
+export default AccountModal;

src/containers/AccountModal/__snapshots__/AccountModal.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AccountModal> renders and matches snapshot 1`] = `<div />`;