Rebrand

app/components/app-bar.vue

@@ -3,11 +3,17 @@ const { user, clear } = useUserSession();
 </script>
 
 <template>
-  <div class="w-full h-16 bg-black text-white flex">
+  <div class="w-full h-16 border-b-4 border-b-orange-500 flex">
     <UContainer class="max-w-2xl flex justify-between items-center">
-      <div class="font-bold text-xl">Joyful</div>
+      <div class="flex gap-3 items-center">
+        <NuxtImg src="/strivify.png" width="36" height="36" />
+        <div class="font-bold text-xl">Strivify</div>
+      </div>
       <UDropdownMenu :items="[{ label: 'Log out', onSelect: () => clear() }]">
-        <UAvatar :src="user!.avatar" />
+        <UAvatar
+          :src="user!.avatar"
+          class="border border-gray-200 cursor-pointer"
+        />
       </UDropdownMenu>
     </UContainer>
   </div>

app/components/app-footer.vue

@@ -4,8 +4,9 @@
   >
     <div class="text-center">
       Built with 💪 in Athens, Greece 🇬🇷 by Marios Antonoudiou.
-      <ULink class="underline">Send feedback</ULink> or
-      <ULink class="underline">buy me a coffee</ULink>.
+      <ULink class="underline" href="mailto:mariosant@sent.com"
+        >Send feedback</ULink
+      >.
     </div>
     <NuxtImg src="/images/powered-by-strava.svg" width="80px" />
   </UContainer>

app/components/register.vue

@@ -5,23 +5,23 @@ const { openInPopup } = useUserSession();
 </script>
 
 <template>
-  <UContainer class="flex justify-center w-full p-16">
-    <UCard class="w-md">
+  <UContainer
+    class="flex flex-col items-center gap-4 justify-center w-full p-16"
+  >
+    <NuxtImg src="/strivify.png" width="64" height="64" />
+    <UCard class="max-w-sm">
       <div class="flex flex-col gap-4 items-center justify-center text-center">
         <UIcon name="heroicons:user" class="size-16" />
-        <div class="font-bold text-xl">Joyful</div>
         <div>
-          Welcome to Joyful. Use the button below to sign in with your Strava
+          Welcome to Strivify. Use the button below to sign in with your Strava
           account.
         </div>
-        <div>
-          <div
-            aria-role="button"
-            @click="openInPopup('/auth/strava')"
-            class="cursor-pointer"
-          >
-            <NuxtImg src="/images/connect-with-strava.svg" />
-          </div>
+        <div
+          aria-role="button"
+          @click="openInPopup('/auth/strava')"
+          class="cursor-pointer"
+        >
+          <NuxtImg src="/images/connect-with-strava.svg" />
         </div>
       </div>
     </UCard>

app/pages/index.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { isEqual } from "radash";
-
 const { user } = useUserSession();
 
-const toast = useToast();
-
 const stravaLink = computed(() => {
   return `https://www.strava.com/athletes/${toValue(user).id}`;
 });
@@ -19,7 +15,7 @@ const preferences = useState<FormData>("preferences", () => ({
   language: "English",
 }));
 
-const { data: preferencesData, status } = useLazyFetch("/api/preferences", {
+const { status, refresh } = useFetch("/api/preferences", {
   onResponse({ error, response }) {
     if (error) {
       return;
@@ -29,29 +25,28 @@ const { data: preferencesData, status } = useLazyFetch("/api/preferences", {
   },
 });
 
-const onSavePreferences = async () => {
-  await $fetch("/api/preferences", {
-    method: "PUT",
-    body: toValue(preferences),
-  });
+onMounted(() => {
+  saveOp.resume();
+});
 
-  toast.add({
-    title: "Saved",
-    description: "Preferences saved succesfully!",
-  });
-};
-
-const onResetPreferences = () => {
-  preferences.value = { ...preferencesData.value };
-};
+const saveOp = watchPausable(
+  preferences,
+  async () => {
+    await $fetch("/api/preferences", {
+      method: "PUT",
+      body: toValue(preferences),
+    });
+  },
+  { initialState: "paused", deep: true },
+);
 </script>
 
 <template>
   <UContainer class="max-w-2xl py-8 flex flex-col gap-4">
-    <div class="font-bold text-lg">Welcome to Joyful!</div>
+    <div class="font-bold text-lg">Welcome to Strivify!</div>
 
     <div>
-      Joyful automatically generates fun and engaging titles and descriptions
+      Strivify automatically generates fun and engaging titles and descriptions
       for your Strava activities, right when they are created. Customize your
       preferences below.
     </div>
@@ -92,17 +87,6 @@ const onResetPreferences = () => {
           </template>
         </CardField>
       </div>
-
-      <template #footer>
-        <div class="flex gap-4">
-          <UButton class="px-4" @click="onSavePreferences"
-            >Save preferences</UButton
-          >
-          <UButton variant="ghost" color="neutral" @click="onResetPreferences"
-            >Cancel</UButton
-          >
-        </div>
-      </template>
     </UCard>
   </UContainer>