From d26730ada27fbd36acd82470e7bf312c845d31ed Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 20 Jul 2021 19:16:39 +0530 Subject: [PATCH] Add Shelf UI --- src/App.tsx | 4 + src/assets/icons/Close.svg | 4 +- src/components/add-shelf/AddShelf.module.scss | 247 ++++++++++++++++++ src/components/add-shelf/AddShelf.tsx | 55 ++++ src/components/add-word/AddWord.module.scss | 14 +- src/components/add-word/AddWord.tsx | 122 +++++---- .../categories/Categories.module.scss | 4 + src/components/home/Home.module.scss | 6 +- src/components/home/Home.tsx | 20 +- src/components/tabs/Tabs.tsx | 2 +- 10 files changed, 403 insertions(+), 75 deletions(-) create mode 100644 src/components/add-shelf/AddShelf.module.scss create mode 100644 src/components/add-shelf/AddShelf.tsx diff --git a/src/App.tsx b/src/App.tsx index b347800..37a6bee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,12 +3,16 @@ import { Categories } from './components/categories/Categories'; import { Revise } from './components/revise/Revise'; import { Tabs } from "./components/tabs/Tabs"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; +import { AddWord } from "./components/add-word/AddWord"; +import { AddShelf } from "./components/add-shelf/AddShelf"; function App() { return ( + + diff --git a/src/assets/icons/Close.svg b/src/assets/icons/Close.svg index 5bc1876..28b1539 100644 --- a/src/assets/icons/Close.svg +++ b/src/assets/icons/Close.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/components/add-shelf/AddShelf.module.scss b/src/components/add-shelf/AddShelf.module.scss new file mode 100644 index 0000000..ad1382c --- /dev/null +++ b/src/components/add-shelf/AddShelf.module.scss @@ -0,0 +1,247 @@ +.createShelfModal { + background-color: var(--creamy-white); + z-index: 2; + width: 100vw; + height: 100vh; + overflow: auto; + opacity: 0; + position: relative; + animation: fadeIn 0.3s forwards; + + @keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(10vh); + } 100% { + opacity: 1; + transform: translateY(0vh); + } + } +} + +.modalHeader { + background-color: var(--orange); + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 4.5rem; + padding-top: 0.5rem; + + h4 { + flex-grow: 1; + padding-left: 4rem; + color: white; + font-size: 1.5rem; + text-align: center; + font-weight: 500; + } + + button { + margin-left: auto; + margin-right: 1rem; + width: 4rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border: none; + + svg { + width: 1.5rem; + fill: white; + } + } +} + +.form { + border-radius: 3rem; + background-color: var(--creamy-white); + overflow: hidden; + margin-top: -4rem; + padding: 2rem; + + input { + border: none; + height: 4rem; + width: 100%; + display: block; + border-radius: 3rem; + box-shadow: 0px 2px 10px -5px inset var(--light-grey); + padding: 0 1.5rem; + font-size: 1.2rem; + margin-bottom: 1.5rem; + background-color: #efe6d6; + } + + textarea { + background-color: #efe6d6; + font-size: 1.2rem; + padding: 1rem 1.5rem; + box-shadow: 0px 2px 10px -5px inset var(--light-grey); + border: none; + resize: none; + display: block; + width: 100%; + height: 10rem; + border-radius: 1.5rem; + margin-bottom: 1.5rem; + } +} + +.blockHeader { + display: flex; + align-items: center; + justify-content: flex-start; + + h5 { + font-size: 1.2rem; + font-weight: 600; + color: var(--black); + flex-grow: 1; + + svg { + width: 2rem; + height: 2rem; + fill: var(--black); + vertical-align: middle; + margin-right: 1rem; + } + } + + button, a { + background-color: var(--teal); + width: 3rem; + height: 3rem; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 1rem; + + &.expandButton { + background-color: var(--red); + } + + svg { + fill: white; + width: 1.2rem; + } + } +} + +.Grid { + padding: 0 0.5rem; + + ul { + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + } + + li { + display: flex; + justify-content: space-between; + align-items: center; + margin: 1rem 0; + + &:nth-child(1) .icon { + background-color: var(--orange); + } + + &:nth-child(2) .icon { + background-color: var(--blue); + } + + &:nth-child(3) .icon { + background-color: var(--red); + } + + &:nth-child(4) .icon { + background-color: var(--teal); + } + } + + .icon { + width: 4.5rem; + height: 4.5rem; + background-color: var(--grey); + display: flex; + align-items: center; + justify-content: center; + border-radius: 1rem; + + svg { + fill: white; + width: 2rem; + } + } + + .info { + width: calc(100% - 5.5rem); + + label, span { + display: block; + } + + label { + font-size: 1.2rem; + color: var(--black); + font-weight: 700; + } + + span { + font-size: 1rem; + color: var(--grey); + } + } +} + +.toggleHolder { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 2rem 0.5rem; + + label { + font-size: 1.2rem; + color: var(--black); + font-weight: 600; + } + + .toggle { + background-color: #efe6d6; + width: 4rem; + height: 2rem; + border-radius: 3rem; + box-shadow: 0px 0px 10px -5px inset var(--light-grey); + + span { + width: 2rem; + height: 2rem; + background-color: var(--red); + border-radius: 50%; + display: block; + transform: scale(0.8); + } + } +} + +.publishButton { + width: 9rem; + height: 3.5rem; + background-color: var(--teal); + font-size: 1.2rem; + font-weight: 500; + color: white; + display: block; + margin: 2rem auto; + border: none; + border-radius: 3rem; + position: fixed; + left: calc(50% - 4.5rem); + bottom: 1rem; + z-index: 1; +} \ No newline at end of file diff --git a/src/components/add-shelf/AddShelf.tsx b/src/components/add-shelf/AddShelf.tsx new file mode 100644 index 0000000..b35cfd3 --- /dev/null +++ b/src/components/add-shelf/AddShelf.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import styles from './AddShelf.module.scss'; +import { ReactComponent as CloseIcon } from '../../assets/icons/close.svg'; +import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg'; +import { userProfileData } from "../home/Home"; + +export const AddShelf: React.FC = () => { + return
+ +
+

Create New Shelf

+ +
+ +
+ + + +
+
+
+ Choose a category +
+ +
+
    + { userProfileData.categories.map(category => { + return
  • +
    + { category.icon } +
    +
    + + { category.shelves.length } Shelves +
    +
    • + })} +
+
+ +
+ +
+ +
+
+ + +
+
+} \ No newline at end of file diff --git a/src/components/add-word/AddWord.module.scss b/src/components/add-word/AddWord.module.scss index b3f35d0..edc23bf 100644 --- a/src/components/add-word/AddWord.module.scss +++ b/src/components/add-word/AddWord.module.scss @@ -1,13 +1,11 @@ .modalPage { background-color: var(--creamy-white); - position: fixed; - top: 0; - left: 0; z-index: 2; width: 100vw; height: 100vh; overflow: auto; opacity: 0; + position: relative; animation: fadeIn 0.3s forwards; @keyframes fadeIn { @@ -234,13 +232,18 @@ .shelfList { list-style: none; - padding: 1rem 2rem; + background-color: var(--creamy-white); + border-top-right-radius: 3rem; + border-top-left-radius: 3rem; + margin: -4rem 0; + min-height: 5rem; + padding: 2rem; header { margin: 0 auto 1rem; h5 { font-weight: 300; - font-size: 1.2rem; + font-size: 1.3rem; color: var(--black); } } @@ -313,6 +316,7 @@ box-shadow: 0px 0px 5px var(--creamy-white); font-weight: 600; color: var(--black); + font-size: 1.3rem; span { width: 3rem; diff --git a/src/components/add-word/AddWord.tsx b/src/components/add-word/AddWord.tsx index 5d41122..b594452 100644 --- a/src/components/add-word/AddWord.tsx +++ b/src/components/add-word/AddWord.tsx @@ -8,14 +8,10 @@ import { ReactComponent as AddIcon } from '../../assets/icons/plus.svg'; import { IWord } from "../../structure/word"; import { ALL_WORDS } from "../../data/all-words"; import { userProfileData } from "../home/Home"; +import { NavLink } from "react-router-dom"; - -type OwnProps = { - hideModal: () => void -}; - -export const AddWord: React.FC = (props: OwnProps) => { - const [searchResult, setSearchResult] = useState>([]); +export const AddWord: React.FC = () => { + const [searchWordResult, setSearchResult] = useState>([]); const [selectedWord, setSelectedWord] = useState(); const searchWords = (searchWord: string) => { @@ -32,63 +28,83 @@ export const AddWord: React.FC = (props: OwnProps) => { return
- -
Add a Word
+ { !selectedWord &&
Add a Word
} + { selectedWord &&
Add to Shelf
} -
+
{/* eslint-disable-next-line */} - profile-image + profile-image
-
-
- searchWords(event.currentTarget.value)} /> - + { !selectedWord &&
+
+
+ searchWords(event.currentTarget.value)} /> + +
-
-
    - { !selectedWord && searchResult.map((word) => { - return
  • -
    -

    { word.name } { word.pronounciation }

    - -
    -
    - { word.grammaticalDetails[0].typeName } -

    { word.grammaticalDetails[0].description }

    -
    - -
    • - }) } -
- - { selectedWord &&
    -
    -
    All Shelves
    -
    - { userProfileData.categories.map((category, categoryIndex) => { - return category.shelves.map((shelf, shelfIndex) => { - return
  • { - userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord); - }}> -
    - { category.icon } -
    -
    - - { category.name } +
      + { searchWordResult.map((word) => { + return
    • +
      +

      { word.name } { word.pronounciation }

      + +
      +
      + { word.grammaticalDetails[0].typeName } +

      { word.grammaticalDetails[0].description }

      +
      • - }) - }) } + }) } +
    +
} + + + { selectedWord &&
+
+
+ + +
+
+ +
    +
    +
    All Shelves
    +
    + { userProfileData.categories.map((category, categoryIndex) => { + return category.shelves.map((shelf, shelfIndex) => { + return
  • { + userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord); + }}> +
    + { category.icon } +
    +
    + + { category.name } +
    +
    • + }) + }) } - -
} + Create New Shelf + +
} + } \ No newline at end of file diff --git a/src/components/categories/Categories.module.scss b/src/components/categories/Categories.module.scss index bea2330..5efb165 100644 --- a/src/components/categories/Categories.module.scss +++ b/src/components/categories/Categories.module.scss @@ -4,6 +4,10 @@ padding: 1.5rem 0; position: relative; + svg { + transform: scale(0.9); + } + figure { display: block; position: absolute; diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index 0f2ac47..3628364 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -2,6 +2,10 @@ background-color: var(--orange); text-align: center; padding: 1rem 0 0.5rem; + + svg { + transform: scale(0.9); + } } .upfold { @@ -119,7 +123,7 @@ } } - button { + button, a { background-color: var(--teal); width: 3rem; height: 3rem; diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 54bfde6..98551d6 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -16,8 +16,8 @@ import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-spe import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg'; import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg'; import { CircularProgressbar } from 'react-circular-progressbar'; -import { AddWord } from "../add-word/AddWord"; import { IProfile } from "../../structure/profile"; +import { NavLink } from "react-router-dom"; export var userProfileData : IProfile = { @@ -61,8 +61,6 @@ export var userProfileData : IProfile = { }; export const Home: React.FC = () => { - const [isAddWordModalOpen, setAddWordModalState] = useState(false); - return
@@ -99,10 +97,10 @@ export const Home: React.FC = () => {
-
- setAddWordModalState(true)} /> + + -
+
@@ -154,9 +152,9 @@ export const Home: React.FC = () => { - +
    { userProfileData.categories.map(category => { @@ -210,12 +208,8 @@ export const Home: React.FC = () => { { category.shelves.length } Shelves - })} + })}
- - - { isAddWordModalOpen && { setAddWordModalState(false); }} /> } - } \ No newline at end of file diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx index d0bb41e..78b889c 100644 --- a/src/components/tabs/Tabs.tsx +++ b/src/components/tabs/Tabs.tsx @@ -12,7 +12,7 @@ export const Tabs: React.FC = () => { return
- +