Merge pull request #70 from aodn/feature/5648-improve-landing-page

Feature/5648 improve landing page
aodn · Jul 1, 2024 · 5b68060 · 5b68060
2 parents bd66a15 + dd0c17a
commit 5b68060
Show file tree

Hide file tree

Showing 16 changed files with 502 additions and 283 deletions.
diff --git a/src/components/common/logos/Logos.tsx b/src/components/common/logos/Logos.tsx
@@ -1,4 +1,4 @@
-import { Divider, Grid, Box, Typography } from "@mui/material";
+import { Divider, Grid, Box, Typography, Stack } from "@mui/material";
 
 import AIOMS from "@/assets/logos/aioms-logo2.png";
 import AustralianGovernment from "@/assets/logos/aioms-logo1.png";
@@ -18,12 +18,23 @@ import UNSW from "@/assets/logos/unsw-logo.png";
 import UTAS from "@/assets/logos/utas-logo.png";
 import UTS from "@/assets/logos/uts-logo.png";
 import UWA from "@/assets/logos/uniwa-logo.png";
+import {
+  color,
+  fontColor,
+  fontWeight,
+  padding,
+} from "../../../styles/constants";
 
 type LogoProps = { src: string; alt: string; height: string };
 
 const Logo = ({ src, alt, height }: LogoProps) => {
   return (
-    <Box component="img" src={src} alt={alt} sx={{ height: height, p: 2 }} />
+    <Box
+      component="img"
+      src={src}
+      alt={alt}
+      sx={{ height: height, padding: padding.small }}
+    />
   );
 };
 
