From 286760412a6ce8d6ff9f143e728fb7e46c5f0991 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 28 Aug 2024 16:12:04 -0400 Subject: [PATCH 1/5] custom styles for clear button --- .../mit-learn/src/pages/HomePage/SearchInput.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx index 75645c7c37..f5d6ff8a81 100644 --- a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx +++ b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx @@ -33,6 +33,15 @@ const StyledAdornmentButton = styled(AdornmentButton)(({ theme }) => ({ }, })) +const StyledClearButton = styled(StyledAdornmentButton)({ + ".MuiInputBase-sizeHero &": { + width: "32px", + ["&:hover"]: { + backgroundColor: "transparent", + }, + }, +}) + export interface SearchSubmissionEvent { target: { value: string @@ -95,13 +104,13 @@ const SearchInput: React.FC = (props) => { endAdornment={ <> {props.value && ( - - + )} Date: Wed, 28 Aug 2024 16:27:50 -0400 Subject: [PATCH 2/5] update chip sizing --- frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx index fe8314cc41..44c63fd7a3 100644 --- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx +++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx @@ -142,6 +142,13 @@ const TopicLink = styled(Link)({ }) const StyledChipLink = styled(ChipLink)(({ theme, variant }) => [ + { + height: "32px", + padding: "8px 16px", + ".MuiChip-icon": { + marginRight: "4px", + }, + }, variant === "outlinedWhite" ?? { borderColor: theme.custom.colors.lightGray2, color: theme.custom.colors.silverGrayDark, From 01ddfcb5a68691645bbe21f0a601161d3b7f8a01 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 28 Aug 2024 17:47:21 -0400 Subject: [PATCH 3/5] new chip styles --- .../src/pages/HomePage/HeroSearch.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx index 44c63fd7a3..5c048ff594 100644 --- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx +++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx @@ -63,7 +63,7 @@ const SEARCH_CHIPS: SearchChip[] = [ { label: "Explore All", href: "/search/", - variant: "gray", + variant: "outlined", icon: , }, ] @@ -141,7 +141,7 @@ const TopicLink = styled(Link)({ textDecoration: "underline", }) -const StyledChipLink = styled(ChipLink)(({ theme, variant }) => [ +const TrendingChip = styled(ChipLink)(({ theme, variant }) => [ { height: "32px", padding: "8px 16px", @@ -149,9 +149,23 @@ const StyledChipLink = styled(ChipLink)(({ theme, variant }) => [ marginRight: "4px", }, }, - variant === "outlinedWhite" ?? { + variant === "outlinedWhite" && { borderColor: theme.custom.colors.lightGray2, color: theme.custom.colors.silverGrayDark, + "&:hover": { + backgroundColor: `${theme.custom.colors.lightGray1} !important`, + borderColor: `${theme.custom.colors.silverGrayLight} !important`, + color: theme.custom.colors.darkGray2, + }, + }, + variant === "outlined" && { + backgroundColor: theme.custom.colors.lightGray2, + color: theme.custom.colors.darkGray2, + borderColor: theme.custom.colors.lightGray2, + "&:hover": { + backgroundColor: `${theme.custom.colors.lightGray2} !important`, + borderColor: theme.custom.colors.silverGray, + }, }, ]) @@ -226,7 +240,7 @@ const HeroSearch: React.FC = () => { {SEARCH_CHIPS.map((chip) => ( - Date: Wed, 28 Aug 2024 17:57:28 -0400 Subject: [PATCH 4/5] fix chip icons --- frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx index 5c048ff594..f131daff69 100644 --- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx +++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx @@ -13,8 +13,8 @@ import { } from "@/common/urls" import { NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER } from "../AboutPage/AboutPage" import { - RiAddBoxLine, RiAwardLine, + RiFileAddLine, RiSearch2Line, RiThumbUpLine, RiTimeLine, @@ -34,7 +34,7 @@ const SEARCH_CHIPS: SearchChip[] = [ label: "Recently Added", href: SEARCH_NEW, variant: "outlinedWhite", - icon: , + icon: , }, { label: "Popular", @@ -46,7 +46,7 @@ const SEARCH_CHIPS: SearchChip[] = [ label: "Upcoming", href: SEARCH_UPCOMING, variant: "outlinedWhite", - icon: , + icon: , }, { label: "Free", From 9f543df0d8b9aa92844a49fc5f935217d3a77ddd Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 28 Aug 2024 18:00:13 -0400 Subject: [PATCH 5/5] set border radius on search box back to default 8px and add drop shadow --- frontends/mit-learn/src/pages/HomePage/SearchInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx index f5d6ff8a81..07ba11403c 100644 --- a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx +++ b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx @@ -5,7 +5,7 @@ import type { InputProps } from "ol-components" const StyledInput = styled(Input)(({ theme }) => ({ height: "72px", - borderRadius: "6px", + boxShadow: "0px 8px 20px 0px rgba(120, 147, 172, 0.10)", "&.MuiInputBase-adornedEnd": { paddingRight: "0 !important", },