Defining theme, more settings scaffolding, working on layout

webapp/src/components/NavigationDrawer.vue

@@ -1,6 +1,15 @@
 <template>
   <v-navigation-drawer app permanent width="200">
-    <v-btn color="primary" block> Upload </v-btn>
+    <v-container>
+      <v-img
+        class="align-sm-center child-flex"
+        src="../../assets/logo.png"
+        max-height="100"
+        max-width="100"
+        contain
+      />
+    </v-container>
+    <v-btn color="secondary" block> Upload </v-btn>
     <p class="text-overline">Dashboard</p>
     <v-list dense nav>
       <v-list-item

webapp/src/components/NowPlayingBar.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-app-bar app clipped-left height="125">
+  <v-app-bar height="125">
     <v-row class="app-bar">
-      <v-col class="col-1">
+      <!-- <v-col class="col-1">
         <v-container>
           <v-img
             class="align-sm-center child-flex"
@@ -11,7 +11,7 @@
             contain
           />
         </v-container>
-      </v-col>
+      </v-col> -->
       <v-col class="col-4">
         <div>
           <p class="body-2 ma-1"><b>Previous:</b> {{ npPrev }}</p>

webapp/src/components/RadioPage/RadioPlayer.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container>
+    <v-row dense>
+      <v-col cols="12">
+        <v-card color="#459b8fcc" theme="dark">
+          <div class="d-flex flex-no-wrap justify-space-between">
+            <div>
+              <v-card-title class="text-h5">
+                {{ nowPlayingInfo.track }}
+              </v-card-title>
+              <v-card-subtitle>{{ nowPlayingInfo.artist }}</v-card-subtitle>
+              <v-card-actions>
+                <v-btn class="ml-2" icon="mdi-play" variant="text"></v-btn>
+              </v-card-actions>
+            </div>
+
+            <v-avatar class="ma-3" size="125" rounded="0">
+              <v-img
+                src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
+              ></v-img>
+            </v-avatar>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "RadioPlayer",
+  setup() {
+    const nowPlayingInfo = {
+      track: "Burn",
+      artist: "Ellie Goulding",
+    };
+    return { nowPlayingInfo };
+  },
+});
+</script>

webapp/src/plugins/vuetify.ts

@@ -4,6 +4,23 @@ import "vuetify/styles";
 
 // Vuetify
 import { createVuetify } from "vuetify";
+import type { ThemeDefinition } from "vuetify";
 
-export default createVuetify();
+const customLibretimeTheme: ThemeDefinition = {
+  dark: "true",
+  colors: {
+    background: "#353535",
+    primary: "#ff5d1a",
+    secondary: "#459b8f",
+  },
+};
+
+export default createVuetify({
+  theme: {
+    defaultTheme: "customLibretimeTheme",
+    themes: {
+      customLibretimeTheme,
+    },
+  },
+});
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides

webapp/src/styles/_variables.scss

@@ -3,4 +3,4 @@
 $background: rgba(53, 53, 53, 0.9); // or #353535
 $light-grey: #aaaaaa;
 $libretime-orange: #ff5d1a;
-$libretime-cyan: rgba(69, 155, 143, 0.8);
+$libretime-cyan: #459b8fcc;

webapp/src/views/Dashboard.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <now-playing-bar />
-
     <navigation-drawer />
-
+    <now-playing-bar />
     <router-view />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import NavigationDrawer from "@/components/NavigationDrawer.vue";
