From 211453512b2b394ebff7309a64cda2a90019e429 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Sat, 25 Dec 2021 00:08:50 -0800
Subject: [PATCH] Update to settings page

---
 src/renderer/ameframework.css         | 10 ++++-
 src/renderer/views/pages/settings.ejs | 60 +++++++++++++++------------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/renderer/ameframework.css b/src/renderer/ameframework.css
index 16b6f0f6..d28fe2e6 100644
--- a/src/renderer/ameframework.css
+++ b/src/renderer/ameframework.css
@@ -13,7 +13,7 @@
 }
 
 .md-option-container {
-    border-radius: 10px;
+    /* border-radius: 10px; */
     overflow: hidden;
 }
 
@@ -59,6 +59,14 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
     background: transparent;
 }
 
+.md-option-header {
+    padding: 10px;
+    border-bottom: 1px solid rgb(200 200 200 / 25%);
+    font-weight: 500;
+    font-size: 0.9em;
+    background: rgb(255 255 255 / 10%);
+}
+
 .md-option-segment {
     width: 100%;
     display: flex;
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 435513ff..a79b95cc 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -1,7 +1,9 @@
 <script type="text/x-template" id="cider-settings">
     <div class="content-inner settings-page">
-        <h1 class="header-text">Settings <small>(WIP)</small></h1>
         <div class="md-option-container">
+            <div class="md-option-header">
+                <span>Audio</span>
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Audio Quality
@@ -23,6 +25,9 @@
                     <input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
                 </div>
             </div>
+            <div class="md-option-header">
+                <span>Visual</span>
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Animated Artwork
@@ -49,6 +54,34 @@
                     </select>
                 </div>
             </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Window Transparency
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
+                        <option value="default">Default</option>
+                        <option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
+                        <option value="disabled">Disabled</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Hardware Acceleration<br>
+                    <small>(Requires relaunch)</small>
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
+                        <option value="default">Default</option>
+                        <option value="webgpu">WebGPU</option>
+                        <option value="disabled">Disabled</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-header">
+                <span>Unfinished / Non Functional</span>
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Discord Rich Presence
@@ -87,31 +120,6 @@
                     <input type="checkbox" switch/>
                 </div>
             </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Hardware Acceleration<br>
-                    <small>(Requires relaunch)</small>
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select" style="width:180px;" v-model="app.cfg.behavior.hw_acceleration">
-                        <option value="default">Default</option>
-                        <option value="webgpu">WebGPU</option>
-                        <option value="disabled">Disabled</option>
-                    </select>
-                </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Window Transparency
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select" style="width:180px;" v-model="app.cfg.visual.window_transparency" @change="app.getHTMLStyle()">
-                        <option value="default">Default</option>
-                        <option value="acrylic" v-if="app.platform == 'win32'">Acrylic</option>
-                        <option value="disabled">Disabled</option>
-                    </select>
-                </div>
-            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     Theme