Add category UI

src/assets/icons/text.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="23" height="17.062" viewBox="0 0 23 17.062">
   <g id="text" transform="translate(-0.701 -5.168)">
-    <path id="Path_39" data-name="Path 39" d="M13.912,20.794,8.3,5.836a1.028,1.028,0,0,0-1.926,0L.767,20.794a1.028,1.028,0,1,0,1.926.722l1.69-4.507a.094.094,0,0,1,.087-.06h5.737a.094.094,0,0,1,.087.06l1.69,4.507a1.028,1.028,0,1,0,1.926-.722Zm-8.687-6.03L7.252,9.358a.094.094,0,0,1,.175,0l2.027,5.407a.094.094,0,0,1-.087.126H5.312a.094.094,0,0,1-.087-.126Z" fill="#fff"/>
-    <path id="Path_40" data-name="Path 40" d="M25.757,11.918a4.757,4.757,0,0,0-4.441,2.87,1.028,1.028,0,1,0,1.893.8A2.7,2.7,0,0,1,25.7,13.974a2.737,2.737,0,0,1,2.73,2.751.07.07,0,0,1-.068.07c-1.024.029-2.24.1-3.325.224-2.56.3-4.087,1.7-4.087,3.732a3.669,3.669,0,0,0,1.153,2.743,3.924,3.924,0,0,0,2.68,1,5.975,5.975,0,0,0,3.643-1.086h0a1.028,1.028,0,1,0,2.057.009V16.73a4.8,4.8,0,0,0-4.732-4.813Zm-.971,10.517a1.631,1.631,0,0,1-1.776-1.683,1.272,1.272,0,0,1,.581-1.133,3.772,3.772,0,0,1,1.689-.557c.987-.116,2.095-.18,3.045-.209a.094.094,0,0,1,.094.1C28.292,21.295,27.1,22.435,24.786,22.435Z" transform="translate(-6.788 -2.262)" fill="#fff"/>
+    <path id="Path_39" data-name="Path 39" d="M13.912,20.794,8.3,5.836a1.028,1.028,0,0,0-1.926,0L.767,20.794a1.028,1.028,0,1,0,1.926.722l1.69-4.507a.094.094,0,0,1,.087-.06h5.737a.094.094,0,0,1,.087.06l1.69,4.507a1.028,1.028,0,1,0,1.926-.722Zm-8.687-6.03L7.252,9.358a.094.094,0,0,1,.175,0l2.027,5.407a.094.094,0,0,1-.087.126H5.312a.094.094,0,0,1-.087-.126Z"/>
+    <path id="Path_40" data-name="Path 40" d="M25.757,11.918a4.757,4.757,0,0,0-4.441,2.87,1.028,1.028,0,1,0,1.893.8A2.7,2.7,0,0,1,25.7,13.974a2.737,2.737,0,0,1,2.73,2.751.07.07,0,0,1-.068.07c-1.024.029-2.24.1-3.325.224-2.56.3-4.087,1.7-4.087,3.732a3.669,3.669,0,0,0,1.153,2.743,3.924,3.924,0,0,0,2.68,1,5.975,5.975,0,0,0,3.643-1.086h0a1.028,1.028,0,1,0,2.057.009V16.73a4.8,4.8,0,0,0-4.732-4.813Zm-.971,10.517a1.631,1.631,0,0,1-1.776-1.683,1.272,1.272,0,0,1,.581-1.133,3.772,3.772,0,0,1,1.689-.557c.987-.116,2.095-.18,3.045-.209a.094.094,0,0,1,.094.1C28.292,21.295,27.1,22.435,24.786,22.435Z" transform="translate(-6.788 -2.262)"/>
   </g>
 </svg>

src/components/add-category/AddCategory.module.scss

