layout fixes

src/components/contrast_ratio/contrast_ratio.vue

@@ -54,6 +54,9 @@ export default {
   display: flex;
   justify-content: flex-end;
 
+  margin-top: -4px;
+  margin-bottom: 5px;
+
   .label {
     margin-right: 1em;
   }

src/components/style_switcher/style_switcher.scss

@@ -59,6 +59,10 @@
     color: var(--cRed, $fallback--cRed);
   }
 
+  .tab-switcher {
+    margin: 0 -1em;
+  }
+
   .apply-container,
   .radius-container,
   .color-container,
@@ -75,10 +79,19 @@
   }
 
   .color-container{
+    > h4 {
+      width: 99%;
+    }
     flex-wrap: wrap;
     justify-content: space-between;
   }
 
+  .color-container,
+  .shadow-container,
+  .radius-container {
+    margin: 1em 1em 0;
+  }
+
   .presets-container,
   .shadow-selector {
     display: flex;
@@ -139,10 +152,6 @@
       display:flex;
       align-items: baseline;
     }
-
-    h4 {
-      margin-top: 1em;
-    }
   }
 
   .radius-item {

src/components/style_switcher/style_switcher.vue

@@ -48,9 +48,9 @@
   <p>{{$t('settings.theme_help')}}</p>
   <keep-alive>
     <tab-switcher key="style-tweak">
-      <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
+      <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
+        <h4>{{ $t('settings.style.common_colors.main') }}</h4>
         <div class="color-item">
-          <h4>{{ $t('settings.style.basic_colors.main') }}</h4>
           <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
           <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
           <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
@@ -59,21 +59,19 @@
           <ContrastRatio :contrast="previewContrast.bgLink"/>
         </div>
         <div class="color-item">
-          <h4>{{ $t('settings.style.basic_colors.foreground') }}</h4>
           <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
           <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
           <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
-          <p>{{ $t('settings.style.basic_colors.foreground_hint') }}</p>
+          <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
         </div>
+        <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
         <div class="color-item">
-          <h4>{{ $t('settings.style.basic_colors.rgbo') }}</h4>
           <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
           <ContrastRatio :contrast="previewContrast.bgRed"/>
           <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
           <ContrastRatio :contrast="previewContrast.bgBlue"/>
         </div>
         <div class="color-item">
-          <h4>.</h4>
           <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
           <ContrastRatio :contrast="previewContrast.bgGreen"/>
           <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>

src/i18n/en.json

@@ -179,9 +179,9 @@
           }
         }
       },
-      "basic_colors": {
+      "common_colors": {
-        "_tab_label": "Basic",
+        "_tab_label": "Common",
-        "main": "Basic colors",
+        "main": "Common colors",
         "foreground": "Panel header, top bar, buttons, text fields",
         "foreground_hint": "See \"Advanced\" tab for more detailed control",
         "rgbo": "Icons, accents, badges"