Add styling

src/App.vue

@@ -17,4 +17,8 @@ const { signOut, loginName } = useCurrentUser();
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#app h1 {
+  font-weight: 700;
+  font-size: x-large;
+}
 </style>

src/components/IconButton.vue

 <template>
-  <button><font-awesome-icon class="hover:scale-125 icon" size="lg" :icon="icon" /><slot /></button>
+  <button><font-awesome-icon class="hover:scale-125 icon" size="lg" :icon="icon" color="#172A53" /><slot /></button>
 </template>
 
 <script setup lang="ts">

src/components/Navbar.vue

 <template>
-  <nav class="flex flex-row bg-slate-900 justify-between text-white items-center space-x-6 py-2 px-6">
+  <nav class="flex flex-row bg-slate-900 justify-between text-white items-center space-x-6 px-6">
     <template v-if="loginName">
-      <div class="flex-grow ">
+      <div class="flex-grow py-2 ">
         <router-link to="/movies"> <img :src="logo" width="64" /></router-link>
       </div>
       <div class="flex flex-row space-x-2 items-center">

src/components/Table.vue

 <template>
-  <table>
-    <TableHead :isWishlist="isWishlist" />
-    <tbody v-for="row in data">
-      <TableRow
-        :rowData="row"
-        :key="row.id"
-        :adminIcon="isWishlist ? 'heart-broken' : 'heart'"
-        :adminFunc="adminFunc"
-      />
-    </tbody>
+  <table class="border-separate text-center mx-auto min-w-[75%]">
+    <TableHead class="bg-slate-500 text-slate-200 text-lg h-8" :isWishlist="isWishlist" />
+    <template v-if="loading">
+      <tbody>
+        <TableRowSkeleton v-for="_ in 50" />
+      </tbody>
+    </template>
+    <template v-else>
+      <tbody v-for="row in data">
+        <TableRow
+          class="bg-slate-100 rounded-md"
+          :rowData="row"
+          :key="row.id"
+          :adminIcon="isWishlist ? 'heart-broken' : 'heart'"
+          :adminFunc="adminFunc"
+        />
+      </tbody>
+    </template>
   </table>
 </template>
 <script setup lang="ts">
@@ -16,13 +24,20 @@ import { toRefs } from "vue";
 import { IMovie } from "../types";
 import TableHead from "./TableHead.vue";
 import TableRow from "./TableRow.vue";
+import TableRowSkeleton from "./TableRowSkeleton.vue";
 
 interface ITableProps {
   isWishlist: boolean;
   data: IMovie[];
   adminFunc(id: number): void;
+  loading: boolean;
 }
 
 const props = defineProps<ITableProps>();
-const { data, adminFunc, isWishlist } = toRefs(props);
+const { data, adminFunc, isWishlist, loading } = toRefs(props);
 </script>
+<style>
+table {
+  border-spacing: 0em 0.5em;
+}
+</style>

src/components/TableRowSkeleton.vue

