Add new Sign Up layout

src/app/App.module.scss

@@ -39,6 +39,7 @@
 
     .left_navbar {
       background-color: use-color("white");
+      border-right: 1px solid use-color("silver");
       flex-grow: 0;
       flex-shrink: 0;
       max-height: 100%;
@@ -48,11 +49,13 @@
     }
 
     .page_content {
-      background-color: transparent;
+      background-color: use-color("base-lightest");
       flex-grow: 1;
       flex-shrink: 1;
       max-height: 100%;
       overflow-y: auto;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
       position: relative;
     }
   }

src/app/App.tsx

@@ -60,15 +60,15 @@ const App: FC = () => {
         <div className={classes.left_navbar}>
           <LeftNavBar />
         </div>
-        <div className={classes.page_content}>
+        <main className={classes.page_content}>
           <ErrorBoundary FallbackComponent={ErrorPage}>
             <Loader loading={isLoading}>
               <Routes />
             </Loader>
             <Toaster />
             <ModalDialog />
           </ErrorBoundary>
-        </div>
+        </main>
       </div>
     </div>
   );

src/app/Routes.tsx

@@ -26,6 +26,8 @@ import {
   usePageTracking,
 } from '../common/hooks';
 import ORCIDLinkFeature from '../features/orcidlink';
+import { LogIn } from '../features/login/LogIn';
+import { SignUp } from '../features/signup/SignUp';
 import ORCIDLinkCreateLink from '../features/orcidlink/CreateLink';
 
 export const LOGIN_ROUTE = '/legacy/login';
