From 9e30045e6f60da011d7f45260dc525303d814ac6 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 23 Sep 2023 13:16:40 -0700
Subject: [PATCH] fix: Improves UI with padding and color improvements

---
 assets/components/SideMenu.vue  | 9 ++++++---
 assets/components/SidePanel.vue | 4 ++--
 assets/pages/index.vue          | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index fdeede63..1eacfed0 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="ready" data-testid="side-menu">
-    <div class="breadcrumbs text-sm">
+    <div class="breadcrumbs">
       <ul>
-        <li><a @click.prevent="setHost(null)">Hosts</a></li>
-        <li v-if="sessionHost && hosts[sessionHost]">
+        <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
+        <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
           {{ hosts[sessionHost].name }}
         </li>
       </ul>
@@ -141,6 +141,9 @@ const activeContainersById = computed(() =>
 );
 </script>
 <style scoped lang="postcss">
+.menu {
+  @apply text-[0.95em];
+}
 .containers a {
   @apply auto-cols-[auto_max-content];
   .pin {
diff --git a/assets/components/SidePanel.vue b/assets/components/SidePanel.vue
index c0968346..5a0d0224 100644
--- a/assets/components/SidePanel.vue
+++ b/assets/components/SidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside class="fixed h-screen w-[inherit] overflow-auto p-4" data-testid="navigation">
+  <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
     <h1>
       <router-link :to="{ name: 'index' }">
         <svg class="h-14 w-28 fill-secondary">
@@ -12,7 +12,7 @@
       </small>
     </h1>
 
-    <div class="mt-4 flex gap-4">
+    <div class="flex gap-4">
       <router-link
         :to="{ name: 'settings' }"
         :aria-label="$t('title.settings')"
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 785c25d0..d7e6a029 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-16 px-8 pt-8">
+  <div class="flex flex-col gap-16 px-4 pt-8 md:px-8">
     <section>
       <div class="stats grid bg-base-lighter shadow">
         <div class="stat">