Skip to content

Commit

Permalink
Improve styles (#1241)
Browse files Browse the repository at this point in the history 
* Improve styles

* set xxl to 7680 to scale components up to 4k monitors
* add titles to courses filters
* set background to cta links in modules
* don't overflow hero image

* Fix broken color in course filters title

* Ignore broken titles for now for demo purposes

* Add stuff missing from last commit
  • Loading branch information
@Redande
Redande committed Sep 14, 2023
1 parent bd8a32e commit e8524f5
Show file tree
Hide file tree
Showing 11 changed files with 109 additions and 84 deletions.
108 changes: 54 additions & 54 deletions frontend/components/NewLayout/Common/CTAButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,16 @@ const EnhancedMUIButton = styled(ButtonBase)(
justify-content: center;
max-width: 328px;
padding: 13px 16px;
.text {
${fontSize(16, 18)}
letter-spacing: -0.3px;
}
.link-icon {
display: flex;
margin-left: 8px;
svg {
height: 16px;
width: 16px;
Expand All @@ -64,12 +64,12 @@ const EnhancedMUIButton = styled(ButtonBase)(
background-color: ${theme.palette.common.brand.dark};
border: 4px solid ${theme.palette.common.grayscale.white};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.brand.dark};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
Expand All @@ -79,12 +79,12 @@ const EnhancedMUIButton = styled(ButtonBase)(
background-color: ${theme.palette.common.grayscale.white};
border: 4px solid ${theme.palette.common.grayscale.black};
color: ${theme.palette.common.grayscale.black};
.link-icon svg {
background-color: ${theme.palette.common.grayscale.white};
fill: ${theme.palette.common.grayscale.black};
}
.text {
color: ${theme.palette.common.grayscale.black};
}
Expand All @@ -94,205 +94,205 @@ const EnhancedMUIButton = styled(ButtonBase)(
background-color: ${theme.palette.common.grayscale.black};
border: 4px solid ${theme.palette.common.grayscale.white};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.grayscale.black};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
&:hover {
background-color: ${theme.palette.common.brand.active};
.link-icon svg {
background-color: ${theme.palette.common.brand.active};
}
}
&:focus {
background-color: ${theme.palette.common.brand.main};
.link-icon svg {
background-color: ${theme.palette.common.brand.main};
}
}
}
&.blue-background {
background-color: ${theme.palette.common.brand.light};
border: 4px solid ${theme.palette.common.grayscale.white};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.brand.light};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
&:hover {
background-color: ${theme.palette.common.brand.main};
.link-icon svg {
background-color: ${theme.palette.common.brand.main};
}
}
&:focus {
background-color: ${theme.palette.common.brand.active};
.link-icon svg {
background-color: ${theme.palette.common.brand.active};
}
}
}
&.white-background {
background-color: ${theme.palette.common.grayscale.white};
border: 4px solid ${theme.palette.common.brand.light};
color: ${theme.palette.common.brand.light};
.link-icon svg {
background-color: ${theme.palette.common.grayscale.white};
fill: ${theme.palette.common.brand.light};
}
.text {
color: ${theme.palette.common.brand.light};
}
&:hover {
border-color: ${theme.palette.common.brand.active};
.text {
color: ${theme.palette.common.brand.active};
}
.link-icon svg {
fill: ${theme.palette.common.brand.active};
}
}
&:focus {
border-color: ${theme.palette.common.brand.active};
.text {
color: ${theme.palette.common.brand.active};
}
.link-icon svg {
fill: ${theme.palette.common.brand.active};
}
}
}
&.hero-white {
background-color: ${theme.palette.common.brand.light};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.brand.light};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
&:hover {
background-color: ${theme.palette.common.brand.active};
.link-icon svg {
background-color: ${theme.palette.common.brand.active};
}
}
&:focus {
background-color: ${theme.palette.common.brand.active};
.link-icon svg {
background-color: ${theme.palette.common.brand.active};
}
}
}
&.hero-black {
background-color: ${theme.palette.common.grayscale.black};
border: 4px solid ${theme.palette.common.grayscale.white};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.grayscale.black};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
&:hover {
border-color: ${theme.palette.common.brand.soft};
.text {
color: ${theme.palette.common.brand.soft};
}
.link-icon svg {
fill: ${theme.palette.common.brand.soft};
}
}
&:focus {
border-color: ${theme.palette.common.brand.soft};
.text {
color: ${theme.palette.common.brand.soft};
}
.link-icon svg {
fill: ${theme.palette.common.brand.soft};
}
}
}
&.hero-blue {
background-color: ${theme.palette.common.brand.main};
border: 4px solid ${theme.palette.common.grayscale.white};
color: ${theme.palette.common.grayscale.white};
.link-icon svg {
background-color: ${theme.palette.common.brand.main};
fill: ${theme.palette.common.grayscale.white};
}
.text {
color: ${theme.palette.common.grayscale.white};
}
&:hover {
border-color: ${theme.palette.common.brand.soft};
.text {
color: ${theme.palette.common.brand.soft};
}
.link-icon svg {
fill: ${theme.palette.common.brand.soft};
}
}
&:focus {
border-color: ${theme.palette.common.brand.soft};
.text {
color: ${theme.palette.common.brand.soft};
}
.link-icon svg {
fill: ${theme.palette.common.brand.soft};
}
Expand Down
15 changes: 9 additions & 6 deletions frontend/components/NewLayout/Common/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const HeroRoot = styled("section")(
content: "";
margin: 0 auto;
display: block;
${theme.breakpoints.up("md")} {
position: absolute;
left: 0;
Expand Down Expand Up @@ -73,7 +73,7 @@ const HeroRoot = styled("section")(
const HeroContainer = styled("div")(
({ theme }) => `
position: relative;
${theme.breakpoints.up("md")} {
display: grid;
position: relative;
Expand Down Expand Up @@ -123,7 +123,7 @@ const HeroImageContainer = styled("div")(
margin: 0;
padding: 0;
position: relative;
figure {
margin: 0;
}
Expand Down Expand Up @@ -154,7 +154,7 @@ const HeroContentContainer = styled("div")(
padding: 24px 1rem 40px;
margin: 0 auto;
width: 100%;
${theme.breakpoints.up("xs")} {
padding: 40px 2rem;
}
Expand Down Expand Up @@ -186,7 +186,7 @@ const HeroContentContainer = styled("div")(
width: 100%;
${theme.breakpoints.up("xs")} {
padding: 24px 2rem 40px;
padding: 24px 2rem 40px;
}
${theme.breakpoints.up("md")} {
order: 2;
Expand Down Expand Up @@ -236,6 +236,9 @@ const HeroContentContainer = styled("div")(
${theme.breakpoints.up(1920)} {
min-height: 675px;
}
${theme.breakpoints.up(7680)} {
min-height: 2700px;
}
}
`,
)
Expand Down Expand Up @@ -299,7 +302,7 @@ const HeroSpacer = styled("div")(

const HeroTitle = styled(Typography)(
({ theme }) => `
hyphens: auto;
hyphens: none;
display: flex;
flex-grow: 1;
flex-shrink: 0;
Expand Down
10 changes: 0 additions & 10 deletions frontend/components/NewLayout/Courses/CourseGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,16 +133,6 @@ const ResetFiltersButton = styled(Button)<EnhancedButtonProps>`
font-weight: bold;
border-width: 0.15rem;
max-height: 2.5rem;
/*color: ${({ variant }) =>
variant === "contained" ? "#F5F6F7" : "#378170"};
background-color: ${({ variant }) =>
variant === "contained" ? "#378170" : "#F5F6F7"};
&:hover {
border-width: 0.15rem;
background-color: ${({ variant }) =>
variant === "contained" ? "#378170" : "#F5F6F7"};
}*/
`

const DynamicTagSelectButtons = dynamic(() => import("./TagSelectButtons"), {
Expand Down
Loading

0 comments on commit e8524f5

Please sign in to comment.