From e8524f5f27cdeb631098bdf14e3e01ceff72fe48 Mon Sep 17 00:00:00 2001
From: Antti Leinonen <Redande@users.noreply.github.com>
Date: Thu, 14 Sep 2023 10:13:44 +0300
Subject: [PATCH] Improve styles (#1241)

* Improve styles

* set xxl to 7680 to scale components up to 4k monitors
* add titles to courses filters
* set background to cta links in modules
* don't overflow hero image

* Fix broken color in course filters title

* Ignore broken titles for now for demo purposes

* Add stuff missing from last commit
---
 .../components/NewLayout/Common/CTAButton.tsx | 108 +++++++++---------
 frontend/components/NewLayout/Common/Hero.tsx |  15 ++-
 .../NewLayout/Courses/CourseGrid.tsx          |  10 --
 .../NewLayout/Courses/TagSelectButtons.tsx    |  20 ++++
 .../components/NewLayout/Footer/Footer.tsx    |   2 +-
 .../NewLayout/Modules/StudyModuleListItem.tsx |  11 +-
 frontend/pages/_new/_layout.tsx               |   2 +-
 frontend/pages/_new/index.tsx                 |  19 ++-
 frontend/src/newTheme/components.tsx          |   2 +-
 frontend/src/newTheme/index.tsx               |   2 +-
 frontend/src/theme/index.tsx                  |   2 +-
 11 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/frontend/components/NewLayout/Common/CTAButton.tsx b/frontend/components/NewLayout/Common/CTAButton.tsx
index 4faf70fa9..117549c83 100644
--- a/frontend/components/NewLayout/Common/CTAButton.tsx
+++ b/frontend/components/NewLayout/Common/CTAButton.tsx
@@ -43,16 +43,16 @@ const EnhancedMUIButton = styled(ButtonBase)(
       justify-content: center;
       max-width: 328px;
       padding: 13px 16px;
-  
+
       .text {
         ${fontSize(16, 18)}
         letter-spacing: -0.3px;
       }
-  
+
       .link-icon {
         display: flex;
         margin-left: 8px;
-  
+
         svg {
           height: 16px;
           width: 16px;
@@ -64,12 +64,12 @@ const EnhancedMUIButton = styled(ButtonBase)(
       background-color: ${theme.palette.common.brand.dark};
       border: 4px solid ${theme.palette.common.grayscale.white};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.brand.dark};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
@@ -79,12 +79,12 @@ const EnhancedMUIButton = styled(ButtonBase)(
       background-color: ${theme.palette.common.grayscale.white};
       border: 4px solid ${theme.palette.common.grayscale.black};
       color: ${theme.palette.common.grayscale.black};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.grayscale.white};
         fill: ${theme.palette.common.grayscale.black};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.black};
       }
@@ -94,205 +94,205 @@ const EnhancedMUIButton = styled(ButtonBase)(
       background-color: ${theme.palette.common.grayscale.black};
       border: 4px solid ${theme.palette.common.grayscale.white};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.grayscale.black};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
-  
+
       &:hover {
         background-color: ${theme.palette.common.brand.active};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.active};
         }
       }
-  
+
       &:focus {
         background-color: ${theme.palette.common.brand.main};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.main};
         }
       }
     }
-  
+
     &.blue-background {
       background-color: ${theme.palette.common.brand.light};
       border: 4px solid ${theme.palette.common.grayscale.white};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.brand.light};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
-  
+
       &:hover {
         background-color: ${theme.palette.common.brand.main};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.main};
         }
       }
-  
+
       &:focus {
         background-color: ${theme.palette.common.brand.active};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.active};
         }
       }
     }
-  
+
     &.white-background {
       background-color: ${theme.palette.common.grayscale.white};
       border: 4px solid ${theme.palette.common.brand.light};
       color: ${theme.palette.common.brand.light};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.grayscale.white};
         fill: ${theme.palette.common.brand.light};
       }
-  
+
       .text {
         color: ${theme.palette.common.brand.light};
       }
-  
+
       &:hover {
         border-color: ${theme.palette.common.brand.active};
-  
+
         .text {
           color: ${theme.palette.common.brand.active};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.active};
         }
       }
