From 1b7bc84b6562fd2cc03c9be5d62633c6d5ec0496 Mon Sep 17 00:00:00 2001
From: Maciej Gomola <me@mcjk.cc>
Date: Fri, 18 Oct 2024 08:31:29 +0200
Subject: [PATCH] Fix settings button color changing

---
 static/assets/css/style.css          | 8 ++++++++
 static/assets/img/settings.svg       | 1 -
 static/assets/js/calculator-logic.js | 2 +-
 static/index.html                    | 4 +++-
 4 files changed, 12 insertions(+), 3 deletions(-)
 delete mode 100644 static/assets/img/settings.svg

diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 70af150..001e138 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -20,6 +20,14 @@ body {
     overflow: hidden;
 }
 
+.material-symbols-outlined {
+    font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24
+  }
+
 .calculator button {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
diff --git a/static/assets/img/settings.svg b/static/assets/img/settings.svg
deleted file mode 100644
index 551161c..0000000
--- a/static/assets/img/settings.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>
\ No newline at end of file
diff --git a/static/assets/js/calculator-logic.js b/static/assets/js/calculator-logic.js
index b4f58a7..ca10110 100644
--- a/static/assets/js/calculator-logic.js
+++ b/static/assets/js/calculator-logic.js
@@ -15,7 +15,7 @@ buttons.forEach(button => {
             resetCalculator();
         } else if (value === 'H') {
             toggleHistory();
-        } else if (value === '') {
+        } else if (value === 'settings') {
             toggleSettings();
         } else if (value === '=') {
             calculateResult();
diff --git a/static/index.html b/static/index.html
index a50670f..08fbf34 100644
--- a/static/index.html
+++ b/static/index.html
@@ -10,6 +10,8 @@
     <link
         href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
         rel="stylesheet">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=settings" />
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <!-- anime.js is a library for easy fancy animations with JavaScript -->
@@ -45,7 +47,7 @@
         <button class="button">2</button>
         <button class="button">3</button>
         <button class="button operation">+</button>
-        <button class="button settings"><img src="./assets/img/settings.svg" alt="settings"></button>
+        <button class="button settings"><span class="material-symbols-outlined">settings</span></button>
         <button class="button">0</button>
         <button class="button">.</button>
         <button class="button operation">=</button>