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/style_switcher/style_switcher.vue | 36 ++++++++++++++++++------
 1 file changed, 28 insertions(+), 8 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 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>
-- 
cgit v1.2.3-70-g09d2