diff --git a/frontend/components/Breadcrumbs.tsx b/frontend/components/Breadcrumbs.tsx index 7737ce2f9..ed3314ca0 100644 --- 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 index 87ef792b7..159af8cc1 100644 --- a/frontend/components/CreateAccountForm.tsx +++ b/frontend/components/CreateAccountForm.tsx @@ -235,7 +235,7 @@ class CreateAccountForm extends Component { 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 ( diff --git a/frontend/components/CreateEmailTemplateDialog.tsx b/frontend/components/CreateEmailTemplateDialog.tsx index 7b210dcb9..0a9e59ba8 100644 --- 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 index 94a18e595..01322e874 100644 --- 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 index 9dae79368..c24758e52 100644 --- 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 index 9a3687958..5d623fb97 100644 --- 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 index 277eb2269..1cf72a717 100644 --- 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 index 862ed8c13..6653d3265 100644 --- 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 ? : +const DynamicLayout = ({ isOld, ...props }: any) => { + return isOld ? : } export default memo(DynamicLayout) diff --git a/frontend/components/HeaderBar/UserOptionsMenu.tsx b/frontend/components/HeaderBar/UserOptionsMenu.tsx index f42d06eb9..0121ace77 100644 --- a/frontend/components/HeaderBar/UserOptionsMenu.tsx +++ b/frontend/components/HeaderBar/UserOptionsMenu.tsx @@ -43,14 +43,14 @@ const UserOptionsMenu = () => { return ( <> {t("loginShort")} - + {t("signUp")} diff --git a/frontend/components/NewLayout/Admin/Links.tsx b/frontend/components/NewLayout/Admin/Links.tsx index d5995baf2..47ce99269 100644 --- a/frontend/components/NewLayout/Admin/Links.tsx +++ b/frontend/components/NewLayout/Admin/Links.tsx @@ -18,10 +18,10 @@ export const Links = () => { return ( - {t("courses")} - {t("modules")} - {t("emailTemplates")} - {t("userSearch")} + {t("courses")} + {t("modules")} + {t("emailTemplates")} + {t("userSearch")} ) } diff --git a/frontend/components/NewLayout/Common/LinkBox.tsx b/frontend/components/NewLayout/Common/LinkBox.tsx index 1245b06ad..afbcda291 100644 --- 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) => ( + + {imageProps && ( + + + + )} + + {titleImageProps ? ( + + + + ) : ( + {title} + )} + {description && {description}} + + +) + const LinkBox = ({ imageProps, title, description, titleImageProps, linkProps, + ukraine, ...props }: LinkBoxProps & PropsOf) => { return linkProps ? ( - - - {imageProps && ( - - - - )} - - {titleImageProps ? ( - - - - ) : ( - {title} - )} - {description && ( - {description} - )} - - - - + ukraine ? ( + + + + + + + ) : ( + + + + + ) ) : ( - - {imageProps && ( - - - - )} - - {titleImageProps ? ( - - - - ) : ( - {title} - )} - {description && ( - {description} - )} - - + ) } diff --git a/frontend/components/NewLayout/Common/LinkBoxList.tsx b/frontend/components/NewLayout/Common/LinkBoxList.tsx index 3fd711cb6..6e3bc8872 100644 --- 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; } diff --git a/frontend/components/NewLayout/Courses/CourseCard.tsx b/frontend/components/NewLayout/Courses/CourseCard.tsx index be264765d..b4d19afab 100644 --- a/frontend/components/NewLayout/Courses/CourseCard.tsx +++ b/frontend/components/NewLayout/Courses/CourseCard.tsx @@ -5,7 +5,7 @@ import BookIcon from "@fortawesome/fontawesome-free/svgs/solid/book-open.svg?ico import GraduationCapIcon from "@fortawesome/fontawesome-free/svgs/solid/graduation-cap.svg?icon" import HandshakeIcon from "@fortawesome/fontawesome-free/svgs/solid/handshake.svg?icon" import HelpIcon from "@mui/icons-material/Help" -import { Link, Skeleton, Typography } from "@mui/material" +import { Link, Skeleton, Typography, useMediaQuery } from "@mui/material" import { css, styled } from "@mui/material/styles" import CTALink from "../Common/CTALink" @@ -19,6 +19,7 @@ import MoocLogoIcon from "/public/images/new/logos/moocfi_white.svg?icon" import { fontSize } from "/src/theme/util" import CommonTranslations from "/translations/common" import { useFormatDateTime } from "/util/dataFormatFunctions" +import withNoSsr from "/util/withNoSsr" import { CourseStatus, NewCourseFieldsFragment } from "/graphql/generated" @@ -69,7 +70,7 @@ const ModuleColor = styled("div", { position: relative; display: flex; width: 100%; - max-height: 80px; + max-height: 80px; height: 80px; background-color: ${ @@ -423,6 +424,7 @@ const CourseCard = React.forwardRef< CourseCardProps & PropsOf >(({ course, studyModule, ...props }, ref) => { const t = useTranslator(CommonTranslations) + const abbreviate = useMediaQuery("(max-width: 800px)") const courseStudyModule = studyModule ?? course.study_modules[0]?.slug ?? "other" @@ -456,9 +458,11 @@ const CourseCard = React.forwardRef< Helsingin yliopisto } - languageTags={} - difficultyTags={} - moduleTags={} + languageTags={} + difficultyTags={ + + } + moduleTags={} link={ course?.link && ( @@ -513,4 +517,4 @@ export const CourseCardSkeleton = () => ( ) -export default CourseCard +export default withNoSsr(CourseCard) diff --git a/frontend/components/NewLayout/Courses/CourseGrid.tsx b/frontend/components/NewLayout/Courses/CourseGrid.tsx index 4ee4372b8..c97583059 100644 --- a/frontend/components/NewLayout/Courses/CourseGrid.tsx +++ b/frontend/components/NewLayout/Courses/CourseGrid.tsx @@ -383,7 +383,7 @@ function CourseGrid() { if ( !course.name .toLocaleLowerCase(locale) - .includes(searchString.toLocaleLowerCase(locale)) || + .includes(searchString.toLocaleLowerCase(locale)) && !course.description ?.toLocaleLowerCase(locale) .includes(searchString.toLocaleLowerCase(locale)) diff --git a/frontend/components/NewLayout/Footer/Footer.tsx b/frontend/components/NewLayout/Footer/Footer.tsx index 302b54be0..6fc0326eb 100644 --- a/frontend/components/NewLayout/Footer/Footer.tsx +++ b/frontend/components/NewLayout/Footer/Footer.tsx @@ -386,15 +386,7 @@ const Footer = () => { )} - This site is maintained by the{" "} - - RAGE research group - + This site is maintained by the University of Helsinki's MOOC center diff --git a/frontend/components/NewLayout/Frontpage/FrontpageHero.tsx b/frontend/components/NewLayout/Frontpage/FrontpageHero.tsx index 9f91a38f6..f5c15d50c 100644 --- a/frontend/components/NewLayout/Frontpage/FrontpageHero.tsx +++ b/frontend/components/NewLayout/Frontpage/FrontpageHero.tsx @@ -12,11 +12,11 @@ function FrontpageHero() { color="white" size="large" imageProps={{ - src: "/images/new/doggos.png", + src: "/images/new/frontpage_hero_image_cropped.png", width: 620, height: 465, priority: true, - alt: "hero image of doggos enjoying programming", + alt: "hero image of a woman enjoying programming", }} linkProps={{ href: "#courses", diff --git a/frontend/components/NewLayout/Frontpage/Modules/ModuleCard.tsx b/frontend/components/NewLayout/Frontpage/Modules/ModuleCard.tsx index 2c2a676b5..018310bfa 100644 --- a/frontend/components/NewLayout/Frontpage/Modules/ModuleCard.tsx +++ b/frontend/components/NewLayout/Frontpage/Modules/ModuleCard.tsx @@ -58,7 +58,7 @@ export const ModuleCard = ({ {description} - + {t("moduleInformation")} diff --git a/frontend/components/NewLayout/Frontpage/Modules/ModuleNavigation.tsx b/frontend/components/NewLayout/Frontpage/Modules/ModuleNavigation.tsx index b3b56be88..3f495c472 100644 --- a/frontend/components/NewLayout/Frontpage/Modules/ModuleNavigation.tsx +++ b/frontend/components/NewLayout/Frontpage/Modules/ModuleNavigation.tsx @@ -89,7 +89,7 @@ export function ModuleNavigation() { - {t("showAllModules")} + {t("showAllModules")} ) diff --git a/frontend/components/NewLayout/Frontpage/SelectedCourses.tsx b/frontend/components/NewLayout/Frontpage/SelectedCourses.tsx index 48ffc88ca..f4ccef4f8 100644 --- a/frontend/components/NewLayout/Frontpage/SelectedCourses.tsx +++ b/frontend/components/NewLayout/Frontpage/SelectedCourses.tsx @@ -126,7 +126,7 @@ function SelectedCourses() { ))} - {t("showAllCourses")} + {t("showAllCourses")} ) diff --git a/frontend/components/NewLayout/Frontpage/UkraineInfo.tsx b/frontend/components/NewLayout/Frontpage/UkraineInfo.tsx new file mode 100644 index 000000000..51c22cc37 --- /dev/null +++ b/frontend/components/NewLayout/Frontpage/UkraineInfo.tsx @@ -0,0 +1,44 @@ +import { styled } from "@mui/material/styles" + +import ContentWrapper from "../Common/ContentWrapper" +import LinkBoxList from "../Common/LinkBoxList" +import { useTranslator } from "/hooks/useTranslator" +import CommonTranslations from "/translations/common" + +const StyledContentWrapper = styled(ContentWrapper)` + margin-top: 5rem; +` + +function UkraineInfo() { + const t = useTranslator(CommonTranslations) + + return ( +
+ + + +
+ ) +} +export default UkraineInfo diff --git a/frontend/components/NewLayout/Header/MoocLogo.tsx b/frontend/components/NewLayout/Header/MoocLogo.tsx index 63944cb4a..b221598fe 100644 --- a/frontend/components/NewLayout/Header/MoocLogo.tsx +++ b/frontend/components/NewLayout/Header/MoocLogo.tsx @@ -31,7 +31,7 @@ const MoocLogoLink = styled(Link)` } ` const MoocLogo = () => ( - + MOOC.fi diff --git a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx index 2627e3019..52fc167e5 100644 --- a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx +++ b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx @@ -245,7 +245,7 @@ export function ListItem({ {ended.length > 0 && ( {t("showEndedCourses")} diff --git a/frontend/components/NewLayout/Navigation/Breadcrumbs.tsx b/frontend/components/NewLayout/Navigation/Breadcrumbs.tsx index bfdea6264..d1e034d26 100644 --- a/frontend/components/NewLayout/Navigation/Breadcrumbs.tsx +++ b/frontend/components/NewLayout/Navigation/Breadcrumbs.tsx @@ -99,7 +99,7 @@ const Breadcrumbs = () => { const { asPath } = useRouter() const { breadcrumbs } = useBreadcrumbContext() - const isHomePage = !!RegExp(/^(?:\/_new)?\/?$/).exec( + const isHomePage = !!RegExp(/^(?:\/_old)?\/?$/).exec( asPath?.replace(/#(.*)/, ""), ) @@ -115,7 +115,7 @@ const Breadcrumbs = () => { aria-label="breadcrumb" > - + {breadcrumbs.map((breadcrumb, index) => ( { { { const { pathname } = useRouter() const hasSubmenu = isSubmenuItem(item) - const { href, label } = item - const onClick = useEventCallback(() => { + const { href, label, onClick } = item + const onItemClick = useEventCallback(() => { setBreadcrumbs((prev) => [...prev, item]) setCurrentLevel(level + 1) }) @@ -369,13 +369,17 @@ const MobileMenuItem = ({ item, level = 0 }: MobileMenuItemProps) => { isActive={pathname === href} className={level > 0 ? "submenu" : undefined} > - + {level > 0 && } {label} {hasSubmenu && ( <> - + { [ { label: t("courses"), - href: "/_new/courses", + href: "/courses", }, { label: t("modules"), - href: "/_new/study-modules", + href: "/study-modules", }, admin ? { label: "Admin", - href: "/_new/admin", + href: "/admin", items: [ { - href: "/_new/admin/courses", + href: "/admin/courses", label: t("courses"), }, { - href: "/_new/admin/study-modules", + href: "/admin/study-modules", label: t("modules"), }, { - href: "/_new/admin/email-templates", + href: "/admin/email-templates", label: t("emailTemplates"), }, { - href: "/_new/admin/users/search", + href: "/admin/users/search", label: t("userSearch"), }, ], diff --git a/frontend/components/Profile/ProfileCompletionsDisplay.tsx b/frontend/components/Profile/ProfileCompletionsDisplay.tsx index 6de14557f..7df94443e 100644 --- a/frontend/components/Profile/ProfileCompletionsDisplay.tsx +++ b/frontend/components/Profile/ProfileCompletionsDisplay.tsx @@ -2,6 +2,7 @@ import { Typography } from "@mui/material" import { FormSubmitButton } from "/components/Buttons/FormSubmitButton" import { CompletionListItem } from "/components/Home/Completions" +import useIsOld from "/hooks/useIsOld" import { useTranslator } from "/hooks/useTranslator" import ProfileTranslations from "/translations/profile" import { completionHasCourse } from "/util/guards" @@ -15,6 +16,7 @@ interface CompletionsProps { const ProfileCompletionsDisplay = (props: CompletionsProps) => { const { completions } = props const t = useTranslator(ProfileTranslations) + const isOld = useIsOld() return ( <> @@ -27,7 +29,11 @@ const ProfileCompletionsDisplay = (props: CompletionsProps) => { {completions.length === 0 && ( {t("nocompletionsText")} )} - + {t("seeCompletions")} diff --git a/frontend/components/Profile/ProfilePointsDisplay.tsx b/frontend/components/Profile/ProfilePointsDisplay.tsx index d62aa2e5a..d5f105e98 100644 --- a/frontend/components/Profile/ProfilePointsDisplay.tsx +++ b/frontend/components/Profile/ProfilePointsDisplay.tsx @@ -4,6 +4,7 @@ import { FormSubmitButton } from "/components/Buttons/FormSubmitButton" import ErrorMessage from "/components/ErrorMessage" import Spinner from "/components/Spinner" import PointsListGrid from "/components/User/Points/PointsListGrid" +import useIsOld from "/hooks/useIsOld" import { useTranslator } from "/hooks/useTranslator" import ProfileTranslations from "/translations/profile" @@ -12,12 +13,13 @@ import { CurrentUserProgressesDocument } from "/graphql/generated" const ProfilePointsDisplay = () => { const { data, error, loading } = useQuery(CurrentUserProgressesDocument) const t = useTranslator(ProfileTranslations) + const isOld = useIsOld() if (loading) { return } - if (error || !data) { + if (error ?? !data) { return } @@ -28,7 +30,11 @@ const ProfilePointsDisplay = () => { return ( <> - + {t("seePoints")} diff --git a/frontend/components/Profile/ProfileSettings.tsx b/frontend/components/Profile/ProfileSettings.tsx index d0632c932..971764f62 100644 --- a/frontend/components/Profile/ProfileSettings.tsx +++ b/frontend/components/Profile/ProfileSettings.tsx @@ -1,83 +1,24 @@ -import { ChangeEvent, useState } from "react" - -import { useMutation } from "@apollo/client" - -import CustomSnackbar from "/components/CustomSnackbar" -import ResearchConsent from "/components/Dashboard/ResearchConsent" +import CTALink from "../NewLayout/Common/CTALink" +import useIsOld from "/hooks/useIsOld" import { useTranslator } from "/hooks/useTranslator" import ProfileTranslations from "/translations/profile" -import { - CurrentUserOverviewDocument, - UpdateResearchConsentDocument, - UserOverviewFieldsFragment, -} from "/graphql/generated" - -interface ProfileSettingsProps { - data?: UserOverviewFieldsFragment -} - -interface SnackbarProps { - type: "error" | "success" | "warning" - message: string -} - -const ProfileSettings = ({ data }: ProfileSettingsProps) => { +const ProfileSettings = () => { const t = useTranslator(ProfileTranslations) - - const initialSnackbarState: SnackbarProps = { - type: "success", - message: t("researchOkAnswer"), - } - - const { research_consent } = data ?? {} - const [researchConsent, setResearchConsent] = useState( - research_consent === null || typeof research_consent === "undefined" - ? undefined - : research_consent - ? "1" - : "0", - ) - const [updateResearchConsent, { loading }] = useMutation( - UpdateResearchConsentDocument, - { - refetchQueries: [{ query: CurrentUserOverviewDocument }], - }, - ) - const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) - const [snackbarState, setSnackbarState] = - useState(initialSnackbarState) - - const handleResearchConsentInput = async ( - event: ChangeEvent, - value: string, - ) => { - event.preventDefault() - setResearchConsent(value) - try { - await updateResearchConsent({ variables: { value: value === "1" } }) - setSnackbarState(initialSnackbarState) - } catch { - setSnackbarState({ - type: "error", - message: t("researchError"), - }) - } - setIsSnackbarOpen(true) - } + const isOld = useIsOld() return ( <> - - +

{t("TMCSettingsInfo")}

+ {isOld ? ( + + {t("TMCProfileLink")} + + ) : ( + + {t("TMCProfileLink")} + + )} ) } diff --git a/frontend/components/Profile/StudentDataDisplay.tsx b/frontend/components/Profile/StudentDataDisplay.tsx index 1386a658f..f967e28ac 100644 --- a/frontend/components/Profile/StudentDataDisplay.tsx +++ b/frontend/components/Profile/StudentDataDisplay.tsx @@ -54,7 +54,7 @@ const StudentDataDisplay = ({ tab, data }: StudentDataDisplayProps) => { - + ) diff --git a/frontend/hooks/useIsOld.tsx b/frontend/hooks/useIsOld.tsx new file mode 100644 index 000000000..114ab0514 --- /dev/null +++ b/frontend/hooks/useIsOld.tsx @@ -0,0 +1,9 @@ +import { useRouter } from "next/router" + +export default function useIsOld() { + const router = useRouter() + + const isOld = router.pathname?.includes("_old") + + return isOld +} diff --git a/frontend/hooks/useThemeWithLocale.tsx b/frontend/hooks/useThemeWithLocale.tsx index 0870588ef..0eb7ad718 100644 --- a/frontend/hooks/useThemeWithLocale.tsx +++ b/frontend/hooks/useThemeWithLocale.tsx @@ -5,7 +5,7 @@ import { useRouter } from "next/router" import { createTheme } from "@mui/material/styles" -import useIsNew from "./useIsNew" +import useIsOld from "./useIsOld" import { datePickersfiFI, fiFI } from "/lib/locale" import newTheme from "/src/newTheme" import originalTheme from "/src/theme" @@ -33,8 +33,8 @@ export default function useThemeWithLocale(deviceType?: string) { const router = useRouter() const { locale = "fi" } = router - const isNew = useIsNew() - const theme = isNew ? newTheme : originalTheme + const isOld = useIsOld() + const theme = isOld ? originalTheme : newTheme const themeWithLocale = useMemo( () => diff --git a/frontend/lib/with-admin.tsx b/frontend/lib/with-admin.tsx index 39570b3da..2bb1154df 100644 --- a/frontend/lib/with-admin.tsx +++ b/frontend/lib/with-admin.tsx @@ -25,7 +25,7 @@ function withAdmin(Component: any) { static async getInitialProps(context: NextPageContext) { const admin = isAdmin(context) const signedIn = isSignedIn(context) - const baseUrl = context.pathname.includes("_new") ? "/_new" : "" + const baseUrl = context.pathname.includes("_old") ? "/_old" : "" prevContext = context diff --git a/frontend/lib/with-signed-in.tsx b/frontend/lib/with-signed-in.tsx index e6cb85ef2..cfa5d22f3 100644 --- a/frontend/lib/with-signed-in.tsx +++ b/frontend/lib/with-signed-in.tsx @@ -26,7 +26,7 @@ export default function withSignedIn( static async getInitialProps(context: NextContext) { const signedIn = isSignedIn(context) - const baseUrl = context.pathname.includes("_new") ? "/_new" : "" + const baseUrl = context.pathname.includes("_old") ? "/_old" : "" prevContext = context if (!signedIn) { diff --git a/frontend/pages/404.tsx b/frontend/pages/404.tsx index 25fd3e5ab..6714f5252 100644 --- a/frontend/pages/404.tsx +++ b/frontend/pages/404.tsx @@ -1,22 +1,3 @@ -import { Typography } from "@mui/material" - -const FourOhFour = () => { - return ( -
- - 404 - - - Hups. Tätä sivua ei ole olemassa. - - - Uh oh. You've reached a non-existent page. - - - Hoppsan. Sidan finns inte. - -
- ) -} +import FourOhFour from "pages/_old/404" export default FourOhFour diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx index 7d8284727..a59c6e29a 100644 --- a/frontend/pages/_app.tsx +++ b/frontend/pages/_app.tsx @@ -13,7 +13,7 @@ import DynamicLayout from "/components/DynamicLayout" import AppContextProvider from "/contexts/AppContextProvider" import { LoginStateProvider } from "/contexts/LoginStateContext" import useAlternateLanguage from "/hooks/useAlternateLanguage" -import useIsNew from "/hooks/useIsNew" +import useIsOld from "/hooks/useIsOld" import { useScrollToHash } from "/hooks/useScrollToHash" import useSeoConfig from "/hooks/useSeoConfig" import useThemeWithLocale from "/hooks/useThemeWithLocale" @@ -54,7 +54,7 @@ export function MyApp({ Component, pageProps, deviceType }: MyAppProps) { useScrollToHash() - const isNew = useIsNew() + const isOld = useIsOld() const seoConfig = useSeoConfig() const themeWithLocale = useThemeWithLocale(deviceType) const alternateLanguage = useAlternateLanguage() @@ -92,7 +92,7 @@ export function MyApp({ Component, pageProps, deviceType }: MyAppProps) { - + diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx index 6d1cbe0c8..dd58c9eb3 100644 --- a/frontend/pages/_document.tsx +++ b/frontend/pages/_document.tsx @@ -16,12 +16,12 @@ interface CustomDocumentProps extends DocumentProps { function CustomDocument(props: CustomDocumentProps) { props.__NEXT_DATA__.props.apolloState = props.apolloState - const isNew = props.__NEXT_DATA__.page.includes("_new") + const isOld = props.__NEXT_DATA__.page.includes("_old") - const theme = isNew ? newTheme : originalTheme - const fontVariableClass = isNew - ? newFontVariableClass - : originalFontVariableClass + const theme = isOld ? originalTheme : newTheme + const fontVariableClass = isOld + ? originalFontVariableClass + : newFontVariableClass return ( diff --git a/frontend/pages/_layout.tsx b/frontend/pages/_layout.tsx index 41dcc9aff..e11b8372a 100644 --- a/frontend/pages/_layout.tsx +++ b/frontend/pages/_layout.tsx @@ -1,18 +1,15 @@ -import { PropsWithChildren } from "react" +import React from "react" -import dynamic from "next/dynamic" import { useRouter } from "next/router" import { styled } from "@mui/material/styles" -import { Breadcrumbs } from "/components/Breadcrumbs" -import Footer from "/components/Footer" import Alerts from "/components/HeaderBar/Alerts" -import Header from "/components/HeaderBar/Header" +import Footer from "/components/NewLayout/Footer" +import Header from "/components/NewLayout/Header" +import Breadcrumbs from "/components/NewLayout/Navigation/Breadcrumbs" import PageLoadingIndicators from "/components/PageLoadingIndicators" import SkipLink from "/components/SkipLink" -import Snackbars from "/components/Snackbars" -import { useLoginStateContext } from "/contexts/LoginStateContext" const FooterDownPusherWrapper = styled("div")` display: flex; @@ -21,29 +18,36 @@ const FooterDownPusherWrapper = styled("div")` justify-content: space-between; ` -// when the footer is visible, it will overlap the content; -// this empty div appears with the dynamic height of the toolbar to offset this -const FooterUpPusher = styled("div")( - ({ theme }) => ` +const MainContainer = styled("main")` display: flex; - min-height: ${theme.mixins.toolbar.minHeight}px; + margin: 0 auto; + max-width: 7680px; + padding: 0; + width: 100%; + position: relative; +` + +const LayoutContent = styled("div")( + ({ theme }) => ` + padding: 0; + width: 100%; - @media (min-width: 1050px) { - display: none; + ${theme.breakpoints.up("sm")} { + margin: 0 auto; + width: 100%; + } + ${theme.breakpoints.up("lg")} { + flex-grow: 1; + order: 2; + width: 80%; + padding: 0 2rem; } `, ) - -const MobileBottomNavigation = dynamic( - () => import("../components/MobileBottomNavigation"), - { - loading: () => null, - }, -) - -const Layout = ({ children }: PropsWithChildren) => { +const Layout: React.FunctionComponent = ({ + children, +}) => { const router = useRouter() - const { loggedIn, admin } = useLoginStateContext() const isHomePage = !!RegExp(/^\/?$/).exec( router?.asPath?.replace(/#(.*)/, ""), @@ -54,18 +58,15 @@ const Layout = ({ children }: PropsWithChildren) => { - + +