Miscellaneous improvements to settings page styling (#4235)

* Miscellaneous improvements to settings page styling

* remove superfluous flex box

* Leave buttons as primary color

* PR suggestions

src/renderer/components/data-settings/data-settings.vue

@@ -2,26 +2,23 @@
   <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.Manage Subscriptions')"
+        @click="openProfileSettings"
+      />
       <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"
-      />
-      <ft-button
-        :label="$t('Settings.Data Settings.Export History')"
-        @click="exportHistory"
-      />
-    </ft-flex-box>
     <ft-flex-box>
       <p>
         <a href="https://docs.freetubeapp.io/usage/importing-subscriptions/">
@@ -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"

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;

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);

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;