tab background shape change

src/assets/layouts/tab.svg

@@ -1,17 +1,14 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 390 60" style="enable-background:new 0 0 390 60;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:white;}
-</style>
-<g transform="matrix(1, 0, 0, 1, 0, 0)">
-	<path id="Union_1-2" class="st0" d="M20.5,60c-2.7,0-5.5-0.5-8-1.6c-2.4-1-4.6-2.5-6.5-4.3c-1.9-1.8-3.4-4-4.4-6.4
-		C0.5,45.3,0,42.7,0,40V20c0-2.7,0.5-5.3,1.6-7.8c1-2.4,2.5-4.5,4.4-6.4c1.9-1.8,4.1-3.3,6.5-4.3c2.5-1,5.2-1.6,8-1.6H152v0.3
-		c5.3,1.2,9.5,5.3,10.7,10.7l0,0c1.1,3.3,2.7,6.4,4.7,9.2c2,2.8,4.5,5.2,7.3,7.3c2.8,2.1,5.9,3.7,9.2,4.8c3.4,1.1,7,1.7,10.6,1.7
-		c3.8,0,7.6-0.6,11.2-1.9c3.5-1.2,6.7-3,9.6-5.3c2.9-2.3,5.3-5,7.3-8c1.6-2.4,2.8-5,3.7-7.8c0.1-0.7,0.3-1.3,0.6-1.9
-		c0-0.1,0.1-0.3,0.1-0.4v0.1c2-5,6.7-8.4,12-8.8v0h130.5c2.7,0,5.5,0.5,8,1.6c2.4,1,4.6,2.5,6.5,4.3c1.9,1.8,3.4,4,4.4,6.4
-		c1.1,2.5,1.6,5.1,1.6,7.8v20c0,2.7-0.5,5.3-1.6,7.8c-1,2.4-2.5,4.5-4.4,6.4c-1.9,1.8-4.1,3.3-6.5,4.3c-2.5,1-5.2,1.6-8,1.6H20.5z"
-		/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="423.001" height="93" viewBox="0 0 423.001 93">
+  <defs>
+    <filter id="Union_1" x="0" y="0" width="423.001" height="93" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="5.5" result="blur"/>
+      <feFlood flood-opacity="0.361"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Union_1)">
+    <path id="Union_1-2" data-name="Union 1" d="M15.526,60a20.862,20.862,0,0,1-7.99-1.572,20.5,20.5,0,0,1-6.524-4.286,19.917,19.917,0,0,1-4.4-6.358A19.441,19.441,0,0,1-5,40V20a19.441,19.441,0,0,1,1.613-7.785,19.9,19.9,0,0,1,4.4-6.357A20.5,20.5,0,0,1,7.536,1.571,20.878,20.878,0,0,1,15.526,0H147V.322A14.019,14.019,0,0,1,157.678,11h0a33.35,33.35,0,0,0,4.745,9.229,33.629,33.629,0,0,0,7.255,7.28,33.363,33.363,0,0,0,9.212,4.775A33.451,33.451,0,0,0,189.5,34a33.417,33.417,0,0,0,11.184-1.913,33.375,33.375,0,0,0,9.583-5.3,33.606,33.606,0,0,0,7.324-8.03A33.286,33.286,0,0,0,221.323,11a13.9,13.9,0,0,1,.572-1.933q.053-.2.1-.407v.138A14.008,14.008,0,0,1,234,.035V0H364.474a20.878,20.878,0,0,1,7.99,1.571,20.5,20.5,0,0,1,6.524,4.287,19.9,19.9,0,0,1,4.4,6.357A19.441,19.441,0,0,1,385,20V40a19.441,19.441,0,0,1-1.613,7.785,19.917,19.917,0,0,1-4.4,6.358,20.5,20.5,0,0,1-6.524,4.286A20.862,20.862,0,0,1,364.474,60Z" transform="translate(21.5 13.5)" fill="#fff"/>
+  </g>
+</svg>

src/components/category-details/CategoryDetails.module.scss

@@ -228,4 +228,27 @@
             fill: var(--red);
         }
     }
-}
+}
+
+.addButton {
+    margin: 0 auto 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(100% - 4rem);
+    border: 0.2rem dashed var(--orange);
+    border-radius: 3rem;
+    background-color: transparent;
+    height: 5rem;
+    color: var(--orange);
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 1.3rem;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 1rem;
+        fill: var(--orange);
+    }
+}

src/components/category-details/CategoryDetails.tsx

@@ -5,6 +5,7 @@ import queryString from 'query-string';
 import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
+import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
 
 import { userProfileData } from "../home/Home";
 import { CircularProgressbar } from "react-circular-progressbar";
@@ -48,6 +49,10 @@ export const CategoryDetails: React.FC = () => {
             </div>
         </section>
 
+        <button className={styles.addButton}>
+            <PlusCircledIcon /> Add Category
+        </button>
+
         <section className={styles.Shelf}>
             <ul>
                 { userProfileData.categories[Number(category_id)].shelves.map(shelf => {

src/components/tabs/Tabs.module.scss

@@ -1,18 +1,20 @@
-$tab-width: 87vw;
+$tab-width: 38rem;
 
 .tabs {
     position: fixed;
-    bottom: 10px;
+    bottom: -1rem;
     width: $tab-width;
     left: calc((100vw - #{$tab-width}) / 2);
     display: flex;
-    height: 5rem;
+    height: 9.3rem;
     align-items: center;
     justify-content: center;
     z-index: 1;
     background-image: url('../../assets/layouts/tab.svg');
-    background-size: 100% 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
     background-position: center;
+    padding: 0 2.5rem;
 
     button, a {
         width: calc(#{$tab-width} / 5);
@@ -55,7 +57,7 @@ $tab-width: 87vw;
 
     .utility {
         width: calc(#{$tab-width} / 5);
-        transform: translateY(-2.5rem);
+        transform: translateY(-3rem);
 
         button {
             box-shadow: 0px 0px 10px -4px var(--grey);