Merge pull request #199 from adhocteam/dcloud/67-welcome-placard

Add design to Login page
HHS · Mar 1, 2021 · ad27298 · ad27298
2 parents 11f5258 + ad65fdd
commit ad27298
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 22 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -30,6 +30,18 @@ body {
   background-color: #f8f8f8;
 }
 
+.smart-hub-bg-blue-primary {
+  background-color: #0166ab;
+}
+
+.smart-hub-border-blue-primary {
+  border-color: #0166ab;
+}
+
+.smart-hub-maxw-placard {
+  max-width: 34.25rem;
+}
+
 .height-12 {
   height: 6.5em;
 }

diff --git a/frontend/src/__tests__/App.js b/frontend/src/__tests__/App.js
@@ -8,6 +8,8 @@ import fetchMock from 'fetch-mock';
 import App from '../App';
 
 describe('App', () => {
+  const loginText = 'Log In with HSES';
+
   afterEach(() => fetchMock.restore());
   const userUrl = join('api', 'user');
   const logoutUrl = join('api', 'logout');
@@ -27,7 +29,7 @@ describe('App', () => {
     it('can log the user out when "logout" is pressed', async () => {
       const logout = await screen.findByText('Logout');
       fireEvent.click(logout);
-      expect(await screen.findByText('HSES Login')).toBeVisible();
+      expect(await screen.findByText(loginText)).toBeVisible();
       expect(await screen.findByText('Logout Successful')).toBeVisible();
     });
   });
@@ -39,7 +41,7 @@ describe('App', () => {
     });
 
     it('displays the login button', async () => {
-      expect(await screen.findByText('HSES Login')).toBeVisible();
+      expect(await screen.findByText(loginText)).toBeVisible();
     });
   });
 
@@ -50,7 +52,7 @@ describe('App', () => {
     });
 
     it('displays the login button for now. in the future this should show the "request permissions" UI', async () => {
-      expect(await screen.findByText('HSES Login')).toBeVisible();
+      expect(await screen.findByText(loginText)).toBeVisible();
     });
   });
 });
diff --git a/frontend/src/images/eclkc-blocks-logo-156.png b/frontend/src/images/eclkc-blocks-logo-156.png
diff --git a/frontend/src/images/eclkc-blocks-logo-78.png b/frontend/src/images/eclkc-blocks-logo-78.png
diff --git a/frontend/src/pages/Unauthenticated/__tests__/index.js b/frontend/src/pages/Unauthenticated/__tests__/index.js
@@ -11,7 +11,7 @@ describe('Unauthenticated Page', () => {
     });
 
     test('displays welcome message', () => {
-      expect(screen.getByText('Welcome to the TTA Smart Hub!')).toBeVisible();
+      expect(screen.getByText('Welcome to the TTA Smart Hub')).toBeVisible();
     });
 
     test('does not display the logged out message', () => {

diff --git a/frontend/src/pages/Unauthenticated/index.js b/frontend/src/pages/Unauthenticated/index.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import {
   Link, Alert,
 } from '@trussworks/react-uswds';
-import Container from '../../components/Container';
+
+import logo1x from '../../images/eclkc-blocks-logo-78.png';
+import logo2x from '../../images/eclkc-blocks-logo-156.png';
 
 function Unauthenticated({ loggedOut, timedOut }) {
   let msg = 'You have successfully logged out of the TTA Smart Hub';
@@ -17,23 +19,44 @@ function Unauthenticated({ loggedOut, timedOut }) {
   }
 
   return (
-    <Container>
-      {loggedOut
-      && (
-      <Alert type={type} heading={heading}>
-        {msg}
-      </Alert>
-      )}
-      <h1>
-        Welcome to the TTA Smart Hub!
-      </h1>
-      <p>
-        Login via HSES to continue
-      </p>
-      <Link referrerPolicy="same-origin" className="usa-button" variant="unstyled" href="/api/login">
-        HSES Login
-      </Link>
-    </Container>
+    <>
+      <div className="smart-hub-dimmer position-fixed top-0 right-0 bottom-0 left-0 z-auto bg-ink opacity-50" />
+      <div role="dialog" aria-labelledby="welcome-message" aria-describedby="login-description" className="position-relative smart-hub-maxw-placard margin-x-auto margin-top-7 z-top bg-white border-top-2 smart-hub-border-blue-primary">
+        <div className="maxw-mobile margin-x-auto padding-y-7">
+          <img src={logo1x} srcSet={`${logo2x} 2x`} width="78" height="78" alt="ECLKC Blocks Logo" className="smart-hub-logo display-block margin-x-auto" />
+          <h1 id="welcome-message" className="font-serif-xl text-center margin-4">
+            Welcome to the TTA Smart Hub
+          </h1>
+          {loggedOut
+          && (
+          <Alert type={type} heading={heading}>
+            {msg}
+          </Alert>
+          )}
+          <div className="text-center margin-top-4">
+            <p id="login-description">
+              You must log in with HSES in order to access the Office of Head Start TTA Smart Hub.
+            </p>
+            <Link referrerPolicy="same-origin" className="usa-button smart-hub-bg-blue-primary display-block margin-x-1 margin-top-4" variant="unstyled" href="/api/login">
+              Log In with HSES
+            </Link>
+            <div className="margin-top-9">
+              <p className="text-bold">
+                First time logging in?
+              </p>
+              <p>
+                You must request permission in order to use the TTA Smart Hub.
+              </p>
+              <p>
+                <a href="https://app.smartsheetgov.com/b/form/f0b4725683f04f349a939bd2e3f5425a">
+                  Request Permission
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }