💄 improve design

doroudi · Dec 15, 2024 · 1d9d712 · 1d9d712
1 parent 096e916
commit 1d9d712
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -42,8 +42,11 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']

diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -6,6 +6,7 @@ defineProps({
   title: { type: String, required: false },
 })
 const slots = useSlots()
+const layout = useLayoutStore()
 </script>
 
 <template>
@@ -16,7 +17,7 @@ const slots = useSlots()
     <div class="card-container my-1" :class="{ shadow }">
       <div
         class="card-content bg-white dark:bg-slate-900 rounded-md shadow-lg drop-shadow-md p-3 relative z-10"
-        :class="{ 'bottom-border': bottomBorder }" :style="color ? { 'border-color': color } : ''"
+        :class="{ 'bottom-border': bottomBorder }" :style="{ 'border-color': `${layout.themeColor}99` }"
       >
         <div v-if="slots.title">
           <slot name="title" />

diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 
 <template>
   <div class="p-2 dashboard-card w-full sm:w-1/2 md:w-1/4" v-bind="props">
-    <Card no-shadow bottom-border :color="color">
+    <Card no-shadow bottom-border>
       <div class="inner flex flex-col">
         <div class="head flex justify-between items-center">
           <slot />
@@ -56,7 +56,7 @@ onMounted(() => {
           </span>
         </div>
         <section>
-          <h3 ref="element" class="value">
+          <h3 ref="element" class="text-gray-700 dark:text-gray-200 value">
             {{ value }}
           </h3>
           <h4 class="title text-gray-800 dark:text-gray-200">

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -166,7 +166,7 @@ function renderIcon(icon: any, showBadge = false) {
     :native-scrollbar="false" collapse-mode="width" :collapsed-width="64" :collapsed="effectiveCollapsed"
     :class="{ collapsed: effectiveCollapsed }" @mouseenter="isHovered = true" @mouseleave="isHovered = false"
   >
-    <div class="logo-container">
+    <div class="logo-container mb-4">
       <div flex w-full justify-start items-center>
         <img src="@/assets/images/logo.png" alt="logo" class="logo">
         <h1 class="main-title">

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -23,7 +23,8 @@ body,
 }
 
 body {
-  background: url('~/assets/images/background.svg') no-repeat fixed;
+  // background: url('~/assets/images/background.svg') no-repeat fixed;
+  background-color: #EEE;
   background-size: cover;
 }
 
@@ -68,7 +69,8 @@ body {
 
 .dark {
   body {
-    background: url('~/assets/images/background.svg') no-repeat #283046;
+    background: #283046;
+    // background: url('~/assets/images/background.svg') no-repeat #283046;
   }
 
   .p-button.p-button-text.p-button-plain {