fix: add icons

threefoldtech · Aug 11, 2024 · eea09b0 · eea09b0
1 parent d6781e6
commit eea09b0
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "axios": "^1.7.3",
+    "mdi": "^2.2.43",
     "vue": "^3.4.31",
     "vue-router": "^4.4.2",
     "vue3-toastify": "^0.2.2",

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
@@ -36,42 +36,30 @@
             v-for="userName in userNameList"
             :key="userName"
             @click="username = userName"
-          ><v-list-item-title>
+          > <template v-slot:prepend>
+                <v-icon icon="mdi-account"></v-icon>
+            </template>
+          <v-list-item-title>
             {{ userName }}
           </v-list-item-title>
           </v-list-item>
         </v-list>
       </v-navigation-drawer>
       <v-container
-        class="elevation-2 d-flex w-75"
+        class=" d-flex flex-column w-75"
         fluid
         style="height: fit-content"
       >
+      <h2 class="mb-2" v-if="username.length != 0"><v-icon icon="mdi-account"></v-icon>{{ username }}</h2>
         <!-- table containe flists -->
-        <v-data-table :items="filteredFlist" :headers="tableHeader" hover>
+        <v-data-table :items="filteredFlist" :headers="tableHeader" hover class="elevation-2">
           <template #item.last_modified="{value}">
             {{ new Date(value*1000).toString() }}
           </template>
           <template #item.path_uri="{value}">
             <a :href="value" download> Download</a>
           </template>
         </v-data-table>
-        <!-- <v-table class="elevation-1">
-              <thead>
-                <tr>
-                  <th class="text-left">Name</th>
-                  <th class="text-left">Last Modified</th>
-                  <th class="text-left">Path URI</th>
-                </tr>
-              </thead>
-              <tbody >
-                <tr v-for="item in filteredFlist">
-                  <td>{{ item.name }}</td>
-                  <td>{{ item.lastModified }}</td>
-                  <td>{{ item.pathUri }}</td>
-                </tr>
-              </tbody>
-            </v-table> -->
       </v-container>
     </v-main>
     <Footer></Footer>

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -8,7 +8,9 @@
       <v-btn to="Login">Login</v-btn>
     </div>
     <div class="mr-5" v-else>
-      <v-btn to="Create">Create flist</v-btn>
+      <v-btn to="Create"
+        ><v-icon icon="mdi-plus-circle-outline" class="mr-2"></v-icon>Create flist</v-btn
+      >
       <v-btn to="Flists">View List</v-btn>
     </div>
   </v-app-bar>

diff --git a/frontend/src/components/UserFlist.vue b/frontend/src/components/UserFlist.vue
@@ -2,6 +2,11 @@
   <v-app>
     <Navbar />
     <v-main>
+      <div>
+        <h2 class="ml-5 mt-5">
+          <v-icon icon="mdi-account"></v-icon>{{ loggedInUser }}
+        </h2>
+      </div>
       <v-data-table
         v-if="loggedInUser"
         :items="currentUserFlists"