More options component integrations

src/assets/icons/delete.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="19" height="22.167" viewBox="0 0 19 22.167">
   <g id="delete" transform="translate(-4.5 -2.25)">
-    <path id="Path_28" data-name="Path 28" d="M13.5,13.5h1.583V23H13.5Z" transform="translate(-2.667 -3.333)" fill="#11253d"/>
-    <path id="Path_29" data-name="Path 29" d="M20.25,13.5h1.583V23H20.25Z" transform="translate(-4.667 -3.333)" fill="#11253d"/>
-    <path id="Path_30" data-name="Path 30" d="M4.5,6.75V8.333H6.083V24.167A1.583,1.583,0,0,0,7.667,25.75H20.333a1.583,1.583,0,0,0,1.583-1.583V8.333H23.5V6.75ZM7.667,24.167V8.333H20.333V24.167Z" transform="translate(0 -1.333)" fill="#11253d"/>
-    <path id="Path_31" data-name="Path 31" d="M13.5,2.25h6.333V3.833H13.5Z" transform="translate(-2.667)" fill="#11253d"/>
+    <path id="Path_28" data-name="Path 28" d="M13.5,13.5h1.583V23H13.5Z" transform="translate(-2.667 -3.333)" />
+    <path id="Path_29" data-name="Path 29" d="M20.25,13.5h1.583V23H20.25Z" transform="translate(-4.667 -3.333)" />
+    <path id="Path_30" data-name="Path 30" d="M4.5,6.75V8.333H6.083V24.167A1.583,1.583,0,0,0,7.667,25.75H20.333a1.583,1.583,0,0,0,1.583-1.583V8.333H23.5V6.75ZM7.667,24.167V8.333H20.333V24.167Z" transform="translate(0 -1.333)" />
+    <path id="Path_31" data-name="Path 31" d="M13.5,2.25h6.333V3.833H13.5Z" transform="translate(-2.667)" />
   </g>
 </svg>

src/assets/icons/share.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20.786" height="22.388" viewBox="0 0 20.786 22.388">
-  <path id="share" d="M19.013,16.615a3.993,3.993,0,0,0-3.107,1.509l-5.838-3.65a3.562,3.562,0,0,0,0-2.108l5.838-3.65a3.993,3.993,0,1,0-.887-2.484,3.826,3.826,0,0,0,.16,1.054l-5.838,3.65a3.993,3.993,0,1,0,0,4.967l5.838,3.65a3.826,3.826,0,0,0-.16,1.055,3.993,3.993,0,1,0,3.993-3.993Zm0-12.778a2.4,2.4,0,1,1-2.4,2.4,2.4,2.4,0,0,1,2.4-2.4ZM6.235,15.817a2.4,2.4,0,1,1,2.4-2.4,2.4,2.4,0,0,1-2.4,2.4ZM19.013,23a2.4,2.4,0,1,1,2.4-2.4,2.4,2.4,0,0,1-2.4,2.4Z" transform="translate(-2.221 -2.214)" fill="#11253d"/>
+  <path id="share" d="M19.013,16.615a3.993,3.993,0,0,0-3.107,1.509l-5.838-3.65a3.562,3.562,0,0,0,0-2.108l5.838-3.65a3.993,3.993,0,1,0-.887-2.484,3.826,3.826,0,0,0,.16,1.054l-5.838,3.65a3.993,3.993,0,1,0,0,4.967l5.838,3.65a3.826,3.826,0,0,0-.16,1.055,3.993,3.993,0,1,0,3.993-3.993Zm0-12.778a2.4,2.4,0,1,1-2.4,2.4,2.4,2.4,0,0,1,2.4-2.4ZM6.235,15.817a2.4,2.4,0,1,1,2.4-2.4,2.4,2.4,0,0,1-2.4,2.4ZM19.013,23a2.4,2.4,0,1,1,2.4-2.4,2.4,2.4,0,0,1-2.4,2.4Z" transform="translate(-2.221 -2.214)"/>
 </svg>

