diff --git a/src/App.tsx b/src/App.tsx index 2569b78..1191aa5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,9 @@ import { Tabs } from "./components/tabs/Tabs"; function App() { return (
- +
+ +
); diff --git a/src/assets/icons/activity.svg b/src/assets/icons/activity.svg index 2d47e5b..6de78cf 100644 --- a/src/assets/icons/activity.svg +++ b/src/assets/icons/activity.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/book.svg b/src/assets/icons/bookmark.svg similarity index 92% rename from src/assets/icons/book.svg rename to src/assets/icons/bookmark.svg index bb88e1b..27a5a41 100644 --- a/src/assets/icons/book.svg +++ b/src/assets/icons/bookmark.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/bookshelf.svg b/src/assets/icons/bookshelf.svg index 4f18efd..3bbb8dc 100644 --- a/src/assets/icons/bookshelf.svg +++ b/src/assets/icons/bookshelf.svg @@ -1,7 +1,7 @@ - + diff --git a/src/assets/icons/bx-brain.svg b/src/assets/icons/bx-brain.svg index 435843c..fa35159 100644 --- a/src/assets/icons/bx-brain.svg +++ b/src/assets/icons/bx-brain.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/bx-calendar.svg b/src/assets/icons/bx-calendar.svg index 3c7f090..ac93a5b 100644 --- a/src/assets/icons/bx-calendar.svg +++ b/src/assets/icons/bx-calendar.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/assets/icons/bx-search-alt.svg b/src/assets/icons/bx-search-alt.svg index ab5567d..a568226 100644 --- a/src/assets/icons/bx-search-alt.svg +++ b/src/assets/icons/bx-search-alt.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/assets/icons/check-circle.svg b/src/assets/icons/check-circle.svg index bb62928..cade42b 100644 --- a/src/assets/icons/check-circle.svg +++ b/src/assets/icons/check-circle.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/icons/expand.svg b/src/assets/icons/expand.svg index dc7d43c..9889208 100644 --- a/src/assets/icons/expand.svg +++ b/src/assets/icons/expand.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg index 5818309..d05aaa2 100644 --- a/src/assets/icons/plus.svg +++ b/src/assets/icons/plus.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/readme.svg b/src/assets/icons/readme.svg index 0a5e3d5..e606e5f 100644 --- a/src/assets/icons/readme.svg +++ b/src/assets/icons/readme.svg @@ -1,5 +1,5 @@ - + diff --git a/src/assets/icons/search (2).svg b/src/assets/icons/search (2).svg deleted file mode 100644 index eaa82f3..0000000 --- a/src/assets/icons/search (2).svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..93e43f0 --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/time.svg b/src/assets/icons/time.svg index 3fd1cee..8fcd3a0 100644 --- a/src/assets/icons/time.svg +++ b/src/assets/icons/time.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/user-speaker.svg b/src/assets/icons/user-speaker.svg index 80d8384..b4b51c4 100644 --- a/src/assets/icons/user-speaker.svg +++ b/src/assets/icons/user-speaker.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss deleted file mode 100644 index 2a7fe61..0000000 --- a/src/assets/styles/common.scss +++ /dev/null @@ -1,6 +0,0 @@ -.page { - width: 100vw; - height: 100vh; - background-color: var(--creamy-white); - overflow: auto; -} \ No newline at end of file diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index d52d3d2..e69de29 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -1 +0,0 @@ -@import '../../assets/styles/common.scss'; \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 2a4e2cd..ad26ca6 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,6 +1,170 @@ import React 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'; +import { ReactComponent as BookIcon } from '../../assets/icons/readme.svg'; +import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg'; +import { ReactComponent as BookShelfIcon } from '../../assets/icons/bookshelf.svg'; +import { ReactComponent as CalendarIcon } from '../../assets/icons/bx-calendar.svg'; +import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg'; +import { ReactComponent as ActivityIcon } from '../../assets/icons/activity.svg'; +import { ReactComponent as CheckCircleIcon } from '../../assets/icons/check-circle.svg'; +import { ReactComponent as ExpandIcon } from '../../assets/icons/expand.svg'; +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'; export const Home: React.FC = () => { - return
+ return
+ +
+ +
+ +
+
+ {/* eslint-disable-next-line */} + profile-image +
+
+

Neymar Junior

+
+
1.2K
+ +
+
+
10
+ +
+
+
+ +
+ + +
+ +
+
+

+ + Revisions +

+ +
+ +
+ +
+
+

+ + Active Shelves +

+ + +
+ +
+ +
+
+

+ + Categories +

+ + +
+ +
+ +
} \ No newline at end of file diff --git a/src/components/tabs/Tabs.module.scss b/src/components/tabs/Tabs.module.scss index 13236b5..45d5488 100644 --- a/src/components/tabs/Tabs.module.scss +++ b/src/components/tabs/Tabs.module.scss @@ -55,7 +55,7 @@ $tab-width: 95vw; width: calc(#{$tab-width} / 5); button { - box-shadow: 0px 0px 10px -2px var(--grey); + box-shadow: 0px 0px 2px var(--red); width: 5rem; height: 5rem; border-radius: 50%; diff --git a/src/index.css b/src/index.css index a2a5c90..07d0ac1 100644 --- a/src/index.css +++ b/src/index.css @@ -19,4 +19,13 @@ --light-grey: #84919e; --creamy-white: #fef8ec; font-size: 62.5%; +} + +.page { + width: 100vw; + height: 100vh; + background-color: var(--creamy-white); + overflow: auto; + position: relative; + padding-bottom: 100px; } \ No newline at end of file