app/styles/Settings.css

@@ -22,12 +22,10 @@
 /* Main container for the settings */
 .settings-container {
     display: grid;
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
-    /* 1fr for sidebar, 3fr for main content */
     grid-auto-flow: column;
     overflow-x: hidden;
-    height: 100%;
+    height: 100%; /* Ensure it takes full height */
-    /* Ensure it takes full height */
 }
 
 /* Settings content */
@@ -41,30 +39,23 @@
     height: 90%;
     max-height: 600px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
+    overflow: hidden; /* Prevents overflow of the content */
-    /* Prevents overflow of the content */
+    position: relative; /* Needed for absolute positioning of close button */
-    position: relative;
-    /* Needed for absolute positioning of close button */
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* Flexbox for vertical stacking */
-    /* Flexbox for vertical stacking */
 }
 
 /* Sidebar styles */
 .sidebar {
     background: var(--settings-background-color);
     padding: 20px;
-    border-radius: 10px 0 0 10px;
+    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
-    /* Rounded corners on the left side */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow-y: auto;
+    overflow-y: auto; /* Scroll if content exceeds height */
-    /* Scroll if content exceeds height */
     display: flex;
     flex-direction: column;
-    grid-column: 1;
+    grid-column: 1; /* Places sidebar in the first grid column */
-    /* Places sidebar in the first grid column */
+    height: 100%; /* Ensures sidebar takes full height */
-    height: 100%;
-    /* Ensures sidebar takes full height */
 }
 
 /* Sidebar item styles */
@@ -73,10 +64,8 @@
     padding: 0;
     margin: 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* Make the ul a column */
-    /* Make the ul a column */
+    flex-grow: 1; /* Allows the list to take available space */
-    flex-grow: 1;
-    /* Allows the list to take available space */
 }
 
 .sidebar li {
@@ -88,88 +77,66 @@
 }
 
 .sidebar li:hover {
-    background: var(--input-button-hover-color);
+    background: var(--input-button-hover-color); /* Highlight on hover */
-    /* Highlight on hover */
 }
 
 .sidebar li.active {
-    background: var(--button-hover-background-color);
+    background: var(--button-hover-background-color); /* Active section highlight */
-    /* Active section highlight */
 }
 
 /* Main settings area */
 .settings-main {
-    grid-column: 2;
+    grid-column: 2; /* Places main settings in the second grid column */
-    /* Places main settings in the second grid column */
     padding: 20px;
-    border-radius: 0 10px 10px 0;
+    border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
-    /* Rounded corners on the right side */
+    overflow-y: auto; /* Scroll if content exceeds height */
-    overflow-y: auto;
-    /* Scroll if content exceeds height */
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* Stack content vertically */
-    /* Stack content vertically */
 }
 
 /* Close button positioning */
 .close-popup {
-    background: var(--close-button-color);
+    background: var(--close-button-color); /* Use variable for close button color */
-    /* Use variable for close button color */
+    color: white; /* Use white for text color */
-    color: white;
-    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute;
+    position: absolute; /* Position the button absolutely */
-    /* Position the button absolutely */
+    top: 15px; /* Distance from the top */
-    top: 15px;
+    right: 40px; /* Distance from the right */
-    /* Distance from the top */
-    right: 40px;
-    /* Distance from the right */
     transition: background 0.3s;
 }
 
 /* Close button positioning */
 .apply {
-    background: var(--apply-button-color);
+    background: var(--apply-button-color); /* Use variable for close button color */
-    /* Use variable for close button color */
+    color: white; /* Use white for text color */
-    color: white;
-    /* Use white for text color */
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute;
+    position: absolute; /* Position the button absolutely */
-    /* Position the button absolutely */
+    top: 50px; /* Distance from the top */
-    top: 50px;
+    right: 40px; /* Distance from the right */
-    /* Distance from the top */
-    right: 40px;
-    /* Distance from the right */
     transition: background 0.3s;
 }
 
 .close-popup:hover {
-    background: darkred;
+    background: darkred; /* Optional hover effect */
-    /* Optional hover effect */
 }
 
 
 /* Additional styles for inputs and options */
 .settings-option {
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* Adds space between each setting option */
-    /* Adds space between each setting option */
+    padding-bottom: 10px; /* Adds internal spacing */
-    padding-bottom: 10px;
+    border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
-    /* Adds internal spacing */
-    border-bottom: 1px solid var(--input-border-color);
-    /* Optional, creates a separator between options */
 }
 
 .settings-option:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0; /* Removes bottom margin from last option */
-    /* Removes bottom margin from last option */
+    border-bottom: none; /* Removes separator from last option */
-    border-bottom: none;
-    /* Removes separator from last option */
 }
 
 .settings-option input[type="text"],
@@ -184,9 +151,7 @@
     padding: 10px;
     border-radius: 5px;
     width: 100%;
-    height: 40px;
+    margin-bottom: 10px; /* Adds spacing between inputs */
-    margin-bottom: 10px;
-    /* Adds spacing between inputs */
 }
 
 /* Optional additional spacing for labels */
@@ -196,14 +161,14 @@
     font-weight: bold;
 }
 
-.export-button {
+.export-button{
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
     border-radius: 10px;
 }
 
-.import-file {
+.import-file{
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
@@ -224,20 +189,17 @@
 }
   
 .slider-option.active {
-    background-color: #007bff;
+    background-color: #007bff; /* Change to your active color */
-    /* Change to your active color */
     color: white;
     border-color: #007bff;
 }
   
 input[type="radio"] {
-    display: none;
+    display: none; /* Hide the default radio buttons */
-    /* Hide the default radio buttons */
 }
 
 .slider-option.disabled {
-    opacity: 0.5;
+    opacity: 0.5; /* Make the option appear greyed out */
-    /* Make the option appear greyed out */
+    pointer-events: none; /* Prevent clicks */
-    pointer-events: none;
-    /* Prevent clicks */
 }
+  

main.js

@@ -2,8 +2,8 @@ const { app, BrowserWindow } = require('electron');
 
 function createWindow() {
     const win = new BrowserWindow({
-        width: 1280,
+        width: 800,
-        height: 720,
+        height: 600,
         webPreferences: {
             nodeIntegration: true,
         },