From 33b1d85921e326e0d81c4bf1a6fa02fec2cbbd5c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 1 Apr 2018 22:07:25 +0300
Subject: [PATCH] border-radii moved to variables, made rgbo colors use theme
 data, customizable from settings screen.

---
 src/App.scss                                  |  36 ++---
 src/_variables.scss                           |   7 +-
 src/components/attachment/attachment.vue      |   6 +-
 src/components/chat_panel/chat_panel.vue      |  58 ++++----
 src/components/login_form/login_form.vue      |  10 +-
 src/components/media_upload/media_upload.vue  |   2 +-
 .../notifications/notifications.scss          |   2 +-
 .../post_status_form/post_status_form.vue     |  16 ++-
 src/components/registration/registration.vue  |   8 +-
 src/components/settings/settings.vue          |  57 ++++----
 src/components/status/status.vue              |  10 +-
 .../style_switcher/style_switcher.js          |  27 +++-
 .../style_switcher/style_switcher.vue         |  23 ++-
 src/components/timeline/timeline.vue          |   3 -
 src/components/user_card/user_card.vue        |   9 +-
 .../user_card_content/user_card_content.vue   | 136 ++++++++++++------
 src/components/user_finder/user_finder.vue    |   4 +-
 src/components/user_panel/user_panel.vue      |   8 +-
 src/components/user_profile/user_profile.vue  |  13 +-
 .../user_settings/user_settings.vue           |  36 ++---
 src/services/style_setter/style_setter.js     |  26 +++-
 21 files changed, 309 insertions(+), 188 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index ec80626bc3..a7b565237f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -51,7 +51,8 @@ button{
   background-color: $fallback--btn;
   background-color: var(--btn, $fallback--btn);
   border: none;
-  border-radius: 5px;
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -79,7 +80,8 @@ button{
 
 input, textarea, select {
   border: none;
-  border-radius: 5px;
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 2px black inset;
@@ -90,6 +92,7 @@ input, textarea, select {
   font-family: sans-serif;
   font-size: 14px;
   padding: 8px 7px 4px;
+  box-sizing: border-box;
 
   // TODO: Restyle <select> in a decent way. Needs different markup
   // -webkit-appearance:none;
@@ -109,32 +112,27 @@ input, textarea, select {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: 2px;
+      border-radius: $fallback--checkBoxRadius;
+      border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
       border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
       background-color: $fallback--btn;
       background-color: var(--btn, $fallback--btn);
-      vertical-align: baseline;
+      vertical-align: top;
       text-align: center;
       line-height: 1.1em;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
       overflow: hidden;
+      box-sizing: border-box;
     }
   }
 }
 
-.icon-cancel,
-.icon-reply,
-.icon-retweet,
-.icon-star-empty,
-.icon-eye-off,
-.icon-binoculars,
-.icon-plus-squared,
-.icon-spin4 {
+i[class^=icon-] {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon)
 }
@@ -188,6 +186,11 @@ nav {
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
+
+    a i {
+      color: $fallback--link;
+      color: var(--link, $fallback--link);
+    }
   }
 }
 
@@ -215,9 +218,8 @@ main-router {
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  border-radius: 10px;
   border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, 10px);
+  border-radius: var(--panelRadius, $fallback--panelRadius);
   box-shadow: 1px 1px 4px rgba(0,0,0,.6);
   overflow: hidden;
 }
