From 9ad75be1b3084a25bd1887cf316b840c3a1ca48b Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 16 Jul 2020 16:25:09 +0900
Subject: [PATCH] Fix the display of example formats

---
 .../documents/DocumentExportForm.vue          | 22 +++++++------------
 .../documents/DocumentUploadForm.vue          | 22 +++++++------------
 .../organisms/labels/LabelImportForm.vue      | 22 +++++++------------
 3 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/frontend/components/organisms/documents/DocumentExportForm.vue b/frontend/components/organisms/documents/DocumentExportForm.vue
index 7b814fd5..2e0f4a01 100644
--- a/frontend/components/organisms/documents/DocumentExportForm.vue
+++ b/frontend/components/organisms/documents/DocumentExportForm.vue
@@ -24,12 +24,16 @@
             :value="format"
           />
         </v-radio-group>
-        <code
+        <v-sheet
           v-if="selectedFormat"
-          class="mb-10 pa-5 highlight"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
         >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">{{ example }}</span>
-        </code>
+          <span v-for="(example, index) in selectedFormat.examples" :key="index">
+            {{ example }}<br>
+          </span>
+        </v-sheet>
       </v-form>
     </template>
   </base-card>
@@ -98,13 +102,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>
diff --git a/frontend/components/organisms/documents/DocumentUploadForm.vue b/frontend/components/organisms/documents/DocumentUploadForm.vue
index 3a218281..0c5fe56c 100644
--- a/frontend/components/organisms/documents/DocumentUploadForm.vue
+++ b/frontend/components/organisms/documents/DocumentUploadForm.vue
@@ -33,12 +33,16 @@
             :value="format"
           />
         </v-radio-group>
-        <code
+        <v-sheet
           v-if="selectedFormat"
-          class="mb-10 pa-5 highlight"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
         >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">{{ example }}</span>
-        </code>
+          <span v-for="(example, index) in selectedFormat.examples" :key="index">
+            {{ example }}<br>
+          </span>
+        </v-sheet>
         <h2>Select a file</h2>
         <v-file-input
           v-model="file"
@@ -121,13 +125,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>
diff --git a/frontend/components/organisms/labels/LabelImportForm.vue b/frontend/components/organisms/labels/LabelImportForm.vue
index c33dbbee..98017abe 100644
--- a/frontend/components/organisms/labels/LabelImportForm.vue
+++ b/frontend/components/organisms/labels/LabelImportForm.vue
@@ -22,9 +22,14 @@
           Please check available formats carefully.
         </v-alert>
         <h2>Example format</h2>
-        <code class="mb-10 pa-5 highlight">
-          <span>{{ exampleFormat }}</span>
-        </code>
+        <v-sheet
+          v-if="exampleFormat"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
+        >
+          <pre>{{ exampleFormat }}</pre>
+        </v-sheet>
         <h2>Select a file</h2>
         <v-file-input
           v-model="file"
@@ -77,7 +82,6 @@ export default {
           text_color: '#ffffff'
         }
       ]
-      console.log(JSON.stringify(data, null, 4))
       return JSON.stringify(data, null, 4)
     }
   },
@@ -110,13 +114,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .highlight {
-    font-size: 100%;
-    width: 100%;
-  }
-  .highlight:before {
-    content: ''
-  }
-</style>