├── .gitignore
├── README.md
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.js
    ├── DepositData.json
    ├── assets
    │   ├── icons
    │   │   ├── moon.svg
    │   │   └── sunny.svg
    │   └── images
    │   │   ├── jaggedarbor.png
    │   │   ├── lostround.png
    │   │   ├── noblecape.png
    │   │   ├── profilelg.png
    │   │   ├── profilesm.png
    │   │   └── tawnymaze.png
    ├── components
    │   ├── Main
    │   │   ├── AllDepositsBtn.js
    │   │   ├── Deposits
    │   │   │   ├── Deposit.js
    │   │   │   ├── Deposits.js
    │   │   │   └── SortingBar.js
    │   │   ├── Main.js
    │   │   ├── Nav.js
    │   │   └── NewDepositBtn.js
    │   └── Sidebar
    │   │   ├── Menu
    │   │       ├── Menu.js
    │   │       └── MenuLink.js
    │   │   ├── Profile.js
    │   │   ├── Sidebar.js
    │   │   └── ToggleSwitch.js
    ├── containers
    │   └── Dashboard.js
    ├── context
    │   └── themeContext.js
    ├── index.css
    ├── index.js
    └── styles
    │   ├── global.js
    │   └── theme.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `yarn start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `yarn test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `yarn build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `yarn eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 
46 | ### Code Splitting
47 | 
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 | 
50 | ### Analyzing the Bundle Size
51 | 
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 | 
54 | ### Making a Progressive Web App
55 | 
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 | 
58 | ### Advanced Configuration
59 | 
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 | 
62 | ### Deployment
63 | 
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 | 
66 | ### `yarn build` fails to minify
67 | 
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "figma-design-1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@iconify/icons-mdi-light": "^1.0.3",
 7 |     "@iconify/react": "^1.1.2",
 8 |     "@testing-library/jest-dom": "^4.2.4",
 9 |     "@testing-library/react": "^9.3.2",
10 |     "@testing-library/user-event": "^7.1.2",
11 |     "react": "^16.12.0",
12 |     "react-dom": "^16.12.0",
13 |     "react-scripts": "3.4.0",
14 |     "styled-components": "^5.0.1"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": "react-app"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
28 | 
29 |     <title>React App</title>
30 |   </head>
31 |   <body>
32 |     <noscript>You need to enable JavaScript to run this app.</noscript>
33 |     <div id="root"></div>
34 |     <!--
35 |       This HTML file is a template.
36 |       If you open it directly in the browser, you will see an empty page.
37 | 
38 |       You can add webfonts, meta tags, or analytics to this file.
39 |       The build step will place the bundled scripts into the <body> tag.
40 | 
41 |       To begin the development, run `npm start` or `yarn start`.
42 |       To create a production bundle, use `npm run build` or `yarn build`.
43 |     -->
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react'
 2 | import { ThemeProvider } from 'styled-components'
 3 | import Dashboard from './containers/Dashboard'
 4 | import { lightTheme, darkTheme } from './styles/theme'
 5 | import { GlobalStyles } from './styles/global'
 6 | import { ThemeContext } from './context/themeContext'
 7 | 
 8 | const App = () => {
 9 | 
10 |   const context = useContext(ThemeContext);
11 |   const { theme } = context;
12 | 
13 | 
14 |   return (
15 |     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
16 |       <>
17 |         <GlobalStyles />
18 |         <Dashboard />
19 |       </>
20 |     </ThemeProvider>
21 |   )
22 | }
23 | 
24 | export default App
25 | 