-import NowPlayingBar from "@/components/NowPlayingBar.vue"
+import NowPlayingBar from "@/components/NowPlayingBar.vue";
 
 export default defineComponent({
   name: "DashboardView",

webapp/src/views/DashboardViews/Help.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import SubNav from "@/components/SubNav.vue"
+import SubNav from "@/components/SubNav.vue";
 
 export default defineComponent({
   name: "HelpView",

webapp/src/views/DashboardViews/SettingsViews/General.vue

@@ -3,6 +3,9 @@
     <v-row>
       <v-col>
         <p class="text-h6">General Settings</p>
+      </v-col>
+      <v-spacer></v-spacer>
+      <v-col>
         <v-btn color="grey" plain> Save </v-btn>
       </v-col>
     </v-row>

webapp/src/views/DashboardViews/SettingsViews/MyProfile.vue

@@ -3,16 +3,52 @@
     <v-row>
       <v-col>
         <p class="text-h6">My Profile</p>
+      </v-col>
+      <v-spacer></v-spacer>
+      <v-col>
         <v-btn color="grey" plain> Save </v-btn>
       </v-col>
     </v-row>
+    <v-row>
+      <v-col>
+        <v-form>
+          <v-text-field v-model="me.username" :label="`Username`" disabled />
+          <v-text-field
+            v-model="me.password"
+            :type="`password`"
+            :label="`Password`"
+          />
+          <v-text-field
+            v-model="me.verifyPassword"
+            :type="`password`"
+            :label="`Verify Password`"
+          />
+          <v-text-field v-model="me.firstName" :label="`First Name`" />
+          <v-text-field v-model="me.lastName" :label="`Last Name`" />
+          <v-text-field v-model="me.email" :label="`Email`" />
+          <v-text-field v-model="me.phone" :label="`Phone Number`" />
+        </v-form>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 
 export default defineComponent({
   name: "MyProfileView",
+  setup() {
+    const me = reactive({
+      username: "User",
+      password: "Password",
+      verifyPassword: "Password",
+      firstName: "Joe",
+      lastName: "Wise",
+      email: "you@me.com",
+      phone: "867-5309",
+    });
+    return { me };
+  },
 });
 </script>

webapp/src/views/DashboardViews/SettingsViews/Streams.vue

@@ -3,6 +3,9 @@
     <v-row>
       <v-col>
         <p class="text-h6">Stream Settings</p>
+      </v-col>
+      <v-spacer></v-spacer>
+      <v-col>
         <v-btn color="grey" plain> Save </v-btn>
       </v-col>
     </v-row>

webapp/src/views/DashboardViews/SettingsViews/Users.vue

@@ -4,6 +4,10 @@
       <v-col>
         <p class="text-h6">Users</p>
       </v-col>
+      <v-spacer></v-spacer>
+      <v-col>
+        <v-btn color="grey" plain> Save </v-btn>
+      </v-col>
     </v-row>
     <add-user />
   </v-container>

webapp/src/views/RadioPage.vue

@@ -1,9 +1,23 @@
 <template>
   <v-container fluid>
-    <v-parallax height="800" src="https://libretime.org/img/radio-unsplash.jpg">
-      <v-row justify="center" align="center">
-        <login-form />
-        <v-card class="mx-auto" max-width="344">
+    <v-sheet class="pa-5" color="grey lighten-3">
+      <v-row no-gutters>
+        <v-col></v-col>
+        <!-- For empty space -->
+        <v-spacer />
+        <v-col md="1">
+          <login-form />
+        </v-col>
+      </v-row>
+      <div></div>
+      <v-sheet
+        :elevation="6"
+        :rounded="true"
+        class="mx-auto"
+        height="350"
+        width="350"
+      >
+        <v-card class="mx-auto">
           <v-card-text>
             <p class="text-h4 station-name">Libretime FM</p>
             <v-btn color="grey" plain>libretime.org</v-btn>
@@ -12,19 +26,22 @@
             </div>
           </v-card-text>
         </v-card>
-      </v-row>
-    </v-parallax>
+      </v-sheet>
+      <radio-player />
+    </v-sheet>
   </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import LoginForm from "@/components/RadioPage/LoginForm.vue";
+import RadioPlayer from "@/components/RadioPage/RadioPlayer.vue";
 
 export default defineComponent({
   name: "RadioPage",
   components: {
     LoginForm,
+    RadioPlayer,
   },
 });
 </script>

webapp/vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vuetify from "@vuetify/vite-plugin";
 
-const path = require("path");
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({