Merge branch 'fix/better-icon-colors' into 'develop'

Update icons to use base09 where appropriate, calculate base09 by averaging bg and text colors.

See merge request pleroma/pleroma-fe!174

src/components/delete_button/delete_button.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="canDelete">
     <a href="#" v-on:click.prevent="deleteStatus()">
-      <i class='fa icon-cancel delete-status'></i>
+      <i class='base09 icon-cancel delete-status'></i>
     </a>
   </div>
 </template>

src/components/favorite_button/favorite_button.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
+    <i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/>
     <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>

src/components/media_upload/media_upload.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
     <label class="btn btn-default">
-      <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
+      <i class="base09 icon-spin4 animate-spin" v-if="uploading"></i>
-      <i class="fa icon-upload" v-if="!uploading"></i>
+      <i class="base09 icon-upload" v-if="!uploading"></i>
       <input type=file style="position: fixed; top: -100em"></input>
     </label>
   </div>

src/components/retweet_button/retweet_button.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
+    <i :class='classes' class='icon-retweet base09' v-on:click.prevent='retweet()'></i>
     <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>

src/components/status/status.vue

@@ -5,7 +5,7 @@
       <div class='status-actions'>
         <div>
           <a href="#" v-on:click.prevent="toggleReplying">
-            <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+            <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
           </a>
         </div>
         <retweet-button :status=status></retweet-button>
@@ -19,7 +19,7 @@
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a>
       </div>
     </template>
     <template v-if="!muted">
@@ -75,10 +75,10 @@
                 </h4>
               </div>
               <div class="heading-icons">
-                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
+                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a>
-                <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
+                <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a>
                 <template v-if="expandable">
-                  <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
+                  <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a>
                 </template>
               </div>
             </div>
@@ -94,7 +94,7 @@
               </div>
             </div>
             <div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
-              <i class="fa icon-spin4 animate-spin"></i>
+              <i class="base09 icon-spin4 animate-spin"></i>
             </div>
 
             <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
@@ -109,7 +109,7 @@
             <div class='status-actions'>
               <div>
                 <a href="#" v-on:click.prevent="toggleReplying">
-                  <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+                  <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
                 </a>
               </div>
               <retweet-button :status=status></retweet-button>

src/components/user_settings/user_settings.vue

@@ -22,7 +22,7 @@
         <div>
           <input type="file" @change="uploadFile(0, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
+        <i class="base09 icon-spin4 animate-spin" v-if="uploading[0]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
@@ -35,7 +35,7 @@
         <div>
           <input type="file" @change="uploadFile(1, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
+        <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
@@ -46,7 +46,7 @@
         <div>
           <input type="file" @change="uploadFile(2, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
+        <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
       </div>
     </div>

src/services/style_setter/style_setter.js

@@ -73,6 +73,7 @@ const setColors = (col, commit) => {
   if (isDark) {
     mod = mod * -1
   }
+
   colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
@@ -82,11 +83,13 @@ const setColors = (col, commit) => {
   colors['base06'] = 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['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
+  colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
 
-  times(9, (n) => {
+  const num = 10
-    const color = colors[`base0${8 - n}`]
+  times(num, (n) => {
-    styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
+    const color = colors[`base0${num - 1 - n}`]
-    styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
+    styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max')
+    styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max')
   })
 
   styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')