--------------------------------------------------------------------------------
/src/DepositData.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "active": [
 3 |         {
 4 |             "property": {
 5 |                 "address": {
 6 |                     "street": "771 Lost Round",
 7 |                     "city": "Sacramento",
 8 |                     "state": "CA"
 9 |                 },
10 |                 "imageUrl": "lostround.png"
11 |             },
12 |             "moveInDate": "25 February 2020",
13 |             "rent": 3000.00,
14 |             "deposit": {
15 |                 "amount": 9000.00,
16 |                 "type": "First, Last & Security"
17 |             },
18 |             "status": {
19 |                 "message": "Awaiting Bank Processing",
20 |                 "level": 2 
21 |             }
22 |         },
23 |         {
24 |             "property": {
25 |                 "address": {
26 |                     "street": "1491 Jagged Arbor",
27 |                     "city": "San Antonio",
28 |                     "state": "TX"
29 |                 },
30 |                 "imageUrl": "jaggedarbor.png"
31 |             },
32 |             "moveInDate": "12 March 2020",
33 |             "rent": 2300.00,
34 |             "deposit": {
35 |                 "amount": 4600.00,
36 |                 "type": "First & Last"
37 |             },
38 |             "status": {
39 |                 "message": "Payment Processed",
40 |                 "level": 3 
41 |             }
42 |         }
43 |     ],
44 |     "closed": [
45 |         {
46 |             "property": {
47 |                 "address": {
48 |                     "street": "1694 Noble Cape",
49 |                     "city": "Las Vegas",
50 |                     "state": "NV"
51 |                 },
52 |                 "imageUrl": "noblecape.png"
53 |             },
54 |             "moveInDate": "3 February 2020",
55 |             "rent": 3300.00,
56 |             "deposit": {
57 |                 "amount": 6900.00,
58 |                 "type": "Complete"
59 |             },
60 |             "status": {
61 |                 "message": "Awaiting Bank Processing",
62 |                 "level": 3 
63 |             }
64 |         },
65 |         {
66 |             "property": {
67 |                 "address": {
68 |                     "street": "1141 Tawny Maze",
69 |                     "city": "Raleigh",
70 |                     "state": "NC"
71 |                 },
72 |                 "imageUrl": "tawnymaze.png"
73 |             },
74 |             "moveInDate": "12 January 2020",
75 |             "rent": 2500.00,
76 |             "deposit": {
77 |                 "amount": 7500.00,
78 |                 "type": "First, Last & Security"
79 |             },
80 |             "status": {
81 |                 "message": "Expired: No Payment Received",
82 |                 "level": 1 
83 |             }
84 |         }
85 |     ]
86 | }


--------------------------------------------------------------------------------
/src/assets/icons/moon.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m121.5 64a57.5 57.5 0 1 1 -57.5-57.5 57.742 57.742 0 0 1 57.5 57.5z" fill="#e8e8e8"/><circle cx="48.497" cy="49.271" fill="#cdcdcd" r="8.846"/><path d="m120.4 75.24a57.276 57.276 0 0 1 -5.83 16.15 8.848 8.848 0 1 1 5.83-16.15z" fill="#cdcdcd"/><circle cx="53.005" cy="86.472" fill="#cdcdcd" r="8.846"/><circle cx="81.186" cy="92.472" fill="#cdcdcd" r="6"/><circle cx="88.192" cy="52.292" fill="#cdcdcd" r="6"/><circle cx="83.179" cy="37.877" fill="#cdcdcd" r="3"/><g fill="#2d1d40"><path d="m114.142 39.6a1.75 1.75 0 1 0 3.146-1.533c-.621-1.274-1.3-2.539-2-3.761a1.75 1.75 0 0 0 -3.027 1.757c.663 1.147 1.297 2.337 1.881 3.537z"/><path d="m123.25 64a59.111 59.111 0 0 0 -3.35-19.685 1.749 1.749 0 1 0 -3.3 1.162 55.653 55.653 0 0 1 3.15 18.523 56.256 56.256 0 0 1 -.674 8.626 10.594 10.594 0 1 0 -7.19 19.931 55.75 55.75 0 1 1 -3.9-62.822 1.75 1.75 0 0 0 2.76-2.152 59.245 59.245 0 1 0 5.366 64.641q1.062-1.958 1.97-3.984a59.007 59.007 0 0 0 4.039-12.658 59.663 59.663 0 0 0 1.129-11.582zm-14.87 18.59a7.095 7.095 0 0 1 10.035-6.462c-.02.09-.038.18-.059.27q-.34 1.5-.76 2.97c-.05.174-.1.347-.156.521a55.359 55.359 0 0 1 -2.175 6.026c-.073.171-.143.343-.218.513q-.617 1.4-1.31 2.767l-.127.245a7.066 7.066 0 0 1 -5.23-6.85z"/><path d="m21.355 32.143a53.393 53.393 0 0 0 -9.562 21.338 1.75 1.75 0 0 0 1.371 2.061 1.709 1.709 0 0 0 .347.035 1.752 1.752 0 0 0 1.714-1.405 49.864 49.864 0 0 1 8.932-19.932 1.75 1.75 0 0 0 -2.8-2.1z"/><path d="m34.708 19.549a53.646 53.646 0 0 0 -5.594 4.25 1.75 1.75 0 0 0 2.3 2.642 50.215 50.215 0 0 1 5.227-3.972 1.75 1.75 0 0 0 -1.929-2.92z"/><path d="m39.958 46.369a1.747 1.747 0 0 0 -1.967 1.5 10.594 10.594 0 1 0 5.194-7.769 1.75 1.75 0 1 0 1.752 3.029 7.1 7.1 0 1 1 -3.26 8.1 7.031 7.031 0 0 1 -.217-2.9 1.749 1.749 0 0 0 -1.502-1.96z"/><path d="m53.005 97.068a10.6 10.6 0 1 0 -10.6-10.6 10.608 10.608 0 0 0 10.6 10.6zm0-17.692a7.1 7.1 0 1 1 -7.1 7.1 7.1 7.1 0 0 1 7.1-7.1z"/><path d="m73.436 92.472a7.75 7.75 0 1 0 7.75-7.75 7.758 7.758 0 0 0 -7.75 7.75zm7.75-4.25a4.25 4.25 0 1 1 -4.25 4.25 4.255 4.255 0 0 1 4.25-4.25z"/><path d="m95.942 52.292a7.75 7.75 0 1 0 -7.75 7.75 7.759 7.759 0 0 0 7.75-7.75zm-7.75 4.25a4.25 4.25 0 1 1 4.25-4.25 4.255 4.255 0 0 1 -4.25 4.25z"/><path d="m87.929 37.876a4.75 4.75 0 1 0 -4.75 4.75 4.756 4.756 0 0 0 4.75-4.75zm-6 0a1.25 1.25 0 1 1 1.25 1.25 1.251 1.251 0 0 1 -1.25-1.25z"/></g></svg>


