Improve code clarity, design and fix bugs

index.js

@@ -3,11 +3,14 @@ const { app, BrowserWindow } = require('electron');
 app.whenReady().then(() => {
     createWindow();
 
+    // This event works on macOS only.
+    // If the user clicks on app's icon on the dock and there are no open windows, create one.
     app.on('activate', () => {
         if (BrowserWindow.getAllWindows().length === 0) createWindow();
     });
 });
 
+// If all windows are closed and we're not running macOS, quit the app.
 app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit();
 });

static/assets/css/keyboard.css

@@ -19,7 +19,7 @@
 
 .display {
     grid-column: span 4;
-    color: white;
+    color: var(--text-color);
     font-size: 3rem;
     display: flex;
     justify-content: flex-end;
@@ -40,7 +40,7 @@
     /* Vertically centered */
     font-size: 2.5rem;
     white-space: nowrap;
-    color: white;
+    color: var(--text-color);
 }
 
 .display-text {
@@ -56,7 +56,7 @@
     background-color: var(--button-primary);
     border: none;
     border-radius: 50%;
-    color: white;
+    color: var(--text-color);
     font-size: 1.25rem;
     display: flex;
     justify-content: center;
@@ -74,7 +74,7 @@
 }
 
 .button.settings {
-    background-color: var(--button-settings);
+    background-color: var(--button-primary);
     border-radius: 50%;
 }
 

static/assets/css/style.css

@@ -1,12 +1,11 @@
 :root {
     font-size: 18px;
 
-    --theme-bg: rgb(24, 24, 24);
+    --theme-bg: #181818;
 
     --text-color: white;
-    --button-primary: rgb(81, 81, 81);
+    --button-primary: #515151;
-    --button-secondary: rgb(243, 134, 51);
+    --button-secondary: #f38633;
-    --button-settings: rgb(72, 72, 72);
 }
 
 body {
@@ -21,7 +20,7 @@ body {
     overflow: hidden;
 }
 
-button {
+.calculator button {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     font-weight: 500;
@@ -64,11 +63,11 @@ button {
 }
 
 .history-container span {
-    color: rgba(255, 255, 255, 0.6);
+    
 }
 
 .history-container span strong {
-    color: white;
+    color: var(--text-color);
 }
 
 body.history-open .history-container {
@@ -95,6 +94,7 @@ body.history-open .calculator {
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
+    padding: 0 1rem;
 
     z-index: 150;
 
@@ -107,4 +107,63 @@ body.settings-open .settings-container {
 
 body.settings-open .calculator {
     transform: translateY(-80%);
+}
+
+.settings-container span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+input[type=color] {
+    border-radius: 50%;
+    height: 1.5rem;
+    width: 1.5rem;
+    border: solid 1px rgb(128, 128, 128);
+    outline: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+}
+
+input[type=color]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+input[type=color]::-webkit-color-swatch {
+    border: none;
+    border-radius: 50%;
+}
+
+.settings-container button {
+    font-family: "IBM Plex", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 0.85rem;
+
+    color: var(--text-color);
+    padding: 0.4rem 0.8rem;
+    border: none;
+    background-color: var(--button-primary);
+    /* border: solid 1px rgb(128, 128, 128); */
+    border-radius: 10px;
+
+    cursor: pointer;
+
+    transition: background-color 0.3s, transform 0.1s;
+}
+
+.settings-container button:hover {
+    background-color: var(--button-secondary);
+}
+
+.settings-container button:active {
+    transform: scale(0.9);
+}
+
+.settings-container .container {
+    display: flex;
+    justify-content: center;
 }

static/assets/js/calculator-logic.js

@@ -1,3 +1,5 @@
+// This file is responsible for all calculator animations and logic.
+
 const buttons = document.querySelectorAll('.button');
 const displayText = document.querySelector('.display-text');
 let currentInput = '';
@@ -124,7 +126,6 @@ function toggleHistory() {
 
     if ($('body').hasClass('history-open')) { // If the history was just opened
         // Animate it's elements
-        console.log('a')
         anime({
             targets: '.history-container span',
             translateY: [-100, 0],

static/assets/js/colors.js

@@ -0,0 +1,19 @@
+// This file manages the themes and color settings
+
+// This is a helper function for updating the UI colors in CSS
+function setUIColors(background, text, buttonPrimary, buttonSecondary) {
+    document.body.style.setProperty('--theme-bg', background);
+    document.body.style.setProperty('--text-color', text);
+    document.body.style.setProperty('--button-primary', buttonPrimary);
+    document.body.style.setProperty('--button-secondary', buttonSecondary);
+}
+
+// This function uses setUIColors to update the actual theme colors according to color input fields.
+function applyUIColors() {
+    const background = document.getElementById('background').value;
+    const text = document.getElementById('text').value;
+    const buttonPrimary = document.getElementById('button-primary').value;
+    const buttonSecondary = document.getElementById('button-secondary').value;
+
+    setUIColors(background, text, buttonPrimary, buttonSecondary);
+}

static/index.html

@@ -51,12 +51,16 @@
         <button class="button operation">=</button>
     </div>
     <div class="settings-container">
-        <span>Kolor tła: </span><input type="color" id="background"><br>
+        <span>Kolor tła: <input type="color" id="background"></span>
-        <span>Kolor tekstu: </span><input type="color" id="text"><br>
+        <span>Kolor tekstu: <input type="color" id="text"></span>
-        <span>Kolor podstawowy: </span><input type="color" id="primary"><br>
+        <span>Kolor podstawowy: <input type="color" id="button-primary"></span>
-        <span>Kolor alternatywny: </span><input type="color" id="secondary">
+        <span>Kolor alternatywny: <input type="color" id="button-secondary"></span>
+        <div class="container">
+            <button onclick="applyUIColors()">Zatwierdź</button>
+        </div>
     </div>
 
     <script src="./assets/js/calculator-logic.js"></script>
+    <script src="./assets/js/colors.js"></script>
 </body>
 </html>