Add Login page's Footer

w
CSCfi · Dec 30, 2021 · 7a8ea07 · 7a8ea07
1 parent ab19048
commit 7a8ea07
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 28 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react"
 
 import Container from "@mui/material/Container"
 import CssBaseline from "@mui/material/CssBaseline"
+import { styled } from "@mui/material/styles"
 import { makeStyles } from "@mui/styles"
 import * as i18n from "i18next"
 import { Routes, Route, useLocation, Navigate } from "react-router-dom"
@@ -37,20 +38,21 @@ const useStyles = makeStyles(theme => ({
     flexDirection: "column",
     height: "100%",
   },
-  loginContent: {
-    padding: theme.spacing(0),
-    margin: theme.spacing(8, 0, 0),
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-  },
   errorContent: {
     width: "100%",
     marginTop: theme.spacing(10),
   },
 }))
 
+const LoginContent = styled(Container)(() => ({
+  padding: 0,
+  margin: 0,
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+}))
+
 // paths that don't show navigation menu on top
 const pathsWithoutNav = ["/error400", "/error401", "/error403", "/error500"]
 
@@ -150,9 +152,9 @@ const App: React.FC = () => {
         <Route
           path="/"
           element={
-            <Container component="main" maxWidth={false} className={classes.loginContent}>
+            <LoginContent component="main" maxWidth={false} disableGutters>
               <Login />
-            </Container>
+            </LoginContent>
           }
         />
         <Route

diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -120,7 +120,6 @@ const LanguageSelector = (props: MenuItemProps) => {
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
 
-  const classes = useStyles()
   const dispatch = useDispatch()
 
   const navigate = useNavigate()
@@ -156,7 +155,7 @@ const LanguageSelector = (props: MenuItemProps) => {
         aria-haspopup="true"
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
-        className={classes.languageSelector}
+        sx={{ ml: "spacing(1)", textTransform: "capitalize" }}
       >
         {currentLocale}
       </Button>

diff --git a/src/style.css b/src/style.css
@@ -1,13 +1,16 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
 html,
 body {
+  width: 100%;
   height: 100%;
-  margin: 0;
-  padding: 0;
 }
 
 #root {
   display: flex;
   flex-direction: column;
   height: 100%;
-  font-size: 16px;
 }
diff --git a/src/theme.ts b/src/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material/styles"
+import { createTheme, responsiveFontSizes } from "@mui/material/styles"
 
 import MuseoSans_100 from "./fonts/MuseoSans_100.otf"
 import MuseoSans_300 from "./fonts/MuseoSans_300.otf"
@@ -40,9 +40,10 @@ const palette = {
 /**
  * Set up custom theme that follows CSC's design guidelines.
  */
-const CSCtheme = createTheme({
+let CSCtheme = createTheme({
   typography: {
     fontFamily: "Museo Sans, Arial, sans-serif",
+    fontSize: 14,
   },
   components: {
     MuiCssBaseline: {
@@ -180,4 +181,6 @@ const CSCtheme = createTheme({
   },
 })
 
+CSCtheme = responsiveFontSizes(CSCtheme)
+
 export default CSCtheme
diff --git a/src/views/Login.js b/src/views/Login.js
@@ -1,34 +1,56 @@
 //@flow
 import React from "react"
 
+import MailOutlineIcon from "@mui/icons-material/MailOutline"
+import PhoneIcon from "@mui/icons-material/Phone"
+import Box from "@mui/material/Box"
 import Button from "@mui/material/Button"
 import Container from "@mui/material/Container"
+import Grid from "@mui/material/Grid"
 import Paper from "@mui/material/Paper"
 import { styled } from "@mui/material/styles"
 import Typography from "@mui/material/Typography"
 
 import CSCBannerLogin from "../images/csc_banner_login.png"
 
+const LoginContainer = styled(Container)(() => ({
+  display: "flex",
+  minHeight: "100vh",
+  flexDirection: "column",
+  justifyContent: "space-between",
+}))
+
 const LoginBanner = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
   backgroundImage: `url(${CSCBannerLogin})`,
   backgroundSize: "cover",
   backgroundRepeat: "no-repeat",
   width: "53vw",
-  height: "65vh",
-  margin: "8.5vh auto",
-  paddingTop: "14vh",
-  paddingLeft: "5vw",
+  height: "55vh",
+  margin: "16vh auto auto auto",
+  padding: "14vh 5vw 5vh 5vw",
   borderRadius: "0.375em",
   boxShadow: "2px 2px 12px 2px #00000029",
 }))
 
 const LoginButton = styled(Button)(() => ({
   marginTop: "2.5vh",
-  paddingTop: "1.5em",
-  paddingBottom: "1.5em",
   height: "6.5vh",
-  width: "10vw",
+  width: "10.5vw",
+}))
+
+const Footer = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary.light,
+  width: "100%",
+}))
+
+const FooterItem = styled(Grid)(({ theme }) => ({
+  color: theme.palette.secondary.main,
+  paddingTop: "2vh",
+  paddingBottom: "2vh",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
 }))
 
 const Login = (): React$Element<typeof Container> => {
@@ -38,17 +60,45 @@ const Login = (): React$Element<typeof Container> => {
   }
 
   return (
-    <Container maxWidth={false} sx={{ flex: "1 0 auto", padding: 0, width: "100%" }}>
+    <LoginContainer disableGutters maxWidth={false}>
       <LoginBanner elevation={0}>
-        <Typography variant="h3" sx={{ color: "primary.main", fontWeight: 700 }}>
+        <Typography variant="h4" sx={{ color: "primary.main", fontWeight: 700 }}>
           SD Submit
         </Typography>
-        <Typography sx={{ mt: "4vh", color: "secondary.main" }}>Tool for submitting metadata.</Typography>
+        <Typography sx={{ mt: "2.25em", color: "secondary.main" }}>Tool for submitting metadata.</Typography>
         <LoginButton variant="contained" color="primary" href={loginRoute}>
           Login
         </LoginButton>
       </LoginBanner>
-    </Container>
+      <Footer container justifyContent="center">
+        <FooterItem item xs={12} md={4}>
+          <Typography variant="subtitle1">CSC - IT Center for Science Ltd.</Typography>
+          <Typography variant="body2">P.O. Box 405 FI-02101 Espoo, Finland</Typography>
+          <Box sx={{ display: "flex" }}>
+            <PhoneIcon color="secondary" fontSize="small" />
+            <Typography variant="body2" component="span">
+              +358 9 457 2001
+            </Typography>
+          </Box>
+        </FooterItem>
+        <FooterItem item xs={12} md={4}>
+          <Typography variant="subtitle1">Service Desk</Typography>
+          <Typography variant="body2">Open Monday to Friday from 8.30 a.m. to 4 p.m.</Typography>
+          <Box sx={{ display: "flex" }}>
+            <PhoneIcon color="secondary" fontSize="small" />
+            <Typography variant="body2" component="span">
+              +358 9 457 2821
+            </Typography>
+          </Box>
+          <Box sx={{ display: "flex" }}>
+            <MailOutlineIcon fontSize="small" />
+            <Typography variant="body2" component="span">
+              [email protected]
+            </Typography>
+          </Box>
+        </FooterItem>
+      </Footer>
+    </LoginContainer>
   )
 }