-  
+
       &:focus {
         border-color: ${theme.palette.common.brand.active};
-  
+
         .text {
           color: ${theme.palette.common.brand.active};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.active};
         }
       }
     }
-  
+
     &.hero-white {
       background-color: ${theme.palette.common.brand.light};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.brand.light};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
-  
+
       &:hover {
         background-color: ${theme.palette.common.brand.active};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.active};
         }
       }
-  
+
       &:focus {
         background-color: ${theme.palette.common.brand.active};
-  
+
         .link-icon svg {
           background-color: ${theme.palette.common.brand.active};
         }
       }
     }
-  
+
     &.hero-black {
       background-color: ${theme.palette.common.grayscale.black};
       border: 4px solid ${theme.palette.common.grayscale.white};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.grayscale.black};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
-  
+
       &:hover {
         border-color: ${theme.palette.common.brand.soft};
-  
+
         .text {
           color: ${theme.palette.common.brand.soft};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.soft};
         }
       }
-  
+
       &:focus {
         border-color: ${theme.palette.common.brand.soft};
-  
+
         .text {
           color: ${theme.palette.common.brand.soft};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.soft};
         }
       }
     }
-  
+
     &.hero-blue {
       background-color: ${theme.palette.common.brand.main};
       border: 4px solid ${theme.palette.common.grayscale.white};
       color: ${theme.palette.common.grayscale.white};
-  
+
       .link-icon svg {
         background-color: ${theme.palette.common.brand.main};
         fill: ${theme.palette.common.grayscale.white};
       }
-  
+
       .text {
         color: ${theme.palette.common.grayscale.white};
       }
-  
+
       &:hover {
         border-color: ${theme.palette.common.brand.soft};
-  
+
         .text {
           color: ${theme.palette.common.brand.soft};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.soft};
         }
       }
