partial commit

.firebase/hosting.YnVpbGQ.cache

@@ -1,46 +1,46 @@
-asset-manifest.json,1626882211319,f5b3ed879da3526acdd059db4bbdede24d7a8f9f3110beeffefc653a7b2a6676
-index.html,1626882211319,c11c730ad21e8bc66375c005fd7993fdc11d6c15dc3f697aef6208a7e44bcf5b
-favicon.ico,1626882192743,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-manifest.json,1626882192744,9ba0b8957fc9cd6f287f006dff4f3afc528f312295571d004abc874a7b304b10
-logo192.png,1626882192743,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-logo512.png,1626882192744,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-static/js/2.e08bf202.chunk.js.LICENSE.txt,1626882211320,bfbf3a4b9e414262e302b9c850733cb7cfafa9577cb62b814d04300a511215fc
-static/css/main.fb95ac64.chunk.css,1626882211317,e7db0480f2bd82106060660373d5feedfeb0025293b7a81cc75bd1c105239a34
-static/js/3.75279366.chunk.js,1626882211320,c37ddb24332cd5064ada46f0a5020696f2b1988fa8580a64260510a6c035a7c3
-static/js/3.75279366.chunk.js.map,1626882211321,0a9613008e45e704b0adbb10e102071025c515717d849bf66e058ee9d97598af
-robots.txt,1626882192745,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-static/js/runtime-main.a6c61fb4.js,1626882211320,f326d5ecd31065f16bd4f94c5098f4920da598bd72092bdefc6638f504c1ff31
-static/media/activity.3733339a.svg,1626882211313,67be60524bdd174949075ac2c73519261ed65998a49439f0e8ff5a631b68c746
-static/media/anamnesis.a641b7e6.svg,1626882211313,24435e79f9fd57f71276508858befb2a77719f416fe7213068aad53b8953cce8
-static/media/book-sharp.11c8fa82.svg,1626882211316,f67644a183683a63f2d9976e890eb1fb2ad2e97ebb18eb10050342d28b92ed5b
-static/js/runtime-main.a6c61fb4.js.map,1626882211321,040e54a8c675735d3e1b8ff587469bbc621c2de8391fc05a77f63333ca342c41
-static/media/bookmark.a2da2096.svg,1626882211317,29c13e1546597c703791f2a447fe18535963823f3f902ffedb8724434511b2c8
-static/media/bookshelf.483b2aa4.svg,1626882211313,e6545866615c0e1a6f850509153b365072f05c3179c4d4fb3ecb21c7b82ac96f
-static/media/bx-brain.0318e2d4.svg,1626882211314,89cd203c6b55ea3b65034f05e266dc30b14e727bbd11de1c75a9f08af6f64e36
-static/media/bx-calendar.1108d675.svg,1626882211313,7c453239d1488a29754ccad27304519a30d992e0b0239e912fcea73d21bbb497
-static/media/bx-search-alt.6aee4585.svg,1626882211314,651936941fee86d3b721a577909bf90d4e08d9e62c8a95174488babde81d8971
-static/media/check-circle.c1e8fd45.svg,1626882211313,ff073d43826664345aca33e591a3914931c2deec9a207e1f36ac6405c2c830e7
-static/media/chevron-left.680dffe8.svg,1626882211317,746c1361579c3a2086dbcee59f06438a2d6bb54d5b973103f217c743cec47eb5
-static/media/circled.bac31e63.svg,1626882211314,862ea839b0e6250d6d4d5876eb1338e61f0c3456346a489b164e336ce6eb826b
-static/media/close.d4e228d9.svg,1626882211316,8bb89d130acaee639c2bf274160929e1353a5ff18eca4e271b30a50431408ca9
-static/media/expand.4a4b1ee4.svg,1626882211314,84e811af4e150e4dc440824c18ab5e0e53d7a4ea1bf3166143287595bde0af49
-static/media/home.bb84a97d.svg,1626882211316,081a43fb3ad132a1295a75b2123a79b0261a9ba6978a175eaa81035f56fda0d7
-static/media/more-alt.a3639cdd.svg,1626882211316,cec7367b54cde1b975f8cc4df3508b06d1bb3c00fe5822ae6a81c387e21136a7
-static/media/more-vertical.c6e3fe1e.svg,1626882211316,5425d3d4391f054c3ce2aae41fa66956d79ffc70b0bcdad3f64483f5bb1d7587
-static/media/intern-badge.c818f4cb.svg,1626882211317,b431e30ab91858642d2d78053114dd85b8cd51ee5f57d26545fd4c89f4e699ff
-static/media/plus-circle.a1ca80d1.svg,1626882211316,f1c9f52a1d21edf65463d233394155d447f0e592cd8da55879439c1cd038147c
-static/media/plus.8ac59b29.svg,1626882211314,86dc717c45016a3e4f2521fbac049a77771852ed4b36741a3814bd0549a0ee36
-static/media/readme.81bb4934.svg,1626882211315,0c3a0b717b9e0b427f07c777ca51bab67bc81a6ac5efedbd97fa1fb2c564f33c
-static/media/speaker.6971d2a3.svg,1626882211316,58d679636ee09fdd1c6d41fd213288500b8c4ffcfe8104eb278f0e207b064113
-static/media/stats-chart.c0cc3ef1.svg,1626882211316,cdfef79d4b11681a86e7bcc785782b9001ae79f8e42f10640ca92e62e99c6996
-static/media/tab.db1b13a3.svg,1626882211314,4908e10f407783b88abed0d24d6592a9397667b47d483398c9640112767f4ff6
-static/media/time.c96f97a2.svg,1626882211313,11c478f1864cdc4126943a74ab8560ebe3f20b179ee854e9b5b9a80c33148e16
-static/media/text.d9841131.svg,1626882211314,47e001b203e0dc7a762b7d476de61aeba50bcbdec093d51f3cc7d48854ea5e59
-static/media/timer.b4355910.svg,1626882211315,c7495c3ea38b4d7e5ff08cbb7417528752e6e34e3dd1c6e1e5599ecd491b90c2
-static/media/user-speaker.6817a677.svg,1626882211317,5c658319026bfd2bfbfc017ef5a0bb80a3436f5473ca7d30a4277e51f07f6692
-static/js/main.9c48f5ac.chunk.js,1626882211317,e8441c7790108c996e06d5d5f365021a420315425afe95ca5dd9786680398fa7
-static/media/check.b354552a.svg,1626882211316,c5d25c512d5e7d9df6398de36eeafe5fc2ebb55b4160881f088a0608226d6db1
-static/css/main.fb95ac64.chunk.css.map,1626882211320,d9d21245e5c04c911ccff6e1cae57f95dfa9b1191ffb3341d3548b8afec349c5
-static/js/2.e08bf202.chunk.js,1626882211320,391f8305763a160d6de88a9ddd695a9ab54494fb08b0d4377c53228298b1a856
-static/js/main.9c48f5ac.chunk.js.map,1626882211320,122c2f331613fb7476ac242dfbc115b27a370d5832268ab52b7766aa45b6e38e
-static/js/2.e08bf202.chunk.js.map,1626882211321,8735e07d66e234ea37e2ff5a19cf6956aeb9267754f9f4f6daa273142d011e1b
+asset-manifest.json,1630394877954,0c0ce8be0d21bab3160ce6b4fc2c09ea6dc5ab9da4cf750e707c4e966cd03513
+logo192.png,1630394853598,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+favicon.ico,1630394853596,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+manifest.json,1630394853603,9ba0b8957fc9cd6f287f006dff4f3afc528f312295571d004abc874a7b304b10
+robots.txt,1630394853606,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+static/css/main.8e3cb14f.chunk.css,1630394877949,d10c02602c49e2abb8819cccf75f8da0854c7299a6472d0b0f4b969fd1326bd3
+static/js/2.3e0eebe4.chunk.js.LICENSE.txt,1630394877955,9c4a6f769b4fb8e192fd4f7a3c526a232e8dfdc8b5cf754e27167ce29008a600
+index.html,1630394877951,486be3b309ebf586b146555c02b32954bf943d8302d1f9287b84267d23d57210
+static/js/3.333ea94c.chunk.js,1630394877955,45b48f9f6d159defed0b4d3ad1da25e37f2f017e581f31767fe5555baf1255c9
+static/js/3.333ea94c.chunk.js.map,1630394877955,aa68b8af32e4007c81c2a2d09feb02dacecccdcebb01d7c5b5267d77774ff700
+static/js/runtime-main.ff032141.js,1630394877955,a318813595db234a80ce327eefbf20257985f475ef61a9d99e3a22996d701443
+static/js/runtime-main.ff032141.js.map,1630394877955,aed5af5fb9940338d136c0830c2d19fbd12902acae62a3b281555d1d172f2965
+static/media/activity.3733339a.svg,1630394877946,67be60524bdd174949075ac2c73519261ed65998a49439f0e8ff5a631b68c746
+static/media/anamnesis.a641b7e6.svg,1630394877946,24435e79f9fd57f71276508858befb2a77719f416fe7213068aad53b8953cce8
+static/media/book-sharp.11c8fa82.svg,1630394877949,f67644a183683a63f2d9976e890eb1fb2ad2e97ebb18eb10050342d28b92ed5b
+static/media/bookmark.a2da2096.svg,1630394877949,29c13e1546597c703791f2a447fe18535963823f3f902ffedb8724434511b2c8
+static/media/bookshelf.483b2aa4.svg,1630394877946,e6545866615c0e1a6f850509153b365072f05c3179c4d4fb3ecb21c7b82ac96f
+static/media/bx-brain.0318e2d4.svg,1630394877946,89cd203c6b55ea3b65034f05e266dc30b14e727bbd11de1c75a9f08af6f64e36
+static/media/bx-calendar.1108d675.svg,1630394877947,7c453239d1488a29754ccad27304519a30d992e0b0239e912fcea73d21bbb497
+static/media/bx-search-alt.6aee4585.svg,1630394877947,651936941fee86d3b721a577909bf90d4e08d9e62c8a95174488babde81d8971
+static/media/check-circle.c1e8fd45.svg,1630394877946,ff073d43826664345aca33e591a3914931c2deec9a207e1f36ac6405c2c830e7
+static/media/check.b354552a.svg,1630394877948,c5d25c512d5e7d9df6398de36eeafe5fc2ebb55b4160881f088a0608226d6db1
+static/media/chevron-left.680dffe8.svg,1630394877949,746c1361579c3a2086dbcee59f06438a2d6bb54d5b973103f217c743cec47eb5
+static/media/circled.bac31e63.svg,1630394877947,862ea839b0e6250d6d4d5876eb1338e61f0c3456346a489b164e336ce6eb826b
+static/media/close.d4e228d9.svg,1630394877949,8bb89d130acaee639c2bf274160929e1353a5ff18eca4e271b30a50431408ca9
+static/media/expand.4a4b1ee4.svg,1630394877947,84e811af4e150e4dc440824c18ab5e0e53d7a4ea1bf3166143287595bde0af49
+static/media/home.bb84a97d.svg,1630394877949,081a43fb3ad132a1295a75b2123a79b0261a9ba6978a175eaa81035f56fda0d7
+static/media/more-alt.a3639cdd.svg,1630394877950,cec7367b54cde1b975f8cc4df3508b06d1bb3c00fe5822ae6a81c387e21136a7
+static/media/more-vertical.c6e3fe1e.svg,1630394877949,5425d3d4391f054c3ce2aae41fa66956d79ffc70b0bcdad3f64483f5bb1d7587
+static/media/intern-badge.c818f4cb.svg,1630394877950,b431e30ab91858642d2d78053114dd85b8cd51ee5f57d26545fd4c89f4e699ff
+static/media/plus-circle.a1ca80d1.svg,1630394877949,f1c9f52a1d21edf65463d233394155d447f0e592cd8da55879439c1cd038147c
+static/media/plus.8ac59b29.svg,1630394877946,86dc717c45016a3e4f2521fbac049a77771852ed4b36741a3814bd0549a0ee36
+static/media/readme.81bb4934.svg,1630394877947,0c3a0b717b9e0b427f07c777ca51bab67bc81a6ac5efedbd97fa1fb2c564f33c
+static/media/speaker.6971d2a3.svg,1630394877950,58d679636ee09fdd1c6d41fd213288500b8c4ffcfe8104eb278f0e207b064113
+static/media/stats-chart.c0cc3ef1.svg,1630394877949,cdfef79d4b11681a86e7bcc785782b9001ae79f8e42f10640ca92e62e99c6996
+static/media/tab.db1b13a3.svg,1630394877946,4908e10f407783b88abed0d24d6592a9397667b47d483398c9640112767f4ff6
+static/media/text.d9841131.svg,1630394877947,47e001b203e0dc7a762b7d476de61aeba50bcbdec093d51f3cc7d48854ea5e59
+static/media/time.c96f97a2.svg,1630394877946,11c478f1864cdc4126943a74ab8560ebe3f20b179ee854e9b5b9a80c33148e16
+static/media/timer.b4355910.svg,1630394877946,c7495c3ea38b4d7e5ff08cbb7417528752e6e34e3dd1c6e1e5599ecd491b90c2
+static/media/user-speaker.6817a677.svg,1630394877950,5c658319026bfd2bfbfc017ef5a0bb80a3436f5473ca7d30a4277e51f07f6692
+logo512.png,1630394853601,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+static/js/main.38875ad1.chunk.js,1630394877950,4495578f8c871a6b06e22b7ac755356f423850efdbcad844907a463cb2d95fdc
+static/css/main.8e3cb14f.chunk.css.map,1630394877955,f1661694ed85b251b4c3796154b2c76345c87549b6e4160298bec1d3689024db
+static/js/main.38875ad1.chunk.js.map,1630394877956,65054ea974499cee27dda420857f28aacc2b6003fe3a8844fc2a4a3ddc778cb5
+static/js/2.3e0eebe4.chunk.js,1630394877955,ea7efdd5d33648ce9f7684c335c6754866ad9b68cd6ee8178e489b755c25de96
+static/js/2.3e0eebe4.chunk.js.map,1630394877955,b2a5da78422b8e3d6a85b5fb83fd9c8ad2ec910c1071e1308010150fe217711f

