chore: updated logo

heristop · Sep 24, 2024 · 112ea9f · 112ea9f
1 parent d823c3c
commit 112ea9f
Show file tree

Hide file tree

Showing 23 changed files with 83 additions and 124 deletions.
diff --git a/app/assets/logo.svg b/app/assets/logo.svg
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -2,12 +2,12 @@
 
 <template>
   <footer class="footer w-full text-center py-4">
-    <p class="text-stone-800 dark:text-white text-sm flex justify-center items-center gap-2">
-      <a
+    <p class="flex items-center align-middle justify-center text-stone-800 dark:text-white text-sm justify-center gap-2">
+      Made by <a
         href="https://heristop.github.io/about"
         target="_blank"
         class="text-stone-700 dark:text-stone-400 hover:text-stone-400 dark:hover:text-stone-500 transition-colors duration-300 font-bold"
-      >@heristop</a>
+      >heristop</a> <span class="text-3xl front-bold">·</span> <span class="ml-1">Deployed on NuxtHub</span>
     </p>
   </footer>
 </template>
diff --git a/app/components/ProjectPanel.vue b/app/components/ProjectPanel.vue
@@ -134,45 +134,21 @@ onMounted(() => {
     :class="[panelCollapsed ? 'w-16 relative' : 'w-64 fixed md:relative']"
   >
     <div class="flex justify-between items-center p-4 border-b border-stone-200 dark:border-stone-600">
-      <svg
-        v-if="!panelCollapsed"
-        class="w-8 h-8"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-      >
-        <defs>
-          <linearGradient
-            id="grad1"
-            x1="0%"
-            y1="0%"
-            x2="100%"
-            y2="100%"
-          >
-            <stop
-              offset="0%"
-              style="stop-color:#DD5E89;stop-opacity:1"
-            />
-            <stop
-              offset="100%"
-              style="stop-color:#F7BB97;stop-opacity:1"
-            />
-          </linearGradient>
-        </defs>
-        <path
-          fill="url(#grad1)"
-          d="M5 3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm14 18a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4ZM5 11a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H5Zm14 2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4Z"
-        />
-      </svg>
+      <div class="flex justify-left items-center gap-x-3">
+        <img
+          alt="Clover Map Logo"
+          src="@/assets/logo.svg"
+          class="w-8 h-8"
+          aria-hidden="true"
+        >
 
-      <h2
-        v-if="!panelCollapsed"
-        class="flex flex-col items-center justify-center text-center text-xl font-semibold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-[#DD5E89] to-[#F7BB97]"
-      >
-        Clover Map
-      </h2>
+        <h2
+          v-if="!panelCollapsed"
+          class="flex flex-col items-center justify-center text-center text-xl font-semibold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-[#DD5E89] to-[#F7BB97]"
+        >
+          Clover Map
+        </h2>
+      </div>
 
       <button
         class="text-rose-500 hover:text-rose-700 dark:text-stroseone-300 dark:hover:text-rose-100 opacity-50 cursor-pointer transition-colors duration-200"

diff --git a/app/components/config/ConfigDrawer.vue b/app/components/config/ConfigDrawer.vue
@@ -44,7 +44,7 @@ onMounted(() => {
       >
         <template v-if="drawerMinimized">
           <button
-            class="text-white rounded-full text-lg font-bold h-8 w-8 flex items-center justify-center"
+            class="text-white rounded-full text-lg font-bold h-6 w-6 flex items-center justify-center"
             aria-label="Expand config"
             @click="toggleMinimize"
           >

diff --git a/app/components/project/RecursiveSection.vue b/app/components/project/RecursiveSection.vue
@@ -49,15 +49,15 @@ const removeNode = () => {
       <input
         :value="section.name"
         type="text"
-        class="text-sm border rounded p-2 text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-600 w-full focus:ring focus:ring-stone-500 transition-all duration-300"
+        class="text-sm border rounded p-2 text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-600 w-full focus:ring focus:ring-stone-500/20 transition-all duration-300"
         placeholder="Section Name"
         @input="updateSectionName(($event.target as HTMLInputElement).value)"
       >
 
       <div class="flex items-center space-x-2">
         <select
           :value="section.status"
-          class="text-sm max-w-32 p-2 border rounded text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-600 focus:ring focus:ring-stone-500 transition-all duration-300"
+          class="text-sm max-w-32 p-2 border rounded text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-600 focus:ring focus:ring-stone-500/20 transition-all duration-300"
           :style="{ borderColor: getStatusColor(section.status) }"
           @change="updateSectionStatus(($event.target as HTMLSelectElement).value)"
         >

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -114,16 +114,16 @@ onMounted(() => {
     <main class="pt-0">
       <!-- Background Grid -->
       <div class="background-grid fixed inset-0 z-0 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-        <div class=" bg-purple-900 rounded-lg opacity-30" />
-        <div class="bg-yellow-900 rounded-lg opacity-30" />
-        <div class="bg-blue-900 col-span-2 opacity-30" />
-        <div class="bg-pink-900 col-span-2 opacity-30" />
-        <div class="bg-green-900 rounded-lg opacity-30" />
-        <div class="bg-red-900 rounded-lg opacity-30" />
-        <div class="bg-indigo-900 rounded-lg opacity-30" />
-        <div class="bg-teal-900 rounded-lg opacity-30" />
-        <div class="bg-orange-900 rounded-lg opacity-30" />
-        <div class="bg-lime-900 rounded-lg opacity-30" />
+        <div class=" bg-purple-900 rounded-2xl opacity-30" />
+        <div class="bg-yellow-900 rounded-2xl opacity-30" />
+        <div class="bg-blue-900 col-span-2 rounded-2xl opacity-30" />
+        <div class="bg-pink-900 col-span-2 rounded-2xl opacity-30" />
+        <div class="bg-green-900 rounded-2xl opacity-30" />
+        <div class="bg-red-900 rounded-2xl opacity-30" />
+        <div class="bg-indigo-900 rounded-2xl opacity-30" />
+        <div class="bg-teal-900 rounded-2xl opacity-30" />
+        <div class="bg-orange-900 rounded-2xl opacity-30" />
+        <div class="bg-lime-900 rounded-2xl opacity-30" />
       </div>
 
       <div class="absolute h-full inset-0 z-10 bg-stone-200 dark:bg-stone-800 opacity-90 dark:opacity-60" />
@@ -140,35 +140,13 @@ onMounted(() => {
         >
           <div class="text-center space-y-8 py-16">
             <h1 class="flex flex-col items-center justify-center text-center text-4xl font-bold mb-10 drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-[#DD5E89] to-[#F7BB97]">
-              <svg
-                class="w-16 h-16 mb-6"
+              <img
+                alt="Clover Map Logo"
+                src="@/assets/logo.svg"
+                class="w-20 h-20 mb-6"
                 aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
               >
-                <defs>
-                  <linearGradient
-                    id="grad1"
-                    x1="0%"
-                    y1="0%"
-                    x2="100%"
-                    y2="100%"
-                  >
-                    <stop
-                      offset="0%"
-                      style="stop-color:#DD5E89;stop-opacity:1"
-                    />
-                    <stop
-                      offset="100%"
-                      style="stop-color:#F7BB97;stop-opacity:1"
-                    />
-                  </linearGradient>
-                </defs>
-                <path
-                  fill="url(#grad1)"
-                  d="M5 3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm14 18a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4ZM5 11a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H5Zm14 2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4Z"
-                />
-              </svg>
+
               Welcome to Clover Map!
             </h1>
 

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-256x256.png b/public/android-chrome-256x256.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#ffffff</TileColor>
+            <TileColor>#f5f5f4</TileColor>
         </tile>
     </msapplication>
 </browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo-80x80.png b/public/logo-80x80.png
diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/mstile-310x150.png b/public/mstile-310x150.png
diff --git a/public/mstile-310x310.png b/public/mstile-310x310.png
diff --git a/public/mstile-70x70.png b/public/mstile-70x70.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/screenshot.jpg b/public/screenshot.jpg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,19 +1,19 @@
 {
-  "name": "Clover Map",
-  "short_name": "Clover Map",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
+    "name": "Clover Map",
+    "short_name": "Clover Map",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#f5f5f4",
+    "background_color": "#f5f5f4",
+    "display": "standalone"
 }