better layouting for import-export, error display fixes

src/components/export_import/export_import.vue

@@ -1,8 +1,11 @@
 <template>
-<div class="import-export">
+<div class="import-export-container">
+  <slot name="before"/>
   <button class="btn" @click="exportData">{{ exportLabel }}</button>
   <button class="btn" @click="importData">{{ importLabel }}</button>
-  <p v-if="importFailed" class="import-warning">{{ importFailedText }}</p>
+  <slot name="afterButtons"/>
+  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+  <slot name="afterError"/>
 </div>
 </template>
 
@@ -73,3 +76,12 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>

src/components/style_switcher/style_switcher.vue

@@ -2,6 +2,14 @@
 <div class="style-switcher">
   <div class="presets-container">
     <div class="save-load">
+      <export-import
+        :exportObject='exportedTheme'
+        :exportLabel='$t("settings.export_theme")'
+        :importLabel='$t("settings.import_theme")'
+        :importFailedText='$t("settings.invalid_theme_imported")'
+        :onImport='onImport'
+        :validator='importValidator'>
+        <template slot="before">
           <div class="presets">
             {{$t('settings.presets')}}
             <label for="preset-switcher" class='select'>
@@ -18,14 +26,8 @@
               <i class="icon-down-open"/>
             </label>
           </div>
-      <export-import
+        </template>
-        :exportObject='exportedTheme'
+      </export-import>
-        :exportLabel='$t("settings.export_theme")'
-        :importLabel='$t("settings.import_theme")'
-        :importFailedText='$t("settings.invalid_theme_imported")'
-        :onImport='onImport'
-        :validator='importValidator'
-        />
     </div>
     <div class="save-load-options">
       <span class="keep-option">