Merge pull request #217 from kbase/feature/sign-in-layout

Add log in layout design

src/app/App.module.scss

@@ -48,7 +48,7 @@
     }
 
     .page_content {
-      background-color: transparent;
+      background-color: use-color("base-lightest");
       flex-grow: 1;
       flex-shrink: 1;
       max-height: 100%;

src/app/Routes.tsx

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

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,111 @@
+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="h4" component="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/theme.tsx

@@ -2,7 +2,7 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from 'react-router-dom';
-import { createTheme } from '@mui/material';
+import { alpha, createTheme, getContrastRatio } from '@mui/material';
 import { forwardRef } from 'react';
 
 const RouterCompatibleLink = forwardRef<
@@ -13,17 +13,76 @@ const RouterCompatibleLink = forwardRef<
   return <RouterLink ref={ref} to={href} {...other} />;
 });
 
+// TODO: import from single source of truth
+const baseColor = 'rgb(62, 56, 50)';
+
 export const theme = createTheme({
+  palette: {
+    base: {
+      main: baseColor,
+      contrastText: getContrastRatio(baseColor, '#fff') > 4.5 ? '#fff' : '#111',
+    },
+  },
+  typography: {
+    // TODO: import from single source of truth
+    fontFamily:
+      'Oxygen, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif',
+  },
   components: {
     MuiLink: {
       defaultProps: {
         component: RouterCompatibleLink,
       },
+      styleOverrides: {
+        root: {
+          textDecoration: 'none',
+        },
+      },
     },
     MuiButtonBase: {
       defaultProps: {
         LinkComponent: RouterCompatibleLink,
       },
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        elevation0: {
+          border: '1px solid',
+          borderColor: alpha(baseColor, 0.3),
+        },
+      },
     },
   },
 });
+
+/**
+ * Module augmentations for custom colors and prop options
+ */
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    base: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    base?: PaletteOptions['primary'];
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    base: true;
+  }
+}