New layout to production (#1245)

* Add the help Ukraine -component to new layout's front page * Abbreviate long tags in mobile view * Remove research consent question from profile settings * Add a link to TMC settings in profile settings * Export some necessary older pages in new urls * Change front page hero image * Move old pages from frontend/pages/ to frontend/pages/_old * Move new pages from frontend/pages/_new to frontend/pages * Add some pages that were missing from _new * Refactor _new out from everywhere, add _old where necessary * Miscellaneous fixes and improvements
rage · Oct 7, 2023 · cabbc3c · cabbc3c
1 parent 26c96c0
commit cabbc3c
Show file tree

Hide file tree

Showing 133 changed files with 2,471 additions and 2,022 deletions.
diff --git a/frontend/components/Breadcrumbs.tsx b/frontend/components/Breadcrumbs.tsx
@@ -127,7 +127,7 @@ export function Breadcrumbs() {
   const router = useRouter()
   const { breadcrumbs } = useBreadcrumbContext()
 
-  const isHomePage = !!RegExp(/^(?:\/_new)?\/?$/).exec(
+  const isHomePage = !!RegExp(/^(?:\/_old)?\/?$/).exec(
     router?.asPath?.replace(/#(.*)/, ""),
   )
 

diff --git a/frontend/components/CreateAccountForm.tsx b/frontend/components/CreateAccountForm.tsx
@@ -235,7 +235,7 @@ class CreateAccountForm extends Component<CreateAccountFormProps> {
     const t = getSignUpTranslator(
       (this.props.router.locale ?? "fi") as LanguageKey,
     )
-    const baseUrl = this.props.router.asPath.includes("_new") ? "/_new" : ""
+    const baseUrl = this.props.router.asPath.includes("_old") ? "/_old" : ""
 
     return (
       <StyledPaper>

diff --git a/frontend/components/CreateEmailTemplateDialog.tsx b/frontend/components/CreateEmailTemplateDialog.tsx
@@ -19,6 +19,7 @@ import {
 import ErrorMessage from "./ErrorMessage"
 import CustomSnackbar from "/components/CustomSnackbar"
 import Spinner from "/components/Spinner"
+import useIsOld from "/hooks/useIsOld"
 import { EmailTemplateType } from "/types/emailTemplates"
 import { isDefinedAndNotEmpty } from "/util/guards"
 
@@ -60,6 +61,9 @@ const CreateEmailTemplateDialog = ({
     UpdateOrganizationEmailTemplateDocument,
   )
 
+  const isOld = useIsOld()
+  const baseUrl = isOld ? "/_old" : "/admin"
+
   const handleDialogClickOpen = () => {
     setOpenDialog(true)
   }
@@ -140,7 +144,8 @@ const CreateEmailTemplateDialog = ({
       }
 
       const url =
-        "/email-templates/" + addEmailTemplateData!.addEmailTemplate!.id
+        `${baseUrl}/email-templates/` +
+        addEmailTemplateData!.addEmailTemplate!.id
       Router.push(url)
     } catch {
       setIsErrorSnackbarOpen(true)

diff --git a/frontend/components/Dashboard/CourseCard.tsx b/frontend/components/Dashboard/CourseCard.tsx
@@ -11,7 +11,7 @@ import { ButtonWithPaddingAndMargin as StyledButton } from "/components/Buttons/
 import CourseImage from "/components/CourseImage"
 import { CardTitle } from "/components/Text/headers"
 import { useFilterContext } from "/contexts/FilterContext"
-import useIsNew from "/hooks/useIsNew"
+import useIsOld from "/hooks/useIsOld"
 import { useTranslator } from "/hooks/useTranslator"
 import CoursesTranslations from "/translations/courses"
 import { formatDateTime } from "/util/dataFormatFunctions"
@@ -174,8 +174,8 @@ interface CourseCardProps {
 
 const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
   const t = useTranslator(CoursesTranslations)
-  const isNewLayout = useIsNew()
-  const baseUrl = isNewLayout ? "/_new/admin" : ""
+  const isOldLayout = useIsOld()
+  const baseUrl = isOldLayout ? "/_old" : "/admin"
 
   const { onStatusClick } = useFilterContext()
   const courseFound = !loading && !!course

diff --git a/frontend/components/Dashboard/StudyModules/ModuleCard.tsx b/frontend/components/Dashboard/StudyModules/ModuleCard.tsx
@@ -15,7 +15,7 @@ import { css, styled } from "@mui/material/styles"
 import { ButtonWithPaddingAndMargin } from "/components/Buttons/ButtonWithPaddingAndMargin"
 import LoaderImage from "/components/LoaderImage"
 import { ClickableDiv } from "/components/Surfaces/ClickableCard"
-import useIsNew from "/hooks/useIsNew"
+import useIsOld from "/hooks/useIsOld"
 import { useTranslator } from "/hooks/useTranslator"
 import StudyModulesTranslations from "/translations/study-modules"
 
@@ -118,8 +118,8 @@ interface ModuleCardProps {
 
 function ModuleCard({ studyModule, image, loading }: ModuleCardProps) {
   const t = useTranslator(StudyModulesTranslations)
-  const isNew = useIsNew()
-  const baseUrl = isNew ? "/_new/admin" : ""
+  const isOld = useIsOld()
+  const baseUrl = isOld ? "/_old" : "/admin"
   const moduleFound = !loading && studyModule
   const moduleNotFound = !loading && !studyModule
 

diff --git a/frontend/components/Dashboard/Users/Search/MobileGrid.tsx b/frontend/components/Dashboard/Users/Search/MobileGrid.tsx
@@ -21,7 +21,7 @@ import { styled } from "@mui/material/styles"
 import InfoRow from "../InfoRow"
 import Pagination from "./Pagination"
 import UserSearchContext from "/contexts/UserSearchContext"
-import useIsNew from "/hooks/useIsNew"
+import useIsOld from "/hooks/useIsOld"
 import { useTranslator } from "/hooks/useTranslator"
 import UsersTranslations from "/translations/users"
 
@@ -114,8 +114,8 @@ interface DataCardProps {
 }
 
 const DataCard = ({ row }: DataCardProps) => {
-  const isNew = useIsNew()
-  const baseUrl = isNew ? "/_new/admin" : ""
+  const isOld = useIsOld()
+  const baseUrl = isOld ? "/_old" : "/admin"
   const t = useTranslator(UsersTranslations)
 
   const fields = useMemo(() => {

diff --git a/frontend/components/Dashboard/Users/Search/WideGrid.tsx b/frontend/components/Dashboard/Users/Search/WideGrid.tsx
@@ -18,7 +18,7 @@ import { styled } from "@mui/material/styles"
 
 import Pagination from "./Pagination"
 import UserSearchContext from "/contexts/UserSearchContext"
-import useIsNew from "/hooks/useIsNew"
+import useIsOld from "/hooks/useIsOld"
 import { useTranslator } from "/hooks/useTranslator"
 import UsersTranslations from "/translations/users"
 
@@ -96,8 +96,8 @@ const WideGrid = () => {
 }
 
 const RenderResults = () => {
-  const isNew = useIsNew()
-  const baseUrl = isNew ? "/_new/admin" : ""
+  const isOld = useIsOld()
+  const baseUrl = isOld ? "/_old" : "/admin"
   const t = useTranslator(UsersTranslations)
   const { data, loading, meta } = useContext(UserSearchContext)
   const isVeryWide = useMediaQuery("(min-width: 1200px)")

diff --git a/frontend/components/DynamicLayout.tsx b/frontend/components/DynamicLayout.tsx
@@ -2,15 +2,15 @@ import { memo } from "react"
 
 import dynamic from "next/dynamic"
 
-const OriginalLayout = dynamic(() => import("../pages/_layout"), {
+const OriginalLayout = dynamic(() => import("../pages/_old/_layout"), {
   loading: () => null,
 })
-const NewLayout = dynamic(() => import("../pages/_new/_layout"), {
+const NewLayout = dynamic(() => import("../pages/_layout"), {
   loading: () => null,
 })
 
-const DynamicLayout = ({ isNew, ...props }: any) => {
-  return isNew ? <NewLayout {...props} /> : <OriginalLayout {...props} />
+const DynamicLayout = ({ isOld, ...props }: any) => {
+  return isOld ? <OriginalLayout {...props} /> : <NewLayout {...props} />
 }
 
 export default memo(DynamicLayout)
diff --git a/frontend/components/HeaderBar/UserOptionsMenu.tsx b/frontend/components/HeaderBar/UserOptionsMenu.tsx
@@ -43,14 +43,14 @@ const UserOptionsMenu = () => {
   return (
     <>
       <HeaderMenuButton
-        href="/sign-in"
+        href="/_old/sign-in"
         color="inherit"
         variant="text"
         onClick={onLoginClick}
       >
         {t("loginShort")}
       </HeaderMenuButton>
-      <HeaderMenuButton href="/sign-up" color="inherit" variant="text">
+      <HeaderMenuButton href="/_old/sign-up" color="inherit" variant="text">
         {t("signUp")}
       </HeaderMenuButton>
     </>

diff --git a/frontend/components/NewLayout/Admin/Links.tsx b/frontend/components/NewLayout/Admin/Links.tsx
@@ -18,10 +18,10 @@ export const Links = () => {
 
   return (
     <Container>
-      <Link href="/_new/admin/courses">{t("courses")}</Link>
-      <Link href="/_new/admin/study-modules">{t("modules")}</Link>
-      <Link href="/_new/admin/email-templates">{t("emailTemplates")}</Link>
-      <Link href="/_new/admin/users/search">{t("userSearch")}</Link>
+      <Link href="/admin/courses">{t("courses")}</Link>
+      <Link href="/admin/study-modules">{t("modules")}</Link>
+      <Link href="/admin/email-templates">{t("emailTemplates")}</Link>
+      <Link href="/admin/users/search">{t("userSearch")}</Link>
     </Container>
   )
 }
diff --git a/frontend/components/NewLayout/Common/LinkBox.tsx b/frontend/components/NewLayout/Common/LinkBox.tsx
@@ -7,6 +7,7 @@ import { Skeleton, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 import CTALink, { CTALinkIcon, CTALinkProps } from "./CTALink"
+import { FullCoverTextBackground } from "/components/Images/CardBackgroundFullCover"
 import { fontSize } from "/src/theme/util"
 
 const LinkBoxContainer = styled("article")(
@@ -128,6 +129,7 @@ const LinkBoxDescription = styled("p")(
 const LinkBoxLink = styled(CTALink)`
   margin: 0 -8px 24px 0;
   align-self: flex-end;
+  padding-left: 2rem;
 
   span[aria-hidden="true"] {
     position: absolute;
@@ -139,66 +141,97 @@ const LinkBoxLink = styled(CTALink)`
   }
 ` as typeof CTALink
 
+const FlagBackground = styled(FullCoverTextBackground)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  padding: 0 1rem;
+  background-color: #ffd700;
+  z-index: 2;
+  background-image: linear-gradient(90deg, transparent 20px, white 20px),
+    linear-gradient(180deg, #0057b7 50%, #ffd700 50%);
+  background-repeat: no-repeat;
+  gap: 1rem;
+`
+
 export interface LinkBoxProps {
   imageProps?: ImageProps
   title: string
   titleImageProps?: ImageProps
   description?: string
   linkProps?: CTALinkProps
+  ukraine?: boolean
 }
 
+const LinkBoxContents = ({
+  imageProps,
+  titleImageProps,
+  title,
+  description,
+}: LinkBoxProps & PropsOf<typeof LinkBoxContainer>) => (
+  <LinkBoxContent>
+    {imageProps && (
+      <LinkBoxImageContainer>
+        <LinkBoxImage {...imageProps} />
+      </LinkBoxImageContainer>
+    )}
+    <LinkBoxTextContainer>
+      {titleImageProps ? (
+        <LinkBoxTitleImageContainer>
+          <LinkBoxTitleImage {...titleImageProps} />
+        </LinkBoxTitleImageContainer>
+      ) : (
+        <LinkBoxTitle variant="h3">{title}</LinkBoxTitle>
+      )}
+      {description && <LinkBoxDescription>{description}</LinkBoxDescription>}
+    </LinkBoxTextContainer>
+  </LinkBoxContent>
+)
+
 const LinkBox = ({
   imageProps,
   title,
   description,
   titleImageProps,
   linkProps,
+  ukraine,
   ...props
 }: LinkBoxProps & PropsOf<typeof LinkBoxContainer>) => {
   return linkProps ? (
-    <LinkBoxContainer {...props}>
-      <LinkBoxContent>
-        {imageProps && (
-          <LinkBoxImageContainer>
-            <LinkBoxImage {...imageProps} />
-          </LinkBoxImageContainer>
-        )}
-        <LinkBoxTextContainer>
-          {titleImageProps ? (
-            <LinkBoxTitleImageContainer>
-              <LinkBoxTitleImage {...titleImageProps} />
-            </LinkBoxTitleImageContainer>
-          ) : (
-            <LinkBoxTitle variant="h3">{title}</LinkBoxTitle>
-          )}
-          {description && (
-            <LinkBoxDescription>{description}</LinkBoxDescription>
-          )}
-        </LinkBoxTextContainer>
-      </LinkBoxContent>
-      <LinkBoxLink {...linkProps}></LinkBoxLink>
-    </LinkBoxContainer>
+    ukraine ? (
+      <FlagBackground>
+        <LinkBoxContainer {...props}>
+          <LinkBoxContents
+            imageProps={imageProps}
+            titleImageProps={titleImageProps}
+            title={title}
+            description={description}
+          />
+          <LinkBoxLink {...linkProps}></LinkBoxLink>
+        </LinkBoxContainer>
+      </FlagBackground>
+    ) : (
+      <LinkBoxContainer {...props}>
+        <LinkBoxContents
+          imageProps={imageProps}
+          titleImageProps={titleImageProps}
+          title={title}
+          description={description}
+        />
+        <LinkBoxLink {...linkProps}></LinkBoxLink>
+      </LinkBoxContainer>
+    )
   ) : (
     <LinkBoxContainerNonClickable {...props}>
-      <LinkBoxContent>
-        {imageProps && (
-          <LinkBoxImageContainer>
-            <LinkBoxImage {...imageProps} />
-          </LinkBoxImageContainer>
-        )}
-        <LinkBoxTextContainer>
-          {titleImageProps ? (
-            <LinkBoxTitleImageContainer>
-              <LinkBoxTitleImage {...titleImageProps} />
-            </LinkBoxTitleImageContainer>
-          ) : (
-            <LinkBoxTitle variant="h3">{title}</LinkBoxTitle>
-          )}
-          {description && (
-            <LinkBoxDescription>{description}</LinkBoxDescription>
-          )}
-        </LinkBoxTextContainer>
-      </LinkBoxContent>
+      <LinkBoxContents
+        imageProps={imageProps}
+        titleImageProps={titleImageProps}
+        title={title}
+        description={description}
+      />
     </LinkBoxContainerNonClickable>
   )
 }

diff --git a/frontend/components/NewLayout/Common/LinkBoxList.tsx b/frontend/components/NewLayout/Common/LinkBoxList.tsx
@@ -12,7 +12,7 @@ const linkBoxListVariants = ["default", "wide-box"] as const
 export type LinkBoxListVariant = (typeof linkBoxListVariants)[number]
 
 const LinkBoxListComponent = styled("ul")(
-  ({ theme, children }) => `
+  ({ theme }) => `
   padding: 0;
   margin: 0;
   list-style: none;
@@ -24,14 +24,7 @@ const LinkBoxListComponent = styled("ul")(
       grid-template-columns: repeat(2, 1fr);
       gap: 32px 24px;
     }
-    ${theme.breakpoints.up("desktop")} {
-      ${
-        // no orphans
-        React.Children.count(children) % 3 !== 1
-          ? "grid-template-columns: repeat(3, 1fr);"
-          : ""
-      }
-    }
+
     ${theme.breakpoints.up(1920)} {
       gap: 32px;
     }