--------------------------------------------------------------------------------
/src/assets/icons/sunny.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
 5 | <g>
 6 | 	<path style="fill:#F0C419;" d="M30,0c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1V1C31,0.448,30.552,0,30,0z"/>
 7 | 	<path style="fill:#F0C419;" d="M30,52c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1v-6C31,52.448,30.552,52,30,52z"/>
 8 | 	<path style="fill:#F0C419;" d="M59,29h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S59.552,29,59,29z"/>
 9 | 	<path style="fill:#F0C419;" d="M8,30c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h6C7.552,31,8,30.552,8,30z"/>
10 | 	<path style="fill:#F0C419;" d="M46.264,14.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414
11 | 		s-1.023-0.391-1.414,0l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,14.639,46.008,14.736,46.264,14.736z"/>
12 | 	<path style="fill:#F0C419;" d="M13.029,45.557l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C7.488,52.902,7.744,53,8,53
13 | 		s0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414S13.42,45.166,13.029,45.557z"/>
14 | 	<path style="fill:#F0C419;" d="M46.971,45.557c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
15 | 		C51.488,52.902,51.744,53,52,53s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.971,45.557z"/>
16 | 	<path style="fill:#F0C419;" d="M8.707,7.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
17 | 		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L8.707,7.293z"/>
18 | 	<path style="fill:#F0C419;" d="M50.251,21.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
19 | 		c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,20.309,50.035,20.896,50.251,21.404z"/>
20 | 	<path style="fill:#F0C419;" d="M9.749,38.596c-0.216-0.508-0.803-0.746-1.311-0.53l-2.762,1.172
21 | 		c-0.508,0.216-0.746,0.803-0.53,1.311c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
22 | 		C9.728,39.691,9.965,39.104,9.749,38.596z"/>
23 | 	<path style="fill:#F0C419;" d="M54.481,38.813L51.7,37.688c-0.511-0.207-1.095,0.041-1.302,0.553
24 | 		c-0.207,0.512,0.041,1.095,0.553,1.302l2.782,1.124c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
25 | 		C55.241,39.603,54.994,39.02,54.481,38.813z"/>
26 | 	<path style="fill:#F0C419;" d="M5.519,21.188L8.3,22.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
27 | 		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.513-0.207-1.095,0.04-1.302,0.553C4.759,20.397,5.006,20.98,5.519,21.188z"
28 | 		/>
29 | 	<path style="fill:#F0C419;" d="M39.907,50.781c-0.216-0.508-0.803-0.745-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311
30 | 		l1.172,2.762c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311L39.907,50.781z"
31 | 		/>
32 | 	<path style="fill:#F0C419;" d="M21.014,9.829c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311l-1.172-2.762
33 | 		c-0.215-0.509-0.802-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311l1.172,2.762C20.254,9.6,20.625,9.829,21.014,9.829z"/>
34 | 	<path style="fill:#F0C419;" d="M21.759,50.398c-0.511-0.205-1.095,0.04-1.302,0.553l-1.124,2.782
35 | 		c-0.207,0.512,0.041,1.095,0.553,1.302c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
36 | 		C22.519,51.188,22.271,50.605,21.759,50.398z"/>
37 | 	<path style="fill:#F0C419;" d="M38.615,9.675c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782c0.207-0.512-0.041-1.095-0.553-1.302
38 | 		c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,8.3c-0.207,0.512,0.041,1.095,0.553,1.302C38.364,9.651,38.491,9.675,38.615,9.675z"
39 | 		/>
40 | </g>
41 | <circle style="fill:#F0C419;" cx="30" cy="30" r="20"/>
42 | <circle style="fill:#EDE21B;" cx="30" cy="30" r="15"/>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | <g>
62 | </g>
63 | <g>
64 | </g>
65 | <g>
66 | </g>
67 | <g>
68 | </g>
69 | <g>
70 | </g>
71 | <g>
72 | </g>
73 | </svg>
74 | 


