From 7efeafe7db4d753f70458507cbcd680ba9da7ef7 Mon Sep 17 00:00:00 2001 From: Chai Zhang Date: Fri, 31 Jan 2025 15:01:54 -0500 Subject: [PATCH 01/70] Hid the Donate $4 button on the landing page --- tcf_website/templates/landing/landing.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html index f72ace8d1..848204060 100644 --- a/tcf_website/templates/landing/landing.html +++ b/tcf_website/templates/landing/landing.html @@ -194,8 +194,8 @@

About Us

We keep our servers running through university grants and your donations. Just $4 keeps our servers up for a day, so we can keep serving you the best content.

- Donate $4 - today + From aee5a70d9578044621bf5d9a410f668b253afc4c Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sun, 2 Feb 2025 15:11:43 -0500 Subject: [PATCH 02/70] tcf-style.css darkmode vars --- package-lock.json | 7 ++++ package.json | 3 ++ tcf_website/static/base/tcf-style.css | 59 +++++++++++++++++++++++---- 3 files changed, 60 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8885b7c73..4dac6c3aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "thecourseforum", "version": "2.0.0", "license": "GPL-3.0-or-later", + "dependencies": { + "thecourseforum": "file:" + }, "devDependencies": { "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", @@ -2503,6 +2506,10 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/thecourseforum": { + "resolved": "", + "link": true + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", diff --git a/package.json b/package.json index d4d2f3540..fae7dd867 100644 --- a/package.json +++ b/package.json @@ -25,5 +25,8 @@ "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-promise": "^6.1.1", "prettier": "^3.2.5" + }, + "dependencies": { + "thecourseforum": "file:" } } diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index f7d5f577a..ed399716b 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -4,14 +4,55 @@ /* Use these variables in CSS stylesheets */ :root { - --main-color: #274f97; /* Indigo/Dark blue */ - --secondary-color: #4077c4; - --accent-color: #d75626; /* Orange */ - --dark-color: #545454; /* Dark grey, for headers/buttons */ - --shadow-color: #a6a6a6; /* Medium grey, used for shadows */ - --shaded-color: #cfcfcf; /* Medium light grey, used for shading */ - --background-color: #ebebeb; /* Light grey, used for backgrounds */ + /* Light Mode Colors */ + --main-color-light: #274f97; /* Indigo/Dark blue */ + --secondary-color-light: #4077c4; + --accent-color-light: #d75626; /* Orange */ + --dark-color-light: #545454; /* Dark grey, for headers/buttons */ + --shadow-color-light: #a6a6a6; /* Medium grey, used for shadows */ + --shaded-color-light: #cfcfcf; /* Medium light grey, used for shading */ + --background-color-light: #ebebeb; /* Light grey, used for backgrounds */ /* Note: Can use Bootstrap "light" color and white color */ + + /* Dark Mode Colors */ + --main-color-dark: #274F97; /* Indigo/Dark blue */ + --secondary-color-dark: #4873B7; + --accent-color-dark: #D75626; /* Orange */ + --dark-color-dark: #000000; /* Dark grey, for headers/buttons */ + --shadow-color-dark: #ffffff; /* Medium grey, used for shadows */ + --shaded-color-dark: #333333; /* Medium light grey, used for shading */ + --background-color-dark: #000000; /* Light grey, used for backgrounds */ + --test: #ff0099; + + /* Default to Light Mode + --main-color: var(--main-color-light); + --secondary-color: var(--secondary-color-light); + --accent-color: var(--accent-color-light); + --dark-color: var(--dark-color-light); + --shadow-color: var(--shadow-color-light); + --shaded-color: var(--shaded-color-light); + --background-color: var(--background-color-light); + */ + + /* Default to Dark Mode */ + --main-color: var(--main-color-dark); + --secondary-color: var(--secondary-color-dark); + --accent-color: var(--accent-color-dark); + --dark-color: var(--dark-color-dark); + --shadow-color: var(--shadow-color-dark); + --shaded-color: var(--shaded-color-dark); + --background-color: var(--background-color-dark); +} + +/* Dark Mode Overrides */ +[data-theme="dark"] { + --main-color: var(--main-color-dark); + --secondary-color: var(--secondary-color-dark); + --accent-color: var(--accent-color-dark); + --dark-color: var(--dark-color-dark); + --shadow-color: var(--shadow-color-dark); + --shaded-color: var(--shaded-color-dark); + --background-color: var(--background-color-dark); } /*************DEFAULT STYLES**************/ @@ -43,7 +84,7 @@ a { } a:hover, .hover-tcf-orange:hover { - color: var(--accent-color); + color: var(--test); text-decoration: none; cursor: pointer; } @@ -68,7 +109,7 @@ ul { /* Main color: Indigo/Dark blue */ .text-tcf-indigo { - color: var(--main-color); + color: var(--main-color-); } .bg-tcf-indigo { background-color: var(--main-color); From aa2e3f5c92845ea31caf579fbb93b6daea4abbf4 Mon Sep 17 00:00:00 2001 From: Chai Zhang Date: Sun, 2 Feb 2025 15:12:31 -0500 Subject: [PATCH 03/70] Change clock to inline svg and change clock icon color --- tcf_website/static/icons/icons.css | 13 ++++++++++++- tcf_website/templates/landing/landing.html | 8 ++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/tcf_website/static/icons/icons.css b/tcf_website/static/icons/icons.css index 1f483d92f..4f06ae01e 100644 --- a/tcf_website/static/icons/icons.css +++ b/tcf_website/static/icons/icons.css @@ -16,7 +16,7 @@ height: 1em; } -.fa-clock { +/* .fa-clock { width: 1em; height: 1em; background-image: url("../icons/img/fa-clock.svg"); @@ -24,6 +24,17 @@ background-size: contain; background-position: center; vertical-align: middle; +} */ + +.fa-clock { + width: 1em; + height: 1em; + /* background-image: url("../icons/img/fa-clock.svg"); */ + background-repeat: no-repeat; + background-size: contain; + background-position: center; + vertical-align: middle; + color: var(--dark-mode-white); } .fa-arrow-right { diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html index 848204060..5c0e8f688 100644 --- a/tcf_website/templates/landing/landing.html +++ b/tcf_website/templates/landing/landing.html @@ -29,9 +29,13 @@

theCourseForum

- + + + + + From 7071ae773f55338dcc3e7e0081c7d4d28fe6510f Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:29:04 -0500 Subject: [PATCH 04/70] removed dash --- tcf_website/static/base/tcf-style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index ed399716b..f474f5be9 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -109,7 +109,7 @@ ul { /* Main color: Indigo/Dark blue */ .text-tcf-indigo { - color: var(--main-color-); + color: var(--main-color); } .bg-tcf-indigo { background-color: var(--main-color); From c98e25b11949d656f81139b2175768f079be109b Mon Sep 17 00:00:00 2001 From: Chai Date: Sun, 9 Feb 2025 14:34:22 -0500 Subject: [PATCH 05/70] Landing page dark-mode half done --- tcf_website/static/base/tcf-style.css | 99 ++++++++++++--------- tcf_website/static/icons/icons.css | 11 ++- tcf_website/static/landing/landing.css | 2 +- tcf_website/templates/landing/landing.html | 29 +++++- tcf_website/templates/search/searchbar.html | 3 +- 5 files changed, 98 insertions(+), 46 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index ed399716b..d17e31c9d 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -4,47 +4,37 @@ /* Use these variables in CSS stylesheets */ :root { - /* Light Mode Colors */ - --main-color-light: #274f97; /* Indigo/Dark blue */ - --secondary-color-light: #4077c4; - --accent-color-light: #d75626; /* Orange */ - --dark-color-light: #545454; /* Dark grey, for headers/buttons */ - --shadow-color-light: #a6a6a6; /* Medium grey, used for shadows */ - --shaded-color-light: #cfcfcf; /* Medium light grey, used for shading */ - --background-color-light: #ebebeb; /* Light grey, used for backgrounds */ + --main-color: #274f97; /* Indigo/Dark blue */ + --secondary-color: #4077c4; + --accent-color: #d75626; /* Orange */ + --dark-color: #545454; /* Dark grey, for headers/buttons */ + --shadow-color: #a6a6a6; /* Medium grey, used for shadows */ + --shaded-color: #cfcfcf; /* Medium light grey, used for shading */ + --background-color: #ebebeb; /* Light grey, used for backgrounds */ + --overall-backrgound-color: #f8f9fa; + --navbar-color: white; + /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ - - /* Dark Mode Colors */ - --main-color-dark: #274F97; /* Indigo/Dark blue */ - --secondary-color-dark: #4873B7; - --accent-color-dark: #D75626; /* Orange */ - --dark-color-dark: #000000; /* Dark grey, for headers/buttons */ - --shadow-color-dark: #ffffff; /* Medium grey, used for shadows */ - --shaded-color-dark: #333333; /* Medium light grey, used for shading */ - --background-color-dark: #000000; /* Light grey, used for backgrounds */ - --test: #ff0099; - - /* Default to Light Mode - --main-color: var(--main-color-light); - --secondary-color: var(--secondary-color-light); - --accent-color: var(--accent-color-light); - --dark-color: var(--dark-color-light); - --shadow-color: var(--shadow-color-light); - --shaded-color: var(--shaded-color-light); - --background-color: var(--background-color-light); - */ - - /* Default to Dark Mode */ - --main-color: var(--main-color-dark); - --secondary-color: var(--secondary-color-dark); - --accent-color: var(--accent-color-dark); - --dark-color: var(--dark-color-dark); - --shadow-color: var(--shadow-color-dark); - --shaded-color: var(--shaded-color-dark); - --background-color: var(--background-color-dark); } -/* Dark Mode Overrides */ +/* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ +body.dark-mode { + --main-color: white; + --secondary-color: orange; + --accent-color: yellow; + --dark-color: green; + --shadow-color: blue; + --shaded-color: purple; + --overall-background-color: black; + --h1-text-color: white; + --h4-card-title-color: white; + --p-card-text-color: white; + --card-background-color: #333333; + --navbar-color: #333333; + --input-color: #333333; +} + +/* Dark Mode Overrides [data-theme="dark"] { --main-color: var(--main-color-dark); --secondary-color: var(--secondary-color-dark); @@ -53,7 +43,7 @@ --shadow-color: var(--shadow-color-dark); --shaded-color: var(--shaded-color-dark); --background-color: var(--background-color-dark); -} +} */ /*************DEFAULT STYLES**************/ h1, @@ -70,6 +60,12 @@ h6, .h6 { /* Default heading font: Lato (others are fallbacks) */ font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + /* Chai: initially didn't have a color element, this color element overrides color in _reboot.cscc */ + /* color: var(--h4-card-title-color); */ +} + +h1, .h1 { + color: var(--h1-text-color); } body { @@ -109,10 +105,12 @@ ul { /* Main color: Indigo/Dark blue */ .text-tcf-indigo { - color: var(--main-color-); + color: var(--main-color); } .bg-tcf-indigo { - background-color: var(--main-color); + /* background-color: var(--main-color); */ + /* Chai: this banner color should be tcf blue no matter if theme is light or dark */ + background-color: #274f97; } .border-tcf-indigo { border-color: var(--main-color); @@ -165,6 +163,25 @@ ul { border-color: var(--background-color); } +/* OVERRIDES scss stylings */ +/* Chai: background color on landing page is being styled by .bg-light in _background-variant.scss, has to have !important to override the !important in the scss */ +.bg-light { + background-color: var(--overall-background-color) !important; +} + +/* Chai: card background color is being styled by .card in _card.scss; color will be card-background-color when in dark-mode */ +.card { + background-color: var(--card-background-color); +} + +p { + color: var(--p-card-text-color); +} + +.form-control { + background-color: var(--input-color); +} + /* Note: Can use Bootstrap "light" color .text-light .bg-light diff --git a/tcf_website/static/icons/icons.css b/tcf_website/static/icons/icons.css index 4f06ae01e..7d1f0469c 100644 --- a/tcf_website/static/icons/icons.css +++ b/tcf_website/static/icons/icons.css @@ -1,3 +1,8 @@ +body.dark-mode { + --main-color: blue; +} +/* this blue is being override by --main-color in tcf-style.css */ + .fa { display: inline-block; font-style: normal; /* Reset any inherited styles */ @@ -34,7 +39,7 @@ background-size: contain; background-position: center; vertical-align: middle; - color: var(--dark-mode-white); + color: var(--main-color); } .fa-arrow-right { @@ -54,6 +59,7 @@ background-size: contain; background-position: center; vertical-align: middle; + color: var(--main-color); } .fa-book { @@ -187,10 +193,11 @@ .fa-chevron-down { width: 1em; height: 1em; - background-image: url("../icons/img/fa-chevron-down.svg"); + /* background-image: url("../icons/img/fa-chevron-down.svg"); */ background-repeat: no-repeat; background-size: contain; background-position: center; + color: var(--main-color); } .fa-thumbs-up { diff --git a/tcf_website/static/landing/landing.css b/tcf_website/static/landing/landing.css index e817d1c59..e16a0c08b 100644 --- a/tcf_website/static/landing/landing.css +++ b/tcf_website/static/landing/landing.css @@ -6,7 +6,7 @@ /* Navbar */ nav.navbar { - background-color: white; + background-color: var(--navbar-color); } nav.navbar img.logo { diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html index 5c0e8f688..fc237f584 100644 --- a/tcf_website/templates/landing/landing.html +++ b/tcf_website/templates/landing/landing.html @@ -58,6 +58,11 @@

theCourseForum

{% endif %} + + + @@ -222,7 +227,8 @@

FAQs

- {{ i.question }} + + {{ i.question }}

{{ i.answer | safe }} @@ -355,5 +361,26 @@

Follow {% endblock %} diff --git a/tcf_website/templates/search/searchbar.html b/tcf_website/templates/search/searchbar.html index afab90aa4..68db29488 100644 --- a/tcf_website/templates/search/searchbar.html +++ b/tcf_website/templates/search/searchbar.html @@ -6,7 +6,8 @@ placeholder="Search for a class or professor..." aria-label="Search" name="q" value="{{query}}">
From 8b6de80cf459cd4ec62a152719554cb19f825599 Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 15 Feb 2025 21:39:59 -0500 Subject: [PATCH 06/70] color changes for profile page --- tcf_website/static/profile/profile.css | 28 ++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/tcf_website/static/profile/profile.css b/tcf_website/static/profile/profile.css index e9ea58161..0fb58117a 100644 --- a/tcf_website/static/profile/profile.css +++ b/tcf_website/static/profile/profile.css @@ -1,3 +1,8 @@ + +.container-fluid { + background-color: var(--overall-background-color); +} + .user_delete { align-items: end; } @@ -6,3 +11,26 @@ display: flex; justify-content: space-between; } + +h2, h4 { + color: var(--h4-card-title-color); + /*explicitly written to override scss file*/ + margin-top: 0; + margin-bottom: .5rem; + font-weight: 500; + line-height: 1.2; + font-size: 26px; +} + +small, label { + color: var(--p-card-text-color); /*small is a gray color*/ +} + +.form-control { + color: var(--p-card-text-color); + background-color: var(--text-input-background); +} + +.card { + background-color: var(--card-background-color); +} From 19b91a84cac7e465059a5bbcd591b8323211ab78 Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sun, 16 Feb 2025 14:23:46 -0500 Subject: [PATCH 07/70] dark mode for browse, department, and icons --- tcf_website/static/base/tcf-style.css | 8 +++++--- tcf_website/static/browse/browse.css | 5 ++++- tcf_website/static/department/department.css | 7 +++++++ tcf_website/static/icons/icons.css | 5 ++++- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index d17e31c9d..3500ea2f3 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -11,7 +11,8 @@ --shadow-color: #a6a6a6; /* Medium grey, used for shadows */ --shaded-color: #cfcfcf; /* Medium light grey, used for shading */ --background-color: #ebebeb; /* Light grey, used for backgrounds */ - --overall-backrgound-color: #f8f9fa; + --overall-background-color: #f8f9fa; + --card-background-color: white; --navbar-color: white; /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ @@ -20,11 +21,12 @@ /* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ body.dark-mode { --main-color: white; - --secondary-color: orange; - --accent-color: yellow; + --secondary-color: #4873B7; + --accent-color: #d75626; --dark-color: green; --shadow-color: blue; --shaded-color: purple; + --background-color: black; --overall-background-color: black; --h1-text-color: white; --h4-card-title-color: white; diff --git a/tcf_website/static/browse/browse.css b/tcf_website/static/browse/browse.css index 7ececb17e..8920ff65c 100644 --- a/tcf_website/static/browse/browse.css +++ b/tcf_website/static/browse/browse.css @@ -1,3 +1,7 @@ +body { + color: var(--h1-text-color); +} + .schools { margin-top: 30px; } @@ -19,7 +23,6 @@ .school > .card-header { background-color: var(--secondary-color); - color: white; } .school-body { diff --git a/tcf_website/static/department/department.css b/tcf_website/static/department/department.css index e69de29bb..e79fed554 100644 --- a/tcf_website/static/department/department.css +++ b/tcf_website/static/department/department.css @@ -0,0 +1,7 @@ +body { + color: var(--h1-text-color); +} + +.bg-white { + background-color: var(--card-background-color) !important; +} \ No newline at end of file diff --git a/tcf_website/static/icons/icons.css b/tcf_website/static/icons/icons.css index 6f854a5b4..78190deec 100644 --- a/tcf_website/static/icons/icons.css +++ b/tcf_website/static/icons/icons.css @@ -2,6 +2,10 @@ body.dark-mode { --main-color: blue; } /* this blue is being override by --main-color in tcf-style.css */ +/* changes all icons to white if dark-mode is enabled */ +body.dark-mode .fa { + filter: invert(100%) brightness(150%); +} .fa { display: inline-block; @@ -59,7 +63,6 @@ body.dark-mode { background-size: contain; background-position: center; vertical-align: middle; - color: var(--main-color); } .fa-book { From 44416ea01b4c11a1f115f710295fa1143664fdd2 Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sun, 16 Feb 2025 14:57:56 -0500 Subject: [PATCH 08/70] added accurate colors to dark mode --- tcf_website/static/base/tcf-style.css | 18 +++++++++--------- tcf_website/static/browse/browse.css | 1 + 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 3500ea2f3..4d17fcd29 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -11,28 +11,28 @@ --shadow-color: #a6a6a6; /* Medium grey, used for shadows */ --shaded-color: #cfcfcf; /* Medium light grey, used for shading */ --background-color: #ebebeb; /* Light grey, used for backgrounds */ - --overall-background-color: #f8f9fa; - --card-background-color: white; - --navbar-color: white; + --overall-background-color: #faf8f9; + --card-background-color: #ffffff; + --navbar-color: #ffffff; /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ } /* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ body.dark-mode { - --main-color: white; + --main-color: #ffffff; --secondary-color: #4873B7; --accent-color: #d75626; --dark-color: green; - --shadow-color: blue; - --shaded-color: purple; + --shadow-color: #ffffff; + --shaded-color: #333333; --background-color: black; --overall-background-color: black; - --h1-text-color: white; - --h4-card-title-color: white; + --navbar-color: #333333; + --h1-text-color: #ffffff; + --h4-card-title-color: #ffffff; --p-card-text-color: white; --card-background-color: #333333; - --navbar-color: #333333; --input-color: #333333; } diff --git a/tcf_website/static/browse/browse.css b/tcf_website/static/browse/browse.css index 8920ff65c..c46882ab8 100644 --- a/tcf_website/static/browse/browse.css +++ b/tcf_website/static/browse/browse.css @@ -23,6 +23,7 @@ body { .school > .card-header { background-color: var(--secondary-color); + color: white; /* change to text variable when they r made */ } .school-body { From 166dc02c3f524049c2e1aeeff5f111fc10424fd9 Mon Sep 17 00:00:00 2001 From: Chai Date: Sun, 23 Feb 2025 15:27:04 -0500 Subject: [PATCH 09/70] Added basic dark mode variables for universal use --- tcf_website/static/base/tcf-style.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 4d17fcd29..ad2794e75 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -20,7 +20,7 @@ /* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ body.dark-mode { - --main-color: #ffffff; + /* --main-color: #ffffff; --secondary-color: #4873B7; --accent-color: #d75626; --dark-color: green; @@ -33,7 +33,16 @@ body.dark-mode { --h4-card-title-color: #ffffff; --p-card-text-color: white; --card-background-color: #333333; - --input-color: #333333; + --input-color: #333333; */ + + --background-color: black; + --card-background-color: #333333; + --input-background-color: #545454; + --input-text-color: #a6a6a6; + --accent-text-color: #d75626; + --basic-text-color: white; + --icon-color: white; + --input-border-color: #a6a6a6; } /* Dark Mode Overrides From b9b200cdddffa0fa28c43682dadd586dcd178006 Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sat, 1 Mar 2025 03:36:13 -0500 Subject: [PATCH 10/70] dark mode changes to browse and department --- tcf_website/static/browse/browse.css | 6 +++--- tcf_website/static/department/department.css | 6 +++--- tcf_website/static/icons/icons.css | 4 ---- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/tcf_website/static/browse/browse.css b/tcf_website/static/browse/browse.css index c46882ab8..632415937 100644 --- a/tcf_website/static/browse/browse.css +++ b/tcf_website/static/browse/browse.css @@ -1,5 +1,5 @@ -body { - color: var(--h1-text-color); +body.dark-mode { + color: var(--basic-text-color); } .schools { @@ -23,7 +23,7 @@ body { .school > .card-header { background-color: var(--secondary-color); - color: white; /* change to text variable when they r made */ + color: white; /* need a variable in light mode for white text? */ } .school-body { diff --git a/tcf_website/static/department/department.css b/tcf_website/static/department/department.css index e79fed554..1cca8709f 100644 --- a/tcf_website/static/department/department.css +++ b/tcf_website/static/department/department.css @@ -1,6 +1,6 @@ -body { - color: var(--h1-text-color); -} +body.dark-mode { + color: var(--basic-text-color); + } .bg-white { background-color: var(--card-background-color) !important; diff --git a/tcf_website/static/icons/icons.css b/tcf_website/static/icons/icons.css index 78190deec..57bc654b1 100644 --- a/tcf_website/static/icons/icons.css +++ b/tcf_website/static/icons/icons.css @@ -1,7 +1,3 @@ -body.dark-mode { - --main-color: blue; -} -/* this blue is being override by --main-color in tcf-style.css */ /* changes all icons to white if dark-mode is enabled */ body.dark-mode .fa { filter: invert(100%) brightness(150%); From 4d1273bcf66ca8175b8bd9ea47b1ea4699f74802 Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 1 Mar 2025 17:12:56 -0500 Subject: [PATCH 11/70] create review page css refactor --- tcf_website/static/base/tcf-style.css | 11 ++++++++++- tcf_website/static/reviews/new_review.css | 19 +++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index ad2794e75..27f6c790a 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -190,7 +190,16 @@ p { } .form-control { - background-color: var(--input-color); + background-color: var(--input-background-color); + color: var(--input-text-color); +} + +.form-control::placeholder { + color: var(--input-text-color); +} + +.forcontrol:disabled { + background-color: var(--background-color); } /* Note: Can use Bootstrap "light" color diff --git a/tcf_website/static/reviews/new_review.css b/tcf_website/static/reviews/new_review.css index cbe0fa7ea..f03dcec3c 100644 --- a/tcf_website/static/reviews/new_review.css +++ b/tcf_website/static/reviews/new_review.css @@ -1,12 +1,22 @@ /* For the Review Form in new_review.html and edit_review.html */ +body.body { + --background-color: black; + --card-background-color: #333333; + --input-background-color: #545454; + --input-text-color: #a6a6a6; + --accent-text-color: #d75626; + --basic-text-color: white; + --icon-color: white; + --input-border-color: #a6a6a6; +} .new-review .review-form-header { color: var(--accent-color); } .new-review select:disabled { - color: var(--shadow-color); - background-color: var(--shaded-color); + color: var(--input-text-color); + background-color: var(--background-color); } .required-field::after { @@ -27,3 +37,8 @@ #progressbar-message { margin-bottom: 0px; } + +h1, label, p { + color: var(--basic-text-color); +} + From 6a1768aa74f0773ac52b3eb41c825bbc88f1aacb Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 1 Mar 2025 17:17:04 -0500 Subject: [PATCH 12/70] removed dark mode class --- tcf_website/static/reviews/new_review.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/tcf_website/static/reviews/new_review.css b/tcf_website/static/reviews/new_review.css index f03dcec3c..5a1d5d5b8 100644 --- a/tcf_website/static/reviews/new_review.css +++ b/tcf_website/static/reviews/new_review.css @@ -1,14 +1,4 @@ /* For the Review Form in new_review.html and edit_review.html */ -body.body { - --background-color: black; - --card-background-color: #333333; - --input-background-color: #545454; - --input-text-color: #a6a6a6; - --accent-text-color: #d75626; - --basic-text-color: white; - --icon-color: white; - --input-border-color: #a6a6a6; -} .new-review .review-form-header { color: var(--accent-color); From 232cc4b5d66791c844456165d697a07d3ef775d2 Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 1 Mar 2025 20:13:05 -0500 Subject: [PATCH 13/70] dark mode vars for profile --- tcf_website/static/profile/profile.css | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/tcf_website/static/profile/profile.css b/tcf_website/static/profile/profile.css index 0fb58117a..9f76368a1 100644 --- a/tcf_website/static/profile/profile.css +++ b/tcf_website/static/profile/profile.css @@ -1,6 +1,6 @@ .container-fluid { - background-color: var(--overall-background-color); + background-color: var(--background-color); } .user_delete { @@ -13,7 +13,7 @@ } h2, h4 { - color: var(--h4-card-title-color); + color: var(--basic-text-color); /*explicitly written to override scss file*/ margin-top: 0; margin-bottom: .5rem; @@ -22,13 +22,8 @@ h2, h4 { font-size: 26px; } -small, label { - color: var(--p-card-text-color); /*small is a gray color*/ -} - -.form-control { - color: var(--p-card-text-color); - background-color: var(--text-input-background); +.form-row { + color: var(--basic-text-color); } .card { From 660fed8bc032c500c1b3dc53e39a9b2aaf3ef999 Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 1 Mar 2025 20:20:19 -0500 Subject: [PATCH 14/70] dark mode var in review.css --- tcf_website/static/reviews/review.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/tcf_website/static/reviews/review.css b/tcf_website/static/reviews/review.css index 43566f1bd..df485ec0f 100644 --- a/tcf_website/static/reviews/review.css +++ b/tcf_website/static/reviews/review.css @@ -1,3 +1,14 @@ +body.body { + --background-color: black; + --card-background-color: #333333; + --input-background-color: #545454; + --input-text-color: #a6a6a6; + --accent-text-color: #d75626; + --basic-text-color: white; + --icon-color: white; + --input-border-color: #a6a6a6; +} + .review-content .review-text-body.collapse:not(.show) { display: block; height: 12rem; @@ -41,3 +52,7 @@ .tooltip-inner { margin: 0; } + +.review-text-body { + color: var(--basic-text-color); +} From bc2f018d15981048e9a378a7eef79e5351a4e25f Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sat, 1 Mar 2025 20:22:35 -0500 Subject: [PATCH 15/70] review_stats dark mode var --- tcf_website/static/reviews/review_stats.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/tcf_website/static/reviews/review_stats.css b/tcf_website/static/reviews/review_stats.css index 000dc351d..741946787 100644 --- a/tcf_website/static/reviews/review_stats.css +++ b/tcf_website/static/reviews/review_stats.css @@ -1,3 +1,14 @@ +body.body { + --background-color: black; + --card-background-color: #333333; + --input-background-color: #545454; + --input-text-color: #a6a6a6; + --accent-text-color: #d75626; + --basic-text-color: white; + --icon-color: white; + --input-border-color: #a6a6a6; +} + .large-stats { padding-top: 15px; padding-bottom: 10px; @@ -11,3 +22,7 @@ font-size: 20px; } } + +h1, h2 { + color: var(--basic-text-color); +} \ No newline at end of file From 72d4d2b7e27b5c14f1e5d188d4e4ef71d9ae6748 Mon Sep 17 00:00:00 2001 From: Chai Date: Sun, 2 Mar 2025 14:53:14 -0500 Subject: [PATCH 16/70] partly styled landing page --- tcf_website/static/base/tcf-style.css | 18 +++++++++++++++--- tcf_website/templates/landing/landing.html | 4 ++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 27f6c790a..517133ba9 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -14,6 +14,9 @@ --overall-background-color: #faf8f9; --card-background-color: #ffffff; --navbar-color: #ffffff; + /* newly added */ + --basic-text-color: #212529; + /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ } @@ -36,6 +39,7 @@ body.dark-mode { --input-color: #333333; */ --background-color: black; + --landing-page-background-color: black; --card-background-color: #333333; --input-background-color: #545454; --input-text-color: #a6a6a6; @@ -76,7 +80,15 @@ h6, } h1, .h1 { - color: var(--h1-text-color); + color: var(--basic-text-color); +} + +h4, .h4 { + color: var(--basic-text-color); +} + +h6, .h6 { + color: var(--basic-text-color); } body { @@ -177,7 +189,7 @@ ul { /* OVERRIDES scss stylings */ /* Chai: background color on landing page is being styled by .bg-light in _background-variant.scss, has to have !important to override the !important in the scss */ .bg-light { - background-color: var(--overall-background-color) !important; + background-color: var(--landing-page-background-color) !important; } /* Chai: card background color is being styled by .card in _card.scss; color will be card-background-color when in dark-mode */ @@ -186,7 +198,7 @@ ul { } p { - color: var(--p-card-text-color); + color: var(--basic-text-color); } .form-control { diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html index 0ff86b7f5..dc03c92df 100644 --- a/tcf_website/templates/landing/landing.html +++ b/tcf_website/templates/landing/landing.html @@ -148,7 +148,7 @@

Write a Review

-

We'll connect you to courses you'll love, and make enrollment stress +

We'll connect you to courses you'll love, and make enrollment stress free.

@@ -180,7 +180,7 @@
{{ member.name }}
-

+

Meet the full team

From 4f7597b4cc127dbab52e4321e1f02b27e271a7bc Mon Sep 17 00:00:00 2001 From: Hanzhe Dong Date: Sun, 2 Mar 2025 14:55:13 -0500 Subject: [PATCH 17/70] Updated the variables/headers in about.css and added additional headers in tcf-style.css --- tcf_website/static/about/about.css | 12 ++++++++++++ tcf_website/static/base/tcf-style.css | 12 ++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/tcf_website/static/about/about.css b/tcf_website/static/about/about.css index 353588fc5..fd9a3c05f 100644 --- a/tcf_website/static/about/about.css +++ b/tcf_website/static/about/about.css @@ -55,3 +55,15 @@ overflow: hidden; opacity: 0.8; } + +.jumbotron { + background-color: var(--input-background-color) !important; +} + +.text-muted { + color: var(--basic-text-color) !important; +} + +.card-text { + color: var(--basic-text-color) !important; +} \ No newline at end of file diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 27f6c790a..87e096f60 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -76,7 +76,15 @@ h6, } h1, .h1 { - color: var(--h1-text-color); + color: var(--basic-text-color); +} + +h3, .h3 { + color: var(--basic-text-color); +} + +h4, .h4 { + color: var(--basic-text-color); } body { @@ -186,7 +194,7 @@ ul { } p { - color: var(--p-card-text-color); + color: var(--basic-text-color); } .form-control { From 7bfb4be448fcbdd4d5a9a6901a667eb5bd7d493d Mon Sep 17 00:00:00 2001 From: Chai Date: Sun, 2 Mar 2025 15:09:32 -0500 Subject: [PATCH 18/70] partly dark mode styled the landing page --- tcf_website/static/base/tcf-style.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 517133ba9..7f0cb8066 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -83,14 +83,30 @@ h1, .h1 { color: var(--basic-text-color); } +h2, .h2 { + color: var(--basic-text-color); +} + h4, .h4 { color: var(--basic-text-color); } +h3, .h3 { + color: var(--basic-text-color); +} + +h5, .h5 { + color: var(--basic-text-color); +} + h6, .h6 { color: var(--basic-text-color); } +label { + color: var(--basic-text-color); +} + body { /* Body text font: Open Sans */ font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, From 1ddbe94cc815a87e5b425bcbddcaedd48541fab5 Mon Sep 17 00:00:00 2001 From: namaikureishi Date: Sun, 2 Mar 2025 15:12:22 -0500 Subject: [PATCH 19/70] adeed variables, partially styled register page --- tcf_website/static/base/base.css | 34 +++++++++++++------ tcf_website/static/base/tcf-style.css | 26 +++++++------- tcf_website/templates/base/base.html | 1 + .../templates/login/register_form.html | 10 +++--- 4 files changed, 44 insertions(+), 27 deletions(-) diff --git a/tcf_website/static/base/base.css b/tcf_website/static/base/base.css index e9c85ff28..2a21b58ab 100644 --- a/tcf_website/static/base/base.css +++ b/tcf_website/static/base/base.css @@ -21,6 +21,19 @@ Responsive breakpoints: :root { --sidebar-width: 7rem; /* Width of sidebar is fixed */ + --background-color: #000000 +} + +body.body { + --background-color: black; + --card-background-color: #333333; + --input-background-color: #545454; + --input-text-color: #a6a6a6; + --accent-text-color: #d75626; + --basic-text-color: white; + --icon-color: white; + --input-border-color: #a6a6a6; + } html { @@ -31,12 +44,13 @@ html { body { padding-top: 70px; /* Height of fixed navbar */ - background-color: var(--background-color); + background-color: var(--background-color) !important; max-width: 100vw; + } .content { - background-color: var(--background-color); + background-color: var(--background-color) !important; } @media (min-width: 768px) { @@ -53,7 +67,7 @@ footer { height: 80px; /* Set the fixed height of the footer here */ line-height: 30px; /* Vertically center the text there */ text-align: center; - color: var(--background-color); + color: var(--background-color) !important; background-color: #172248; padding-top: 15px; } @@ -91,8 +105,8 @@ footer > .row { .btn.btn-primary, .btn.btn-outline-primary { color: white; - background-color: var(--accent-color); - border-color: var(--accent-color); + background-color: var(--accent-color) !important; + border-color: var(--accent-color) !important; } .btn.btn-outline-primary:not(:disabled):not(.disabled).active, @@ -104,8 +118,8 @@ footer > .row { .btn.btn-outline-primary { color: white; - background-color: var(--accent-color); - border-color: var(--accent-color); + background-color: var(--accent-color) !important; + border-color: var(--accent-color) !important; } .btn.btn-primary:hover, @@ -150,11 +164,11 @@ footer > .row { /* Change slider color */ .custom-range::-webkit-slider-thumb { - background: var(--accent-color); + background: var(--accent-color)!important; } .custom-range::-moz-range-thumb { - background: var(--accent-color); + background: var(--accent-color)!important; } .custom-range::-ms-thumb { - background: var(--accent-color); + background: var(--accent-color)!important; } diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 7f0cb8066..0b32966d1 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -22,7 +22,7 @@ } /* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ -body.dark-mode { +body.body { /* --main-color: #ffffff; --secondary-color: #4873B7; --accent-color: #d75626; @@ -38,15 +38,17 @@ body.dark-mode { --card-background-color: #333333; --input-color: #333333; */ - --background-color: black; - --landing-page-background-color: black; - --card-background-color: #333333; - --input-background-color: #545454; - --input-text-color: #a6a6a6; - --accent-text-color: #d75626; - --basic-text-color: white; - --icon-color: white; - --input-border-color: #a6a6a6; +/* Added updated variables names */ + --background-color: black; /* Dark background color */ + --card-background-color: #333333; /* Dark card background */ + --input-background-color: #545454; /* Dark input background */ + --input-text-color: #a6a6a6; /* Light text in inputs */ + --accent-text-color: #d75626; /* Accent color for dark mode */ + --basic-text-color: white; /* White text color */ + --icon-color: white; /* Light icon color */ + --input-border-color: #a6a6a6; /* Lighter border color for inputs */ + --button-bg-color: #1e1e1e; /* Darker button background */ + } /* Dark Mode Overrides @@ -210,11 +212,11 @@ ul { /* Chai: card background color is being styled by .card in _card.scss; color will be card-background-color when in dark-mode */ .card { - background-color: var(--card-background-color); + background-color: var(--card-background-color) !important; } p { - color: var(--basic-text-color); + color: var(--p-card-text-color); } .form-control { diff --git a/tcf_website/templates/base/base.html b/tcf_website/templates/base/base.html index f62c4c8b2..4b0799863 100644 --- a/tcf_website/templates/base/base.html +++ b/tcf_website/templates/base/base.html @@ -9,6 +9,7 @@ {% endblock %} {% block body %} +
{% include "base/sidebar.html" %} diff --git a/tcf_website/templates/login/register_form.html b/tcf_website/templates/login/register_form.html index d2add04d4..03ce9d70e 100644 --- a/tcf_website/templates/login/register_form.html +++ b/tcf_website/templates/login/register_form.html @@ -15,17 +15,17 @@
- +
- +
- +
{% if error_message %} {% for error in error_message %} @@ -35,11 +35,11 @@
- +
- +
From 6401997173f41c4f37ae0ebdd6d92653ecdf4cc2 Mon Sep 17 00:00:00 2001 From: namaikureishi Date: Sun, 2 Mar 2025 15:22:02 -0500 Subject: [PATCH 20/70] finished dark mode for register form page --- tcf_website/static/base/base.css | 34 ++++++------------- .../templates/login/register_form.html | 12 +++---- 2 files changed, 16 insertions(+), 30 deletions(-) diff --git a/tcf_website/static/base/base.css b/tcf_website/static/base/base.css index 2a21b58ab..e9c85ff28 100644 --- a/tcf_website/static/base/base.css +++ b/tcf_website/static/base/base.css @@ -21,19 +21,6 @@ Responsive breakpoints: :root { --sidebar-width: 7rem; /* Width of sidebar is fixed */ - --background-color: #000000 -} - -body.body { - --background-color: black; - --card-background-color: #333333; - --input-background-color: #545454; - --input-text-color: #a6a6a6; - --accent-text-color: #d75626; - --basic-text-color: white; - --icon-color: white; - --input-border-color: #a6a6a6; - } html { @@ -44,13 +31,12 @@ html { body { padding-top: 70px; /* Height of fixed navbar */ - background-color: var(--background-color) !important; + background-color: var(--background-color); max-width: 100vw; - } .content { - background-color: var(--background-color) !important; + background-color: var(--background-color); } @media (min-width: 768px) { @@ -67,7 +53,7 @@ footer { height: 80px; /* Set the fixed height of the footer here */ line-height: 30px; /* Vertically center the text there */ text-align: center; - color: var(--background-color) !important; + color: var(--background-color); background-color: #172248; padding-top: 15px; } @@ -105,8 +91,8 @@ footer > .row { .btn.btn-primary, .btn.btn-outline-primary { color: white; - background-color: var(--accent-color) !important; - border-color: var(--accent-color) !important; + background-color: var(--accent-color); + border-color: var(--accent-color); } .btn.btn-outline-primary:not(:disabled):not(.disabled).active, @@ -118,8 +104,8 @@ footer > .row { .btn.btn-outline-primary { color: white; - background-color: var(--accent-color) !important; - border-color: var(--accent-color) !important; + background-color: var(--accent-color); + border-color: var(--accent-color); } .btn.btn-primary:hover, @@ -164,11 +150,11 @@ footer > .row { /* Change slider color */ .custom-range::-webkit-slider-thumb { - background: var(--accent-color)!important; + background: var(--accent-color); } .custom-range::-moz-range-thumb { - background: var(--accent-color)!important; + background: var(--accent-color); } .custom-range::-ms-thumb { - background: var(--accent-color)!important; + background: var(--accent-color); } diff --git a/tcf_website/templates/login/register_form.html b/tcf_website/templates/login/register_form.html index 03ce9d70e..a953feb5d 100644 --- a/tcf_website/templates/login/register_form.html +++ b/tcf_website/templates/login/register_form.html @@ -15,17 +15,17 @@
- +
- +
- +
{% if error_message %} {% for error in error_message %} @@ -35,15 +35,15 @@
- +
- +
- +
From 114a1c6c96ea5a7bc05bf3da76c6eca71eb4d9be Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sun, 23 Mar 2025 02:43:48 -0400 Subject: [PATCH 21/70] correction for dark mode body class dark mode --- tcf_website/static/base/tcf-style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 0b32966d1..3eb8338a5 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -12,7 +12,7 @@ --shaded-color: #cfcfcf; /* Medium light grey, used for shading */ --background-color: #ebebeb; /* Light grey, used for backgrounds */ --overall-background-color: #faf8f9; - --card-background-color: #ffffff; + --card-background-color: #ffffff; --navbar-color: #ffffff; /* newly added */ --basic-text-color: #212529; @@ -22,7 +22,7 @@ } /* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */ -body.body { +body.dark-mode { /* --main-color: #ffffff; --secondary-color: #4873B7; --accent-color: #d75626; From 86aee34e332dd41046878a667d3c626946866ac3 Mon Sep 17 00:00:00 2001 From: zohaibk04 Date: Sun, 23 Mar 2025 14:10:14 -0400 Subject: [PATCH 22/70] Added navbar styling --- tcf_website/static/base/navbar.css | 40 ++++++++++++++++++-------- tcf_website/templates/base/navbar.html | 20 +++++++++++++ 2 files changed, 48 insertions(+), 12 deletions(-) diff --git a/tcf_website/static/base/navbar.css b/tcf_website/static/base/navbar.css index add3b3892..5556eca10 100644 --- a/tcf_website/static/base/navbar.css +++ b/tcf_website/static/base/navbar.css @@ -1,7 +1,7 @@ /* Any css that involves the navbar should go in this file! - This way things are kept insolated and de-coupled from one - another, making components more maliable and maintainable. + This way things are kept isolated and de-coupled from one + another, making components more malleable and maintainable. */ .navbar { @@ -25,14 +25,8 @@ transition-timing-function: ease; } -.logo-container:hover { - transform: scale(1.05); -} - -.logo-container:active { - transform: scale(1.05); -} - +.logo-container:hover, +.logo-container:active, .logo-container:focus { transform: scale(1.05); } @@ -41,7 +35,6 @@ .logo-container { width: calc(var(--sidebar-width) - 16px); height: auto; - /* Animation */ padding-left: 0.55rem; /* centers logo in logo-container */ padding-right: 0rem; @@ -85,6 +78,29 @@ background-color: rgb(190, 190, 190); } +.dark-mode .navbar { + flex-wrap: nowrap; + background-color: var(--card-background-color); + color: var(--basic-text-color); +} + +.dark-mode .navbar-toggler.menu { + border-color: var(--input-border-color); + background-color: var(--button-bg-color); +} + +.dark-mode .navbar-toggler.menu:hover { + background-color: #2a2a2a; +} + +.dark-mode .navbar-toggler.menu:active { + background-color: #333333; +} + +.dark-mode .navbar-toggler.menu:focus { + background-color: #2a2a2a; +} + @media (max-width: 768px) { .account-settings { display: none; @@ -95,4 +111,4 @@ .dropdown-menu.settings { min-width: 140px !important; } -} +} \ No newline at end of file diff --git a/tcf_website/templates/base/navbar.html b/tcf_website/templates/base/navbar.html index 106d7ffda..86abc2a7a 100644 --- a/tcf_website/templates/base/navbar.html +++ b/tcf_website/templates/base/navbar.html @@ -56,4 +56,24 @@ var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } + +(function() { + const toggleButton = document.getElementById('darkModeToggle'); + const body = document.body; + + // check localStorage on page load to see if dark mode was enabled + if (localStorage.getItem('dark-mode') === 'enabled') { + body.classList.add('dark-mode'); + } + + toggleButton.addEventListener('click', function() { + body.classList.toggle('dark-mode'); + // save preference in localStorage + if (body.classList.contains('dark-mode')) { + localStorage.setItem('dark-mode', 'enabled'); + } else { + localStorage.setItem('dark-mode', 'disabled'); + } + }); + })(); \ No newline at end of file From 6add70c1abaf977341e45f705cdddd71092f0f11 Mon Sep 17 00:00:00 2001 From: blairezh <113472440+blairezh@users.noreply.github.com> Date: Sun, 23 Mar 2025 14:13:30 -0400 Subject: [PATCH 23/70] darkmode button --- tcf_website/templates/base/navbar.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tcf_website/templates/base/navbar.html b/tcf_website/templates/base/navbar.html index 86abc2a7a..c38e0b44e 100644 --- a/tcf_website/templates/base/navbar.html +++ b/tcf_website/templates/base/navbar.html @@ -47,6 +47,12 @@
{% endif %}
+ + + + From 766acd1c529b6054daed923ad36ae1e056f86fc5 Mon Sep 17 00:00:00 2001 From: Chai Date: Fri, 28 Mar 2025 12:26:38 -0400 Subject: [PATCH 24/70] Added 'landing-page-background-color' variable to tcf-style.css for landing page dark-mode background --- tcf_website/static/base/tcf-style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 3eb8338a5..e86f3a2be 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -48,7 +48,7 @@ body.dark-mode { --icon-color: white; /* Light icon color */ --input-border-color: #a6a6a6; /* Lighter border color for inputs */ --button-bg-color: #1e1e1e; /* Darker button background */ - + --landing-page-background-color: black; } /* Dark Mode Overrides From 2df351ac09c2240b1127e1500292fafa0b7bd2ae Mon Sep 17 00:00:00 2001 From: Chai Date: Fri, 28 Mar 2025 12:30:14 -0400 Subject: [PATCH 25/70] Updated color for p from 'p-card-text-color' to 'basic-text-color' --- tcf_website/static/base/tcf-style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index e86f3a2be..63fbc9ca2 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -216,7 +216,7 @@ ul { } p { - color: var(--p-card-text-color); + color: var(--basic-text-color); } .form-control { From 1a9bbdee8dc42f28ab2f6915798705bceee390c5 Mon Sep 17 00:00:00 2001 From: Chai Date: Fri, 28 Mar 2025 12:38:49 -0400 Subject: [PATCH 26/70] Added 'main-color' to dark-mode colors --- tcf_website/static/base/tcf-style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 63fbc9ca2..b2fe929f0 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -49,6 +49,7 @@ body.dark-mode { --input-border-color: #a6a6a6; /* Lighter border color for inputs */ --button-bg-color: #1e1e1e; /* Darker button background */ --landing-page-background-color: black; + --main-color: white; /* replace tcf-blue as tcf logo text color */ } /* Dark Mode Overrides @@ -148,6 +149,7 @@ ul { .text-tcf-indigo { color: var(--main-color); } + .bg-tcf-indigo { /* background-color: var(--main-color); */ /* Chai: this banner color should be tcf blue no matter if theme is light or dark */ From 3410d723635ef4699237b64def1175580494f45d Mon Sep 17 00:00:00 2001 From: Chai Date: Fri, 28 Mar 2025 13:25:57 -0400 Subject: [PATCH 27/70] Updated tcf-style.css for dark-mode changes on the landing page --- tcf_website/static/base/tcf-style.css | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index b2fe929f0..90e231161 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -16,6 +16,8 @@ --navbar-color: #ffffff; /* newly added */ --basic-text-color: #212529; + /* changes the border color of the search bar on landing page */ + --input-border-color: #DEE2E6; /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ @@ -41,28 +43,17 @@ body.dark-mode { /* Added updated variables names */ --background-color: black; /* Dark background color */ --card-background-color: #333333; /* Dark card background */ - --input-background-color: #545454; /* Dark input background */ + --input-background-color: #333333; /* Dark input background */ --input-text-color: #a6a6a6; /* Light text in inputs */ --accent-text-color: #d75626; /* Accent color for dark mode */ --basic-text-color: white; /* White text color */ --icon-color: white; /* Light icon color */ - --input-border-color: #a6a6a6; /* Lighter border color for inputs */ + --input-border-color: #A6A6A6; /* Lighter border color for inputs */ --button-bg-color: #1e1e1e; /* Darker button background */ --landing-page-background-color: black; --main-color: white; /* replace tcf-blue as tcf logo text color */ } -/* Dark Mode Overrides -[data-theme="dark"] { - --main-color: var(--main-color-dark); - --secondary-color: var(--secondary-color-dark); - --accent-color: var(--accent-color-dark); - --dark-color: var(--dark-color-dark); - --shadow-color: var(--shadow-color-dark); - --shaded-color: var(--shaded-color-dark); - --background-color: var(--background-color-dark); -} */ - /*************DEFAULT STYLES**************/ h1, h2, @@ -171,6 +162,7 @@ ul { .text-tcf-orange { color: var(--accent-color); } +/* colors specifically the 'Meet the full team' button */ .bg-tcf-orange { background-color: var(--accent-color); } @@ -216,6 +208,10 @@ ul { .card { background-color: var(--card-background-color) !important; } +.card.bg-tcf-orange { + background-color: var(--accent-color) !important; +} + p { color: var(--basic-text-color); @@ -234,6 +230,11 @@ p { background-color: var(--background-color); } +/* originally in borders.scss */ +.border { + border: 0.5px solid var(--input-border-color) !important; +} + /* Note: Can use Bootstrap "light" color .text-light .bg-light From 34edf262475c3b05aaa3bad512c640bd84981d2e Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sat, 29 Mar 2025 00:37:45 -0400 Subject: [PATCH 28/70] dark mode logic for browse/course pages --- tcf_website/static/browse/browse.css | 1 - tcf_website/static/course/course.css | 12 +++++ .../static/course/course_professor.css | 50 +++++++++++++++---- .../static/course/javascript/course_data.js | 28 +++++++++++ tcf_website/static/reviews/review.css | 29 +++++------ tcf_website/static/search/search.css | 18 ++++++- tcf_website/templates/course/course.html | 1 + 7 files changed, 114 insertions(+), 25 deletions(-) create mode 100644 tcf_website/static/course/course.css diff --git a/tcf_website/static/browse/browse.css b/tcf_website/static/browse/browse.css index 632415937..7c62a60a8 100644 --- a/tcf_website/static/browse/browse.css +++ b/tcf_website/static/browse/browse.css @@ -23,7 +23,6 @@ body.dark-mode { .school > .card-header { background-color: var(--secondary-color); - color: white; /* need a variable in light mode for white text? */ } .school-body { diff --git a/tcf_website/static/course/course.css b/tcf_website/static/course/course.css new file mode 100644 index 000000000..d5e951dcc --- /dev/null +++ b/tcf_website/static/course/course.css @@ -0,0 +1,12 @@ +/* Global override: force all text to white */ +body { + color: var(--basic-text-color); +} + +.breadcrumb { + background-color: var(--card-background-color) !important; +} + +.bg-white { + background-color: var(--card-background-color) !important; +} \ No newline at end of file diff --git a/tcf_website/static/course/course_professor.css b/tcf_website/static/course/course_professor.css index 8677689a5..4a31b00cd 100644 --- a/tcf_website/static/course/course_professor.css +++ b/tcf_website/static/course/course_professor.css @@ -7,9 +7,10 @@ font-size: 22px; } } -.course-instructor-header .instructor-menu { - box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); -} +/*.course-instructor-header .instructor-menu { + box-shadow: 1px 1px 10px rgba(255, 0, 0, 0.2); +}*/ + /* Change tooltip alignment */ @media (min-width: 768px) { .tooltip-inner { @@ -26,6 +27,11 @@ row-gap: 10px; } +body { + background-color: var(--background-color); + color: var(--basic-text-color); +} + .times-info-container { width: 100%; display: flex; @@ -46,7 +52,7 @@ display: flex; align-items: center; justify-content: center; - background-color: white; + background-color: var(--card-background-color); z-index: 0; } @@ -79,7 +85,7 @@ .rating-card { height: 100%; - background-color: white; + background-color: var(--card-background-color); width: 200px; display: flex; align-items: center; @@ -89,7 +95,7 @@ .rating-card-num { font-size: 42px; - color: #d75626; + color: var(--accent-color); } .rating-card-desc { @@ -100,7 +106,7 @@ display: flex; flex-direction: column; flex-grow: 1; - background-color: white; + background-color: var(--card-background-color); height: 100%; margin-left: 10px; padding-top: 6px; @@ -141,17 +147,22 @@ } .gpa-text { - color: #384676; + color: var(--main-color); font-size: 28px; margin: 0; } .students-text { - color: #56679d; + color: var(--secondary-color); font-size: 16px; margin: 0; } +body.dark-mode .gpa-text, +body.dark-mode .students-text { + color: var(--basic-text-color) !important; +} + .info-row { display: flex; align-items: center; @@ -172,6 +183,7 @@ padding: 0; } .info-bar .progress-bar { + background-color: var(--secondary-color); margin: 0; padding: 0; } @@ -316,6 +328,26 @@ } } +.breadcrumb { + background-color: var(--card-background-color) !important; + color: var(--basic-text-color) !important; +} + +.bg-white { + background-color: var(--card-background-color) !important; +} + +.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { + color: var(--basic-text-color) !important; + background-color: var(--card-background-color) !important; + border-color: var(--card-background-color); + border-bottom: 1px solid var(--background-color); +} + +.nav-tabs { + border-bottom: 1px solid var(--background-color) !important; +} + .rotated { transform: rotateZ(90deg); } diff --git a/tcf_website/static/course/javascript/course_data.js b/tcf_website/static/course/javascript/course_data.js index 54044494b..e78d4af4f 100644 --- a/tcf_website/static/course/javascript/course_data.js +++ b/tcf_website/static/course/javascript/course_data.js @@ -145,6 +145,11 @@ const loadData = (data) => { }; const createChart = (gradesData) => { + + const cardBgColor = getComputedStyle(document.body) + .getPropertyValue('--card-background-color') + .trim(); + const chartData = { datasets: [ { @@ -161,6 +166,8 @@ const createChart = (gradesData) => { "#D75626", // C- "#BE4B20", // DFW ], + borderColor: cardBgColor, + borderWidth: 2, }, ], labels: ["A+", "A", "A-", "B+", "B", "B-", "C+", "C", "C-", "DFW"], @@ -171,6 +178,7 @@ const createChart = (gradesData) => { type: "bar", data: chartData, options: { + animation: { duration: 0 }, layout: { padding: { bottom: 20, @@ -242,11 +250,31 @@ const createChart = (gradesData) => { }, }; + // Set up a MutationObserver to update chart borderColor when the body class changes. +const observer = new MutationObserver((mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.attributeName === "class") { + updateChartBorderColor(); + } + } +}); +observer.observe(document.body, { attributes: true }); + +function updateChartBorderColor() { + const newCardBgColor = getComputedStyle(document.body) + .getPropertyValue('--card-background-color') + .trim(); + if (myChart && myChart.config.data.datasets[0]) { + myChart.config.data.datasets[0].borderColor = newCardBgColor; + myChart.update({ duration: 0 }); + } +} // Generate configuration for Pie Chart pieConfig = { type: "doughnut", data: chartData, options: { + animation: { duration: 0 }, maintainAspectRatio: false, tooltips: { callbacks: { diff --git a/tcf_website/static/reviews/review.css b/tcf_website/static/reviews/review.css index df485ec0f..34e380fbf 100644 --- a/tcf_website/static/reviews/review.css +++ b/tcf_website/static/reviews/review.css @@ -1,14 +1,3 @@ -body.body { - --background-color: black; - --card-background-color: #333333; - --input-background-color: #545454; - --input-text-color: #a6a6a6; - --accent-text-color: #d75626; - --basic-text-color: white; - --icon-color: white; - --input-border-color: #a6a6a6; -} - .review-content .review-text-body.collapse:not(.show) { display: block; height: 12rem; @@ -35,18 +24,18 @@ body.body { .review .upvote, .review .downvote { font-size: 1.3rem; - color: #aaa; + color: var(--shadow-color); cursor: pointer; } .review .upvote.active, .review .upvote:hover { - color: dodgerblue; + color: var(--main-color); } .review .downvote.active, .review .downvote:hover { - color: rgb(215, 86, 38); + color: var(--accent-color); } .tooltip-inner { @@ -56,3 +45,15 @@ body.body { .review-text-body { color: var(--basic-text-color); } + +.btn { + color: var(--basic-text-color); +} + +body.dark-mode .text-muted { + color: var(--basic-text-color) !important; +} + +body.dark-mode .text-dark { + color: var(--basic-text-color) !important; +} \ No newline at end of file diff --git a/tcf_website/static/search/search.css b/tcf_website/static/search/search.css index f44462c5c..72ca09de6 100644 --- a/tcf_website/static/search/search.css +++ b/tcf_website/static/search/search.css @@ -1,5 +1,9 @@ .search .search-results { - background-color: white; + background-color: var(--card-background-color); +} + +.text-muted { + color: var(--basic-text-color) !important; } .result-nav .btn-group { @@ -14,3 +18,15 @@ .search-course-description { color: var(--accent-color); } + +body.dark-mode{ + color: var(--basic-text-color) !important; +} + +body.dark-mode .list-group-item-light, +body.dark-mode .btn-light { + background-color: var(--input-background-color) !important; + color: var(--basic-text-color) !important; + border: none; + outline: none; +} \ No newline at end of file diff --git a/tcf_website/templates/course/course.html b/tcf_website/templates/course/course.html index d8d7cf871..5d489cffc 100644 --- a/tcf_website/templates/course/course.html +++ b/tcf_website/templates/course/course.html @@ -6,6 +6,7 @@ {% block styles %} + {% endblock %} {% block content %} From e52612a9910a4fe240508541bc31311172400528 Mon Sep 17 00:00:00 2001 From: jo-hya <137954049+jo-hya@users.noreply.github.com> Date: Sat, 29 Mar 2025 03:07:41 -0400 Subject: [PATCH 29/70] landing --- tcf_website/static/base/tcf-style.css | 3 ++- tcf_website/static/landing/landing.css | 27 ++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 3eb8338a5..778a05048 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -16,6 +16,7 @@ --navbar-color: #ffffff; /* newly added */ --basic-text-color: #212529; + --input-border-color: #dee2e6; /* Light grey, used for input borders */ /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ @@ -216,7 +217,7 @@ ul { } p { - color: var(--p-card-text-color); + color: var(--basic-text-color); } .form-control { diff --git a/tcf_website/static/landing/landing.css b/tcf_website/static/landing/landing.css index e16a0c08b..8d62d1e49 100644 --- a/tcf_website/static/landing/landing.css +++ b/tcf_website/static/landing/landing.css @@ -1,5 +1,15 @@ /* Html Classes */ +body { + background-color: var(--card-background-color); + color: var(--basic-text-color); +} + +body.dark-mode { + background-color: var(--background-color); + color: var(--basic-text-color); +} + .container-fluid { overflow: hidden; } @@ -96,6 +106,14 @@ header.masthead h1 { overflow: hidden; } +.dark-mode .about-team .about-pfp { + background-color: var(--background-color); + overflow: hidden; +} + +.border { + border: 1px solid var(--input-border-color) !important; +} .about-team .about-pfp img { transition: all 0.5s ease; box-shadow: 5px 5px 0px var(--accent-color); @@ -109,6 +127,11 @@ header.masthead h1 { border: 0px; } +.dark-mode .about-member.card { + background-color: var(--background-color) !important; + color: var(--basic-text-color); +} + .about-team .about-link:hover { box-shadow: 2px 2px 5px var(--main-color); } @@ -117,6 +140,10 @@ header.masthead h1 { font-size: 1.25rem; } +.about-link.card { + background-color: var(--accent-color) !important; + color: var(--basic-text-color) !important;} + /* About info box */ .about-team .about-info { border: 3px solid var(--accent-color); From 4b1ba29347142884e72f8f331970a42a3cf078e4 Mon Sep 17 00:00:00 2001 From: zohaibk04 Date: Sun, 6 Apr 2025 14:41:02 -0400 Subject: [PATCH 30/70] Fixes sidebar and landing icon coloring --- tcf_website/static/base/tcf-style.css | 10 ++++++---- tcf_website/static/landing/landing.css | 6 +++--- tcf_website/templates/landing/landing.html | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css index 498aa42e2..79c0019b2 100644 --- a/tcf_website/static/base/tcf-style.css +++ b/tcf_website/static/base/tcf-style.css @@ -18,6 +18,8 @@ --basic-text-color: #212529; /* changes the border color of the search bar on landing page */ --input-border-color: #DEE2E6; + /* changes the color of the title and icons on the landing page */ + --title-color: #274f97; /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */ /* Note: Can use Bootstrap "light" color and white color */ @@ -50,8 +52,8 @@ body.dark-mode { --icon-color: white; /* Light icon color */ --input-border-color: #A6A6A6; /* Lighter border color for inputs */ --button-bg-color: #1e1e1e; /* Darker button background */ - --landing-page-background-color: black; - --main-color: white; /* replace tcf-blue as tcf logo text color */ + --landing-page-background-color: black; /* replace tcf-blue as tcf logo text color */ + --title-color: white; /* make title and icons on landing page white */ } /*************DEFAULT STYLES**************/ @@ -138,7 +140,7 @@ ul { /* Main color: Indigo/Dark blue */ .text-tcf-indigo { - color: var(--main-color); + color: var(--title-color); } .bg-tcf-indigo { @@ -147,7 +149,7 @@ ul { background-color: #274f97; } .border-tcf-indigo { - border-color: var(--main-color); + border-color: var(--title-color); } /* Secondary color: Light blue */ diff --git a/tcf_website/static/landing/landing.css b/tcf_website/static/landing/landing.css index f6c6b5591..f46bf34b9 100644 --- a/tcf_website/static/landing/landing.css +++ b/tcf_website/static/landing/landing.css @@ -73,7 +73,7 @@ header.masthead h1 { .features-icons .features-icons-item .features-icons-icon { height: 7rem; - color: var(--main-color); + color: var(--title-color); } .features-icons .features-icons-item .features-icons-icon i { @@ -133,7 +133,7 @@ header.masthead h1 { } .about-team .about-link:hover { - box-shadow: 2px 2px 5px var(--main-color); + box-shadow: 2px 2px 5px var(--title-color); } .about-link { @@ -157,7 +157,7 @@ header.masthead h1 { } .about-team .about-info:hover { - box-shadow: 2px 2px 5px var(--main-color); + box-shadow: 2px 2px 5px var(--title-color); } @media (min-width: 768px) { diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html index 799e5f610..fa51bf246 100644 --- a/tcf_website/templates/landing/landing.html +++ b/tcf_website/templates/landing/landing.html @@ -34,7 +34,7 @@

theCourseForum

 --> - + From 09c7ea74af2c0a42e752d9627fbac8a23c0e5bcf Mon Sep 17 00:00:00 2001 From: zohaibk04 Date: Sun, 6 Apr 2025 14:44:36 -0400 Subject: [PATCH 31/70] Fixed navbar coloring on every page but landing --- tcf_website/templates/base/navbar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tcf_website/templates/base/navbar.html b/tcf_website/templates/base/navbar.html index c38e0b44e..a3ed4d8ab 100644 --- a/tcf_website/templates/base/navbar.html +++ b/tcf_website/templates/base/navbar.html @@ -5,7 +5,7 @@ {% endblock %}
-