diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg index 7cd524d..8d71480 100644 --- a/src/assets/icons/text.svg +++ b/src/assets/icons/text.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/components/add-category/AddCategory.module.scss b/src/components/add-category/AddCategory.module.scss new file mode 100644 index 0000000..2d6736a --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/add-category/AddCategory.tsx b/src/components/add-category/AddCategory.tsx new file mode 100644 index 0000000..bebf2fe --- /dev/null +++ b/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 = [, , , ] + +export const AddCategory: React.FC = (props: ownProps) => { + const [newCategory, setnewCategory] = useState({ + name: '', + icon: , + shelves: [] + }); + + const [showIconSet, setShowIconSet] = useState(false); + + return
+
+
+
+ +
Add Category
+
+
+
+
setShowIconSet(!showIconSet)}> + { newCategory.icon } +
+ { + setnewCategory({ + ...newCategory, + name: event.currentTarget.value + }); + }} /> +
+ + { showIconSet &&
    + { IconSet.map(iconSample =>
  • { + setnewCategory({ + ...newCategory, + icon: iconSample + }); + setShowIconSet(false); + }}> {iconSample}
    • ) } +
} + + +
+
+
+} \ No newline at end of file diff --git a/src/components/add-shelf/AddShelf.module.scss b/src/components/add-shelf/AddShelf.module.scss index 2aeac7a..e26c08d 100644 --- a/src/components/add-shelf/AddShelf.module.scss +++ b/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; diff --git a/src/components/categories/Categories.module.scss b/src/components/categories/Categories.module.scss index e9ad3f0..684287d 100644 --- a/src/components/categories/Categories.module.scss +++ b/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); } } diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx index d2a214e..d2b4889 100644 --- a/src/components/categories/Categories.tsx +++ b/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>(userProfileData.categories); + const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState(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
@@ -25,19 +41,18 @@ export const Categories: React.FC = () => {
- + filterCategories(event.currentTarget.value)} />
- -
    - { userProfileData.categories.map((category, index) => { + { categoryResult.map((category, index) => { return
  • { category.icon } @@ -50,5 +65,7 @@ export const Categories: React.FC = () => { })}
+ + { isAddCategoryPopupOpen && setAddCategoryPopupState(false)} /> }
} \ No newline at end of file diff --git a/src/components/category-details/CategoryDetails.tsx b/src/components/category-details/CategoryDetails.tsx index 741d730..b06b0b9 100644 --- a/src/components/category-details/CategoryDetails.tsx +++ b/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 = () => { - + + Add Shelf +
    diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 899dff5..bc0dce3 100644 --- a/src/components/home/Home.tsx +++ b/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(false); + return
    @@ -193,7 +196,7 @@ export const Home: React.FC = () => { -
    @@ -211,5 +214,7 @@ export const Home: React.FC = () => { })}
+ + { isAddCategoryPopupOpen && setAddCategoryPopupState(false)} /> } } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 95b291b..0f36757 100644 --- a/src/index.css +++ b/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%; }