--------------------------------------------------------------------------------
/src/assets/images/jaggedarbor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/jaggedarbor.png


--------------------------------------------------------------------------------
/src/assets/images/lostround.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/lostround.png


--------------------------------------------------------------------------------
/src/assets/images/noblecape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/noblecape.png


--------------------------------------------------------------------------------
/src/assets/images/profilelg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/profilelg.png


--------------------------------------------------------------------------------
/src/assets/images/profilesm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/profilesm.png


--------------------------------------------------------------------------------
/src/assets/images/tawnymaze.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamelimars/figma-react-dashboard/085128c8a17d5e141b32f3846bfee36bdea53e78/src/assets/images/tawnymaze.png


--------------------------------------------------------------------------------
/src/components/Main/AllDepositsBtn.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const Container = styled.div`
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 |     margin: 2rem 0;
 9 | `
10 | 
11 | const Button = styled.a`
12 |     text-transform: uppercase;
13 |     width: 9rem;
14 |     font-size: 0.6rem;
15 |     font-weight: 700;
16 |     background-image: ${({ theme }) => theme.gradient};
17 |     color: #FFF;
18 |     border-radius: 5rem;
19 |     padding: 0.7rem;
20 |     display: flex;
21 |     justify-content: center;
22 |     cursor: pointer;
23 |     transition: all ease-in-out 300ms;
24 | 
25 |     &:hover {
26 |         box-shadow: 0px 0px 7px rgba(128,74,216,0.6);
27 |     }
28 | 
29 | `
30 | 
31 | const AllDepositsBtn = ({ title }) => (
32 |     <Container>
33 |         <Button>All {title}</Button>
34 |     </Container>
35 | )
36 | 
37 | export default AllDepositsBtn
38 | 


--------------------------------------------------------------------------------
/src/components/Main/Deposits/Deposit.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import styled from 'styled-components'
  3 | 
  4 | const Container = styled.div`
  5 |     display: flex;
  6 |     align-items: center;
  7 |     padding: 1rem 0;
  8 |     border-bottom: 1px solid rgba(190,190,190,0.22);
  9 |     cursor: pointer;
 10 |     background-color: ${({ theme }) => theme.primary};
 11 |     transition: all ease-in-out 300ms;
 12 | 
 13 |     &:hover {
 14 |         /* box-shadow: 0px 10px 8px -8px rgba(138, 153, 192, 0.6); */
 15 |         background-color: ${({ theme }) => theme.secondary};
 16 |     }
 17 | 
 18 | `
 19 | 
 20 | const Text = styled.h1`
 21 |     font-size: 0.8rem;
 22 |     font-weight: 500;
 23 |     color: ${({ theme }) => theme.textColor};
 24 |     margin: 0;
 25 | `
 26 | 
 27 | const Subtitle = styled(Text)`
 28 |     font-size: 0.6rem;
 29 |     color: #B2BFE1;
 30 |     margin-top: 2px;
 31 | `
 32 | 
 33 | const Property = styled.div`
 34 |     width: 30%;
 35 |     display: flex;
 36 |     align-items: center;
 37 | `
 38 | 
 39 | const PropertyText = styled.div`
 40 |     display: flex;
 41 |     flex-direction: column;
 42 |     margin-left: 1rem;
 43 | `
 44 | 
 45 | const PropertyImg = styled.img`
 46 |     height: 35px;
 47 |     width: 35px;
 48 | `
 49 | const PropertyStreet = styled(Text)`
 50 |     font-size: 1rem;
 51 | `
 52 | const MoveInDate = styled(Text)`
 53 |     width: 15%;
 54 | `
 55 | const Rent = styled(Text)`
 56 |     width: 10%;
 57 | `
 58 | const DepositWrapper = styled.div`
 59 |     width: 15%;
 60 | `
 61 | const Status = styled.div`
 62 |     display: flex;
 63 |     align-items: center;
 64 | `
 65 | const StatusIndicator = styled.div`
 66 |     width: 15px;
 67 |     height: 15px;
 68 |     border-radius: 10px;
 69 |     background-color: ${props => props.color};
 70 |     margin-left: 1rem;
 71 |     position: absolute;
 72 |     right: 7rem;
 73 | `
 74 | 
 75 | const Deposit = ({ data }) => {
 76 |     const { property, moveInDate, rent, deposit, status } = data;
 77 | 
 78 |     return (
 79 |         <Container>
 80 |             <Property>
 81 |                 <PropertyImg src={require(`../../../assets/images/${property.imageUrl}`)} />
 82 |                 <PropertyText>
 83 |                     <PropertyStreet>{property.address.street}</PropertyStreet>
 84 |                     <Subtitle>{property.address.city} {property.address.state}</Subtitle>
 85 |                 </PropertyText>
 86 |             </Property>
 87 |             <MoveInDate>{moveInDate}</MoveInDate>
 88 |             <Rent>${rent}</Rent>
 89 |             <DepositWrapper>
 90 |                 <Text>${deposit.amount}</Text>
 91 |                 <Subtitle>{deposit.type}</Subtitle>
 92 |             </DepositWrapper>
 93 |             <Status>
 94 |                 <Text>{status.message}</Text>
 95 |                 {(() => {
 96 |                     switch (status.level) {
 97 |                         case 1: return <StatusIndicator color="#F17E7E" />;
 98 |                         case 2: return <StatusIndicator color="#FFD056" />;
 99 |                         case 3: return <StatusIndicator color="#75C282" />;
100 |                         default: return <StatusIndicator color="#AAA5A5" />;
101 |                     }
102 |                 })()}
103 |             </Status>
104 | 
105 |         </Container>
106 |     )
107 | }
108 | 
109 | export default Deposit
110 | 


