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: made alerts use red with transparent theme red. some UI improvs

---
 src/components/login_form/login_form.vue           |  8 +----
 .../post_status_form/post_status_form.vue          | 10 +-----
 src/components/registration/registration.vue       |  9 +-----
 src/components/style_switcher/style_switcher.vue   | 36 +++++++++++++++++-----
 src/components/timeline/timeline.vue               |  7 -----
 src/components/user_finder/user_finder.vue         | 11 +------
 6 files changed, 32 insertions(+), 49 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3-70-g09d2