From ea2ef9a03b0d9b329838d211c7adb3cec14d2eb7 Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Thu, 15 Jul 2021 11:16:18 +0300
Subject: [PATCH] fix: adjust quota css

---
 frontend/src/components/Quota.vue             | 8 ++++----
 frontend/src/components/files/ContextMenu.vue | 5 ++++-
 frontend/src/css/base.css                     | 6 ++++--
 frontend/src/views/files/Listing.vue          | 5 ++++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Quota.vue b/frontend/src/components/Quota.vue
index 669cf01d..7f6404c8 100644
--- a/frontend/src/components/Quota.vue
+++ b/frontend/src/components/Quota.vue
@@ -2,8 +2,8 @@
   <div id="quota">
     <div>
       <div class="label">
-        <span>{{ $t("sidebar.quota.space") }}</span>
-        <span v-if="loaded" class="metric">{{ spaceUsageTitle }}</span>
+        <div>{{ $t("sidebar.quota.space") }}</div>
+        <div v-if="loaded" class="metric">{{ spaceUsageTitle }}</div>
       </div>
       <div class="bar" :title="spaceProgress + '%'">
         <div class="progress" :style="{ width: spaceProgress + '%' }"></div>
@@ -11,8 +11,8 @@
     </div>
     <div>
       <div class="label">
-        <span>{{ $t("sidebar.quota.inodes") }}</span>
-        <span v-if="loaded" class="metric">{{ inodeUsageTitle }}</span>
+        <div>{{ $t("sidebar.quota.inodes") }}</div>
+        <div v-if="loaded" class="metric">{{ inodeUsageTitle }}</div>
       </div>
       <div class="bar" :title="inodeProgress + '%'">
         <div class="progress" :style="{ width: inodeProgress + '%' }"></div>
diff --git a/frontend/src/components/files/ContextMenu.vue b/frontend/src/components/files/ContextMenu.vue
index 40afca31..9c300e68 100644
--- a/frontend/src/components/files/ContextMenu.vue
+++ b/frontend/src/components/files/ContextMenu.vue
@@ -111,7 +111,10 @@ export default {
         copy: this.selectedCount > 0 && this.user.perm.create,
         permissions: this.selectedCount === 1 && this.user.perm.modify,
         archive: this.selectedCount > 0 && this.user.perm.create,
-        unarchive: this.selectedCount === 1 && this.onlyArchivesSelected && this.user.perm.create,
+        unarchive:
+          this.selectedCount === 1 &&
+          this.onlyArchivesSelected &&
+          this.user.perm.create,
       };
     },
   },
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 4a87825a..53235d9c 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -150,15 +150,17 @@ main {
 }
 
 #quota > div + div {
-  margin-top: .5em;
+  margin-top: .8em;
 }
 
 #quota .label {
   color: #546E7A;
+  font-weight: 500;
 }
 
 #quota .label .metric {
-  float: right;
+  font-weight: 100;
+  margin: .2em 0
 }
 
 #quota .bar {
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 3e3144b5..d0a3ea58 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -395,7 +395,10 @@ export default {
         copy: this.selectedCount > 0 && this.user.perm.create,
         permissions: this.selectedCount === 1 && this.user.perm.modify,
         archive: this.selectedCount > 0 && this.user.perm.create,
-        unarchive: this.selectedCount === 1 && this.onlyArchivesSelected && this.user.perm.create,
+        unarchive:
+          this.selectedCount === 1 &&
+          this.onlyArchivesSelected &&
+          this.user.perm.create,
       };
     },
     isMobile() {