+<template>
+  <tr class="bg-gray-300 loading h-8 rounded-md">
+    <td class="first:rounded-l-md last:rounded-r-md border-0" v-for="_ in 4"/>
+  </tr>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+@keyframes loading {
+  40% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+.loading {
+  position: relative;
+}
+.loading:after {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  left: 0;
+  content: "";
+  display: block;
+  width: 100%;
+  height:100%;
+  background-image: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  background-size: 50% 100%;
+  background-position: -100px 0;
+  background-repeat: no-repeat;
+  animation: loading 1.2s infinite;
+}
+</style>

src/components/TableView.vue

+<template>
+  <div class="flex flex-col text-center justify-center mx-8 space-y-2">
+    <h1 class="mt-2">{{ title }}</h1>
+    <slot />
+  </div>
+  <footer class="h-8"/>
+</template>
+<script setup lang="ts">
+import { toRefs } from "vue";
+
+interface ITableViewProps {
+  title: string;
+}
+
+const props = defineProps<ITableViewProps>();
+
+const { title } = toRefs(props);
+</script>

src/views/Dashboard.vue

 <template>
-  <h1>Movies Room</h1>
-  <div>
+  <div class="flex flex-col items-center my-28 space-y-4">
+    <h1>Movies Room</h1>
     <img :src="logo" width="256" />
-    <button @click="signIn">Sign in with Google</button>
+    <Button @click="signIn">Sign in with Google</Button>
   </div>
 </template>
 
@@ -11,31 +11,18 @@ import { GoogleAuthProvider } from "firebase/auth";
 import { getAuth, signInWithPopup } from "firebase/auth";
 import { useRouter } from "vue-router";
 import logo from "../assets/logo_512x512.png";
+import Button from "../components/Button.vue";
 
 const provider = new GoogleAuthProvider();
 const auth = getAuth();
 const router = useRouter();
 const signIn = () =>
   signInWithPopup(auth, provider)
-    .then((result) => {
-      // This gives you a Google Access Token. You can use it to access the Google API.
-      const credential = GoogleAuthProvider.credentialFromResult(result);
-      const token = credential?.accessToken;
-      // The signed-in user info.
-      const user = result.user;
-      console.log(user);
+    .then((_) => {
       router.push("/movies");
-      // ...
     })
     .catch((error) => {
-      // Handle Errors here.
-      const errorCode = error.code;
-      const errorMessage = error.message;
-      // The email of the user's account used.
-      const email = error.email;
-      // The AuthCredential type that was used.
-      const credential = GoogleAuthProvider.credentialFromError(error);
-      // ...
+      console.log(error);
     });
 </script>
 

src/views/Movies.vue

 <template>
-  <h1>Movies</h1>
-  <input type="search" v-model="searchQuery" />
-  <div>
-    <div v-if="loading">
-      <h3>Loading...</h3>
-      <font-awesome-icon icon="spinner" spin />
+  <TableView title="Movies">
+    <input
+      type="search"
+      placeholder="Title, year or genre"
+      v-model="searchQuery"
+      class="mb-4 w-1/2 self-center"
+    />
+    <div>
+      <Table :data="filteredMovies" :loading="loading" :adminFunc="addWish" :isWishlist="false" />
+      <Button v-if="hasMore" class="mx-auto " @click="loadMore">Load more</Button>
     </div>
-    <template v-else>
-      <Table :data="filteredMovies" :adminFunc="addWish" :isWishlist="false" />
-      <Button v-if="hasMore" class="mx-auto mb-8" @click="loadMore">Load more</Button>
-    </template>
-  </div>
+  </TableView>
 </template>
 
 <script setup lang="ts">
 import { useWishlistMovies, useMovies, useWishlist, useMatchedMovies } from "../hooks";
 import Table from "../components/Table.vue";
 import Button from "../components/Button.vue";
+import TableView from "../components/TableView.vue";
 
 const { movies, loading } = useMovies();
 const { wishlist, addWish } = useWishlist();
@@ -27,19 +28,7 @@ const {
   hasMore,
   moviesMatchingSearchQuery: filteredMovies,
 } = useMatchedMovies(wishlistFilteredMovies);
-
 </script>
 
 <style>
-div {
-  display: flex;
-  flex-direction: column;
-}
-table,
-th,
-td {
-  border: 1px solid black;
-  padding: 16px;
-  margin: 16px;
-}
 </style>

src/views/Wishlist.vue

 <template>
-  <h1>Wishlist</h1>
-  <div v-if="loading" >
-      <h3>Loading...</h3>
-      <font-awesome-icon icon="spinner" spin />
-  </div>
-  <div v-else-if="isEmpty">
-    <h3>No movies in wishlist</h3>
-    <Button @click="redirect">Add new movies</Button>
-  </div>
-  <div v-else>
-    <Table :data="filteredMovies" :adminFunc="deleteWish" isWishlist />
-  </div>
+  <TableView title="Wishlist">
+    <Table
+      v-if="!isEmpty"
+      :loading="loading"
+      :data="filteredMovies"
+      :adminFunc="deleteWish"
+      isWishlist
+    />
+    <div v-else>
+      <h3>No movies in wishlist</h3>
+      <Button @click="redirect">Add new movies</Button>
+    </div>
+  </TableView>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { useWishlistMovies, useMovies, useWishlist } from "../hooks";
 import Button from "../components/Button.vue";
 import Table from "../components/Table.vue";
+import TableView from "../components/TableView.vue";
 
 const { movies, loading } = useMovies();
 const { wishlist, deleteWish, isEmpty } = useWishlist();