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.

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;
+  width: 70px;
-  height: 50px;
+  height: 70px;
-  margin-top: 20px;
+  margin: 20px auto 5px auto;
-  margin-bottom: 5px;
+  border-radius: 50%;
-  margin-left: 25px;
+  -webkit-border-radius: 50%;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
 }
 
 .initial {
-  font-size: 25px;
+  font-size: 35px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
+  padding: 17.5px 0;
-  top: 12px;
 }
 
 .profileName {
-  font-size: 13px;
+  font-size: 14px;
-  height: 60px;
+  line-height: 1.5em;
   overflow: hidden;
   text-align: center;
 }

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 }}

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;
+  border-radius: 50%;
-  -webkit-border-radius: 200px 200px 200px 200px;
+  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 50px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
+  padding: 25px 0;
-  bottom: 27px;
 }
 
 @media only screen and (max-width: 680px) {

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>

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;
+  border-radius: 50%;
-  -webkit-border-radius: 200px 200px 200px 200px;
+  -webkit-border-radius: 50%;
 }
 
 .initial {
   font-size: 20px;
+  line-height: 1em;
   text-align: center;
-  position: relative;
+  padding: 10px 0;
-  bottom: 30px;
 }
 
 #profileList {

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"