src/components/calendar/Calendar.tsx

@@ -163,8 +163,10 @@ export const Calendar: React.FC = () => {
                                     <h5> { schedule.title } </h5>
                                     <p> { schedule.description } </p>
                                     <p> { schedule.duration_in_min } minutes practice </p>
-                                </NavLink>
-                            }                        
+                                </NavLink>;
+                            } else {
+                                return null;
+                            }
                     }) }
                 </li>
             }) }            

src/components/category-details/CategoryDetails.tsx

@@ -7,6 +7,8 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s
 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 { ReactComponent as ShareIcon } from '../../assets/icons/share.svg';
+import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg';
 
 import { CircularProgressbar } from "react-circular-progressbar";
 import { NavLink } from "react-router-dom";
@@ -61,6 +63,18 @@ export const CategoryDetails: React.FC = () => {
                 icon: <ComposeIcon />,
                 title: 'Edit',
                 function: () => { console.log("Edit Clicked") }
+            }, {
+                icon: <ExportLine />,
+                title: 'Move',
+                function: () => { console.log("Move Clicked") }
+            }, {
+                icon: <ShareIcon />,
+                title: 'Share',
+                function: () => { console.log("Share Clicked") }
+            }, {
+                icon: <DeleteIcon />,
+                title: 'Delete',
+                function: () => { console.log("Delete Clicked") }
             }]} />
         </header>
         

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

@@ -4,13 +4,23 @@
 
 .backdrop {
     background-color: black;
-    opacity: 0.2;
     width: 100vw;
     height: 100vh;
     z-index: 1;
     position: fixed;
     left: 0;
     top: 0;
+    opacity: 0;
+    animation: fadeIn 0.3s forwards;
+    backdrop-filter: blur(5px);
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        } 100% {
+            opacity: 0.2;
+        }
+    }
 }
 
 .moreButton {

src/components/revise/Revise.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { NavLink } from "react-router-dom";
 import styles from './Revise.module.scss';
 
 import { Question } from "./question/Question";

src/components/shelf-details/ShelfDetails.module.scss

@@ -83,12 +83,7 @@
         justify-content: center;
         background-color: transparent;
         border: none;
-
-        svg {
-            fill: white;
-            width: 1.8rem;
-            height: 1.8rem;
-        }
+        z-index: 1;
     }
 
     .progressHolder {

src/components/shelf-details/ShelfDetails.tsx

@@ -10,7 +10,14 @@ import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
 import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
+
+import { ReactComponent as ComposeIcon } from '../../assets/icons/compose.svg';
+import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg';
+import { ReactComponent as ShareIcon } from '../../assets/icons/share.svg';
+import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg';
+
 import { IWord } from "../../structure/word";
+import { PopoverOptions } from "../popover-options/PopoverOptions";
 
 export const ShelfDetails: React.FC = () => {
     const location = useLocation();
@@ -49,9 +56,25 @@ export const ShelfDetails: React.FC = () => {
         </header>
         
         <header className={styles.tabHeading}>
-            <button className={styles.moreButton}>
-                <MoreIcon />
-            </button>
+            <div className={styles.moreButton}>
+                <PopoverOptions options={[{
+                    icon: <ComposeIcon />,
+                    title: 'Edit',
+                    function: () => { console.log("Edit Clicked") }
+                }, {
+                    icon: <ExportLine />,
+                    title: 'Move',
+                    function: () => { console.log("Move Clicked") }
+                }, {
+                    icon: <ShareIcon />,
+                    title: 'Share',
+                    function: () => { console.log("Share Clicked") }
+                }, {
+                    icon: <DeleteIcon />,
+                    title: 'Delete',
+                    function: () => { console.log("Delete Clicked") }
+                }]} />
+            </div>
 
             <h4> { shelf.name } </h4>
             <p> { shelf.words.length } Words </p>