Merge branch 'main' of https://github.com/WebmasterCamp/ywc19-hackath…

…on-e
WebmasterCamp · Jul 16, 2023 · b688f8d · b688f8d
2 parents b37ca0f + 33d464f
commit b688f8d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/src/lib/components/ItemBox.svelte b/src/lib/components/ItemBox.svelte
@@ -8,10 +8,10 @@
 
 </script>
 
-<div class="flex flex-col w-[110px] rounded-xl border-2 overflow-hidden mb-2 mr-2 itemboxs" >
+<div class="flex flex-col w-[110px] rounded-xl border-2 overflow-hidden mb-2 mr-2" >
   <img src={image} alt="item-img" />
-  <div class="flex flex-col space-y-1 p-2">
-    <h1>{name} ({amount})</h1>
-    <p class=" text-sm">Expired in {exp} days</p>
+  <div class="flex flex-col space-y-1 p-2 items-start">
+    <h1>{name}</h1>
+    <p class="text-[10px]">Expired in {exp} days</p>
   </div>
 </div>
diff --git a/src/routes/fridge/+page.svelte b/src/routes/fridge/+page.svelte
@@ -16,11 +16,11 @@
     if ($ingredients.find((e: any) => e.name === obj.name)) {
       console.log("found");
       $ingredients = $ingredients.filter((e: any) => e.name != obj.name);
-      box?.classList.remove("!bg-gray-200");
+      box?.classList.remove("!bg-orange-200");
     } else {
       if ($ingredients.length < 3) {
         $ingredients = $ingredients.concat(obj);
-        box?.classList.add("!bg-gray-200");
+        box?.classList.add("!bg-orange-200");
       }
     }
   };
@@ -60,16 +60,15 @@
       <Icon class="text-black dark:text-white" icon="ic:outline-search" />
     </h1>
   </div>
-  <div class="flex space-x-3 px-4">
-    <button class="flex-1 bg-main">All</button>
-    <button class="flex-2 w-full">Meat</button>
-    <button class="flex-4 w-ful">Vegetable</button>
-    <button class="flex-2 w-full">Dairy</button>
+  <div class="flex space-x-3 p-4 ">
+    <button class="w-[10%] bg-main rounded-sm">All</button>
+    <button class="w-[30%] text-end pr-2 rounded-sm bg-drop">Meat</button>
+    <button class="w-[40%] text-end pr-2 rounded-sm bg-drop">Vegetable</button>
+    <button class="w-[30%] text-end pr-2 rounded-sm bg-drop">Dairy</button>
   </div>
   <div class="flex flex-col">
-    <div class="w-screen bg-gray-200 px-4 mb-2">
-      <h2>Meat</h2>
-    </div>
+    <div class="w-screen bg-drop-hard h-2" />
+    <h2 class="pl-4 py-2">Meat</h2>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each data.result.meat as item}
         <button on:click|stopPropagation={(e) => addToStore(item, e)}>
@@ -84,9 +83,8 @@
     </div>
   </div>
   <div class="flex flex-col">
-    <div class="w-screen bg-gray-200 px-4 mb-2">
-      <h2>Vegetable</h2>
-    </div>
+    <div class="w-screen bg-drop-hard h-2" />
+    <h2 class="pl-4 py-2">Vegetable</h2>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each $veg as item}
         <button on:click|stopPropagation={(e) => addToStore(item, e)}>
@@ -101,9 +99,8 @@
     </div>
   </div>
   <div class="flex flex-col">
-    <div class="w-screen bg-gray-200 px-4 mb-2">
-      <h2>Vegetable</h2>
-    </div>
+    <div class="w-screen bg-drop-hard h-2" />
+    <h2 class="pl-4 py-2">Vegetable</h2>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each data.result.dairy as item}
         <button on:click|stopPropagation={(e) => addToStore(item, e)}>