From a5fac743f22f16f20f7c6ee5d711037894da3057 Mon Sep 17 00:00:00 2001
From: Ilja <domainepublic@spectraltheorem.be>
Date: Sat, 28 Nov 2020 13:53:49 +0100
Subject: [PATCH] Add css

* I added an .scss file and moved the css from the vue file to there
* I added new css obviously
* the tables have a smal padding left
* the first column is 180px wide
  * This should be more than enough for an instance with 26 characters in it's name, which is already starting to get rare when I check my DB
---
 .../mrf_transparency_panel.scss                 | 16 ++++++++++++++++
 .../mrf_transparency_panel.vue                  | 17 ++++++++---------
 2 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 src/components/mrf_transparency_panel/mrf_transparency_panel.scss

diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
new file mode 100644
index 00000000..1ff3b476
--- /dev/null
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
@@ -0,0 +1,16 @@
+.mrf-section {
+  margin: 1em;
+
+  table {
+    width:100%;
+    text-align: left;
+    padding-left:10px;
+    padding-bottom:20px;
+    th {
+      width: 180px;
+    }
+    th+th {
+      width: auto;
+    }
+  }
+}
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index feed56b7..d4be388c 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -31,7 +31,7 @@
 
             <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -56,7 +56,7 @@
 
             <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -81,7 +81,7 @@
 
             <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -106,7 +106,7 @@
 
             <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -131,7 +131,7 @@
 
             <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -156,7 +156,7 @@
 
             <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
 
-            <table style="width:100%;text-align: left;">
+            <table>
               <tr>
                 <th>{{ $t("about.mrf.simple.instance") }}</th>
                 <th>{{ $t("about.mrf.simple.reason") }}</th>
@@ -227,7 +227,6 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-.mrf-section {
-  margin: 1em;
-}
+@import '../../_variables.scss';
+@import './mrf_transparency_panel.scss';
 </style>