From 65f82cf29438fc898cb7733f7bfc8a7868e6f4af Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 7 Apr 2018 21:58:29 +0300
Subject: <select> styling (abeit somewhat not pretty code-wise), default
 colors for default schemes.

---
 src/components/style_switcher/style_switcher.vue | 30 +++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

(limited to 'src/components/style_switcher/style_switcher.vue')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 6bdd4391..2ebf2b90 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,11 +1,15 @@
 <template>
   <div>
-    <p>{{$t('settings.presets')}}</p>
-    <select v-model="selected" class="style-switcher">
-      <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
-    </select>
-    <p>{{$t('settings.theme_help')}}</p>
+    <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[0]}}</option>
+        </select>
+        <i class="icon-down-open"/>
+      </label>
+    </div>
     <div class="color-container">
+      <p>{{$t('settings.theme_help')}}</p>
       <div class="color-item">
         <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
         <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
@@ -13,8 +17,8 @@
       </div>
       <div class="color-item">
         <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
-        <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal">
-        <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal">
+        <input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
+        <input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
       </div>
       <div class="color-item">
         <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
@@ -26,8 +30,6 @@
         <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
         <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
       </div>
-    </div>
-    <div class="color-container additional colors">
       <div class="color-item">
         <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
         <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
@@ -51,14 +53,20 @@
     </div>
     <div>
       <div class="panel">
-        <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+        <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
         <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
           <h4>Content</h4>
           <br>
           A bunch of more content and
           <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+          <i :style="{ 'color': blueColorLocal }" class="icon-reply"/>
+          <i :style="{ 'color': greenColorLocal }" class="icon-retweet"/>
+          <i :style="{ 'color': redColorLocal }" class="icon-cancel"/>
+          <i :style="{ 'color': orangeColorLocal }" class="icon-star"/>
+          <br>
           <br>
-          <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+          <div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div>
+          <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2