@@ -230,7 +232,8 @@ main-router {
 }
 
 .panel-heading {
-  border-radius: 10px 10px 0 0;
+  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
   padding: 0.6em 1.0em;
   text-align: left;
@@ -241,7 +244,8 @@ main-router {
 }
 
 .panel-footer {
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
 }
 
 .panel-body > p {
diff --git a/src/_variables.scss b/src/_variables.scss
index eccc0aabf0..1f5d4b3e47 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -15,6 +15,11 @@ $fallback--cRed: #ff0000;
 $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;
-$fallback--cYellow: yellow;
 
 $fallback--panelRadius: 10px;
+$fallback--checkBoxRadius: 2px;
+$fallback--btnRadius: 4px;
+$fallback--tooltipRadius: 5px;
+$fallback--avatarRadius: 4px;
+$fallback--avatarAltRadius: 10px;
+$fallback--attachmentRadius: 10px;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e3b1e4d41b..1fdee5d3f2 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -52,7 +52,8 @@
 
         border-style: solid;
         border-width: 1px;
-        border-radius: 5px;
+        border-radius: $fallback--attachmentRadius;
+        border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
         overflow: hidden;
 
         // fixes small gap below video
@@ -109,7 +110,8 @@
                 flex: 1;
                 img {
                     border: 0px;
-                    border-radius: 5px;
+                    border-radius: $fallback--attachmentRadius;
+                    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
                     height: 100%;
                     object-fit: cover;
                 }
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 69996f76dc..fd997aa828 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -29,30 +29,36 @@
 <script src="./chat_panel.js"></script>
 
 <style lang="scss">
- .chat-window {
-   max-height: 200px;
-   overflow-y: auto;
-   overflow-x: hidden;
- }
- .chat-message {
-   padding: 0.2em 0.5em
- }
- .chat-avatar {
-     img {
-         height: 32px;
-         width: 32px;
-         border-radius: 5px;
-         margin-right: 0.5em;
-     }
- }
- .chat-input {
-     display: flex;
-     form {
-         flex: auto;
-         input {
-             margin: 0.5em;
-             width: fill-available;
-         }
-     }
- }
+@import '../../_variables.scss';
+
+.chat-window {
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.chat-message {
+    padding: 0.2em 0.5em
+}
+
+.chat-avatar {
+    img {
+        height: 32px;
+        width: 32px;
+        border-radius: $fallback--avatarRadius;
+        border-radius: var(--avatarRadius, $fallback--avatarRadius);
+        margin-right: 0.5em;
+    }
+}
+
+.chat-input {
+    display: flex;
+    form {
+        flex: auto;
+        input {
+            margin: 0.5em;
+            width: fill-available;
+        }
+    }
+}
 </style>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 82000d6b06..ac492262f3 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -34,21 +34,17 @@
 @import '../../_variables.scss';
 
 .login-form {
-    input {
-        border-radius: 5px;
-        padding: 0.1em 0.2em 0.2em 0.2em;
-    }
-
     .btn {
         min-height: 28px;
         width: 10em;
     }
 
     .error {
-        border-radius: 5px;
+        border-radius: $fallback--tooltipRadius;
+        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
         text-align: center;
         background-color: rgba(255, 48, 16, 0.65);
-       background-color: $fallback--cRed;
+        background-color: $fallback--cRed;
         min-height: 28px;
         line-height: 28px;
     }
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 8e83e7f1aa..8b931d2df3 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
     <label class="btn btn-default">
-      <i class="animate-spin" v-if="uploading"></i>
+      <i class="icon-spin4 animate-spin" v-if="uploading"></i>
       <i class="icon-upload" v-if="!uploading"></i>
       <input type=file style="position: fixed; top: -100em"></input>
     </label>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5af2454e29..7ef4f07d3d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -120,6 +120,7 @@
       margin-top: 0.3em;
       width: 32px;
       height: 32px;
+      border-radius: $fallback--avatarAltRadius;
       border-radius: 50%;
       overflow: hidden;
       line-height: 0;
@@ -141,7 +142,6 @@
 
     &:last-child {
       border-bottom: none;
-      border-radius: 0 0 10px 10px;
     }
   }
 
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d57418fbf3..abf3b5b7df 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -64,7 +64,8 @@
         padding: 3px;
         width: 16px;
         height: 16px;
-        border-radius: 50%;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     }
 }
 
@@ -86,7 +87,8 @@
     }
 
     .error {
-        border-radius: 5px;
+        border-radius: $fallback--tooltipRadius;
+        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
         text-align: center;
         background-color: rgba(255, 48, 16, 0.65);
         background-color: $fallback--cRed;
@@ -111,7 +113,8 @@
             margin: 10px;
             padding: 5px;
             background: rgba(230,230,230,0.6);
-            border-radius: 5px;
+            border-radius: $fallback--attachmentRadius;
+            border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
             font-weight: bold;
         }
     }
@@ -148,6 +151,7 @@
         overflow: hidden;
         transition: min-height 200ms;
         min-height: 1px;
