From cc02672e1451f28bcb85a0b34d34117567cc0802 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Apr 2018 03:22:03 +0300
Subject: [PATCH] made alerts use red with transparent theme red. some UI
 improvs

---
 src/App.scss                                  | 22 +++++++++++-
 src/_variables.scss                           |  2 ++
 src/components/login_form/login_form.vue      |  8 +----
 .../post_status_form/post_status_form.vue     | 10 +-----
 src/components/registration/registration.vue  |  9 +----
 .../style_switcher/style_switcher.vue         | 36 ++++++++++++++-----
 src/components/timeline/timeline.vue          |  7 ----
 src/components/user_finder/user_finder.vue    | 11 +-----
 src/services/style_setter/style_setter.js     |  2 ++
 9 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 942f5fb2..047cd333 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -99,6 +99,8 @@ input, textarea, .select {
   box-sizing: border-box;
   display: inline-block;
   position: relative;
+  height: 29px;
+  line-height: 16px;
 
   .icon-down-open {
     position: absolute;
@@ -122,9 +124,11 @@ input, textarea, .select {
     margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
-    padding: 4px 3ch 3px 3px;
+    padding: 4px 2em 3px 3px;
     width: 100%;
     z-index: 1;
+    height: 29px;
+    line-height: 16px;
   }
 
   &[type=radio],
@@ -371,6 +375,22 @@ nav {
   }
 }
 
+.alert {
+  margin: 0.35em;
+  padding: 0.25em;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+  min-height: 28px;
+  line-height: 28px;
+
+  &.error {
+    background-color: $fallback--cAlertRed;
+    background-color: var(--cAlertRed, $fallback--cAlertRed);
+  }
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;
diff --git a/src/_variables.scss b/src/_variables.scss
index 1f5d4b3e..d90a1d48 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -16,6 +16,8 @@ $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;
 
+$fallback--cAlertRed: rgba(211,16,20,.5);
+
 $fallback--panelRadius: 10px;
 $fallback--checkBoxRadius: 2px;
 $fallback--btnRadius: 4px;
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 840ea1a4..67fa95a8 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -21,7 +21,7 @@
           </div>
         </div>
         <div v-if="authError" class='form-group'>
-          <div class='error'>{{authError}}</div>
+          <div class='alert error'>{{authError}}</div>
         </div>
       </form>
     </div>
@@ -40,13 +40,7 @@
   }
 
   .error {
-    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;
-    min-height: 28px;
-    line-height: 28px;
   }
 
   .register {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 929f81ee..a3b8acde 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -30,7 +30,7 @@
         <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
         <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
       </div>
-      <div class='error' v-if="error">
+      <div class='alert error' v-if="error">
         Error: {{ error }}
         <i class="icon-cancel" @click="clearError"></i>
       </div>
@@ -87,15 +87,7 @@
   }
 
   .error {
-    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: var(--cRed, $fallback--cRed);
-    padding: 0.25em;
-    margin: 0.35em;
-    display: flex;
   }
 
   .attachments {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index b443024b..00f665af 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -46,7 +46,7 @@
           </div>
         </div>
         <div v-if="error" class='form-group'>
-          <div class='error'>{{error}}</div>
+          <div class='alert error'>{{error}}</div>
         </div>
       </form>
     </div>
@@ -105,14 +105,7 @@
   }
 
   .error {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     text-align: center;
-    margin: 0.5em 0.6em 0;
-    background-color: $fallback--cRed;
-    background-color: var(--cRed, $fallback--cRed);
-    min-height: 28px;
-    line-height: 28px;
   }
 }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index cfc2d83d..ef4a21bd 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -92,20 +92,23 @@
                  '--tooltipRadius': tooltipRadiusLocal + 'px',
                  '--attachmentRadius': attachmentRadiusLocal + 'px'
                  }">
-      <div class="panel">
+      <div class="panel dummy">
         <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 }">
+          <div class="avatar" :style="{
+                                      'border-radius': avatarRadiusLocal + 'px'
+                                      }">
+            ( ͡° ͜ʖ ͡°)
+          </div>
           <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"/>
+          <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>
-          <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>
@@ -153,6 +156,10 @@
   }
 }
 
+.radius-item {
+  flex-basis: auto;
+}
+
 .theme-radius-rn,
 .theme-color-cl {
   border: 0;
@@ -209,4 +216,17 @@
 .theme-preview-content {
   padding: 20px;
 }
+
+.dummy {
+  .avatar {
+    background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+    color: black;
+    text-align: center;
+    height: 48px;
+    line-height: 48px;
+    width: 48px;
+    float: left;
+    margin-right: 1em;
+  }
+}
 </style>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index adbbcd47..68439681 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -90,13 +90,6 @@
     padding: 0 0.5em 0 0.5em;
     opacity: 0.8;
   }
-
-  .error {
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
-    background-color: $fallback--cRed;
-    background-color: var(--cRed, $fallback--cRed);
-  }
 }
 
 .new-status-notification {
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 6a0df947..22d4bd77 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="user-finder-container">
-    <span class="finder-error" v-if="error">
+    <span class="alert error" v-if="error">
       <i class="icon-cancel user-finder-icon" @click="dismissError"/>
       {{$t('finder.error_fetching_user')}}
     </span>
@@ -28,13 +28,4 @@
   padding: 0.1em 0.2em 0.2em 0.2em;
 }
 
-.finder-error {
-  background-color: rgba(255, 48, 16, 0.65);
-  margin: 0.35em;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  padding: 0.25em;
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-}
 </style>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 2010fdfd..532af1ba 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -90,6 +90,8 @@ const setColors = (col, commit) => {
   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)
 
+  colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
+
   console.log('OMGGGG')
   console.log(JSON.stringify(col))
   radii.btnRadius = col.btnRadius