From 715bfb3dca55d5a5d688e8e81c9eb137deeced9b Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Thu, 23 Feb 2017 00:24:37 +0200
Subject: [PATCH] Make gradient use the theme colors, adjust user interction
 elements, make profiles without bg use a darker gray solid color to not drown
 out white text.

---
 .../user_card_content/user_card_content.vue   | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index befe8bf2..2cdbb2fb 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="heading" class="profile-panel-background base00-background" :style="headingStyle">
+  <div id="heading" class="profile-panel-background" :style="headingStyle">
     <div class="panel-heading text-center">
       <div class='user-info'>
         <div class='container'>
@@ -66,10 +66,10 @@
         }
       },
       bodyStyle () {
-        let color = '#1C2023'
+        let color = this.$store.state.config.colors['base00']
         console.log(this.color)
         return {
-          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 70%)'
+          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + color + ' 80%)'
         }
       },
       isOtherUser () {
@@ -102,6 +102,7 @@
 <style lang="scss">
 
 .profile-panel-background {
+  background-color: #121517;
   background-size: cover;
   border-radius: 0.5em 0.5em 0 0;
 }
@@ -114,7 +115,7 @@
 
 .user-info {
 	color: white;
-  padding: 1em 1em 1em 1em;
+  padding: 16px 16px 16px 16px;
   margin-bottom: -4em;
 
   .container{
@@ -134,7 +135,7 @@
       max-height: 48px;
   }
 
-	text-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);
+	text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
 
 	.user-name{
 		margin-top: 0.0em;
@@ -152,34 +153,39 @@
       flex: 0 0 auto;
       align-self: flex-start;
   }
-  
+
   .user-interactions {
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-between;
 
     div {
       flex: 1;
     }
-    margin-top: 0.5em;
-    margin-bottom: -1.2em;
+    margin-top: 0.7em;
+    margin-bottom: -1.0em;
 
     .following {
+      color: white;
       font-size: 14px;
       flex: 0 0 100%;
-      margin-bottom: 0.5em;
+      margin: -0.7em 0.0em 0.3em 0.0em;
+      padding-left: 16px;
+      text-align: left;
     }
 
     .mute {
-      max-width: 200px;
+      max-width: 220px;
+      min-height: 28px;
     }
 
     .follow {
-      max-width: 200px;
+      max-width: 220px;
+      min-height: 28px;
     }
 
     button {
-      width: 80%;
+      width: 92%;
       height: 100%;
       border: 1px solid;
     }