+        box-sizing: content-box;
     }
 
     form textarea:focus {
@@ -169,7 +173,8 @@
 
     .autocomplete-panel {
         margin: 0 0.5em 0 0.5em;
-        border-radius: 5px;
+        border-radius: $fallback--tooltipRadius;
+        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
         position: absolute;
         z-index: 1;
         box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
@@ -189,7 +194,8 @@
         img {
             width: 24px;
             height: 24px;
-            border-radius: 2px;
+            border-radius: $fallback--avatarRadius;
+            border-radius: var(--avatarRadius, $fallback--avatarRadius);
             object-fit: contain;
         }
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 0966645ded..b90930825d 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -88,15 +88,10 @@
     }
 
     form textarea {
-        border-radius: 5px;
         line-height:16px;
         resize: vertical;
     }
 
-    input {
-        border-radius: 5px;
-    }
-
     .captcha {
         max-width: 350px;
         margin-bottom: 0.4em;
@@ -110,7 +105,8 @@
     }
 
     .error {
-        border-radius: 5px;
+        border-radius: $fallback--tooltipRadius;
+        border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
         text-align: center;
         margin: 0.5em 0.6em 0;
         background-color: $fallback--cRed;
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 98f70f7b57..9f1956873d 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -54,33 +54,40 @@
 </script>
 
 <style lang="scss">
- .setting-item {
-   margin: 1em 1em 1.4em;
+@import '../../_variables.scss';
 
-   textarea {
-     width: 100%;
-     height: 100px;
-   }
+.setting-item {
+    margin: 1em 1em 1.4em;
 
-   .old-avatar {
-     width: 128px;
-     border-radius: 5px;
-   }
+    textarea {
+        width: 100%;
+        height: 100px;
+    }
 
-   .new-avatar {
-     object-fit: cover;
-     width: 128px;
-     height: 128px;
-     border-radius: 5px;
-   }
+    .old-avatar {
+        width: 128px;
+        border-radius: $fallback--avatarRadius;
+        border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    }
 
-   .btn {
-     margin-top: 1em;
-     min-height: 28px;
-     width: 10em;
-   }
- }
- .setting-list {
-   list-style-type: none;
- }
+    .new-avatar {
+        object-fit: cover;
+        width: 128px;
+        height: 128px;
+        border-radius: $fallback--avatarRadius;
+        border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    }
+
+    .btn {
+        margin-top: 1em;
+        min-height: 28px;
+        width: 10em;
+    }
+}
+.setting-list {
+    list-style-type: none;
+    li {
+        margin-bottom: 0.5em;
+    }
+}
 </style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 80f6a3157e..14ffd92287 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -145,7 +145,8 @@ status-text-container {
     border-color: var(--border, $fallback--border);
     border-style: solid;
     border-width: 1px;
-    border-radius: 4px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
     margin-top: 0.5em;
     margin-left: 1em;
@@ -155,7 +156,8 @@ status-text-container {
         flex-shrink: 0;
         width: 32px;
         height: 32px;
-        border-radius: 50%;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     }
 
     .text {
@@ -287,7 +289,8 @@ status-text-container {
         margin: 0.2em 0.3em 0 0;
         .avatar {
             float: right;
-            border-radius: 5px;
+            border-radius: $fallback--avatarRadius;
+            border-radius: var(--avatarRadius, $fallback--avatarRadius);
         }
     }
 
@@ -409,7 +412,6 @@ status-text-container {
 }
 
 .timeline .panel.timeline {
-    border-radius: 10px;
     overflow: hidden;
 }
 
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 6e41433870..5e5ba266e2 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -8,7 +8,11 @@ export default {
       bgColorLocal: '',
       fgColorLocal: '',
       textColorLocal: '',
-      linkColorLocal: ''
+      linkColorLocal: '',
+      redColorLocal: '#ff0000',
+      blueColorLocal: '#0095ff',
+      greenColorLocal: '#0fa00f',
+      orangeColorLocal: '#E3FF00'
     }
   },
   created () {
@@ -25,6 +29,11 @@ export default {
     this.fgColorLocal = 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)
+
+    this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed || this.redColorLocal)
+    this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal)
+    this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal)
+    this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal)
   },
   methods: {
     setCustomTheme () {
@@ -43,6 +52,12 @@ export default {
       const fgRgb = rgb(this.fgColorLocal)
       const textRgb = rgb(this.textColorLocal)
       const linkRgb = rgb(this.linkColorLocal)
+
+      const redRgb = rgb(this.redColorLocal)
+      const blueRgb = rgb(this.blueColorLocal)
+      const greenRgb = rgb(this.greenColorLocal)
+      const orangeRgb = rgb(this.orangeColorLocal)
+
       if (bgRgb && fgRgb && linkRgb) {
         this.$store.dispatch('setOption', {
           name: 'customTheme',
@@ -50,7 +65,11 @@ export default {
             fg: fgRgb,
             bg: bgRgb,
             text: textRgb,
-            link: linkRgb
+            link: linkRgb,
+            cRed: redRgb,
+            cBlue: blueRgb,
+            cGreen: greenRgb,
+            cOrange: orangeRgb
           }})
       }
     }
@@ -61,6 +80,10 @@ export default {
       this.fgColorLocal = 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.orangeColorLocal = this.selected[8]
     }
   }
 }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index e6a00275ff..e2853d01c6 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -27,6 +27,28 @@
         <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">
+        <input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
+        <input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
+        <input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
+        <input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
+        <input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
+        <input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
+        <input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
+      </div>
+    </div>
     <div>
       <div class="panel">
         <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
