optimize ui

isushmoy · Apr 18, 2024 · b201e56 · b201e56
1 parent 4d1b95c
commit b201e56
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -24,20 +24,21 @@ function handleData(data) {
           src="/images/logo.svg"
         />
       </div>
-      <div class="flex items-end">
-        <div class="cart-button relative">
+      <div class="flex items-center">
+        <div class="cart-button relative me-3">
           <div
             v-if="addCart"
-            class="absolute -right-2 text-xs -mt-2 bg-[var(--orange)] rounded-full h-4 w-5 font-bold text-center text-white"
+            class="absolute -right-2 text-xs  bg-[var(--orange)] rounded-full h-4 w-5 font-bold text-center text-white"
           >
             {{ addCart }}
           </div>
-          <button @click="toggleCart = !toggleCart">
-            <svg width="22" height="20" class="fill-[#69707D] hover:fill-black dark:hover:fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z" fill-rule="nonzero"/></svg>          </button>
+          <button @click="toggleCart = !toggleCart" class="mt-2" >
+            <svg width="22" height="20" class="fill-[#69707D] hover:fill-black dark:hover:fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z" fill-rule="nonzero"/></svg>
+          </button>
         </div>
         <img
           src="/images/image-avatar.png"
-          class="h-8 ms-6 rounded-full hover:ring-2 ring-[var(--orange)] cursor-pointer"
+          class="h-10 ms-6 rounded-full hover:ring-2 ring-[var(--orange)] cursor-pointer"
           alt="avatar"
         />
       </div>

diff --git a/src/components/gallery.vue b/src/components/gallery.vue
@@ -47,14 +47,14 @@ function addCartButton() {
           <button @click="[quantity > 0 ? quantity-- : (quantity = 0)]">
             <svg width="12" height="4" class="m-5 fill-[var(--orange)] hover:fill-[var(--orange-dark)]" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M11.357 3.332A.641.641 0 0 0 12 2.69V.643A.641.641 0 0 0 11.357 0H.643A.641.641 0 0 0 0 .643v2.046c0 .357.287.643.643.643h10.714Z" id="a"/></defs><use fill-rule="nonzero" xlink:href="#a"/></svg>
           </button>
-          <p class="light:text-black">{{ quantity }}</p>
+          <p class="light:text-black font-bold">{{ quantity }}</p>
           <button @click="quantity++">
             <svg width="12" height="12" class="m-5 fill-[var(--orange)] hover:fill-[var(--orange-dark)]" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 7.023V4.977a.641.641 0 0 0-.643-.643h-3.69V.643A.641.641 0 0 0 7.022 0H4.977a.641.641 0 0 0-.643.643v3.69H.643A.641.641 0 0 0 0 4.978v2.046c0 .356.287.643.643.643h3.69v3.691c0 .356.288.643.644.643h2.046a.641.641 0 0 0 .643-.643v-3.69h3.691A.641.641 0 0 0 12 7.022Z" id="b"/></defs><use fill-rule="nonzero" xlink:href="#b"/></svg>
           </button>
         </div>
         <button
           @click="addCartButton()"
-          class="w-80 lg:w-60 h-12 w-full flex justify-center items-center bg-[var(--orange)] text-white rounded-md hover:bg-[var(--orange-dark)]"
+          class="w-80 shadow-2xl lg:w-60 h-12 w-full flex justify-center items-center bg-[var(--orange)] text-white rounded-md hover:bg-[var(--orange-dark)]"
         >
           <p class="m-3 text-lg">
             <svg width="22" height="20" class="inline me-2 -mt-1 fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z" fill-rule="nonzero"/></svg>