--------------------------------------------------------------------------------
/src/components/Main/Deposits/Deposits.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import SortingBar from './SortingBar'
 4 | import Deposit from './Deposit'
 5 | import AllDepositsBtn from '../AllDepositsBtn'
 6 | 
 7 | const Container = styled.div`
 8 | 
 9 | `
10 | 
11 | const Title = styled.h1`
12 |     font-weight: 500;
13 |     color:  ${({ theme }) => theme.textColor};
14 |     font-size: 1.3rem;
15 |     display: flex;
16 |     align-items: center;
17 | `
18 | 
19 | const DepositsCount = styled.div`
20 |     margin-left: 1rem;
21 |     font-size: 1rem;
22 |     background-color: ${({ theme }) => theme.header};
23 |     color: ${({ theme }) => theme.headerNumber};
24 |     width: 28px;
25 |     height: 28px;
26 |     display: flex;
27 |     align-items: center;
28 |     justify-content: center;
29 |     border-radius: 20px;
30 | `
31 | 
32 | 
33 | 
34 | const Deposits = ({ title, data, count }) => {
35 | 
36 |     return (
37 |         <Container>
38 |             <Title>{title}<DepositsCount>{count}</DepositsCount></Title>
39 |             <SortingBar />
40 |             {data.map(deposit => (
41 |                 <Deposit data={deposit} key={deposit.property.address.street} />
42 |             ))}
43 |             <AllDepositsBtn title={title} />
44 |         </Container>
45 |     )
46 | }
47 | 
48 | export default Deposits
49 | 


--------------------------------------------------------------------------------
/src/components/Main/Deposits/SortingBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const Container = styled.div`
 5 |     display: flex;
 6 |     padding: 0.4rem 1rem;
 7 |     background-color: ${({ theme }) => theme.secondary};
 8 |     margin: 2rem 0;
 9 |     border-radius: 5px;
10 | `
11 | 
12 | const Text = styled.h1`
13 |     font-size: 0.6rem;
14 |     text-transform: uppercase;
15 |     font-weight: 500;
16 |     color: ${({ theme }) => theme.textColor};
17 | `
18 | 
19 | const Property = styled(Text)`
20 |     width: 30%;
21 | `
22 | 
23 | const MoveInDate = styled(Text)`
24 |     width: 15%;
25 | `
26 | 
27 | const Rent = styled(Text)`
28 |     width: 10%;
29 | `
30 | 
31 | const Deposit = styled(Text)`
32 |     width: 15%;
33 | `
34 | 
35 | const Status = styled(Text)`
36 |     
37 | `
38 | 
39 | const SortingBar = () => {
40 |     return (
41 |         <Container>
42 |             <Property>Property</Property>
43 |             <MoveInDate>Move In Date</MoveInDate>
44 |             <Rent>Rent</Rent>
45 |             <Deposit>Deposit</Deposit>
46 |             <Status>Status</Status>
47 |         </Container>
48 |     )
49 | }
50 | 
51 | export default SortingBar
52 | 


