Added styles for nav, categories and payees

src/Overmoney.Portal/.env

@@ -1 +1 @@
-VITE_API_URL="https://localhost:32768/"
+VITE_API_URL="https://localhost:32770/"

src/Overmoney.Portal/src/App.vue

@@ -1,19 +1,20 @@
 <template>
-  <NavigationMenu></NavigationMenu>
-  <main>
-    <router-view></router-view>
-  </main>
+  <div class="grid" style="grid-template-columns: minmax(150px, 12%) auto;">
+    <header class="nav-background">
+      <NavigationMenu></NavigationMenu>
+    </header>
+    <main class="container">
+      <router-view></router-view>
+    </main>
+  </div>
 </template>
 
 <script lang="ts">
 import NavigationMenu from './components/generic/NavigationMenu.vue';
 
 export default {
-  components:{
+  components: {
     NavigationMenu
   }
 };
-</script>
-
-<style scoped>
-</style>
+</script>

src/Overmoney.Portal/src/assets/main.css

@@ -1,35 +1,14 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+header.nav-background {
+    background-color: #23262C;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+button.delete {
+    background-color: #E74B1A;
+    border-color: #E74B1A
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+nav.top {
+    border-style: solid;
+    padding: .2rem 1.5rem .3rem .5rem;
+    border-width: 0px 0px 2px 0px;
 }

src/Overmoney.Portal/src/components/generic/NavigationMenu.vue

@@ -1,14 +1,18 @@
 <template>
-    <nav v-if="session.isAuthenticated">
-        <router-link to="/">Dashobards</router-link> |
-        <router-link to="/wallets">Wallets</router-link> |
-        <router-link to="/payees">Payees</router-link> |
-        <router-link to="/categories">Categories</router-link> |
-        <router-link to="/transactions">Transactions</router-link> |
-        <!-- <a v-for="wallet in wallets" :key="wallet.id" href="#">{{ wallet.name }}</a> | -->
-        <router-link to="/settings">Settings</router-link> |
-        <a href="#" @click.prevent="logout">Log out</a> |
-    </nav>
+    <aside v-if="session.isAuthenticated">
+        <nav>
+            <ul>
+                <li><router-link to="/" class="contrast">Dashobards</router-link></li>
+                <li><router-link to="/wallets" class="contrast">Wallets</router-link></li>
+                <li><router-link to="/payees" class="contrast">Payees</router-link></li>
+                <li><router-link to="/categories" class="contrast">Categories</router-link></li>
+                <li><router-link to="/transactions" class="contrast">Transactions</router-link></li>
+                <li><router-link to="/settings" class="contrast">Settings</router-link></li>
+                <li><a href="#" @click.prevent="logout" class="contrast">Log out</a></li>
+            </ul>
+            <!-- <a v-for="wallet in wallets" :key="wallet.id" href="#">{{ wallet.name }}</a> | -->
+        </nav>
+    </aside>
 </template>
 
 <script lang="ts">
@@ -35,5 +39,9 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style scoped>
+nav {
+    margin: 0 0 0 5px ;
+    padding: 2px;
+};
+</style>

src/Overmoney.Portal/src/components/lists/CategoryList.vue

@@ -1,20 +1,22 @@
 <template>
-    <table>
-        <tr>
+    <table class="striped">
+        <thead>
             <th>Id</th>
             <th>Name</th>
             <th>Actions</th>
-        </tr>
+        </thead>
         <tr v-for="category in categories" :key="category.id">
             <td>{{ category.id }}</td>
             <td>{{ category.name }}</td>
             <td>
-                <button @click="updateCategory(category.id)">
-                    Edit
-                </button>
-                <button @click="removeCategory(category.id)">
-                    Delete
-                </button>
+                <div class="grid">
+                    <button @click="updateCategory(category.id)">
+                        Edit
+                    </button>
+                    <button class="delete" @click="removeCategory(category.id)">
+                        Delete
+                    </button>
+                </div>
             </td>
         </tr>
     </table>
@@ -36,12 +38,4 @@ export default {
         }
     }
 }
-</script>
-
-<style scoped>
-table,
-th,
-td {
-    border: 1px solid pink
-}
-</style>
+</script>

src/Overmoney.Portal/src/components/lists/PayeesList.vue

@@ -1,20 +1,22 @@
 <template>
-    <table>
-        <tr>
+    <table class="striped">
+        <thead>
             <th>Id</th>
             <th>Name</th>
             <th>Actions</th>
-        </tr>
+        </thead>
         <tr v-for="payee in payees" :key="payee.id">
             <td>{{ payee.id }}</td>
             <td>{{ payee.name }}</td>
             <td>
-                <button @click="updatePayee(payee.id)">
-                    Edit
-                </button>
-                <button @click="removePayee(payee.id)">
-                    Delete
-                </button>
+                <div class="grid">
+                    <button @click="updatePayee(payee.id)">
+                        Edit
+                    </button>
+                    <button class="delete" @click="removePayee(payee.id)">
+                        Delete
+                    </button>
+                </div>
             </td>
         </tr>
     </table>
@@ -36,10 +38,4 @@ export default {
         }
     }
 }
-</script>
-
-<style scoped>
-table, th, td {
-    border: 1px solid pink
-}
-</style>
+</script>

src/Overmoney.Portal/src/components/modals/CreateCategoryModal.vue

@@ -1,22 +1,16 @@
 <template>
-    <transition>
-        <div v-if="show" class="modal-mask">
-            <div class="modal-container">
-                <div class="modal-header">
-                    <p name="header">Create Category</p>
-                </div>
-
-                <div class="modal-body">
-                    <form @submit.prevent="createCategory">
-                        <input type="text" v-model="categoryName"/>
-                        <button type="submit">Create</button>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                </div>
-            </div>
-        </div>
-    </transition>
+    <dialog :open="show">
+        <article>
+            <header>
+                <button aria-label="Close" rel="prev" @click="cancel"></button>
+                Create Category
+            </header>
+            <form @submit.prevent="createCategory">
+                <input type="text" v-model="categoryName" />
+                <button type="submit">Create</button>
+            </form>
+        </article>
+    </dialog>
 </template>
 
 <script lang="ts">
@@ -34,6 +28,9 @@ export default {
         async createCategory() {
             this.$emit('created', this.categoryName);
             this.categoryName = '';
+        },
+        cancel() {
+            this.$emit('cancel');
         }
     }
 }

src/Overmoney.Portal/src/components/modals/CreatePayeeModal.vue

@@ -1,22 +1,16 @@
 <template>
-    <transition>
-        <div v-if="show" class="modal-mask">
-            <div class="modal-container">
-                <div class="modal-header">
-                    <p name="header">Create Payee</p>
-                </div>
-
-                <div class="modal-body">
-                    <form @submit.prevent="createPayee">
-                        <input type="text" v-model="payeeName"/>
-                        <button type="submit">Create</button>
-                    </form>
-                </div>
-                <div class="modal-footer">
-                </div>
-            </div>
-        </div>
-    </transition>
+    <dialog :open="show">
+        <article>
+            <header>
+                <button aria-label="Close" rel="prev" @click="cancel"></button>
+                Create Payee
+            </header>
+            <form @submit.prevent="createPayee">
+                <input type="text" v-model="payeeName" />
+                <button type="submit">Create</button>
+            </form>
+        </article>
+    </dialog>
 </template>
 
 <script lang="ts">
@@ -34,6 +28,9 @@ export default {
         async createPayee() {
             this.$emit('created', this.payeeName);
             this.payeeName = '';
+        },
+        cancel() {
+            this.$emit('cancel');
         }
     }
 }