@@ -47,97 +58,144 @@ const LogoList = () => {
   ];
 
   return (
-    <Grid container spacing={2} pb={6}>
+    <Grid container spacing={6}>
       <Grid item xs={12}>
         <Grid
           item
-          xs={6}
+          xs={12}
           sx={{
             display: "flex",
-            flexDirection: "row",
-            alignContent: "center",
+            justifyContent: "center",
             alignItems: "center",
-            marginLeft: "auto",
-            marginRight: "auto",
           }}
         >
-          <Logo src={NCRIS} alt={"logo-NCRIS"} height="200px" />
-          <Typography textAlign="left" pl={2}>
-            Australia&apos;s Integrated Marine Observing System (IMOS) is
-            enabled by the National Collaborative Research Infrastructre
-            Strategy (NCRIS) It is operated by a consortium of institutions as
-            an unincorperated joint venture with the Unviersity of Tasmania as
-            Lead Agent.
-          </Typography>
+          <Stack
+            direction="row"
+            spacing={2}
+            justifyContent="center"
+            alignItems="center"
+            sx={{
+              width: "60%",
+            }}
+          >
+            <Logo src={NCRIS} alt={"logo-NCRIS"} height="150px" />
+            <Typography textAlign="left" padding={0}>
+              Australia&apos;s Integrated Marine Observing System (IMOS) is
+              enabled by the National Collaborative Research Infrastructre
+              Strategy (NCRIS) It is operated by a consortium of institutions as
+              an unincorperated joint venture with the Unviersity of Tasmania as
+              Lead Agent.
+            </Typography>
+          </Stack>
         </Grid>
       </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>PRINCIPLE PARTICIPANTS</Typography>
-      </Grid>
-      <Grid
-        item
-        xs={10}
-        sx={{
-          display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
-        }}
-      >
-        <Box>
-          <Logo src={UTAS} alt={"logo-University-of-Tasmania"} height="60px" />
-          <Typography fontWeight={500}>LEAD AGENT</Typography>
-        </Box>
-        {principals.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
-      </Grid>
       <Grid
         item
+        xs={12}
         sx={{
           display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
+          flexDirection: "column",
+          justifyContent: "center",
           alignItems: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
         }}
       >
-        <Logo src={SIMS} alt="logo-sims" height="60px" />
-        <Divider orientation="vertical" flexItem />
-        {sims.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
-      </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>
+        <Typography paddingY={padding.small} fontWeight={fontWeight.extraBold}>
+          PRINCIPLE PARTICIPANTS
+        </Typography>
+        <Stack
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          spacing={1}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Logo
+              src={UTAS}
+              alt={"logo-University-of-Tasmania"}
+              height="40px"
+            />
+            <Typography
+              fontWeight={600}
+              padding={`0 ${padding.medium} 0 0`}
+              fontSize="small"
+            >
+              LEAD AGENT
+            </Typography>
+          </Box>
+          {principals.map((logo, index) => (
+            <Box key={index}>
+              <Logo src={logo} alt={`logo-${index}`} height="60px" />
+            </Box>
+          ))}
+        </Stack>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Logo src={SIMS} alt="logo-sims" height="60px" />
+          <Divider
+            orientation="vertical"
+            sx={{
+              height: "60%",
+              "&.MuiDivider-root": {
+                borderColor: color.gray.medium,
+              },
+            }}
+          />
+          {sims.map((logo, index) => (
+            <Box key={index}>
+              <Logo src={logo} alt={`logo-${index}`} height="60px" />
+            </Box>
+          ))}
+        </Stack>
+        <Typography
+          paddingY={padding.extraSmall}
+          fontSize="small"
+          fontWeight={fontWeight.extraBold}
+          color={fontColor.gray.light}
+        >
           SIMS IS A PARTNERSHIP INVOLVING FOUR UNIVERSITIES
         </Typography>
       </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>ASSOCIATE PARTICIPANTS</Typography>
-      </Grid>
       <Grid
         item
+        xs={12}
         sx={{
           display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
+          flexDirection: "column",
+          justifyContent: "center",
           alignItems: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
+          paddingBottom: padding.extraLarge,
         }}
       >
-        {associates.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
+        <Typography paddingY={padding.small} fontWeight={fontWeight.extraBold}>
+          ASSOCIATE PARTICIPANTS
+        </Typography>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          {associates.map((logo, index) => (
+            <Box key={index}>
+              <Logo
+                src={logo}
+                alt={`logo-${index}`}
+                height={index === 0 ? "30px" : "60px"}
+              />
+            </Box>
+          ))}
+        </Stack>
       </Grid>
     </Grid>
   );

diff --git a/src/components/details/Carousel.tsx b/src/components/details/Carousel.tsx
@@ -109,7 +109,7 @@ const Carousel: FC = () => {
           <Box sx={{ width: `${containerWidth}px`, height: "100%" }}>
             {/* Container for the cards and the slide animation */}
             {cards.map((card, index) => (
-              <Box // State to track the direction of the slide animation
+              <Box
                 key={`card-${index}`}
                 sx={{
                   width: "100%",

diff --git a/src/components/search/ComplexTextSearch.tsx b/src/components/search/ComplexTextSearch.tsx
@@ -12,7 +12,10 @@ import {
 } from "../common/store/componentParamReducer";
 import InputWithSuggester from "./InputWithSuggester";
 import { pageDefault } from "../common/constants";
-import { padding } from "../../styles/constants.js";
+import { color, fontColor, padding } from "../../styles/constants.js";
+
+export const filterButtonWidth = 100;
+export const searchIconWidth = 44;
 
 const ComplexTextSearch = () => {
   const navigate = useNavigate();
@@ -46,21 +49,26 @@ const ComplexTextSearch = () => {
       <Grid item xs={10}>
         <Paper
           sx={{
-            p: "2px 4px",
             display: "flex",
             alignItems: "center",
+            height: "100%",
           }}
         >
-          <IconButton sx={{ p: "10px" }} aria-label="search">
+          <IconButton
+            sx={{ width: `${searchIconWidth}px`, p: padding.small }}
+            aria-label="search"
+          >
             <SearchIcon />
           </IconButton>
           <InputWithSuggester handleEnterPressed={handleEnterPressed} />
-          <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
           <Button
             variant="text"
             sx={{
-              color: grey["searchButtonText"],
-              paddingX: padding["large"],
+              height: "100%",
+              minWidth: `${filterButtonWidth}px`,
+              color: fontColor.blue.medium,
+              paddingX: padding.large,
+              backgroundColor: color.gray.xxLight,
             }}
             startIcon={<Tune />}
             onClick={onFilterClick}
@@ -70,12 +78,22 @@ const ComplexTextSearch = () => {
           </Button>
         </Paper>
       </Grid>
-      <Grid item xs={2}>
+      <Grid
+        item
+        xs={2}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+      >
         <Button
           sx={{
             color: grey["searchButtonText"],
-            backgroundColor: "white",
+            backgroundColor: "#fff",
             height: "100%",
+
+            ":hover": {
+              backgroundColor: "#fff",
+            },
           }}
           fullWidth
           onClick={redirectSearch}