--------------------------------------------------------------------------------
/src/components/Main/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import Nav from './Nav'
 4 | import NewDepositBtn from './NewDepositBtn'
 5 | import Deposits from './Deposits/Deposits'
 6 | 
 7 | import depositData from '../../DepositData.json'
 8 | 
 9 | const Container = styled.div`
10 |     width: auto;
11 |     margin-left: 16rem;
12 |     position: relative;
13 |     padding: 0 4rem;
14 | `
15 | 
16 | 
17 | const Main = () => {
18 |     return (
19 |         <Container>
20 |             <Nav />
21 |             <NewDepositBtn />
22 |             <Deposits title="Active Deposits" count={2} data={depositData.active} />
23 |             <Deposits title="Closed Deposits" count={8} data={depositData.closed} />
24 |         </Container>
25 |     )
26 | }
27 | 
28 | export default Main
29 | 


--------------------------------------------------------------------------------
/src/components/Main/Nav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | // import ProfileImage from '../../assets/images/profilelg.png'
 4 | 
 5 | const Container = styled.div`
 6 |     display: flex;
 7 |     padding: 1rem;
 8 |     justify-content: flex-end;
 9 |     align-items: center;
10 |     margin-bottom: 3rem;
11 | `
12 | 
13 | const ProfileImg = styled.img`
14 |     height: 2rem;
15 |     margin: 0 1rem;
16 |     cursor: pointer;
17 | `
18 | 
19 | const MessageIcon = styled.span`
20 |     color: ${({ theme }) => theme.colorGray}; 
21 |     font-size: 27px;
22 |     cursor: pointer;
23 | `
24 | const Nav = () => {
25 |     return (
26 |         <Container>
27 |             <MessageIcon className="iconify" data-inline="false" data-icon="mdi-light:email"></MessageIcon>
28 |             <ProfileImg src={require('../../assets/images/profilelg.png')} />
29 |         </Container>
30 |     )
31 | }
32 | 
33 | export default Nav


--------------------------------------------------------------------------------
/src/components/Main/NewDepositBtn.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const AddButton = styled.a`
 5 |     background-color: ${({ theme }) => theme.colorGreen};
 6 |     display: flex;
 7 |     justify-content: center;
 8 |     align-items: center;
 9 |     width: 50px;
10 |     height: 50px;
11 |     border-radius: 25px;
12 |     position: absolute;
13 |     top: 6rem;
14 |     right: 7rem;
15 |     cursor: pointer;
16 |     transition: all ease-in-out 300ms;
17 | 
18 |     &:hover {
19 |         /* box-shadow: 10px 10px 8px -8px rgba(117, 194, 130, 0.6); */
20 |     }
21 | 
22 | `
23 | 
24 | const AddIcon = styled.span`
25 |     color: #ffffff;
26 |     font-size: 36px;
27 | `
28 | 
29 | 
30 | const NewDepositBtn = () => (
31 |     <AddButton>
32 |         <AddIcon className="iconify" data-inline="false" data-icon="mdi-light:plus" ></AddIcon>
33 |     </AddButton>
34 | )
35 | 
36 | 
37 | export default NewDepositBtn
38 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Menu/Menu.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import MenuLink from './MenuLink'
 3 | import styled from 'styled-components'
 4 | 
 5 | 
 6 | const Container = styled.div`
 7 |     margin-top: 2rem;
 8 |     width: 100%;
 9 | `
