Added logbox

tubio-frontend-nuxt-app/components/DownloadEntry.vue

@@ -4,9 +4,16 @@
         <div class="flex flex-col">
 
             <div class="flex items-end justify-between w-full md:w-auto">
+
+              <div class="flex flex-col">
+                <div class="icon--mode">
+                  <IconFilm v-if="false" />
+                  <IconMusic v-else />
+                </div>
                 <div class="timestamp">
                     20.09.2020
                 </div>
+              </div>
 
                 <div class="button-remove">
                     <IconX />
@@ -86,12 +93,20 @@
 <script>
 import IconDownload from "~/components/Icons/download.vue";
 import IconX from "~/components/Icons/x.vue";
+import IconFilm from "~/components/Icons/film.vue";
+import IconMusic from "~/components/Icons/music-note.vue";
 
 export default {
     components: {
         IconDownload,
-        IconX
+        IconX,
-    }
+        IconFilm,
+        IconMusic
+    },
+    
+    props: {
+        downloadEntry: {type: Object},
+    },
 }
 </script>
 
@@ -262,5 +277,9 @@ export default {
   & *::-webkit-scrollbar {
     display: none;
   }
+
+  & .icon--mode {
+    width: 20px;
+  }
 }
 </style>

tubio-frontend-nuxt-app/components/Icons/film.vue

@@ -0,0 +1,5 @@
+<template>
+<svg viewBox="0 0 16 16" class="bi bi-film" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0h8v6H4V1zm8 8H4v6h8V9zM1 1h2v2H1V1zm2 3H1v2h2V4zM1 7h2v2H1V7zm2 3H1v2h2v-2zm-2 3h2v2H1v-2zM15 1h-2v2h2V1zm-2 3h2v2h-2V4zm2 3h-2v2h2V7zm-2 3h2v2h-2v-2zm2 3h-2v2h2v-2z"/>
+</svg>
+</template>

tubio-frontend-nuxt-app/components/Icons/music-note.vue

@@ -0,0 +1,7 @@
+<template>
+<svg viewBox="0 0 16 16" class="bi bi-music-note-beamed" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
+  <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
+  <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
+</svg>
+</template>

tubio-frontend-nuxt-app/components/LogBox.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="log-box">
+        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry mode="warn" message="Hello, lol :3" />
+        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry mode="error" message="Hello, lol :3" />
+        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry mode="normal" message="Hello, lol :3" />
+    </div>
+</template>
+
+<script>
+import LogEntry from "~/components/LogEntry";
+
+export default {
+    components: {
+      LogEntry,
+  }
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.log-box {
+  width: 100%;
+  height: 600px;
+  border-radius: 5px;
+  padding: 20px;
+  background-color: #fff5;
+  overflow-y: scroll;
+}
+</style>

tubio-frontend-nuxt-app/components/LogEntry.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+
+        <p :class="mode">
+            {{message}}
+        </p>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        mode: {type: String, default: "normal"},
+        message: {type: String}
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.warn {
+  color: theme("colors.text-gray-1");
+  background-color: #fc04;
+  font-size: 14pt;
+}
+
+.error {
+  color: theme("colors.text-gray-1");
+  background-color: #d404;
+  font-size: 14pt;
+}
+
+.normal {
+  color: theme("colors.text-gray-1");
+  font-size: 14pt;
+}
+</style>

tubio-frontend-nuxt-app/pages/settings.vue

@@ -85,7 +85,8 @@
         <hr class="mt-6 lg:mt-2" />
 
         <div class="pt-6">
-            <h2>Logs</h2>
+            <h2 class="mb-4">Logs</h2>
+            <LogBox />
         </div>
 
       </div>
@@ -94,12 +95,14 @@
 
 <script>
 import Toggle from "~/components/Toggle.vue";
+import LogBox from "~/components/LogBox.vue";
 import Spacer from "~/components/Spacer.vue";
 
 
 export default {
   components: {
       Toggle,
+      LogBox,
       Spacer
   }
 };

tubio-frontend-nuxt-app/tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
 
       'text-gray-1': '#bbb',
       'text-gray-2': '#fff',
+      'text-warn-1': '#fc0',
       'text-error-1': '#d40'
     },