tidy ui

liamcottle · Nov 19, 2024 · 1133e6c · 1133e6c
1 parent 631b011
commit 1133e6c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
@@ -2,7 +2,7 @@
     <div class="flex bg-white py-2 border-b h-16">
 
         <!-- back button -->
-        <div class="my-auto">
+        <div class="my-auto px-1">
             <IconButton @click="$router.back()" class="bg-transparent">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
@@ -22,7 +22,7 @@
         </div>
 
         <!-- optional: trailing -->
-        <div class="my-auto">
+        <div class="my-auto mr-2">
             <slot name="trailing"/>
         </div>
 

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
@@ -1,7 +1,7 @@
 <template>
-    <button type="button" class="bg-gray-100 m-1 p-2 rounded-full hover:bg-gray-200">
+    <div class="cursor-pointer p-2 rounded-full hover:bg-gray-200">
         <slot/>
-    </button>
+    </div>
 </template>
 
 <script>

diff --git a/src/components/nodes/NodeDropDownMenu.vue b/src/components/nodes/NodeDropDownMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <DropDownMenu>
         <template v-slot:button>
-            <IconButton v-if="node" class="mx-2 bg-transparent text-gray-700">
+            <IconButton v-if="node" class="bg-transparent text-gray-500">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                 </svg>

diff --git a/src/components/nodes/NodeListItem.vue b/src/components/nodes/NodeListItem.vue
@@ -53,15 +53,15 @@
         </div>
 
         <!-- favourite icon for other nodes -->
-        <div v-if="node.num !== GlobalState.myNodeId" class="my-auto">
+        <div v-if="node.num !== GlobalState.myNodeId" class="ml-2 my-auto">
             <IconButton @click.stop="toggleFavouriteNode(node)" class="bg-transparent">
                 <div v-if="node.isFavorite" class="text-yellow-500">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                         <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
                     </svg>
                 </div>
                 <div v-else class="text-gray-500">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
                     </svg>
                 </div>
@@ -122,7 +122,9 @@
         </div>
 
         <!-- node dropdown menu -->
-        <NodeDropDownMenu :node="node"/>
+        <div class="my-auto">
+            <NodeDropDownMenu :node="node"/>
+        </div>
 
     </div>
 </template>

diff --git a/src/components/nodes/NodesList.vue b/src/components/nodes/NodesList.vue
@@ -4,13 +4,13 @@
         <!-- search -->
         <div v-if="nodes.length > 0" class="flex bg-white border-b border-gray-300 divide-x">
             <div class="p-1 w-full">
-                <input v-model="nodesSearchTerm" type="text" :placeholder="`Search ${nodes.length} Nodes...`" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                <input v-model="nodesSearchTerm" type="text" :placeholder="`Search ${nodes.length} Nodes...`" class="h-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
             </div>
             <div class="flex text-gray-500">
                 <DropDownMenu class="mx-auto my-auto">
                     <template v-slot:button>
-                        <IconButton class="bg-transparent">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                        <IconButton class="mx-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                                 <path d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
                             </svg>
                         </IconButton>