<select> styling (abeit somewhat not pretty code-wise), default colors for

default schemes.

8 files changed, 119 insertions, 76 deletions

diff --git a/src/App.scss b/src/App.scss
index 63815bf9..942f5fb2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -77,8 +77,12 @@ button{
   }
 }
 
+label.select {
+  padding: 0;
 
-input, textarea, select {
+}
+
+input, textarea, .select {
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
@@ -93,11 +97,35 @@ input, textarea, select {
   font-size: 14px;
   padding: 8px 7px 4px;
   box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+
+  .icon-down-open {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    height: 100%;
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
+    line-height: 29px;
+    z-index: 0;
+    pointer-events: none;
+  }
 
-  // TODO: Restyle <select> in a decent way. Needs different markup
-  // -webkit-appearance:none;
-  // -moz-appearance:none;
-  // appearance:none;
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    margin: 0;
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
+    padding: 4px 3ch 3px 3px;
+    width: 100%;
+    z-index: 1;
+  }
 
   &[type=radio],
   &[type=checkbox] {
@@ -185,7 +213,7 @@ nav {
     height: 50px;
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: auto 80%;
 
     a i {
       color: $fallback--link;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 65dc3bab..04f6add4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -41,6 +41,11 @@
     flex: 0 0 auto;
     max-height: 300px;
     max-width: 100%;
+    line-height: 0;
+
+    video {
+      max-height: 300px;
+    }
   }
 
   .attachment {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0f99b3b1..929f81ee 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -103,8 +103,8 @@
 
     .attachment {
       position: relative;
-      border: $fallback--border;
-      border: var(--border, $fallback--border);
+      border: 1px solid $fallback--border;
+      border: 1px solid var(--border, $fallback--border);
       margin: 0.5em 0.8em 0.2em 0;
     }
 
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 5695c554..5fefe714 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,53 +10,55 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .still-image {
-    position: relative;
-    line-height: 0;
-    overflow: hidden;
+  position: relative;
+  line-height: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%
 
-    &:hover canvas {
-        display: none;
-    }
+  &:hover canvas {
+    display: none;
+  }
+
+  img {
+    width: 100%;
+    height: 100%
+  }
 
+  &.animated {
+    &:hover::before,
     img {
-        width: 100%;
-        height: 100%
+      visibility: hidden;
     }
 
-    &.animated {
-        &:hover::before,
-        img {
-            visibility: hidden;
-        }
-
-        &:hover img {
-            visibility: visible
-        }
-
-        &::before {
-            content: 'gif';
-            position: absolute;
-            line-height: 10px;
-            font-size: 10px;
-            top: 5px;
-            left: 5px;
-            background: rgba(127,127,127,.5);
-            color: #FFF;
-            display: block;
-            padding: 2px 4px;
-            border-radius: 3px;
-            z-index: 2;
-        }
+    &:hover img {
+      visibility: visible
     }
 
-    canvas {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
+    &::before {
+      content: 'gif';
+      position: absolute;
+      line-height: 10px;
+      font-size: 10px;
+      top: 5px;
+      left: 5px;
+      background: rgba(127,127,127,.5);
+      color: #FFF;
+      display: block;
+      padding: 2px 4px;
+      border-radius: 3px;
+      z-index: 2;
     }
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 5e5ba266..e6b80ac9 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -6,7 +6,7 @@ export default {
       availableStyles: [],
       selected: this.$store.state.config.theme,
       bgColorLocal: '',
-      fgColorLocal: '',
+      btnColorLocal: '',
       textColorLocal: '',
       linkColorLocal: '',
       redColorLocal: '#ff0000',
@@ -26,7 +26,7 @@ export default {
   },
   mounted () {
     this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
-    this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
+    this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
     this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
     this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
 
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     setCustomTheme () {
-      if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
+      if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes
       }
       const rgb = (hex) => {
@@ -49,7 +49,7 @@ export default {
         } : null
       }
       const bgRgb = rgb(this.bgColorLocal)
-      const fgRgb = rgb(this.fgColorLocal)
+      const btnRgb = rgb(this.btnColorLocal)
       const textRgb = rgb(this.textColorLocal)
       const linkRgb = rgb(this.linkColorLocal)
 
@@ -58,11 +58,11 @@ export default {
       const greenRgb = rgb(this.greenColorLocal)
       const orangeRgb = rgb(this.orangeColorLocal)
 
-      if (bgRgb && fgRgb && linkRgb) {
+      if (bgRgb && btnRgb && linkRgb) {
         this.$store.dispatch('setOption', {
           name: 'customTheme',
           value: {
-            fg: fgRgb,
+            fg: btnRgb,
             bg: bgRgb,
             text: textRgb,
             link: linkRgb,
@@ -77,12 +77,12 @@ export default {
   watch: {
     selected () {
       this.bgColorLocal = this.selected[1]
-      this.fgColorLocal = this.selected[2]
+      this.btnColorLocal = this.selected[2]
       this.textColorLocal = this.selected[3]
       this.linkColorLocal = this.selected[4]
       this.redColorLocal = this.selected[5]
-      this.blueColorLocal = this.selected[6]
-      this.greenColorLocal = this.selected[7]
+      this.greenColorLocal = this.selected[6]
+      this.blueColorLocal = this.selected[7]
       this.orangeColorLocal = this.selected[8]
     }
   }
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>
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index df923be4..9f3d65ce 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -46,7 +46,7 @@ const de = {
     settings: 'Einstellungen',
     theme: 'Farbschema',
     presets: 'Voreinstellungen',
-    theme_help: 'Benutze HTML Farbcodes (#aabbcc) um dein Farbschema anzupassen.',
+    theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen.',
     background: 'Hintergrund',
     foreground: 'Vordergrund',
     text: 'Text',
@@ -238,7 +238,7 @@ const en = {
     settings: 'Settings',
     theme: 'Theme',
     presets: 'Presets',
-    theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.',
+    theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
     background: 'Background',
     foreground: 'Foreground',
     text: 'Text',
@@ -812,7 +812,7 @@ const oc = {
     settings: 'Paramètres',
     theme: 'Tèma',
     presets: 'Pre-enregistrats',
-    theme_help: 'Emplegatz los còdis de color hex (#aabbcc) per personalizar vòstre tèma de color.',
+    theme_help: 'Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.',
     background: 'Rèire plan',
     foreground: 'Endavant',
     text: 'Tèxte',
@@ -998,7 +998,7 @@ const es = {
     settings: 'Ajustes',
     theme: 'Tema',
     presets: 'Por defecto',
-    theme_help: 'Use códigos de color hexadecimales (#aabbcc) para personalizar su tema de colores.',
+    theme_help: 'Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.',
     background: 'Segundo plano',
     foreground: 'Primer plano',
     text: 'Texto',
@@ -1098,7 +1098,7 @@ const pt = {
     settings: 'Configurações',
     theme: 'Tema',
     presets: 'Predefinições',
-    theme_help: 'Use cores em código hexadecimal (#aabbcc) para personalizar seu esquema de cores.',
+    theme_help: 'Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.',
     background: 'Plano de Fundo',
     foreground: 'Primeiro Plano',
     text: 'Texto',
@@ -1198,7 +1198,7 @@ const ru = {
     settings: 'Настройки',
     theme: 'Тема',
     presets: 'Пресеты',
-    theme_help: 'Используйте шестнадцатеричные коды цветов (#aabbcc) для настройки темы.',
+    theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.',
     background: 'Фон',
     foreground: 'Передний план',
     text: 'Текст',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 503a0d72..9ec9b735 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -108,8 +108,8 @@ const setPreset = (val, commit) => {
       const linkRgb = hex2rgb(theme[4])
 
       const cRedRgb = hex2rgb(theme[5] || '#FF0000')
-      const cBlueRgb = hex2rgb(theme[6] || '#0000FF')
-      const cGreenRgb = hex2rgb(theme[7] || '#00FF00')
+      const cGreenRgb = hex2rgb(theme[6] || '#00FF00')
+      const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
       const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
 
       const col = {