Frontend: Update log CSS and theme colors

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

frontend/src/css/app.css

@@ -67,21 +67,8 @@ main {
     cursor: pointer;
 }
 
-
-#photoprism .p-tab-logs {
-    max-width: 99%;
-    margin: 8px;
-    padding: 4px;
-}
-
 #photoprism .p-logs {
-    box-sizing: border-box;
-    width: auto;
-    margin: 0;
-    height: 100%;
-    padding: 10px;
     color: white;
-    overflow-y: auto;
 }
 
 #photoprism .p-log-message {
@@ -92,7 +79,7 @@ main {
     white-space: normal;
     color: white;
     font-weight: bold;
-    padding: 5px;
+    padding: 4px;
     margin: 0;
 }
 

frontend/src/pages/settings/logs.vue

@@ -1,10 +1,12 @@
 <template>
-    <v-container fill-height class="p-tab p-tab-logs terminal elevation-2">
-        <div class="p-logs">
-            <p v-for="(log, index) in logs" :key="index.id" class="p-log-message" :class="'p-log-' + log.level">
-                {{ log.time | luxon:format('yyyy-LL-dd hh:mm:ss') }} {{ level(log) }} <span>{{ log.msg }}</span>
-            </p>
-        </div>
+    <v-container fluid fill-height class="pa-0 ma-0 p-tab p-tab-logs">
+        <v-layout row wrap fill-height class="pa-0 ma-2">
+            <v-flex grow xs12 class="pa-2 terminal elevation-2 p-logs">
+                <p v-for="(log, index) in logs" :key="index.id" class="p-log-message" :class="'p-log-' + log.level">
+                    {{ log.time | luxon:format('yyyy-LL-dd hh:mm:ss') }} {{ level(log) }} <span>{{ log.msg }}</span>
+                </p>
+            </v-flex>
+        </v-layout>
     </v-container>
 </template>
 

frontend/src/resources/options.json

@@ -19,16 +19,16 @@
       "value": "raspberry"
     },
     {
-      "text": "Teal",
-      "value": "teal"
+      "text": "Seaweed",
+      "value": "seaweed"
     },
     {
-      "text": "Purple",
-      "value": "purple"
+      "text": "Lavender",
+      "value": "lavender"
     },
     {
-      "text": "Black",
-      "value": "black"
+      "text": "Night",
+      "value": "night"
     }
   ]
 }

frontend/src/resources/themes.json

@@ -47,9 +47,9 @@
     "navigation": "#616161",
     "navigation-home": "#000000"
   },
-  "teal": {
-    "primary": "#00897B",
-    "secondary-dark": "#00897B",
+  "seaweed": {
+    "primary": "#26A69A",
+    "secondary-dark": "#26A69A",
     "secondary": "#B0BEC5",
     "secondary-light": "#B0BEC5",
     "accent": "#B0BEC5",
@@ -63,9 +63,9 @@
     "navigation": "#37474F",
     "navigation-home": "#263238"
   },
-  "purple": {
-    "primary": "#5C6BC0",
-    "secondary-dark": "#5C6BC0",
+  "lavender": {
+    "primary": "#8C9EFF",
+    "secondary-dark": "#8C9EFF",
     "secondary": "#B0BEC5",
     "secondary-light": "#B0BEC5",
     "accent": "#B0BEC5",
@@ -79,7 +79,7 @@
     "navigation": "#37474F",
     "navigation-home": "#263238"
   },
-  "black": {
+  "night": {
     "primary": "#778899",
     "secondary-dark": "#000000",
     "secondary": "#757575",