it works, now to clean it up

1 files changed, 62 insertions, 48 deletions

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 0352f546..af816a23 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,49 +1,49 @@
 <template>
-<div>
-  <div class="presets-container">
-    <div>
-      {{$t('settings.presets')}}
-      <label for="style-switcher" class='select'>
-        <select id="style-switcher" v-model="selected" class="style-switcher">
-          <option v-for="style in availableStyles"
-                  :value="style"
-                  :style="{
-                          backgroundColor: style[1],
-                          color: style[3]
-                          }">
-            {{style[0]}}
-          </option>
-        </select>
-        <i class="icon-down-open"/>
-      </label>
-    </div>
-    <div class="import-export">
-      <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
-      <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
-      <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+  <div>
+    <div class="presets-container">
+      <div>
+        {{$t('settings.presets')}}
+        <label for="style-switcher" class='select'>
+          <select id="style-switcher" v-model="selected" class="style-switcher">
+            <option v-for="style in availableStyles"
+                    :value="style"
+                    :style="{
+                            backgroundColor: style[1],
+                            color: style[3]
+                            }">
+              {{style[0]}}
+            </option>
+          </select>
+          <i class="icon-down-open"/>
+        </label>
+      </div>
+      <div class="import-export">
+        <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+        <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
+        <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+      </div>
     </div>
-  </div>
 
-  <div class="preview-container">
-    <div class="panel dummy" :style="previewRules">
-      <div class="panel-heading">Preview</div>
-      <div class="panel-body theme-preview-content">
-        <div class="avatar">
-          ( ͡° ͜ʖ ͡°)
+    <div class="preview-container">
+      <div class="panel dummy" :style="previewRules">
+        <div class="panel-heading">Preview</div>
+        <div class="panel-body theme-preview-content">
+          <div class="avatar">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <h4>Content</h4>
+          <br>
+          A bunch of more content and
+          <a style="color: var(--link)">a nice lil' link</a>
+          <i style="color: var(--cBlue)" class="icon-reply"/>
+          <i style="color: var(--cGreen)" class="icon-retweet"/>
+          <i style="color: var(--cRed)" class="icon-cancel"/>
+          <i style="color: var(--cOrange)" class="icon-star"/>
+          <br>
+          <button class="btn">Button</button>
         </div>
-        <h4>Content</h4>
-        <br>
-        A bunch of more content and
-        <a style="color: var(--link)">a nice lil' link</a>
-        <i style="color: var(--cBlue)" class="icon-reply"/>
-        <i style="color: var(--cGreen)" class="icon-retweet"/>
-        <i style="color: var(--cRed)" class="icon-cancel"/>
-        <i style="color: var(--cOrange)" class="icon-star"/>
-        <br>
-        <button class="btn">Button</button>
       </div>
     </div>
-  </div>
 
     <p>{{$t('settings.theme_help')}}</p>
     <tab-switcher>
@@ -171,15 +171,29 @@
         </div>
       </div>
       <div label="Shadow Realm" class="shadow-container">
-        <div class="shadow-selector">
-          <select id="style-switcher" v-model="shadowSelected" class="style-switcher">
-            <option v-for="shadow in shadowsAvailable"
-                    :value="shadow">
-              {{shadow}}
-            </option>
-          </select>
+        <div>
+          Shadow
+          <label for="shadow-switcher" class="shadow-selector select">
+            <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
+              <option v-for="shadow in shadowsAvailable"
+                      :value="shadow">
+                {{shadow}}
+              </option>
+            </select>
+            <i class="icon-down-open"/>
+          </label>
+          <label for="override" class="label">
+            Override
+          </label>
+          <input
+            v-model="currentShadowOverriden"
+            name="override"
+            id="override"
+            class="input-override"
+            type="checkbox">
+          <label class="checkbox-label" for="override"></label>
         </div>
-        <shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
+        <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
     </tab-switcher>