From 65df233e8ac52af6f0d052ac22a8e82b68e85335 Mon Sep 17 00:00:00 2001
From: Svallinn <41585298+Svallinn@users.noreply.github.com>
Date: Tue, 15 Jun 2021 03:08:57 +0100
Subject: [PATCH] Profile+Everywhere: Tweak CSS on profile related components

This commit improves the centering of profile bubble initials
and tweaks other parts of profile related components.
---
 .../ft-profile-bubble/ft-profile-bubble.css   | 24 +++++++++----------
 .../ft-profile-bubble/ft-profile-bubble.vue   |  4 ++--
 .../ft-profile-edit/ft-profile-edit.css       |  8 +++----
 .../ft-profile-edit/ft-profile-edit.vue       |  4 ++--
 .../ft-profile-selector.css                   |  8 +++----
 .../ft-profile-selector.vue                   |  8 +++----
 6 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index 1208867b..9f832bd0 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -1,7 +1,7 @@
 .bubblePadding {
   width: 100px;
   height: 115px;
-  padding: 10px;
+  padding: 10px 10px 30px 10px;
   cursor: pointer;
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
@@ -17,25 +17,23 @@
 }
 
 .bubble {
-  width: 50px;
-  height: 50px;
-  margin-top: 20px;
-  margin-bottom: 5px;
-  margin-left: 25px;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
+  width: 70px;
+  height: 70px;
+  margin: 20px auto 5px auto;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
 }
 
 .initial {
-  font-size: 25px;
+  font-size: 35px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
-  top: 12px;
+  padding: 17.5px 0;
 }
 
 .profileName {
-  font-size: 13px;
-  height: 60px;
+  font-size: 14px;
+  line-height: 1.5em;
   overflow: hidden;
   text-align: center;
 }
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
index 27ff2e01..6879570d 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
@@ -7,9 +7,9 @@
       class="bubble"
       :style="{ background: backgroundColor, color: textColor }"
     >
-      <p class="initial">
+      <div class="initial">
         {{ profileInitial }}
-      </p>
+      </div>
     </div>
     <div class="profileName">
       {{ profileName }}
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index c7c669cc..bc8956a1 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -27,15 +27,15 @@
   height: 100px;
   margin: 10px;
   cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 50px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
-  bottom: 27px;
+  padding: 25px 0;
 }
 
 @media only screen and (max-width: 680px) {
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index 1d893f4a..bd2c0d5b 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -53,11 +53,11 @@
           :style="{ background: profileBgColor, color: profileTextColor }"
           style="cursor: default"
         >
-          <p
+          <div
             class="initial"
           >
             {{ profileInitial }}
-          </p>
+          </div>
         </div>
       </ft-flex-box>
       <ft-flex-box>
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 8ed7427e..3034f65f 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -3,15 +3,15 @@
   height: 40px;
   margin: 10px;
   cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 20px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
-  bottom: 30px;
+  padding: 10px 0;
 }
 
 #profileList {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index a263f8ae..e2160877 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -5,11 +5,11 @@
       :style="{ background: profileList[activeProfile].bgColor, color: profileList[activeProfile].textColor }"
       @click="toggleProfileList"
     >
-      <p
+      <div
         class="initial"
       >
         {{ profileInitials[activeProfile] }}
-      </p>
+      </div>
     </div>
     <ft-card
       id="profileList"
@@ -38,11 +38,11 @@
             class="colorOption"
             :style="{ background: profile.bgColor, color: profile.textColor }"
           >
-            <p
+            <div
               class="initial"
             >
               {{ profileInitials[index] }}
-            </p>
+            </div>
           </div>
           <p
             class="profileName"