Skip to content

Commit

Permalink
dark mode fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@fiji-flo
fiji-flo committed Feb 10, 2024
1 parent f993351 commit 0b98b52
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 78 deletions.
4 changes: 2 additions & 2 deletions client/public/assets/curriculum/cur-landing-ladder-2-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions client/src/assets/icons/cur-landing-started-advanced.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions client/src/assets/icons/cur-landing-started-beginner.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions client/src/assets/icons/cur-landing-started-educator.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions client/src/assets/icons/cur-landing-started-employment.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions client/src/curriculum/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,61 @@
.topic-standards {
--cur-bg-color-topic: var(--cur-bg-color-topic-standards);
--cur-color-topic: var(--cur-color-topic-standards);
--cur-bg-color-list-item-header: var(
--cur-bg-color-list-item-topic-standards
);
--cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-standards);
--cur-bg-color-list-item-icon: var(
--cur-bg-color-list-item-icon-topic-standards
);
}

.topic-styling {
--cur-bg-color-topic: var(--cur-bg-color-topic-styling);
--cur-color-topic: var(--cur-color-topic-styling);
--cur-bg-color-list-item-header: var(
--cur-bg-color-list-item-topic-styling
);
--cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-styling);
--cur-bg-color-list-item-icon: var(
--cur-bg-color-list-item-icon-topic-styling
);
}

.topic-scripting {
--cur-bg-color-topic: var(--cur-bg-color-topic-scripting);
--cur-color-topic: var(--cur-color-topic-scripting);
--cur-bg-color-list-item-header: var(
--cur-bg-color-list-item-topic-scripting
);
--cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-scripting);
--cur-bg-color-list-item-icon: var(
--cur-bg-color-list-item-icon-topic-scripting
);
}

.topic-tooling {
--cur-bg-color-topic: var(--cur-bg-color-topic-tooling);
--cur-color-topic: var(--cur-color-topic-tooling);
--cur-bg-color-list-item-header: var(
--cur-bg-color-list-item-topic-tooling
);
--cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-tooling);
--cur-bg-color-list-item-icon: var(
--cur-bg-color-list-item-icon-topic-tooling
);
}

.topic-practices {
--cur-bg-color-topic: var(--cur-bg-color-topic-practices);
--cur-color-topic: var(--cur-color-topic-practices);
--cur-bg-color-list-item-header: var(
--cur-bg-color-list-item-topic-practices
);
--cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-practices);
--cur-bg-color-list-item-icon: var(
--cur-bg-color-list-item-icon-topic-practices
);
}

.curriculum-content {
Expand Down
62 changes: 11 additions & 51 deletions client/src/curriculum/landing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,7 @@
}

.laptop {
fill: var(--cur-category-color);

.dark & {
fill: var(--cur-bg-color-orange);
}
fill: var(--cur-color-landing-laptop);
}
}

Expand Down Expand Up @@ -141,7 +137,7 @@
align-items: start;
background-color: var(--background-primary);
border-radius: var(--elem-radius);
box-shadow: var(--module-shadow);
box-shadow: var(--cur-shadow);
color: var(--text-secondary);
display: grid;
grid-area: li;
Expand Down Expand Up @@ -188,27 +184,15 @@
}

&:nth-child(1)::before {
content: url("../assets/icons/cur-landing-about-beginner.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-about-beginner.svg#dark");
}
content: var(--cur-landing-about-beginner);
}

&:nth-child(2)::before {
content: url("../assets/icons/cur-landing-about-pace.svg");

.dark & {
content: url("../assets/icons/cur-landing-about-pace.svg#dark");
}
content: var(--cur-landing-about-pace);
}

&:nth-child(3)::before {
content: url("../assets/icons/cur-landing-about-free.svg");

.dark & {
content: url("../assets/icons/cur-landing-about-free.svg#dark");
}
content: var(--cur-landing-about-free);
}
}
}
Expand All @@ -230,23 +214,15 @@
grid-area: p1;

&::before {
content: url("../assets/icons/cur-landing-about-bullet.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-about-bullet.svg#dark");
}
content: var(--cur-landing-about-bullet);
}
}

&:nth-child(3) {
grid-area: p2;

&::before {
content: url("../assets/icons/cur-landing-about-bullet.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-about-bullet.svg#dark");
}
content: var(--cur-landing-about-bullet);
}
}

Expand Down Expand Up @@ -413,35 +389,19 @@
}

&:nth-child(1)::before {
content: url("../assets/icons/cur-landing-started-beginner.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-started-beginner.svg#dark");
}
content: var(--cur-landing-started-beginner);
}

&:nth-child(2)::before {
content: url("../assets/icons/cur-landing-started-advanced.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-started-advanced.svg#dark");
}
content: var(--cur-landing-started-advanced);
}

&:nth-child(3)::before {
content: url("../assets/icons/cur-landing-started-employment.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-started-employment.svg#dark");
}
content: var(--cur-landing-started-employment);
}

&:nth-child(4)::before {
content: url("../assets/icons/cur-landing-started-educator.svg#light");

.dark & {
content: url("../assets/icons/cur-landing-started-educator.svg#dark");
}
content: var(--cur-landing-started-educator);
}

h3 {
Expand Down
33 changes: 8 additions & 25 deletions client/src/curriculum/modules-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,6 @@

.curriculum-content-container.with-sidebar,
.curriculum-content-container {
--module-shadow: 4px 4px 8px 0 rgba(179, 179, 179, 0.18),
-4px 4px 8px 0 rgba(179, 179, 179, 0.15);

.dark & {
--module-shadow: 4px 4px 8px 0 rgba(36, 36, 36, 0.15),
-4px 4px 8px 0 rgb(36, 36, 36);
}

.curriculum-content {
.modules {
input[type="radio"]:not(:checked) ~ a,
Expand Down Expand Up @@ -151,9 +143,10 @@
}

.module-list-item {
background-color: var(--cur-bg-color-list-item-body);
border: 0;
border-radius: var(--elem-radius);
box-shadow: var(--module-shadow);
box-shadow: var(--cur-shadow);
display: flex;
flex-direction: column;
justify-self: center;
Expand All @@ -167,35 +160,25 @@
min-width: initial;
}

.dark & {
background-color: #000;
}

> header {
a {
align-items: center;
background-color: var(--cur-bg-color-topic);
background-color: var(--cur-bg-color-list-item-header);
display: flex;
flex-direction: column;
height: 10rem;
padding: 1rem 2rem;

.dark & {
background-color: var(--cur-bg-color-grey);
}

svg.topic-icon {
height: 4rem;
width: 4rem;

.dark & {
circle {
fill: var(--cur-bg-color-topic);
}
circle {
fill: var(--cur-bg-color-list-item-icon);
}

path {
fill: #000;
}
path {
fill: var(--cur-color-list-item-icon);
}
}

Expand Down
Loading

0 comments on commit 0b98b52

Please sign in to comment.