From 28dddeace1cacc52941687ec5d17365423bb6285 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Mon, 25 Nov 2024 08:06:22 -0500
Subject: [PATCH] style: fix switch color and use sass helper

---
 app/assets/scss/_helpers.scss     | 19 +++++++++++++++++++
 app/assets/scss/_main.scss        | 20 --------------------
 app/assets/scss/_theme-dark.scss  |  3 ++-
 app/assets/scss/_theme-light.scss |  3 ++-
 4 files changed, 23 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/scss/_helpers.scss

diff --git a/app/assets/scss/_helpers.scss b/app/assets/scss/_helpers.scss
new file mode 100644
index 0000000..de66848
--- /dev/null
+++ b/app/assets/scss/_helpers.scss
@@ -0,0 +1,19 @@
+@use "sass:string";
+
+@function encode-hash($color) {
+  $string-color: "#{$color}";
+  $length: string.length($string-color);
+  $result: "";
+
+  @for $i from 1 through $length {
+    $char: string.slice($string-color, $i, $i);
+
+    @if $char == "#" {
+      $result: $result + "%23";
+    } @else {
+      $result: $result + $char;
+    }
+  }
+
+  @return $result;
+}
diff --git a/app/assets/scss/_main.scss b/app/assets/scss/_main.scss
index 132cbbf..24c9bc9 100644
--- a/app/assets/scss/_main.scss
+++ b/app/assets/scss/_main.scss
@@ -1,5 +1,3 @@
-@use "sass:string";
-
 @font-face {
   font-family: Fredoka;
   src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
@@ -163,21 +161,3 @@ td, th {
 .scale-hover:hover img {
   transform: scale(1.1);
 }
-
-@function encode-hash($color) {
-  $string-color: "#{$color}";
-  $length: string.length($string-color);
-  $result: "";
-
-  @for $i from 1 through $length {
-    $char: string.slice($string-color, $i, $i);
-
-    @if $char == "#" {
-      $result: $result + "%23";
-    } @else {
-      $result: $result + $char;
-    }
-  }
-
-  @return $result;
-}
diff --git a/app/assets/scss/_theme-dark.scss b/app/assets/scss/_theme-dark.scss
index 7b041e9..58dcdd9 100644
--- a/app/assets/scss/_theme-dark.scss
+++ b/app/assets/scss/_theme-dark.scss
@@ -1,4 +1,5 @@
 @use "bootstrap" as bs;
+@use "helpers" as h;
 
 $body-color: #e9ecef;
 $primary: #ffafa9;
@@ -41,7 +42,7 @@ $success: #a9ffaf;
   --bs-tertiary-bg-rgb: #{bs.to-rgb($tertiary-bg)};
   --bs-success: #{$success};
   --bs-success-rgb: #{bs.to-rgb($success)};
-  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
+  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{h.encode-hash($primary)}'/%3e%3c/svg%3e");
 
   a {
     text-decoration: none;
diff --git a/app/assets/scss/_theme-light.scss b/app/assets/scss/_theme-light.scss
index 43f3e4e..5007d61 100644
--- a/app/assets/scss/_theme-light.scss
+++ b/app/assets/scss/_theme-light.scss
@@ -1,4 +1,5 @@
 @use "bootstrap" as bs;
+@use "helpers" as h;
 
 $body-color: #443c47;
 $primary: #c25050;
@@ -34,5 +35,5 @@ $success: #409b6e;
   --bs-dark-rgb: var(--bs-body-color-rgb);
   --bs-success: #{$success};
   --bs-success-rgb: #{bs.to-rgb($success)};
-  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
+  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{h.encode-hash($primary)}'/%3e%3c/svg%3e");
 }