@@ -0,0 +1,134 @@
+.popupHolder {
+    position: fixed;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    background-color: transparent;
+    width: 100vw;
+    height: 100vh;
+    box-shadow: 0px -10rem 20rem 10rem inset var(--creamy-white);
+
+    .background {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.popup {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-top-right-radius: 3rem;
+    border-top-left-radius: 3rem;
+    overflow: hidden;
+    box-shadow: 0px 0px 20px -3px var(--grey);
+
+    header {
+        background-color: var(--orange);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 2rem 2rem 6rem;
+
+        svg {
+            fill: white;
+            width: 1rem;
+            margin-right: 0.5rem;
+        }
+
+        h5 {
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: white;
+        }
+    }
+
+    .form {
+        background-color: var(--creamy-white);
+        border-top-right-radius: 3rem;
+        border-top-left-radius: 3rem;
+        overflow: hidden;
+        margin-top: -4rem;
+    }
+
+    .inputHolder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 2rem;
+
+        .icon {
+            width: 4rem;
+            height: 4rem;
+            margin-right: 1rem;
+            background-color: var(--red);
+            border: 2px solid var(--red);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &.active {
+                background-color: transparent;
+
+                svg {
+                    fill: var(--red);
+                }
+            }
+
+            svg {
+                fill: white;
+                height: 1.8rem;
+                width: 1.8rem;
+            }
+        }
+
+        input {
+            border: none;
+            height: 4rem;
+            flex-grow: 1;
+            display: block;
+            border-radius: 3rem;
+            box-shadow: 0px 2px 10px -5px inset var(--light-grey);
+            padding: 0 1.5rem;
+            font-size: 1.2rem;
+            background-color: var(--form-input-bg);
+        }
+    }
+
+    .iconHolder {
+        margin: 0 1.5rem;
+        border: 2px solid var(--red);
+        border-radius: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0.1rem;
+
+        svg {
+            fill: var(--grey);
+            width: 2.5rem;
+            height: 2.5rem;
+            margin: 1rem;
+            cursor: pointer;
+        }
+    }
+
+    .addButton {
+        background-color: var(--teal);
+        color: white;
+        border-radius: 2rem;
+        height: 3.5rem;
+        width: 15rem;
+        font-size: 1.4rem;
+        font-weight: 600;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 2rem auto;        
+    }
+}

src/components/add-category/AddCategory.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import styles from './AddCategory.module.scss';
+import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
+import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
+import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
+import { ReactComponent as TimerIcon } from '../../assets/icons/timer.svg';
+import { ReactComponent as TextIcon } from '../../assets/icons/text.svg';
+import { ICategory } from "../../structure/category";
+import { userProfileData } from "../home/Home";
+
+type ownProps = {
+    hidePopup: () => void
+}
+
+const IconSet = [<BrainIcon />, <TimeIcon />, <TimerIcon />, <TextIcon />]
+
+export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
+    const [newCategory, setnewCategory] = useState<ICategory>({
+        name: '',
+        icon: <BrainIcon />,
+        shelves: []
+    });
+
+    const [showIconSet, setShowIconSet] = useState<Boolean>(false);
+
+    return <div className={styles.popupHolder}>
+        <div className={styles.background} onClick={props.hidePopup}></div>
+        <section className={styles.popup}>
+            <header>
+                <PlusIcon />
+                <h5> Add Category </h5>
+            </header>
+            <section className={styles.form}>
+                <div className={styles.inputHolder}>
+                    <div className={styles.icon + ' ' + (showIconSet ? styles.active : '')} onClick={() => setShowIconSet(!showIconSet)}>
+                        { newCategory.icon }
+                    </div>
+                    <input type="text" placeholder={'Category Name'} onInput={(event) => {
+                        setnewCategory({
+                            ...newCategory,
+                            name: event.currentTarget.value
+                        });
+                    }} />
+                </div>
+                
+                { showIconSet && <ul className={styles.iconHolder}>
+                    { IconSet.map(iconSample => <li onClick={() => {
+                        setnewCategory({
+                            ...newCategory,
+                            icon: iconSample
+                        });
+                        setShowIconSet(false);
+                    }}> {iconSample} </li>) }
+                </ul> }
+
+                <button className={styles.addButton} onClick={() => {
+                    userProfileData.categories.push(newCategory);
+                    props.hidePopup();
+                }}>
+                    Add
+                </button>
+            </section>
+        </section>
+    </div>
+}

src/components/add-shelf/AddShelf.module.scss

@@ -50,11 +50,11 @@
         padding: 0 1.5rem;
         font-size: 1.2rem;
         margin-bottom: 1.5rem;
