From 2b832976ea0bdf838ab9f4c8a9870e336e0530b0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 8 Jul 2021 13:29:17 +0530 Subject: [PATCH] home page upfold + Searchbar --- src/assets/icons/Intern Badge.svg | 347 ------------------ src/assets/icons/intern-badge.svg | 72 ++++ .../{Novice Badge.svg => novice-badge.svg} | 0 src/components/home/Home.module.scss | 94 +++++ src/components/home/Home.tsx | 8 +- src/index.css | 1 + 6 files changed, 172 insertions(+), 350 deletions(-) delete mode 100644 src/assets/icons/Intern Badge.svg create mode 100644 src/assets/icons/intern-badge.svg rename src/assets/icons/{Novice Badge.svg => novice-badge.svg} (100%) diff --git a/src/assets/icons/Intern Badge.svg b/src/assets/icons/Intern Badge.svg deleted file mode 100644 index 58701a3..0000000 --- a/src/assets/icons/Intern Badge.svg +++ /dev/null @@ -1,347 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/icons/intern-badge.svg b/src/assets/icons/intern-badge.svg new file mode 100644 index 0000000..dd06883 --- /dev/null +++ b/src/assets/icons/intern-badge.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/Novice Badge.svg b/src/assets/icons/novice-badge.svg similarity index 100% rename from src/assets/icons/Novice Badge.svg rename to src/assets/icons/novice-badge.svg diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index e69de29..6f7a995 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -0,0 +1,94 @@ +.pageHeader { + background-color: var(--orange); + text-align: center; + padding: 1rem 0 0.5rem; +} + +.upfold { + background-color: var(--orange); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem 5rem; + + .profileImage { + display: block; + position: relative; + width: 10rem; + height: 10rem; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + object-position: center; + display: block; + } + + svg { + position: absolute; + bottom: -2rem; + right: calc(50% - 3rem); + width: 6rem; + height: 6rem; + } + } + + .userDetails { + width: calc(100% - 12rem); + display: grid; + grid-template-columns: 1fr 1fr 1fr; + + h2 { + grid-column-start: 1; + grid-column-end: 4; + font-size: 1.7rem; + color: var(--black); + } + + .stat { + margin-top: 1rem; + color: var(--brownish-black); + line-height: 1.2; + + h5 { + font-size: 1.6rem; + } + + label { + font-size: 1.6rem; + } + } + } +} + +.searchBar { + background-color: white; + display: flex; + border-radius: 3rem; + height: 5rem; + width: calc(100% - 4rem); + margin: -2.5rem auto 2.5rem; + align-items: center; + justify-content: space-between; + box-shadow: 0px 5px 30px -20px var(--grey); + + 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); + } +} + +.List { + +} \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index ad26ca6..55f7d78 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -14,6 +14,7 @@ import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg'; import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg'; import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg'; import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg'; +import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg'; export const Home: React.FC = () => { return
@@ -23,10 +24,11 @@ export const Home: React.FC = () => {
-
+
{/* eslint-disable-next-line */} profile-image -
+ +

Neymar Junior

@@ -41,7 +43,7 @@ export const Home: React.FC = () => {
- +
diff --git a/src/index.css b/src/index.css index 07d0ac1..c54eba1 100644 --- a/src/index.css +++ b/src/index.css @@ -15,6 +15,7 @@ --blue: #668fe1; --teal: #4e9096; --black: #11253d; + --brownish-black: rgb(71, 32, 32); --grey: #586471; --light-grey: #84919e; --creamy-white: #fef8ec;