From e1be90011e55207468b16ecab0656b29f887aa7e Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Fri, 4 Jul 2025 16:25:25 -0400 Subject: [PATCH 1/6] Consolidate theme toggle styles and update repository references - Extract duplicated theme-toggle styles into shared mixin (theme-toggle-styles) - Remove duplicate CSS across privacy.scss, admin.scss, index.scss, and main.scss - Apply mixin consistently to .theme-toggle, .theme-toggle-admin classes - Update git repository references from GitHub to git.deco.sh - Update README.md, privacy.html, and deploy script URLs - Build optimized CSS with consolidated styles --- README.md | 6 +++--- public/privacy.html | 2 +- scripts/deploy.sh | 2 +- src/scss/main.scss | 12 +----------- src/scss/{_mixins.scss => mixins.scss} | 15 +++++++++++++++ src/scss/pages/_admin.scss | 6 +----- src/scss/pages/_index.scss | 3 ++- src/scss/pages/_privacy.scss | 9 +++------ 8 files changed, 27 insertions(+), 28 deletions(-) rename src/scss/{_mixins.scss => mixins.scss} (90%) diff --git a/README.md b/README.md index f1ba479..8e54b37 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ A community-driven web application for tracking winter road conditions and icy h 1. **Clone the repository:** ```bash - git clone git@github.com:deco/ice.git + git clone git@git.deco.sh:deco/ice.git cd ice ``` @@ -89,7 +89,7 @@ PORT=3000 2. **Deploy your application:** ```bash - git clone git@github.com:deco/ice.git /opt/ice + git clone git@git.deco.sh:deco/ice.git /opt/ice cd /opt/ice npm install # This automatically builds CSS via postinstall ``` @@ -149,7 +149,7 @@ MIT License - see LICENSE file for details ## Support This is a community safety tool. For issues or questions: -- Create a GitHub issue +- Create an issue on our git repository - Check existing documentation - Review security guidelines diff --git a/public/privacy.html b/public/privacy.html index 1e8d6df..6b56e18 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -92,7 +92,7 @@

Contact Information

Questions about this privacy policy or your data?