src/assets/icons/compose.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17.999" viewBox="0 0 18 17.999">
   <g id="compose" transform="translate(-4.5 -4.502)">
-    <path id="Path_23" data-name="Path 23" d="M29.433,6.31,27.888,4.765a.905.905,0,0,0-1.276,0L25,6.381,27.817,9.2l1.616-1.611A.911.911,0,0,0,29.433,6.31Z" transform="translate(-7.196)" fill="#11253d"/>
-    <path id="Path_24" data-name="Path 24" d="M20.708,7.77l-8.742,9.021-.716,3.253,3.253-.716,8.975-8.793Z" transform="translate(-3.386 -0.906)" fill="#11253d"/>
-    <path id="Path_25" data-name="Path 25" d="M19.387,14.193v6.978a.457.457,0,0,1-.428.47l-12.514,0a.484.484,0,0,1-.456-.465V8.7a.494.494,0,0,1,.493-.465h6.95L14.921,6.75H5.588A1.08,1.08,0,0,0,4.5,7.834v14.2a1.09,1.09,0,0,0,1.088,1.088h14.2a1.086,1.086,0,0,0,1.084-1.088V12.7l-1.489,1.489Z" transform="translate(0 -0.623)" fill="#11253d"/>
+    <path id="Path_23" data-name="Path 23" d="M29.433,6.31,27.888,4.765a.905.905,0,0,0-1.276,0L25,6.381,27.817,9.2l1.616-1.611A.911.911,0,0,0,29.433,6.31Z" transform="translate(-7.196)"/>
+    <path id="Path_24" data-name="Path 24" d="M20.708,7.77l-8.742,9.021-.716,3.253,3.253-.716,8.975-8.793Z" transform="translate(-3.386 -0.906)"/>
+    <path id="Path_25" data-name="Path 25" d="M19.387,14.193v6.978a.457.457,0,0,1-.428.47l-12.514,0a.484.484,0,0,1-.456-.465V8.7a.494.494,0,0,1,.493-.465h6.95L14.921,6.75H5.588A1.08,1.08,0,0,0,4.5,7.834v14.2a1.09,1.09,0,0,0,1.088,1.088h14.2a1.086,1.086,0,0,0,1.084-1.088V12.7l-1.489,1.489Z" transform="translate(0 -0.623)"/>
   </g>
 </svg>