10 | 
11 | const Menu = () => {
12 |     return (
13 |         <Container>
14 |             <MenuLink title="Home" icon={'home'}/>
15 |             <MenuLink title="Deposits" icon={'file-multiple'} active />
16 |             <MenuLink title="Offers" icon={'gift'}/>
17 |             <MenuLink title="Payments" icon={'bank'}/>
18 |             <MenuLink title="Settings" icon={'cog'} />
19 |         </Container>
20 |     )
21 | }
22 | 
23 | export default Menu
24 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Menu/MenuLink.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | 
 5 | 
 6 | const Container = styled.div`
 7 |     border-left: 3px solid ${props => props.active ? props.theme.activeMenu : "transparent"};
 8 |     width: 100%;
 9 |     padding: 0.3rem;
10 |     padding-left: 2rem;
11 |     cursor: pointer;
12 |     display: flex;
13 |     flex-direction: row;
14 |     align-items: center;
15 |     margin-bottom: 1rem;
16 |     transition: 0.2s all ease-in-out;
17 | 
18 |     &:hover {
19 |         background-color: rgba(0,0,0,0.1);
20 |     }
21 | `
22 | 
23 | 
24 | const Span = styled.span`
25 |     /* color: ${props => props.active ? props.theme.activeMenu : "#AAA5A5"}; */
26 |     color: ${props => !props.active && props.theme.textColor};
27 |     font-size: 1rem;
28 |     margin-right: 1rem;
29 | `
30 | 
31 | const Title = styled.h1`
32 |     font-size: 0.9rem;
33 |     font-weight: 300;
34 |     color: ${props => props.active ? props.theme.activeMenu : "#AAA5A5"};
35 | `
36 | 
37 | const MenuLink = ({ title, active, icon }) => {
38 | 
39 |     return (
40 |         <Container active={active}>
41 |             <Span active={active} className="iconify" data-inline="false" data-icon={`mdi-light:${icon}`}></Span>
42 |             <Title active={active}>{title}</Title>
43 |         </Container>
44 |     )
45 | }
46 | 
47 | export default MenuLink
48 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Profile.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import Image from '../../assets/images/profilelg.png'
 4 | 
 5 | const Container = styled.div`
 6 |     margin-top: 5rem;
 7 | `
 8 | 
 9 | const ProfileImg = styled.img`
10 |     height: 5rem;
11 | `
12 | const ProfileName = styled.h1`
13 |     font-size: 1rem;
14 |     font-weight: 300;
15 |     color: ${({ theme }) => theme.textColor};
16 | `
17 | 
18 | const Profile = () => {
19 |     return (
20 |         <Container>
21 |             <ProfileImg src={Image} />
22 |             <ProfileName>Scott Grant</ProfileName>
23 |         </Container>
24 |     )
25 | }
26 | 
27 | export default Profile
28 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import Menu from './Menu/Menu'
 4 | import Profile from './Profile'
 5 | import ToggleSwitch from './ToggleSwitch'
 6 | 
 7 | const Container = styled.div`
 8 |     background-color: ${({ theme }) => theme.secondary};
 9 |     position: fixed;
10 |     left: 0;
11 |     top: 0;
12 |     bottom: 0;
13 |     width: 16rem;
14 |     display: flex;
15 |     flex-direction: column;
16 |     align-items: center;
17 | 
18 | 
19 | `
20 | 
21 | const Sidebar = () => {
22 | 
23 |     return (
24 |         <Container>
25 |             <Profile />
26 |             <Menu />
27 |             <ToggleSwitch />
28 |         </Container>
29 |     )
30 | }
31 | 
32 | export default Sidebar
33 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/ToggleSwitch.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import { useThemeContext } from '../../context/themeContext'
 4 | 
 5 | 
 6 | const Switch = styled.div`
 7 |     display: flex;
 8 |     flex-shrink: 0;
 9 |     align-items: center;
10 |     position: absolute;
11 |     bottom: 1rem;
12 |     right: 1rem;
13 |     width: ${({ theme }) => theme.switchWidth};
14 |     height: ${({ theme }) => theme.switchHeight};
15 |     border-radius: 50em;
16 |     padding: ${({ theme }) => theme.switchPadding} 0;
17 | 
18 |     .switch__input, .switch__label {
19 |         position: absolute;
20 |         left: 0;
21 |         top: 0;
22 |     }
23 |     .switch__input {
24 |         margin: 0;
25 |         padding: 0;
26 |         opacity: 0;
27 |         height: 0;
28 |         width: 0;
29 |         pointer-events: none;
30 | 
31 |         &:checked + .switch__label {
32 |             background-color: ${({ theme }) => theme.colorWhite};
33 |         }
34 | 
35 |         &:checked + .switch__label + .switch__marker {
36 |             left: calc(100% - ${({ theme }) => theme.switchHeight} + ${({ theme }) => theme.switchPadding});
37 |         }
38 | 
39 |         &:focus + .switch__label,
40 |         &:active + .switch__label {
41 |             box-shadow: 0 0 0 3px alpha(${({ theme }) => theme.primary}, 0.2);
42 |         }
43 |     }
44 |     .switch__label {
45 |         width: 100%;
46 |         height: 100%;
47 |         color: transparent;
48 |         user-select: none;
49 |         background-color: ${({ theme }) => theme.textColor};
50 |         border-radius: inherit;
51 |         z-index: 1;
52 |         transition: background ${({ theme }) => theme.switchAnimationDuration};
53 |     }
54 | 
55 |     .switch__marker {
56 |         position: relative;
57 |         background-color: ${({ theme }) => theme.primary};
58 |         width: calc(${({ theme }) => theme.switchHeight} - ${({ theme }) => theme.switchPadding} * 2);
59 |         height: calc(${({ theme }) => theme.switchHeight} - ${({ theme }) => theme.switchPadding} * 2);
60 |         border-radius: 50%;
61 |         z-index: 2;
62 |         pointer-events: none;
63 |         box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.25);
64 |         left: ${({ theme }) => theme.switchPadding};
65 |         transition: left ${({ theme }) => theme.switchAnimationDuration};
66 |         will-change: left;
67 |     }
68 | `
69 | 
70 | const ToggleSwitch = () => {
71 |     const { toggleTheme } = useThemeContext()
72 | 
73 | 
74 |     return (
75 |         <>
76 |             <Switch>
77 |                 <input className="switch__input" type="checkbox" id="switchCheckbox1" onClick={toggleTheme} />
78 |                 <label aria-hidden="true" className="switch__label" htmlFor="switchCheckbox1">On</label>
79 |                 <div aria-hidden="true" className="switch__marker"></div>
80 |             </Switch>
81 |         </>
82 |     )
83 | }
84 | 
85 | export default ToggleSwitch
86 | 
87 | 
88 | // #804AD8
89 | // #624BD9


