Miscellaneous improvements to settings page styling (#4235)

* Miscellaneous improvements to settings page styling * remove superfluous flex box * Leave buttons as primary color * PR suggestions
FreeTubeApp · Nov 28, 2023 · 245fb12 · 245fb12
1 parent bfb7de3
commit 245fb12
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/src/renderer/components/data-settings/data-settings.vue b/src/renderer/components/data-settings/data-settings.vue
@@ -2,24 +2,21 @@
   <ft-settings-section
     :title="$t('Settings.Data Settings.Data Settings')"
   >
-    <ft-flex-box>
+    <h4 class="groupTitle">
+      {{ $t('Subscriptions.Subscriptions') }}
+    </h4>
+    <ft-flex-box class="dataSettingsBox">
       <ft-button
         :label="$t('Settings.Data Settings.Import Subscriptions')"
         @click="importSubscriptions"
       />
       <ft-button
-        :label="$t('Settings.Data Settings.Export Subscriptions')"
-        @click="showExportSubscriptionsPrompt = true"
-      />
-    </ft-flex-box>
-    <ft-flex-box>
-      <ft-button
-        :label="$t('Settings.Data Settings.Import History')"
-        @click="importHistory"
+        :label="$t('Settings.Data Settings.Manage Subscriptions')"
+        @click="openProfileSettings"
       />
       <ft-button
-        :label="$t('Settings.Data Settings.Export History')"
-        @click="exportHistory"
+        :label="$t('Settings.Data Settings.Export Subscriptions')"
+        @click="showExportSubscriptionsPrompt = true"
       />
     </ft-flex-box>
     <ft-flex-box>
@@ -29,13 +26,23 @@
         </a>
       </p>
     </ft-flex-box>
-    <ft-flex-box>
+    <h4 class="groupTitle">
+      {{ $t('History.History') }}
+    </h4>
+    <ft-flex-box class="dataSettingsBox">
       <ft-button
-        :label="$t('Settings.Data Settings.Manage Subscriptions')"
-        @click="openProfileSettings"
+        :label="$t('Settings.Data Settings.Import History')"
+        @click="importHistory"
+      />
+      <ft-button
+        :label="$t('Settings.Data Settings.Export History')"
+        @click="exportHistory"
       />
     </ft-flex-box>
-    <ft-flex-box>
+    <h4 class="groupTitle">
+      {{ $t('Playlists') }}
+    </h4>
+    <ft-flex-box class="dataSettingsBox">
       <ft-button
         :label="$t('Settings.Data Settings.Import Playlists')"
         @click="importPlaylists"

diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css
@@ -1,7 +1,3 @@
-.groupTitle {
-  text-align: center;
-}
-
 @media only screen and (max-width: 800px) {
   br.hide-on-mobile {
     display: none;

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
@@ -96,6 +96,7 @@
   padding: 1rem;
   border: none;
   margin-block-end: 10px;
+  margin-block-start: 10px;
   font-size: 16px;
   block-size: 45px;
   color: var(--secondary-text-color);

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -46,6 +46,15 @@
   margin-block: 0.5em;
 }
 
+.dataSettingsBox {
+  justify-content: center;
+}
+
+:deep(.groupTitle) {
+  text-align: center;
+  margin-block: 0.5em;
+}
+
 :deep(.switchGrid) {
   align-items: center;
   display: grid;