Refactor new layout: responsive course card (#1188)

* make the whole course card one grid with named areas * refactor coursecard to flexbox and container queries * fix study module padding; use isomorphic layout effect * add tooltip with other languages; some skeletons; fix hydration issue
rage · May 19, 2023 · 5c76e4c · 5c76e4c
1 parent 6e78649
commit 5c76e4c
Show file tree

Hide file tree

Showing 28 changed files with 876 additions and 388 deletions.
diff --git a/frontend/components/BorderedSection.tsx b/frontend/components/BorderedSection.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from "react"
 
+import { PropsOf } from "@emotion/react"
 import { styled } from "@mui/material/styles"
 
 const BorderedSectionBase = styled("div")`
@@ -52,8 +53,6 @@ const BorderedSectionBase = styled("div")`
   }
 `
 
-type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never
-
 function BorderedSection({
   title,
   children,

diff --git a/frontend/components/Breadcrumbs.tsx b/frontend/components/Breadcrumbs.tsx
@@ -78,11 +78,11 @@ const BreadcrumbLinkBase = css`
 `
 
 const BreadcrumbLink = styled(Link)`
-  ${BreadcrumbLinkBase}
+  ${BreadcrumbLinkBase.styles}
 `
 
 const BreadcrumbNonLink = styled("div")`
-  ${BreadcrumbLinkBase}
+  ${BreadcrumbLinkBase.styles}
 `
 
 const BreadcrumbComponent: React.FunctionComponent<Breadcrumb> = ({

diff --git a/frontend/components/CourseImage.tsx b/frontend/components/CourseImage.tsx
@@ -16,7 +16,7 @@ const ImageComponentBase = css`
 `
 
 const PlaceholderComponent = styled("div")`
-  ${ImageComponentBase}
+  ${ImageComponentBase.styles}
   background-color: #F0F0F0;
   display: flex;
   justify-content: center;

diff --git a/frontend/components/Dashboard/Editor/Common/Fields/ControlledCheckbox.tsx b/frontend/components/Dashboard/Editor/Common/Fields/ControlledCheckbox.tsx
@@ -6,14 +6,15 @@ import { Checkbox, FormControlLabel } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 import { ControlledFieldProps } from "."
-import { InfoTooltipWithLabel } from "/components/Tooltip"
+import { InfoTooltip } from "/components/Tooltip"
 import { useAnchor } from "/hooks/useAnchors"
 
 const AlignedSpan = styled("span")`
   display: flex;
   align-items: flex-end;
   gap: 0.5rem;
 `
