diff --git a/frontend/components/NewLayout/Courses/Catalogue.tsx b/frontend/components/NewLayout/Courses/Catalogue.tsx
index 7b3f7179d..0c2c31de0 100644
--- a/frontend/components/NewLayout/Courses/Catalogue.tsx
+++ b/frontend/components/NewLayout/Courses/Catalogue.tsx
@@ -10,12 +10,17 @@ const Container = styled("section")`
justify-items: center;
`
+const Header = styled(Typography)`
+ background: #f5f6f7;
+ padding: 1rem;
+`
+
function Catalogue() {
const t = useTranslator(CoursesTranslations)
return (
- {t("coursesHeader")}
+
)
diff --git a/frontend/components/NewLayout/Courses/CourseCard.tsx b/frontend/components/NewLayout/Courses/CourseCard.tsx
index 419edade0..81989008f 100644
--- a/frontend/components/NewLayout/Courses/CourseCard.tsx
+++ b/frontend/components/NewLayout/Courses/CourseCard.tsx
@@ -10,10 +10,11 @@ import { formatDateTime } from "/util/dataFormatFunctions"
import { CourseFieldsFragment } from "/graphql/generated"
const colorSchemes = {
- csb: "#08457A",
- programming: "#065853",
- cloud: "#1A2333",
- ai: "#51309F",
+ csb: "#215887",
+ programming: "#1F6964",
+ cloud: "#822630",
+ ai: "#6245A9",
+ other: "#313947",
}
/* Needed in a later PR for the custom tag colors per tag type
diff --git a/frontend/components/NewLayout/Courses/CourseGrid.tsx b/frontend/components/NewLayout/Courses/CourseGrid.tsx
index 57c172366..46fcccddf 100644
--- a/frontend/components/NewLayout/Courses/CourseGrid.tsx
+++ b/frontend/components/NewLayout/Courses/CourseGrid.tsx
@@ -60,19 +60,24 @@ const CardContainer = styled("ul")`
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
+ margin-top: 0;
@media (max-width: 800px) {
grid-template-columns: 1fr;
}
`
-const SearchBar = styled(TextField)`
- margin: 0.5rem 0;
+const FiltersContainer = styled("div")`
background: #f5f6f7;
+ padding-bottom: 1.5rem;
+`
+
+const SearchBar = styled(TextField)`
+ margin-bottom: 0.5rem 0;
`
const Filters = styled("div")`
- margin: 0 0 1rem 1rem;
+ margin: 1rem 0 1rem 0;
display: grid;
grid-auto-flow: column;
grid-template-columns: 5% 50% 30% 10%;
@@ -102,10 +107,6 @@ const TagButton = styled(Button, {
}
`
-const Tags = styled("div")`
- align-self: center;
-`
-
const Statuses = styled("div")`
justify-self: end;
`
@@ -132,9 +133,39 @@ const TagsContainer = styled("div")`
display: grid;
grid-auto-flow: column;
grid-template-columns: 70% 30%;
+ grid-template-rows: repeat(3, 1fr);
+ grid-template-areas:
+ "difficultyTags selectAllDifficulties"
+ "moduleTags selectAllModules"
+ "languageTags selectAllLanguages";
+ gap: 0.5rem;
+ justify-items: left;
+ align-items: center;
+`
+
+const DifficultyTagsContainer = styled("div")`
+ grid-area: difficultyTags;
+`
+
+const ModuleTagsContainer = styled("div")`
+ grid-area: moduleTags;
+`
+
+const LanguageTagsContainer = styled("div")`
+ grid-area: languageTags;
+`
+
+const SelectAllDifficultiesButton = styled(TagButton)`
+ grid-area: selectAllDifficulties;
`
-const SelectAllContainer = styled("div")``
+const SelectAllModulesButton = styled(TagButton)`
+ grid-area: selectAllModules;
+`
+
+const SelectAllLanguagesButton = styled(TagButton)`
+ grid-area: selectAllLanguages;
+`
function CourseGrid() {
const t = useTranslator(CommonTranslations)
@@ -258,55 +289,33 @@ function CourseGrid() {
return (
- ) =>
- setSearchString(e.target.value)
- }
- />
-
- {t("filter")}:
-
-
- {difficultyTags.map((tag) => (
- handleClick(tag)}
- size="small"
- >
- {tag}
-
- ))}
-
- {moduleTags.map((tag) => (
- handleClick(tag)}
- size="small"
- >
- {tag}
-
- ))}
-
- {languageTags.map((tag) => (
- handleClick(tag)}
- size="small"
- >
- {tag}
-
- ))}
-
-
-
+ ) =>
+ setSearchString(e.target.value)
+ }
+ />
+
+ {t("filter")}:
+
+
+ {difficultyTags.map((tag) => (
+ handleClick(tag)}
+ size="small"
+ >
+ {tag}
+
+ ))}
+
+ activeTags.includes(tag))
@@ -317,8 +326,20 @@ function CourseGrid() {
size="small"
>
{t("selectAll")}
-
-
+
+ {moduleTags.map((tag) => (
+ handleClick(tag)}
+ size="small"
+ >
+ {tag}
+
+ ))}
+
+ activeTags.includes(tag))
@@ -329,9 +350,21 @@ function CourseGrid() {
size="small"
>
{t("selectAll")}
-
-
+
+ {languageTags.map((tag) => (
+ handleClick(tag)}
+ size="small"
+ >
+ {tag}
+
+ ))}
+
+ activeTags.includes(tag))
? "contained"
@@ -341,33 +374,33 @@ function CourseGrid() {
size="small"
>
{t("selectAll")}
-
-
-
-
- {["Active", "Upcoming", "Ended"].map((status) => (
- handleStatusChange(status)}
- />
- }
- />
- ))}
-
- }
- >
- {t("reset")}
-
-
+
+
+
+ {["Active", "Upcoming", "Ended"].map((status) => (
+ handleStatusChange(status)}
+ />
+ }
+ />
+ ))}
+
+ }
+ >
+ {t("reset")}
+
+
+
{loading ? (
diff --git a/frontend/pages/_new/courses/index.tsx b/frontend/pages/_new/courses/index.tsx
index f9ac7fcfd..f00a12ab0 100644
--- a/frontend/pages/_new/courses/index.tsx
+++ b/frontend/pages/_new/courses/index.tsx
@@ -28,8 +28,8 @@ const Background = styled("div")`
right: 0;
bottom: 0;
z-index: -1;
- background: #5f6ff7;
- mask-image: url(${backgroundPattern});
+ background: #f5f6f7;
+ background-image: url(${backgroundPattern});
`
function Courses() {