Text align center banner info box

Mara-Li · Sep 15, 2023 · 99213c2 · 99213c2
1 parent a054e2f
commit 99213c2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/src/banner/Error.svelte b/src/banner/Error.svelte
@@ -13,19 +13,11 @@
 </div>
 
 <style lang="scss">
+  @import './mixins.scss';
+
   .error {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    padding: 16px;
-    border: 4px solid var(--background-modifier-error);
-    margin: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    @include banner-info-box;
+    border-color: var(--background-modifier-error);
     color: var(--text-error);
   }
 </style>
diff --git a/src/banner/Loading.svelte b/src/banner/Loading.svelte
@@ -1,18 +1,9 @@
 <div class="loading">Loading...</div>
 
 <style lang="scss">
+  @import './mixins.scss';
+
   .loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    padding: 16px;
-    border: 4px solid var(--background-modifier-border);
-    margin: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--text-faint);
+    @include banner-info-box;
   }
 </style>
diff --git a/src/banner/mixins.scss b/src/banner/mixins.scss
@@ -0,0 +1,16 @@
+@mixin banner-info-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 16px;
+  border: 4px solid var(--background-modifier-border);
+  margin: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-faint);
+  text-align: center;
+}