+
 interface ControlledCheckboxProps<
   TFieldValues extends FieldValues = FieldValues,
 > extends ControlledFieldProps<TFieldValues> {
@@ -26,7 +27,7 @@ const ControlledCheckboxLabel = React.memo(
     return (
       <AlignedSpan>
         {label}
-        {tip && <InfoTooltipWithLabel label={label} title={tip} />}
+        {tip && <InfoTooltip label={label} title={tip} />}
       </AlignedSpan>
     )
   },

diff --git a/frontend/components/Dashboard/Editor/Common/Fields/ControlledTextField.tsx b/frontend/components/Dashboard/Editor/Common/Fields/ControlledTextField.tsx
@@ -15,7 +15,7 @@ import { ControlledFieldProps } from "."
 import { pulseAnimation } from ".."
 import { useCourseEditorData } from "../../Course/CourseEditorDataContext"
 import RevertButton from "/components/RevertButton"
-import { InfoTooltipWithLabel } from "/components/Tooltip"
+import { InfoTooltip } from "/components/Tooltip"
 import { useAnchor } from "/hooks/useAnchors"
 
 const TextFieldContainer = styled("div")`
@@ -88,7 +88,7 @@ function ControlledTextFieldComponent<
                 onRevert={onRevert}
               />
             )}
-            {tip && <InfoTooltipWithLabel label={label} title={tip} />}
+            {tip && <InfoTooltip label={label} title={tip} />}
           </InputAdornment>
         ) : null,
     }),

diff --git a/frontend/components/Dashboard/Editor/Course/CourseInstanceLanguageSelector.tsx b/frontend/components/Dashboard/Editor/Course/CourseInstanceLanguageSelector.tsx
@@ -14,7 +14,7 @@ import { useEventCallback } from "@mui/material/utils"
 import { useCourseEditorData } from "./CourseEditorDataContext"
 import { CourseFormValues } from "./types"
 import RevertButton from "/components/RevertButton"
-import { InfoTooltipWithLabel } from "/components/Tooltip"
+import { InfoTooltip } from "/components/Tooltip"
 import { useAnchor } from "/hooks/useAnchors"
 import { useTranslator } from "/hooks/useTranslator"
 import CommonTranslations from "/translations/common"
@@ -134,7 +134,7 @@ function CourseInstanceLanguageSelector(
                   }
                   onRevert={onRevert}
                 />
-                <InfoTooltipWithLabel
+                <InfoTooltip
                   label={t("courseInstanceLanguage")}
                   title={t("helpCourseInstanceLanguage")}
                 />

diff --git a/frontend/components/Dashboard/StudyModules/ModuleCard.tsx b/frontend/components/Dashboard/StudyModules/ModuleCard.tsx
@@ -40,12 +40,12 @@ const ImageBackgroundBase = css`
 `
 
 const ImageBackground = styled(LoaderImage)`
-  ${ImageBackgroundBase};
+  ${ImageBackgroundBase.styles};
   object-fit: cover;
 `
 
 const ImageBackgroundSkeleton = styled("span")`
-  ${ImageBackgroundBase}
+  ${ImageBackgroundBase.styles}
 `
 
 const IconBackground = styled("span")`

diff --git a/frontend/components/Dashboard/Users/Summary/Exercise/common.tsx b/frontend/components/Dashboard/Users/Summary/Exercise/common.tsx
@@ -3,6 +3,7 @@ import { PropsWithChildren, useMemo } from "react"
 import { merge } from "lodash"
 import { MaterialReactTableProps, MRT_ColumnDef } from "material-react-table"
 
+import { PropsOf } from "@emotion/react"
 import CheckIcon from "@fortawesome/fontawesome-free/svgs/solid/check.svg?icon"
 import XMarkIcon from "@fortawesome/fontawesome-free/svgs/solid/xmark.svg?icon"
 import HelpIcon from "@mui/icons-material/HelpOutlineOutlined"
@@ -82,8 +83,6 @@ export const NarrowCellBase = styled("div")`
   padding-right: 1rem;
 `
 
-type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never
-
 const TooltipWrapper = styled("div")`
   margin-left: auto;
   padding: 0 0.5rem;

diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
@@ -19,15 +19,15 @@ const IconBaseStyle = css`
 `
 
 const TwitterIcon = styled(Twitter)`
-  ${IconBaseStyle};
+  ${IconBaseStyle.styles};
 `
 
 const FacebookIcon = styled(Facebook)`
-  ${IconBaseStyle};
+  ${IconBaseStyle.styles};
 `
 
 const YoutubeIcon = styled(Youtube)`
-  ${IconBaseStyle};
+  ${IconBaseStyle.styles};
 `
 
 const FooterBar = styled("footer")`

diff --git a/frontend/components/NewLayout/Common/Card/index.tsx b/frontend/components/NewLayout/Common/Card/index.tsx
@@ -1,8 +1,7 @@
 import Image from "next/image"
 
 import { Typography, TypographyProps } from "@mui/material"
-import { css } from "@mui/material/styles"
-import { styled } from "@mui/material/styles"
+import { css, styled } from "@mui/material/styles"
 
 export const CardWrapper = styled("div")`
   border-radius: 4px;
@@ -87,7 +86,7 @@ export const CardHeaderBackground = styled("span", {
     typeof prop !== "string" ||
     !["color", "image", "hue", "brightness"].includes(prop),
 })<CardHeaderBackgroundProps>`
-  ${CommonHeaderBackground};
+  ${CommonHeaderBackground.styles};
   background-size: cover;
   ${({ color, image }) => {
     if (!color && !image) {
@@ -114,7 +113,7 @@ export const CardImageHeaderBackground = styled(Image, {
   shouldForwardProp: (prop) =>
     typeof prop !== "string" || !["color", "hue", "brightness"].includes(prop),
 })<Omit<CardHeaderBackgroundProps, "image">>`
-  ${CommonHeaderBackground};
+  ${CommonHeaderBackground.styles};
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -129,6 +128,6 @@ CardImageHeaderBackground.defaultProps = {
 }
 
 export const CardHeaderBackgroundSkeleton = styled("span")`
-  ${CommonHeaderBackground};
+  ${CommonHeaderBackground.styles};
   background-color: #aaa;
 `