From 1c55e7e2e1f4036e123c16fccf3a7552deaa793c Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 31 Jan 2020 08:29:05 +0100
Subject: [PATCH] New UI elements adjustments

---
 resources/js/views/Accounts.vue |  4 ++--
 resources/sass/app.scss         | 13 +++----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 487b27b1..cc8c7e8d 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -25,11 +25,11 @@
                                 <label :for="'ckb_' + account.id"></label>
                             </div>
                         </div>
-                        <div class="tfa-content is-size-4" @click.stop="showAccount(account.id)">  
+                        <div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account.id)">  
                             <div class="tfa-text has-ellipsis">
                                 <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
                                 {{ account.service }}
-                                <span class="is-family-primary is-size-7 has-text-grey ">{{ account.account }}</span>
+                                <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
                             </div>
                         </div>
                         <div class="tfa-dots has-text-grey" v-if="!editMode">
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 148fc58f..04e96e96 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -72,14 +72,6 @@
   flex-direction: column;
 }
 
-.tfa-container > div:first-of-type {
-    padding: 0;
-}
-
-.tfa-container > div:last-of-type {
-    padding: 0.5rem 0;
-}
-
 @media screen and (max-width: 768px) {
   .tfa-container {
     flex-direction: row;
@@ -97,7 +89,7 @@
 .tfa-checkbox, .tfa-dots {
   display: flex;
   align-items: center;
-  padding: 0
+  padding: 0.5rem 0 0 0;
 }
 
 @media screen and (max-width: 768px) {
@@ -139,6 +131,8 @@
 @media screen and (min-width: 769px) {
   .is-checkradio[type="checkbox"] + label, .is-checkradio[type="radio"] + label {
     padding-left: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
 }
 
@@ -155,7 +149,6 @@
 
 .tfa span {
   display: block;
-  // margin-left: 2.3em;
 }
 
 .has-ellipsis {