src/assets/icons/export-line.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20.786" height="19.4" viewBox="0 0 20.786 19.4">
   <g id="export-line" transform="translate(-4 -4)">
-    <path id="Path_26" data-name="Path 26" d="M5.386,10.658h5.273V5.386h7.2v5.806h1.386V5.386A1.386,1.386,0,0,0,17.857,4H8.76L4,8.76V22.014A1.386,1.386,0,0,0,5.386,23.4H17.857a1.386,1.386,0,0,0,1.386-1.386H5.386Zm0-1.33L9.328,5.386h.215V9.543H5.386Z" fill="#11253d"/>
-    <path id="Path_27" data-name="Path 27" d="M24.843,16.276a.693.693,0,0,0-.977.977L26.118,19.5H17.693a.693.693,0,1,0,0,1.386h8.446l-2.273,2.273a.693.693,0,1,0,.977.977l3.935-3.942Z" transform="translate(-3.993 -3.719)" fill="#11253d"/>
+    <path id="Path_26" data-name="Path 26" d="M5.386,10.658h5.273V5.386h7.2v5.806h1.386V5.386A1.386,1.386,0,0,0,17.857,4H8.76L4,8.76V22.014A1.386,1.386,0,0,0,5.386,23.4H17.857a1.386,1.386,0,0,0,1.386-1.386H5.386Zm0-1.33L9.328,5.386h.215V9.543H5.386Z"/>
+    <path id="Path_27" data-name="Path 27" d="M24.843,16.276a.693.693,0,0,0-.977.977L26.118,19.5H17.693a.693.693,0,1,0,0,1.386h8.446l-2.273,2.273a.693.693,0,1,0,.977.977l3.935-3.942Z" transform="translate(-3.993 -3.719)"/>
   </g>
 </svg>

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