@@ -79,7 +101,6 @@
 .theme-color-cl,
 .theme-color-in {
     margin-left: 4px;
-    border-radius: 2px;
 }
 
 .theme-color-in {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c3cc939a18..aa3a8bff86 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -82,7 +82,6 @@
         right: 0.6em;
         font-size: 14px;
         min-width: 6em;
-        border-radius: 5px;
         background-color: transparent;
         color: $fallback--faint;
         color: var(--faint, $fallback--faint);
@@ -106,8 +105,6 @@
     font-size: 1.1em;
     border-width: 1px 0 0 0;
     border-style: solid;
-    border-radius: 0 0 10px 10px;
-    border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     padding: 10px;
     z-index: 1;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6487d2a6cc..660689d29f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -52,16 +52,19 @@
         margin-top: 0.2em;
         width:32px;
         height: 32px;
-        border-radius: 50%;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     }
 }
 
 .usercard {
     width: fill-available;
     margin: 0.2em 0 0.7em 0;
-    border-radius: 10px;
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
     border-style: solid;
-    border-color: inherit;
+    border-color: $fallback--border;
+		border-color: var(--border, $fallback--border);
     border-width: 1px;
     overflow: hidden;
 
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ca3da632c1..3f4689fd05 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -100,7 +100,8 @@
 
 .profile-panel-background {
     background-size: cover;
-    border-radius: 10px;
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
 
     .panel-heading {
         padding: 0.6em 0em;
@@ -117,14 +118,9 @@
 }
 
 .user-info {
-	color: white;
-  padding: 0 16px 16px 16px;
-  margin-bottom: -4em;
-
-  .usersettings {
     color: white;
-    opacity: 0.8;
-  }
+    padding: 0 16px 16px 16px;
+    margin-bottom: -4em;
 
   .container{
     padding: 16px 10px 4px 10px;
@@ -186,51 +182,104 @@
     flex-flow: row wrap;
     justify-content: space-between;
 
-    div {
-      flex: 1;
-    }
-    margin-top: 0.7em;
-    margin-bottom: -1.0em;
-
-    .following {
-      color: white;
-      font-size: 14px;
-      flex: 0 0 100%;
-      margin: -0.7em 0.0em 0.3em 0.0em;
-      padding-left: 16px;
-      text-align: left;
+    .usersettings {
+        color: white;
+        opacity: 0.8;
     }
 
-    .mute {
-      max-width: 220px;
-      min-height: 28px;
+    .container{
+        padding: 16px 10px 4px 10px;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        align-content: flex-start;
+        justify-content: center;
+        max-height: 56px;
+        overflow: hidden;
     }
 
-    .remote-follow {
-      max-width: 220px;
-      min-height: 28px;
+    img {
+        border-radius: $fallback--avatarRadius;
+        border-radius: var(--avatarRadius, $fallback--avatarRadius);
+        flex: 1 0 100%;
+        width: 56px;
+        height: 56px;
+        box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
+        object-fit: cover;
     }
 
-    .follow {
-      max-width: 220px;
-      min-height: 28px;
+    text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
+
+    .name-and-screen-name {
+        display: block;
+        margin-left: 0.6em;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
-    button {
-      width: 92%;
-      height: 100%;
+    .user-name{
+        color: white;
     }
 
-    .remote-button {
-      height: 28px !important;
-      width: 92%;
+    .user-screen-name {
+        color: white;
+        font-weight: lighter;
+        font-size: 15px;
+        padding-right: 0.1em;
+        flex: 0 0 auto;
     }
 
-    .pressed {
-      border-bottom-color: rgba(255, 255, 255, 0.2);
-      border-top-color: rgba(0, 0, 0, 0.2);
+    .user-interactions {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+
+        div {
+            flex: 1;
+        }
+        margin-top: 0.7em;
+        margin-bottom: -1.0em;
+
+        .following {
+            color: white;
+            font-size: 14px;
+            flex: 0 0 100%;
+            margin: -0.7em 0.0em 0.3em 0.0em;
+            padding-left: 16px;
+            text-align: left;
+        }
+
+        .mute {
+            max-width: 220px;
+            min-height: 28px;
+        }
+
+        .remote-follow {
+            max-width: 220px;
+            min-height: 28px;
+        }
+
+        .follow {
+            max-width: 220px;
+            min-height: 28px;
+        }
+
+        button {
+            width: 92%;
+            height: 100%;
+        }
+
+        .remote-button {
+            height: 28px !important;
+            width: 92%;
+        }
+
+        .pressed {
+            border-bottom-color: rgba(255, 255, 255, 0.2);
+            border-top-color: rgba(0, 0, 0, 0.2);
+        }
     }
-  }
 }
 
 .user-counts {
@@ -244,7 +293,8 @@
     flex: 1;
 
     h5 {
-    	font-size:1em;
+        color: white;
+        font-size:1em;
         font-weight: bolder;
         margin: 0 0 0.25em;
     }
@@ -254,7 +304,7 @@
 }
 
 .dailyAvg {
-  font-size: 0.8em;
-  opacity: 0.5;
+    font-size: 0.8em;
+    opacity: 0.5;
 }
 </style>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index e4453fe73d..f9362a7d54 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -24,7 +24,6 @@
 }
 
 .user-finder-input {
-    border-radius: 5px;
     max-width: 80%;
     padding: 0.1em 0.2em 0.2em 0.2em;
 }
@@ -32,7 +31,8 @@
 .finder-error {
     background-color: rgba(255, 48, 16, 0.65);
     margin: 0.35em;
-    border-radius: 5px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.25em;
     color: $fallback--faint;
     color: var(--faint, $fallback--faint);
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 7da767b788..05af7bc366 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -13,9 +13,9 @@
 <script src="./user_panel.js"></script>
 
 <style lang="scss">
-  .user-panel {
-    .panel-heading {
-      background: transparent;
+.user-panel {
+    .profile-panel-background .panel-heading {
+        background: transparent;
     }
-  }
+}
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 14d8cfe911..e6060451cb 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -12,13 +12,12 @@
 <style lang="scss">
 
 .user-profile {
-  flex: 2;
-  flex-basis: 500px;
-  padding-bottom: 10px;
-  border-radius: 10px;
-  .panel-heading {
-      background: transparent;
-  }
+    flex: 2;
+    flex-basis: 500px;
+    padding-bottom: 10px;
+    .panel-heading {
+        background: transparent;
+    }
 }
 
 </style>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index fecc67b835..39bb498cf2 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -75,31 +75,21 @@
 
 <style lang="scss">
 .profile-edit {
-  .name-changer {
-    border-radius: 5px;
-    padding: 0.2em 0.2em 0.2em 0.2em;
-  }
-  .name-submit {
-    padding: 0.2em 0.5em 0.2em 0.5em;
-  }
-  .bio {
-    border-radius: 5px;
-    margin: 0;
-  }
+    .bio {
+        margin: 0;
+    }
 
-  input[type=file] {
-      padding: 5px;
-      border-radius: 5px;
-  }
+    input[type=file] {
+        padding: 5px;
+    }
 
-  .banner {
-    max-width: 400px;
-    border-radius: 5px;
-  }
+    .banner {
+        max-width: 400px;
+    }
 
-  .uploading {
-    font-size: 1.5em;
-    margin: 0.25em;
-  }
+    .uploading {
+        font-size: 1.5em;
+        margin: 0.25em;
+    }
 }
 </style>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index bedadb126c..503a0d72cf 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -69,6 +69,7 @@ const setColors = (col, commit) => {
   if (isDark) {
     mod = mod * -1
   }
+  console.log(JSON.stringify(col, null, ' '))
 
   colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
@@ -77,14 +78,16 @@ const setColors = (col, commit) => {
   colors.faint = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
   colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
+
   colors.link = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
   colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
-  colors.cBlue = '#0095ff'
-  colors.cRed = 'red'
-  colors.cGreen = '#0fa00f'
-  colors.cYellow = 'yellow'
-  colors.cOrange = 'orange'
+
+  colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
+  colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
+  colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
+  colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
 
   styleSheet.toString()
   styleSheet.insertRule(`body { ${Object.entries(colors).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
@@ -103,12 +106,23 @@ const setPreset = (val, commit) => {
       const fgRgb = hex2rgb(theme[2])
       const textRgb = hex2rgb(theme[3])
       const linkRgb = hex2rgb(theme[4])
+
+      const cRedRgb = hex2rgb(theme[5] || '#FF0000')
+      const cBlueRgb = hex2rgb(theme[6] || '#0000FF')
+      const cGreenRgb = hex2rgb(theme[7] || '#00FF00')
+      const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
+
       const col = {
         bg: bgRgb,
         fg: fgRgb,
         text: textRgb,
-        link: linkRgb
+        link: linkRgb,
+        cRed: cRedRgb,
+        cBlue: cBlueRgb,
+        cGreen: cGreenRgb,
+        cOrange: cOrangeRgb
       }
+
       // This is a hack, this function is only called during initial load.
       // We want to cancel loading the theme from config.json if we're already
       // loading a theme from the persisted state.