-        background-color: #efe6d6;
+        background-color: var(--form-input-bg);
     }
 
     textarea {
-        background-color: #efe6d6;
+        background-color: var(--form-input-bg);
         font-size: 1.2rem;
         padding: 1rem 1.5rem;
         box-shadow: 0px 2px 10px -5px inset var(--light-grey);
@@ -215,7 +215,7 @@
     }
 
     .toggle {
-        background-color: #efe6d6;
+        background-color: var(--form-input-bg);
         width: 4rem;
         height: 2rem;
         border-radius: 3rem;

src/components/categories/Categories.module.scss

@@ -145,19 +145,19 @@ $block-padding: 2.5rem 2rem;
         justify-content: space-between;
         align-items: center;
 
-        &:nth-child(1) .icon {
+        &:nth-child(5n - 4) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(2) .icon {
+        &:nth-child(5n - 3) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(3) .icon {
+        &:nth-child(5n - 2) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(4) .icon {
+        &:nth-child(5n - 1) .icon {
             background-color: var(--teal);
         }
     }

src/components/categories/Categories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from './Categories.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
@@ -6,8 +6,24 @@ import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circl
 
 import { userProfileData } from "../home/Home";
 import { NavLink } from "react-router-dom";
+import { ICategory } from "../../structure/category";
+import { AddCategory } from "../add-category/AddCategory";
 
 export const Categories: React.FC = () => {
+    const [categoryResult, setCategories] = useState<Array<ICategory>>(userProfileData.categories);
+    const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
+    
+    const filterCategories = (text: string) => {
+        if (text.length > 0) {
+            let result = categoryResult.filter(category => {
+                return category.name.toLowerCase().includes(text.toLowerCase());
+            });
+            setCategories(result);
+        } else {
+            setCategories(userProfileData.categories);
+        }
+    }
+
     return <section className="page">
         <header className={styles.pageHeader}>
             <LogoIcon />
@@ -25,19 +41,18 @@ export const Categories: React.FC = () => {
         
         <section className={styles.searchHolder}>
             <div className={styles.searchBar}>
-                <input type="text" placeholder={'Search Category'} />
+                <input type="text" placeholder={'Search Category'} onInput={(event) => filterCategories(event.currentTarget.value)} />
                 <SearchIcon />
             </div>
         </section>
 
-        <button className={styles.addButton}>
+        <button className={styles.addButton} onClick={() => setAddCategoryPopupState(true)}>
             <PlusCircledIcon /> Add Category
         </button>
 
-
         <section className={styles.Grid}>
             <ul>
-                { userProfileData.categories.map((category, index) => {
+                { categoryResult.map((category, index) => {
                     return <li key={category.name}>
                         <div className={styles.icon}>
                             { category.icon }
@@ -50,5 +65,7 @@ export const Categories: React.FC = () => {
                 })}                
             </ul>
         </section>
+
+        { isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} /> }
     </section>
 }

src/components/category-details/CategoryDetails.tsx

@@ -9,6 +9,7 @@ import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circl
 
 import { userProfileData } from "../home/Home";
 import { CircularProgressbar } from "react-circular-progressbar";
+import { NavLink } from "react-router-dom";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();
@@ -49,9 +50,9 @@ export const CategoryDetails: React.FC = () => {
             </div>
         </section>
 
-        <button className={styles.addButton}>
-            <PlusCircledIcon /> Add Category
-        </button>
+        <NavLink to={'/add-shelf'} className={styles.addButton}>
+            <PlusCircledIcon /> Add Shelf
+        </NavLink>
 
         <section className={styles.Shelf}>
             <ul>

src/components/home/Home.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from './Home.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
@@ -18,6 +18,7 @@ import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.s
 import { CircularProgressbar } from 'react-circular-progressbar';
 import { IProfile } from "../../structure/profile";
 import { NavLink } from "react-router-dom";
+import { AddCategory } from "../add-category/AddCategory";
 
 
 export var userProfileData : IProfile = {
@@ -61,6 +62,8 @@ export var userProfileData : IProfile = {
 };
 
 export const Home: React.FC = () => {
+    const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
+
     return <section className="page">
 
         <header className={styles.pageHeader}>
@@ -193,7 +196,7 @@ export const Home: React.FC = () => {
                 <NavLink to={'/categories'} className={styles.expandButton}>
                     <ExpandIcon />
                 </NavLink>
-                <button>
+                <button onClick={() => setAddCategoryPopupState(true)}>
                     <PlusIcon />
                 </button>
             </header>
@@ -211,5 +214,7 @@ export const Home: React.FC = () => {
                 })}                
             </ul>
         </section>
+
+        { isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} /> }
     </section>
 }

src/index.css

@@ -25,6 +25,7 @@ h1, h2, h3, h4, h5, h6 {
     --light-grey: #84919e;
     --lighter-grey: #d5e0ec;
     --creamy-white: #fef8ec;
+    --form-input-bg: #efe6d6;
     font-size: 62.5%;
 }