diff --git a/scripts/deploy.sh b/scripts/deploy.sh index 6b46198..192615c 100644 --- a/scripts/deploy.sh +++ b/scripts/deploy.sh @@ -104,7 +104,7 @@ echo "" echo "🚀 Next steps to deploy Great Lakes Ice Report:" echo "" echo "1. Clone your repository:" -echo " git clone git@github.com:deco/great-lakes-ice-report.git /opt/great-lakes-ice-report" +echo " git clone git@git.deco.sh:deco/ice.git /opt/great-lakes-ice-report" echo "" echo "2. Set up the application:" echo " cd /opt/great-lakes-ice-report" diff --git a/src/scss/main.scss b/src/scss/main.scss index 4c15bf3..c15733b 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -135,17 +135,7 @@ button { // Theme toggle styles (common across pages) .theme-toggle { - @include button($bg-color: transparent); - border: 2px solid var(--border-color); - border-radius: $border-radius-full; - width: 40px; - height: 40px; - @include flex-center; - - &:hover { - background-color: var(--table-hover); - transform: none; - } + @include theme-toggle-styles; } // Utility classes diff --git a/src/scss/_mixins.scss b/src/scss/mixins.scss similarity index 90% rename from src/scss/_mixins.scss rename to src/scss/mixins.scss index 85f9d6b..e35df41 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/mixins.scss @@ -122,6 +122,21 @@ color: $text-color; } +// Theme Toggle Mixin (consolidates duplicated theme toggle styles) +@mixin theme-toggle-styles { + @include button($bg-color: transparent); + border: 2px solid var(--border-color); + border-radius: $border-radius-full; + width: 40px; + height: 40px; + @include flex-center; + + &:hover { + background-color: var(--table-hover); + transform: none; + } +} + // Back-link button mixin (shared component) @mixin back-link-styles { display: inline-block; diff --git a/src/scss/pages/_admin.scss b/src/scss/pages/_admin.scss index df43a1e..9a115ad 100644 --- a/src/scss/pages/_admin.scss +++ b/src/scss/pages/_admin.scss @@ -58,13 +58,9 @@ } .theme-toggle-admin { + @include theme-toggle-styles; background: var(--card-bg) !important; color: var(--text-color) !important; - border: 2px solid var(--border-color) !important; - width: 40px; - height: 40px; - border-radius: $border-radius-full !important; - @include flex-center; padding: 0 !important; } diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss index 8393d9e..7e6c3c6 100644 --- a/src/scss/pages/_index.scss +++ b/src/scss/pages/_index.scss @@ -58,7 +58,8 @@ } } - .theme-toggle { +.theme-toggle { + @include theme-toggle-styles; align-self: center; } } diff --git a/src/scss/pages/_privacy.scss b/src/scss/pages/_privacy.scss index 57855c9..28ef385 100644 --- a/src/scss/pages/_privacy.scss +++ b/src/scss/pages/_privacy.scss @@ -23,19 +23,16 @@ } &__theme-toggle { + @include theme-toggle-styles; position: absolute; top: 0; right: 0; - background: var(--card-bg); - border: 2px solid var(--border-color); - border-radius: 50%; width: 50px; height: 50px; - @include flex-center; + box-shadow: 0 2px 4px var(--shadow); cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 2px 4px var(--shadow); - + .theme-icon { font-size: $font-size-lg; } From c5356b611a2bf2edf9a2e25d0aed1050ae8011ed Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Fri, 4 Jul 2025 16:36:41 -0400 Subject: [PATCH 2/6] Fix map display and auto theme detection - Add missing #map CSS styles to fix map container display - Fix auto theme detection by implementing proper system preference detection - Update applyTheme function in all JS files to handle 'auto' theme correctly - System theme changes are now properly detected and applied when in auto mode --- public/admin.js | 8 +++++++- public/app-mapbox.js | 8 +++++++- public/privacy.html | 8 +++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/public/admin.js b/public/admin.js index a616e0d..3c30a29 100644 --- a/public/admin.js +++ b/public/admin.js @@ -705,7 +705,13 @@ function initializeTheme() { } function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); + if (theme === 'auto') { + // Detect system preference and apply appropriate theme + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-theme', theme); + } } function updateThemeIcon(theme, iconElement) { diff --git a/public/app-mapbox.js b/public/app-mapbox.js index 55d74d6..bea752e 100644 --- a/public/app-mapbox.js +++ b/public/app-mapbox.js @@ -617,7 +617,13 @@ function initializeTheme() { } function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); + if (theme === 'auto') { + // Detect system preference and apply appropriate theme + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-theme', theme); + } } function updateThemeIcon(theme, iconElement) { diff --git a/public/privacy.html b/public/privacy.html index 6b56e18..b9397b1 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -165,7 +165,13 @@ } function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); + if (theme === 'auto') { + // Detect system preference and apply appropriate theme + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); + } else { + document.documentElement.setAttribute('data-theme', theme); + } } function updateThemeIcon(theme, iconElement) { From 52836e4ff87844708cf4486d3ff154270ddc1911 Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Sat, 5 Jul 2025 18:36:50 -0400 Subject: [PATCH 3/6] Add missing transition and box-shadow to theme-toggle-styles mixin --- src/scss/mixins.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss index e35df41..328f5df 100644 --- a/src/scss/mixins.scss +++ b/src/scss/mixins.scss @@ -130,6 +130,8 @@ width: 40px; height: 40px; @include flex-center; + transition: all 0.3s ease; + box-shadow: 0 2px 4px var(--shadow); &:hover { background-color: var(--table-hover); From 6347c1de40b16d4d5f01ab83e37d48421392e703 Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Sat, 5 Jul 2025 18:40:34 -0400 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- public/privacy.html | 4 ++-- src/scss/pages/_privacy.scss | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/public/privacy.html b/public/privacy.html index b9397b1..2592ad8 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -92,8 +92,8 @@

Contact Information

Questions about this privacy policy or your data?

diff --git a/src/scss/pages/_privacy.scss b/src/scss/pages/_privacy.scss index 28ef385..4cb6fff 100644 --- a/src/scss/pages/_privacy.scss +++ b/src/scss/pages/_privacy.scss @@ -29,9 +29,7 @@ right: 0; width: 50px; height: 50px; - box-shadow: 0 2px 4px var(--shadow); cursor: pointer; - transition: all 0.3s ease; .theme-icon { font-size: $font-size-lg; From d20ce032648331aabd2136c36f32ff2ecfed48a2 Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Sat, 5 Jul 2025 18:47:05 -0400 Subject: [PATCH 5/6] Fix theme transition flash on page navigation - Add immediate theme application in section for all pages - Prevents light mode flash when navigating in dark mode - Script executes before body renders to apply saved theme - Fixes flash when going from privacy policy back to home - Maintains consistent theme experience across all pages - Supports auto theme detection based on system preference --- public/admin.html | 13 +++++++ public/index.html | 14 +++++++ public/privacy.html | 91 +++++++-------------------------------------- 3 files changed, 41 insertions(+), 77 deletions(-) diff --git a/public/admin.html b/public/admin.html index 0fb381a..07f58f8 100644 --- a/public/admin.html +++ b/public/admin.html @@ -7,6 +7,18 @@ +
@@ -155,6 +167,7 @@
+ diff --git a/public/index.html b/public/index.html index 61bbf3c..cc9c836 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,18 @@ +
@@ -109,6 +121,8 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
+ + diff --git a/public/privacy.html b/public/privacy.html index 2592ad8..f85fc45 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -7,6 +7,18 @@ +
@@ -110,84 +122,9 @@
+ + From 01b7186052503725c86ba524b55bd1ea744ef05e Mon Sep 17 00:00:00 2001 From: Deco Vander Date: Sat, 5 Jul 2025 18:51:48 -0400 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- public/admin.html | 3 ++- public/privacy.html | 2 +- src/scss/mixins.scss | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/public/admin.html b/public/admin.html index 07f58f8..c39c699 100644 --- a/public/admin.html +++ b/public/admin.html @@ -167,7 +167,8 @@ - + + diff --git a/public/privacy.html b/public/privacy.html index f85fc45..ea6476b 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -123,7 +123,7 @@ - +