add logo and some other frontend changes

resources/js/App.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-    import Footer from "./components/Footer.vue";
-
     import type { NavigationMenuItem } from '@nuxt/ui'
-    import { computed } from 'vue'
-    import { useHead } from '@unhead/vue'
-import HowToPlay from "./components/HowToPlay.vue";
+    import HowToPlay from "./components/HowToPlay.vue";
+    import { useColorMode } from '@vueuse/core'
 
     const items: NavigationMenuItem[] = [{
         label: 'Git',
@@ -16,6 +13,8 @@ import HowToPlay from "./components/HowToPlay.vue";
         target: '_blank'
     }, 
     ]
+
+    const mode = useColorMode();
 </script>
 
 <template>
@@ -23,7 +22,8 @@ import HowToPlay from "./components/HowToPlay.vue";
     <UApp>
     <UHeader :toggle="false">
     <template #title>
-      TLAdle
+      <img v-if="mode == 'dark'" :src="'/logo_full_long_dark.svg'" class="h-6 w-auto">
+      <img v-else :src="'/logo_full_long_light.svg'" class="h-6 w-auto">
     </template>
 
 
@@ -31,15 +31,13 @@ import HowToPlay from "./components/HowToPlay.vue";
     <template #right>
 
       <HowToPlay/>
-       <UColorModeSwitch :size="xl"/>
+       <UColorModeSwitch />
     </template>
   </UHeader>
     <UMain class="main">
-        <NuxtLayout>
             <router-view v-slot="{ Component,route }">
                 <component :is="Component" />
             </router-view>
-        </NuxtLayout>
     </UMain> 
 
         <UFooter>

resources/js/components/GuessWord.vue

@@ -51,9 +51,9 @@ import { Transition } from 'vue';
         background-color: rgb(98, 175, 99);
     }
     .cf-cp {
-        background-color: rgb(0, 9, 166);
+        background-color: rgb(37, 43, 154);
     }
     .cf-ip {
-        background-color: rgb(96, 98, 160);
+        background-color: rgb(106, 108, 160);
     }
 </style>

resources/js/pages/HomeView.vue

@@ -114,10 +114,10 @@
         </UForm>
       </template>
       <template v-if="!correct && guesses.length >= maxGuesses">
-        You ran out of guesses. Todays TLA was {{ tla }}
+        You ran out of guesses. Todays TLA was <b>{{ tla }}</b>
       </template>
       <template v-if="correct">
-        You completed todays TLAdle! Todays TLA was {{ tla }}
+        You completed todays TLAdle! Todays TLA was <b>{{ tla }}</b>
       </template>
       <h3>Guesses left: {{ maxGuesses - guesses.length }}</h3>
 

resources/js/pages/SuggestionView.vue

@@ -1,18 +1,21 @@
 <template>
     <h1>TLA suggestion form</h1>
     <UCard>
-    <UForm>
+    <UForm class="space-y-4" style="text-align: left;"  action="/api/suggestion" method="post"> 
         <UFormField class="form-field" label="Acronym" required>
-            <UInput class="w-80" placeholder="Enter your TLA"></UInput>
+            <UInput class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
         </UFormField>
         <UFormField label="Motto" required>
             <UInput class="w-80" placeholder="Enter the motto for your TLA"></UInput>
         </UFormField>
         <UFormField label="Contex" required>
-            <UTextarea class="w-80" rows="5" placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
+            <UTextarea class="w-80" rows=5 placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
         </UFormField>
-        <UButton>
-            salkdjf
+        <UFormField>
+            <URadioGroup orientation="horizontal" variant="table" size="xs" default-value="en" :items="['en', 'hu']" />
+        </UFormField>
+        <UButton type="submit">
+            Submit suggestion
         </UButton>
     </UForm>
     </UCard>
@@ -20,5 +23,14 @@
 </template>
 
 <style>
-    
-</style>
+    .flex-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+</style>
+
+<script lang="ts">
+
+</script>

resources/views/vue.blade.php

@@ -7,10 +7,10 @@
     <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
 
     <!-- Light mode favicon -->
-    <link rel="icon" href="{{ asset('favicon-light.ico') }}" type="image/x-icon" media="(prefers-color-scheme: light)">
+    <link rel="icon" href="{{ asset('logo_full_tall_light.svg') }}" type="image/x-icon" media="(prefers-color-scheme: light)">
 
     <!-- Dark mode favicon -->
-    <link rel="icon" href="{{ asset('favicon-dark.ico') }}" type="image/x-icon" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="{{ asset('logo_full_tall_dark.svg') }}" type="image/x-icon" media="(prefers-color-scheme: dark)">
 
     <title>TLAdle</title>
     @vite(['resources/js/app.js'])