--------------------------------------------------------------------------------
/src/containers/Dashboard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import Main from '../components/Main/Main'
 4 | import SideBar from '../components/Sidebar/Sidebar'
 5 | 
 6 | const Dashboard = () => {
 7 |     return (
 8 |         <div>
 9 |             <SideBar />
10 |             <Main/>
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Dashboard
16 | 


--------------------------------------------------------------------------------
/src/context/themeContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState, useContext } from 'react'
 2 | 
 3 | export const ThemeContext = createContext({ theme: "light" })
 4 | 
 5 | export const ThemeContextProvider = ({ children }) => {
 6 | 
 7 |     const [theme, setTheme] = useState('light')
 8 | 
 9 |     const toggleTheme = () => {
10 | 
11 |         if (theme === 'light') {
12 |             setTheme('dark')
13 |         } else {
14 |             setTheme('light')
15 |         }
16 |     }
17 | 
18 |     return (
19 |         <ThemeContext.Provider value={{
20 |             theme,
21 |             toggleTheme
22 |         }} >
23 |             {children}
24 |         </ThemeContext.Provider>
25 |     )
26 | }
27 | 
28 | //Custom hook
29 | export const useThemeContext = () => {
30 |     const context = useContext(ThemeContext)
31 |     if (context === undefined) {
32 |         throw new Error('useThemeContext must be used within a ThemeProvider')
33 |     }
34 | 
35 |     return context
36 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: 'Roboto', sans-serif;
 4 |   /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 5 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 6 |     sans-serif; */
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import { ThemeContextProvider } from './context/themeContext'
6 | ReactDOM.render(<ThemeContextProvider><App /></ThemeContextProvider>, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/styles/global.js:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from 'styled-components'
 2 | 
 3 | export const GlobalStyles = createGlobalStyle`
 4 |   *,
 5 |   *::after,
 6 |   *::before {
 7 |     box-sizing: border-box;
 8 |   }
 9 | 
10 |   body {
11 |     background: ${({ theme }) => theme.primary};
12 |     color: ${({ theme }) => theme.textColor};
13 |     height: 100vh;
14 |     margin: 0;
15 |     padding: 0;
16 |     font-family: 'Roboto', sans-serif;
17 |     transition: all 0.25s linear;
18 |   }
19 | `


--------------------------------------------------------------------------------
/src/styles/theme.js:
--------------------------------------------------------------------------------
 1 | const globalTheme = {
 2 |     switchWidth: '40px',
 3 |     switchHeight: '20px',
 4 |     switchPadding: '3px',
 5 |     colorContrastLow: '#d3d3d4',
 6 |     colorWhite: '#FFF',
 7 |     switchColorPrimary: '#302C40',
 8 |     switchAnimationDuration: '0.2s',
 9 |     gradient: 'linear-gradient(122deg, rgba(128,74,216,1) 0%, rgba(98,75,217,1) 100%)',
10 |     colorGreen: '#5DC399',
11 |     colorGray: '#adadad',
12 | }
13 | 
14 | 
15 | export const lightTheme = {
16 |     primary: '#FFF',
17 |     secondary: '#F8F8F8',
18 |     textColor: '#585280',
19 |     header: '#585280',
20 |     headerNumber: '#FFF',
21 |     activeMenu: '#585280',
22 |     ...globalTheme
23 | }
24 | 
25 | export const darkTheme = {
26 |     primary: '#302C40',
27 |     secondary: '#2C2839',
28 |     textColor: '#FFF',
29 |     header: '#FFF',
30 |     headerNumber: '#585280',
31 |     activeMenu: '#FFF',
32 |     ...globalTheme
33 | }


--------------------------------------------------------------------------------