Lookmaxing

nginx/vue/src/components/util/Chat.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
+import Header from "@/components/text/Header.vue";
 
 const messagesStore = useMessagesStore();
 const messages = computed(() => messagesStore.messages);
@@ -24,6 +25,7 @@ onUnmounted(() => {
 
 <template>
     <div class="flex flex-col">
+        <Header>Chat</Header>
         <div class="flex flex-col flex-1 overflow-x-scroll">
             <p v-for="message in messages" :key="message.id">
                 {{ message.text }}

nginx/vue/src/components/util/CommitHistory.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from "axios";
 import { ref, onMounted } from "vue";
+import Header from "@/components/text/Header.vue";
 
 const url =
     "https://www.adam-french.co.uk/gitea/api/v1/users/adamf/activities/feeds?limit=1";
@@ -28,6 +29,8 @@ onMounted(() => {
 
 <template>
     <div class="justify-center text-center">
+        <Header class="text-left">Commits</Header>
+
         <div v-if="isLoading">
             <p>Loading latest activity...</p>
         </div>

nginx/vue/src/components/util/Radio.vue

@@ -1,11 +1,13 @@
 <template>
     <div v-if="streamLive">
+        <Header>Radio</Header>
         <img src="/img/tmpen31z3pe.PNG" />
         <audio controls :src="streamUrl" ref="audio"></audio>
     </div>
     <div v-else>
+        <Header>Radio</Header>
         <img src="/img/tmpen31z3pe.PNG" />
-        <div class="m-1">
+        <div class="m-1 text-center">
             <p>Radio is offline. Message for info!</p>
             <Button class="w-full" @click="checkStream()">Check Stream</Button>
         </div>
@@ -14,6 +16,7 @@
 
 <script setup>
 import Button from "@/components/input/Button.vue";
+import Header from "@/components/text/Header.vue";
 import { ref, onMounted } from "vue";
 import axios from "axios";
 

nginx/vue/src/components/util/Time.vue

@@ -24,8 +24,8 @@ setInterval(updateDateTime, 60000);
 </script>
 
 <template>
-    <div class="items-center flex flex-col">
+    <div class="flex flex-col">
+        <Header>{{ weekday }} {{ day }}, {{ month }}</Header>
         <h1>{{ time }}</h1>
-        <h1>{{ weekday }} {{ day }}, {{ month }}</h1>
     </div>
 </template>

nginx/vue/src/components/util/Timer.vue

@@ -1,5 +1,7 @@
 <script setup>
 import Button from "@/components/input/Button.vue";
+import Header from "@/components/text/Header.vue";
+
 import { ref } from "vue";
 
 const timer = ref(null);
@@ -64,7 +66,7 @@ function playFinishedSound() {
 
 <template>
     <div class="flex flex-col gap-1 p-1 items-center">
-        <h2 class="items-center">Timer</h2>
+        <Header>Timer</Header>
         <div v-if="finished && paused" class="flex flex-col">
             <div class="flex flex-row p-2 place-content-around">
                 <input

nginx/vue/src/views/home/Home.vue

@@ -25,10 +25,14 @@ import Consumption from "./Consumption.vue";
     <main class="halftone justify-center flex flex-row w-full h-full">
         <div class="h-fit flex flex-row">
             <div
-                class="sidebar border-children background-children place-content-between flex-1 flex flex-col m-10 w-60"
+                class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between"
             >
-                <Miku />
-                <Chat />
+                <div class="border-children background-children">
+                    <Chat class="h-80" />
+                </div>
+                <div>
+                    <Miku class="border-tertiary border bg-bg_secondary" />
+                </div>
             </div>
             <div
                 class="a4page-portrait homeGrid relative background-children border-children bdr-1"
@@ -51,10 +55,10 @@ import Consumption from "./Consumption.vue";
                 <div
                     class="flex flex-col background-children border-children flex-1 gap-2"
                 >
-                    <Time class="text-center" />
+                    <Time />
                     <Timer />
-                    <Radio class="text-center" />
-                    <CommitHistory class="text-center" />
+                    <Radio />
+                    <CommitHistory />
 
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <MusicPlayer /> -->