@@ -165,21 +165,8 @@
         }
     }
 
-    .moreButton {
-        margin-left: auto;
-        width: 2rem;
-        height: 5rem;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        background-color: transparent;
-        border: none;
-
-        svg {
-            fill: white;
-            width: 1.8rem;
-            height: 1.8rem;
-        }
+    .headingDetails {
+        margin-right: auto;
     }
 }
 

src/components/category-details/CategoryDetails.tsx

@@ -4,21 +4,23 @@ import { useLocation } from 'react-router';
 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 { ReactComponent as ComposeIcon } from '../../assets/icons/compose.svg';
+import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg';
 
 import { CircularProgressbar } from "react-circular-progressbar";
 import { NavLink } from "react-router-dom";
 import { IShelf } from "../../structure/shelf";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
+import { PopoverOptions } from "../popover-options/PopoverOptions";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();
     const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
     const shelfCount: number = userProfileData.categories[category_id].shelves.length;
     const [shelfResult, setShelfResult] = useState<Array<IShelf>>(userProfileData.categories[category_id].shelves);
-    const history = useHistory();
+    const history = useHistory();    
 
     const searchShelf = (text: string) => {
         if (text.length > 0) {
@@ -43,7 +45,7 @@ export const CategoryDetails: React.FC = () => {
             <figure>
                 {/* eslint-disable-next-line */}
                 <img src={ userProfileData.image } alt="profile-image" />
-            </figure>
+            </figure>            
         </header>
 
         <header className={styles.tabHeading}>
@@ -54,9 +56,12 @@ export const CategoryDetails: React.FC = () => {
                 <h4> { userProfileData.categories[category_id].name } </h4>
                 <p> { shelfCount } { shelfCount > 1 ? 'Shelves' : 'Shelf' }  </p>
             </div>
-            <button className={styles.moreButton}>
-                <MoreIcon />
-            </button>
+
+            <PopoverOptions options={[{
+                icon: <ComposeIcon />,
+                title: 'Edit',
+                function: () => { console.log("Edit Clicked") }
+            }]} />
         </header>
         
         <section className={styles.searchHolder}>

src/components/popover-options/PopoverOptions.module.scss

@@ -0,0 +1,65 @@
+.moreOptionContainer {
+    position: relative;
+}
+
+.backdrop {
+    background-color: black;
+    opacity: 0.2;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+    position: fixed;
+    left: 0;
+    top: 0;
+}
+
+.moreButton {
+    width: 2rem;
+    height: 5rem;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    svg {
+        fill: white;
+        width: 1.8rem;
+        height: 1.8rem;
+    }
+}
+
+.optionList {
+    position: absolute;
+    right: 1.4rem;
+    top: 1.4rem;
+    min-width: 15rem;
+    background-color: var(--creamy-white);
+    border-radius: 1.5rem;
+    list-style: none;
+    z-index: 2;
+    overflow: hidden;
+
+    li {
+        cursor: pointer;
+        padding: 1rem 0.5rem;
+        width: calc(100% - 1rem);
+        margin: 0 auto;
+        border-bottom: 1px solid var(--lighter-grey);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        svg {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        label {
+            font-size: 1.4rem;
+            color: var(--black);
+            margin-left: 1rem;
+        }
+    }
+}

src/components/popover-options/PopoverOptions.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import styles from './PopoverOptions.module.scss';
+import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
+
+type OwnProps = {
+    options: Array<{
+        icon: JSX.Element,
+        title: string,
+        function?: () => void,
+    }>
+};
+
+export const PopoverOptions: React.FC<OwnProps> = (props: OwnProps) => {
+    const [moreOptionsFlag, setmoreOptionsFlag] = useState<boolean>(false);
+    
+    return <div className={styles.moreOptionContainer}>
+        { moreOptionsFlag && <div className={styles.backdrop} onClick={() => setmoreOptionsFlag(false)}></div> }
+        
+        <button className={styles.moreButton} onClick={() => {
+            setmoreOptionsFlag(true);
+        }}>
+            <MoreIcon />
+        </button>
+        
+        { moreOptionsFlag && <ul className={styles.optionList}>
+            { props.options.map((option, index) => {
+                return <li key={index} onClick={() => option.function && option.function()}>
+                    { option.icon } <label> { option.title } </label>
+                </li>
+            })}
+        </ul> }
+    </div>
+}