@@ -51,6 +53,12 @@ const Routes: FC = () => {
         element={<Authed element={<ProfileWrapper />} />}
       />
 
+      {/* Log In */}
+      <Route path="/login" element={<LogIn />} />
+
+      {/* Sign Up */}
+      <Route path="/signup" element={<SignUp />} />
+
       {/* Navigator */}
       <Route
         path={navigatorPath}

src/features/collections/Collections.module.scss

@@ -3,8 +3,6 @@
 $border: 1px solid use-color("base-lighter");
 
 .collections-main {
-  background-color: use-color("base-lightest");
-  border-left: 1px solid use-color("silver");
   min-height: 100%;
 }
 
@@ -22,7 +20,7 @@ $border: 1px solid use-color("base-lighter");
   font-size: 1.25rem;
   font-weight: 500;
   margin: 0;
-  padding: 2rem 1rem 1rem;
+  padding: 1rem;
 }
 
 .collection-card {

src/features/login/LogIn.module.scss

@@ -0,0 +1,18 @@
+@import "../../common/colors";
+
+.logo {
+  height: 150px;
+  width: auto;
+}
+
+.sso-logo {
+  height: 2.5rem;
+  width: auto;
+}
+
+.separator {
+  align-self: center;
+  background-color: use-color("base-lighter");
+  height: 1px;
+  width: 80%;
+}

src/features/login/LogIn.tsx

@@ -0,0 +1,109 @@
+import {
+  Box,
+  Button,
+  Container,
+  Link,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { FC } from 'react';
+import logoRectangle from '../../common/assets/logo/rectangle.png';
+import orcidLogo from '../../common/assets/orcid.png';
+import globusLogo from '../../common/assets/globus.png';
+import googleLogo from '../../common/assets/google.webp';
+import classes from './LogIn.module.scss';
+
+export const LogIn: FC = () => {
+  return (
+    <Container maxWidth="sm">
+      <Stack spacing={2} textAlign="center">
+        <Stack
+          direction="row"
+          spacing={2}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <img
+            src={logoRectangle}
+            alt="KBase circles logo"
+            className={classes['logo']}
+          />
+        </Stack>
+        <Typography fontStyle="italic">
+          A collaborative, open environment for systems biology of plants,
+          microbes and their communities.
+        </Typography>
+        <Paper
+          elevation={0}
+          sx={{
+            padding: 2,
+          }}
+        >
+          <Stack spacing={2}>
+            <Typography variant="h1">Log in</Typography>
+            <Stack spacing={2}>
+              <Button
+                variant="outlined"
+                color="base"
+                size="large"
+                startIcon={
+                  <img
+                    src={orcidLogo}
+                    alt="ORCID logo"
+                    className={classes['sso-logo']}
+                  />
+                }
+              >
+                Continue with ORCID
+              </Button>
+              <Box className={classes['separator']} />
+              <Stack spacing={1}>
+                <Button
+                  variant="outlined"
+                  color="base"
+                  size="large"
+                  startIcon={
+                    <img
+                      src={googleLogo}
+                      alt="Google logo"
+                      className={classes['sso-logo']}
+                    />
+                  }
+                >
+                  Continue with Google
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="base"
+                  size="large"
+                  startIcon={
+                    <img
+                      src={globusLogo}
+                      alt="Globus logo"
+                      className={classes['sso-logo']}
+                    />
+                  }
+                >
+                  Continue with Globus
+                </Button>
+              </Stack>
+            </Stack>
+            <Box className={classes['separator']} />
+            <Typography>
+              New to KBase? <Link>Sign up</Link>
+            </Typography>
+            <Typography>
+              <Link
+                href="https://docs.kbase.us/getting-started/sign-up"
+                target="_blank"
+              >
+                Need help logging in?
+              </Link>
+            </Typography>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Container>
+  );
+};

src/features/navigator/Navigator.module.scss

@@ -5,10 +5,8 @@ pre {
 }
 
 .navigator {
-  background-color: use-color("base-lightest");
-  border-left: 1px solid use-color("silver");
   min-height: 100%;
-  padding: 1rem;
+  padding: 0 1rem;
 }
 
 .navigator a {

src/features/signup/AccountInformation.tsx

@@ -0,0 +1,161 @@
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { FC } from 'react';
+import classes from './SignUp.module.scss';
+
+/**
+ * Account information form for sign up flow
+ */
+export const AccountInformation: FC<{
+  setActiveStep: React.Dispatch<React.SetStateAction<number>>;
+}> = ({ setActiveStep }) => {
+  return (
+    <Stack spacing={2}>
+      <Alert>
+        <Stack spacing={1}>
+          <span>
+            You have signed in with your <strong>Google</strong> account{' '}
+            <strong>[email protected]</strong>. This will be the account linked
+            to your KBase account.
+          </span>
+          <Accordion className={classes['collapsible-message']} disableGutters>
+            <AccordionSummary
+              expandIcon={<FontAwesomeIcon icon={faAngleRight} />}
+              aria-controls="panel1-content"
+              id="panel1-header"
+            >
+              Not the account you were expecting?
+            </AccordionSummary>
+            <AccordionDetails>
+              <Stack spacing={1}>
+                <span>
+                  If the account you see above is not the one you want, use the
+                  link below to log out of Google, and then try again.
+                </span>
+                <Box>
+                  <Button variant="outlined">Log out from Google</Button>
+                </Box>
+                <span>
+                  If you are trying to sign up with a Google account that is
+                  already linked to a KBase account, you will be unable to
+                  create a new KBase account using that Google account.
+                </span>
+                <span>
+                  After signing out from Google you will need to restart the
+                  sign up process.
+                </span>
+                <Box>
+                  <Button variant="outlined">Sign up for KBase</Button>
+                </Box>
+              </Stack>
+            </AccordionDetails>
+          </Accordion>
+        </Stack>
+      </Alert>
+      <Paper className={classes['account-information-panel']} elevation={0}>
+        <Stack spacing={2}>
+          <Typography variant="h2">Create a new KBase Account</Typography>
+          <Typography>
+            Some field values have been pre-populated from your{' '}
+            <strong>Google</strong> account.
+            <strong> All fields are required.</strong>
+          </Typography>
+          <FormControl>
+            <FormLabel htmlFor="name-input">Full Name</FormLabel>
+            <TextField
+              id="name-input"
+              helperText="This field contains your name as you wish it to be displayed to other KBase users."
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="email-input">Email</FormLabel>
+            <TextField
+              id="email-input"
+              helperText="KBase may occasionally use this email address to communicate important information about KBase or your account. KBase will not share your email address with anyone, and other KBase users will not be able to see it."
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="username-input">KBase Username</FormLabel>
+            <TextField
+              id="username-input"
+              helperText="Your KBase username is the primary identifier associated with all of your work and assets within KBase.Your username is permanent and may not be changed later, so please choose wisely."
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="organization-input">Organization</FormLabel>
+            <TextField id="organization-input" />
+          </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="department-input">Department</FormLabel>
+            <TextField id="department-input" />
+          </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="department-input">
+              How did you hear about us? (Select all that apply)
+            </FormLabel>
+            <FormGroup>
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Journal Publication"
+              />
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Conference Presentation"
+              />
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Workshop/Webinar"
+              />
+              <FormControlLabel control={<Checkbox />} label="Colleague" />
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Course/Instructor"
+              />
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Newsletter/Email"
+              />
+              <FormControlLabel control={<Checkbox />} label="YouTube" />
+              <FormControlLabel control={<Checkbox />} label="Twitter" />
+              <FormControlLabel control={<Checkbox />} label="Search Engine" />
+              <FormControlLabel
+                control={<Checkbox />}
+                label="Online Advertisement"
+              />
+              <FormControlLabel control={<Checkbox />} label="Other" />
+            </FormGroup>
+          </FormControl>
+        </Stack>
+      </Paper>
+      <Stack spacing={1} direction="row">
+        <Button
+          variant="contained"
+          size="large"
+          onClick={() => setActiveStep(2)}
+        >
+          Continue to use policies
+        </Button>
+        <Button variant="contained" color="warning" size="large">
+          Cancel sign up
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};