-  
+
       &:focus {
         border-color: ${theme.palette.common.brand.soft};
-  
+
         .text {
           color: ${theme.palette.common.brand.soft};
         }
-  
+
         .link-icon svg {
           fill: ${theme.palette.common.brand.soft};
         }
diff --git a/frontend/components/NewLayout/Common/Hero.tsx b/frontend/components/NewLayout/Common/Hero.tsx
index 782e00d41..1ed8de6fc 100644
--- a/frontend/components/NewLayout/Common/Hero.tsx
+++ b/frontend/components/NewLayout/Common/Hero.tsx
@@ -41,7 +41,7 @@ const HeroRoot = styled("section")(
       content: "";
       margin: 0 auto;
       display: block;
-  
+
       ${theme.breakpoints.up("md")} {
         position: absolute;
         left: 0;
@@ -73,7 +73,7 @@ const HeroRoot = styled("section")(
 const HeroContainer = styled("div")(
   ({ theme }) => `
   position: relative;
-  
+
   ${theme.breakpoints.up("md")} {
     display: grid;
     position: relative;
@@ -123,7 +123,7 @@ const HeroImageContainer = styled("div")(
     margin: 0;
     padding: 0;
     position: relative;
-  
+
     figure {
       margin: 0;
     }
@@ -154,7 +154,7 @@ const HeroContentContainer = styled("div")(
   padding: 24px 1rem 40px;
   margin: 0 auto;
   width: 100%;
-  
+
   ${theme.breakpoints.up("xs")} {
     padding: 40px 2rem;
   }
@@ -186,7 +186,7 @@ const HeroContentContainer = styled("div")(
     width: 100%;
 
     ${theme.breakpoints.up("xs")} {
-      padding: 24px 2rem 40px;      
+      padding: 24px 2rem 40px;
     }
     ${theme.breakpoints.up("md")} {
       order: 2;
@@ -236,6 +236,9 @@ const HeroContentContainer = styled("div")(
     ${theme.breakpoints.up(1920)} {
       min-height: 675px;
     }
+    ${theme.breakpoints.up(7680)} {
+      min-height: 2700px;
+    }
   }
 `,
 )
@@ -299,7 +302,7 @@ const HeroSpacer = styled("div")(
 
 const HeroTitle = styled(Typography)(
   ({ theme }) => `
-  hyphens: auto;
+  hyphens: none;
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
diff --git a/frontend/components/NewLayout/Courses/CourseGrid.tsx b/frontend/components/NewLayout/Courses/CourseGrid.tsx
index 0d7f08f2c..4ee4372b8 100644
--- a/frontend/components/NewLayout/Courses/CourseGrid.tsx
+++ b/frontend/components/NewLayout/Courses/CourseGrid.tsx
@@ -133,16 +133,6 @@ const ResetFiltersButton = styled(Button)<EnhancedButtonProps>`
   font-weight: bold;
   border-width: 0.15rem;
   max-height: 2.5rem;
-  /*color: ${({ variant }) =>
-    variant === "contained" ? "#F5F6F7" : "#378170"};
-  background-color: ${({ variant }) =>
-    variant === "contained" ? "#378170" : "#F5F6F7"};
-
-  &:hover {
-    border-width: 0.15rem;
-    background-color: ${({ variant }) =>
-    variant === "contained" ? "#378170" : "#F5F6F7"};
-  }*/
 `
 
 const DynamicTagSelectButtons = dynamic(() => import("./TagSelectButtons"), {
diff --git a/frontend/components/NewLayout/Courses/TagSelectButtons.tsx b/frontend/components/NewLayout/Courses/TagSelectButtons.tsx
index 8474b8e32..b8f232bb3 100644
--- a/frontend/components/NewLayout/Courses/TagSelectButtons.tsx
+++ b/frontend/components/NewLayout/Courses/TagSelectButtons.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback } from "react"
 
+// import { Chip, Skeleton, Typography } from "@mui/material"
 import { Chip, Skeleton } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 import Button from "../Common/Button"
 import { useTranslator } from "/hooks/useTranslator"
+// import { fontSize } from "/src/theme/util"
 import CommonTranslations from "/translations/common"
 
 import { TagCoreFieldsFragment } from "/graphql/generated"
@@ -67,6 +69,23 @@ const TagSkeletonContainer = styled("div")`
   gap: 0.5rem;
 `
 
+// const Title = styled(Typography)(
+//   ({ theme }) => `
+//   ${fontSize(12, 16)}
+//   color: ${theme.palette.common.grayscale.dark};
+//   font-weight: normal;
+//   letter-spacing: -0.2px;
+//   margin: 8px 4px 8px 0;
+//   padding: 4px 0;
+
+//   ${theme.breakpoints.up("sm")} {
+//     ${fontSize(14, 16)};
+//     letter-spacing: -0.3px;
+//     padding: 6px 0;
+//   }
+// `,
+// ) as typeof Typography
+
 const TagsSkeleton = ({
   category,
   widths,
@@ -184,6 +203,7 @@ const TagSelectButtons = ({
       {Object.keys(tags).map((category) => (
         <React.Fragment key={category}>
           <TagListContainer category={category}>
+            {/* <Title>{t(category)}</Title> */}
             {tags[category].map((tag) => (
               <TagChip
                 id={`tag-${category}-${tag.id}`}
diff --git a/frontend/components/NewLayout/Footer/Footer.tsx b/frontend/components/NewLayout/Footer/Footer.tsx
index 0ecf5cf3f..73870419b 100644
--- a/frontend/components/NewLayout/Footer/Footer.tsx
+++ b/frontend/components/NewLayout/Footer/Footer.tsx
@@ -112,7 +112,7 @@ const FooterBaseContent = styled("div")(
   address {
     font-style: normal;
   }
-  
+
   a {
     color: ${theme.palette.common.grayscale.white};
   }
diff --git a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx
index 3b0b73e82..366919a43 100644
--- a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx
+++ b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx
@@ -141,6 +141,11 @@ const EndedCoursesLinkContainer = styled("div")`
   justify-content: flex-end;
 `
 
+const StyledCTALink = styled(CTALink)`
+  background: #fff;
+  padding-left: 1rem;
+`
+
 const getCoursesByStatus = (
   courses: NewStudyModuleFieldsWithCoursesFragment["courses"],
 ) => {
@@ -215,7 +220,7 @@ export function ListItem({
   return (
     <ModuleSectionRoot as="li" backgroundColor={backgroundColor}>
       <CorrectedAnchor id={studyModule.slug} />
-      <ImageBackground src={backgroundPattern.src} />*
+      <ImageBackground src={backgroundPattern.src} />
       <ContentWrapper>
         <ModuleSectionBody>
           <HeroContainer>
@@ -249,11 +254,11 @@ export function ListItem({
         </ModuleSectionBody>
         {ended.length > 0 && (
           <EndedCoursesLinkContainer>
-            <CTALink
+            <StyledCTALink
               href={`/_new/courses/?tag=${studyModule.slug}&status=${CourseStatus.Ended}`}
             >
               {t("showEndedCourses")}
-            </CTALink>
+            </StyledCTALink>
           </EndedCoursesLinkContainer>
         )}
       </ContentWrapper>
diff --git a/frontend/pages/_new/_layout.tsx b/frontend/pages/_new/_layout.tsx
index f712426d2..95738f357 100644
--- a/frontend/pages/_new/_layout.tsx
+++ b/frontend/pages/_new/_layout.tsx
@@ -21,7 +21,7 @@ const FooterDownPusherWrapper = styled("div")`
 const MainContainer = styled("main")`
   display: flex;
   margin: 0 auto;
-  max-width: 1920px;
+  max-width: 7680px;
   padding: 0;
   width: 100%;
   position: relative;
diff --git a/frontend/pages/_new/index.tsx b/frontend/pages/_new/index.tsx
index 3d29d8ceb..df8bc86cc 100644
--- a/frontend/pages/_new/index.tsx
+++ b/frontend/pages/_new/index.tsx
@@ -9,18 +9,25 @@ import { ModuleNavigation } from "/components/NewLayout/Frontpage/Modules"
 import SelectedCourses from "/components/NewLayout/Frontpage/SelectedCourses"
 
 const HomeContainer = styled("div")`
-  /**/
+  display: flex;
+  justify-content: center;
+`
+
+const ContentContainer = styled("div")`
+  max-width: 1920px;
 `
 
 const Home = () => {
   return (
     <HomeContainer className="main_front_page">
       <Background />
-      <FrontpageHero />
-      {/*<News />*/}
-      <Hype />
-      <SelectedCourses />
-      <ModuleNavigation />
+      <ContentContainer>
+        <FrontpageHero />
+        {/*<News />*/}
+        <Hype />
+        <SelectedCourses />
+        <ModuleNavigation />
+      </ContentContainer>
     </HomeContainer>
   )
 }
diff --git a/frontend/src/newTheme/components.tsx b/frontend/src/newTheme/components.tsx
index 9717e0f26..d244f3976 100644
--- a/frontend/src/newTheme/components.tsx
+++ b/frontend/src/newTheme/components.tsx
@@ -287,7 +287,7 @@ export const withComponents = (theme: Theme) =>
             [theme.breakpoints.up("lg")]: {
               borderBottom: `1px solid ${theme.palette.common.grayscale.black}`,
               margin: "0 auto",
-              maxWidth: "1920px",
+              maxWidth: "7680px",
             },
           },
         },
diff --git a/frontend/src/newTheme/index.tsx b/frontend/src/newTheme/index.tsx
index 0abcc57ff..8ef8c2315 100644
--- a/frontend/src/newTheme/index.tsx
+++ b/frontend/src/newTheme/index.tsx
@@ -20,7 +20,7 @@ let theme = createTheme({
       desktop: 1024,
       lg: 1200,
       xl: 1600,
-      xxl: 1920,
+      xxl: 7680,
     },
   },
 })
diff --git a/frontend/src/theme/index.tsx b/frontend/src/theme/index.tsx
index 8d63b81d0..0b542050f 100644
--- a/frontend/src/theme/index.tsx
+++ b/frontend/src/theme/index.tsx
@@ -20,7 +20,7 @@ let theme = createTheme({
       desktop: 1024,
       lg: 1200,
       xl: 1536,
-      xxl: 1920,
+      xxl: 7680,
     },
   },
 })