From 93e7e1f811d8b3cedc1498808ba5bc8ab2d1d5dd Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 13 Jul 2021 12:44:56 +0530 Subject: [PATCH] categories page UI --- src/assets/icons/plus-circle.svg | 6 +- .../categories/Categories.module.scss | 193 ++++++++++++++++++ src/components/categories/Categories.tsx | 75 ++++++- src/components/home/Home.tsx | 6 +- 4 files changed, 273 insertions(+), 7 deletions(-) diff --git a/src/assets/icons/plus-circle.svg b/src/assets/icons/plus-circle.svg index 0948bba..00d234a 100644 --- a/src/assets/icons/plus-circle.svg +++ b/src/assets/icons/plus-circle.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/components/categories/Categories.module.scss b/src/components/categories/Categories.module.scss index e69de29..bea2330 100644 --- a/src/components/categories/Categories.module.scss +++ b/src/components/categories/Categories.module.scss @@ -0,0 +1,193 @@ +.pageHeader { + background-color: transparent; + text-align: center; + padding: 1.5rem 0; + position: relative; + + figure { + display: block; + position: absolute; + right: 1rem; + top: 1rem; + + img { + display: block; + width: 4rem; + height: 4rem; + border-radius: 50%; + border: 1px solid var(--creamy-white); + } + } +} + +.tabHeading { + background-color: transparent; + position: relative; + padding: 3rem 0 8rem; + text-align: center; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: var(--teal); + border-top-left-radius: 3rem; + border-top-right-radius: 3rem; + } + + &>* { + position: relative; + } + + h4 { + color: white; + font-size: 2.2rem; + } + + p { + color: white; + font-size: 1.4rem; + } +} + +.searchHolder { + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: var(--creamy-white); + border-top-left-radius: 3rem; + border-top-right-radius: 3rem; + } + + &>* { + position: relative; + } + + .searchBar { + background-color: white; + display: flex; + border-radius: 3rem; + height: 5rem; + width: calc(100% - 6rem); + margin: -2.5rem auto 0; + align-items: center; + justify-content: space-between; + box-shadow: 0px 5px 30px -20px var(--grey); + transform: translateY(-2.5rem); + + input { + height: 100%; + border: 0; + width: calc(100% - 5rem); + background-color: transparent; + padding-left: 2rem; + font-size: 1.4rem; + } + + svg { + width: 5rem; + fill: var(--red); + } + } +} + +.addButton { + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: calc(100% - 4rem); + border: 0.2rem dashed var(--orange); + border-radius: 3rem; + background-color: transparent; + height: 5rem; + color: var(--orange); + cursor: pointer; + font-weight: 700; + + svg { + width: 2rem; + height: 2rem; + margin-right: 1rem; + fill: var(--orange); + } +} + +$block-padding: 2.5rem 2rem; + +.Grid { + padding: #{$block-padding}; + + ul { + list-style: none; + display: grid; + grid-gap: 2rem; + grid-template-columns: 1fr 1fr; + } + + li { + display: flex; + justify-content: space-between; + align-items: center; + + &: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); + font-weight: 500; + } + } +} \ No newline at end of file diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx index 2fb617c..1399fc0 100644 --- a/src/components/categories/Categories.tsx +++ b/src/components/categories/Categories.tsx @@ -1,8 +1,81 @@ import React 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'; +import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg'; + +import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg'; +import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg'; +import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg'; +import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg'; export const Categories: React.FC = () => { return
- categories +
+ + +
+ {/* eslint-disable-next-line */} + profile-image +
+
+ +
+

Categories

+

4 Types

+
+ +
+
+ + +
+
+ + + + +
+
    +
  • +
    + +
    +
    + + 5 Shelves +
    +
    • +
  • +
    + +
    +
    + + 3 Shelves +
    +
    • +
  • +
    + +
    +
    + + 5 Shelves +
    +
    • +
  • +
    + +
    +
    + + 2 Shelves +
    +
    • +
+
} \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index fb8962d..e7e6987 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -16,7 +16,7 @@ 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, buildStyles } from 'react-circular-progressbar'; +import { CircularProgressbar } from 'react-circular-progressbar'; export const Home: React.FC = () => { @@ -27,8 +27,7 @@ export const Home: React.FC = () => {
-
- {/* eslint-disable-next-line */} +
{ strokeLinecap: 'round', }} } /> + {/* eslint-disable-next-line */} profile-image