├── .eslintcache ├── .gitignore ├── 2021-09-17_18-51-13.gif ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── AnimateInputSection.js │ ├── Header.js │ └── MainPage.js ├── favicon.png ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── theme.js └── yarn.lock /.eslintcache: -------------------------------------------------------------------------------- 1 | [{"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/index.js":"1","/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/App.js":"2","/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/reportWebVitals.js":"3","/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/theme.js":"4","/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/components/MainPage.js":"5"},{"size":500,"mtime":1630920900344,"results":"6","hashOfConfig":"7"},{"size":710,"mtime":1630920900344,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1630920900372,"results":"9","hashOfConfig":"7"},{"size":550,"mtime":1631929241814,"results":"10","hashOfConfig":"7"},{"size":13163,"mtime":1631929604990,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14y0mj5",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/index.js",[],"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/App.js",[],"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/reportWebVitals.js",[],"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/theme.js",[],"/home/osboxes/workspace/my git repo/Easyrefi-new-framer-motion/src/components/MainPage.js",["22","23","24","25"],{"ruleId":"26","severity":1,"message":"27","line":1,"column":17,"nodeType":"28","messageId":"29","endLine":1,"endColumn":25},{"ruleId":"26","severity":1,"message":"30","line":2,"column":8,"nodeType":"28","messageId":"29","endLine":2,"endColumn":9},{"ruleId":"31","severity":1,"message":"32","line":180,"column":33,"nodeType":"33","endLine":180,"endColumn":75},{"ruleId":"31","severity":1,"message":"32","line":266,"column":29,"nodeType":"33","endLine":266,"endColumn":76},"no-unused-vars","'Fragment' is defined but never used.","Identifier","unusedVar","'_' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement"] -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /2021-09-17_18-51-13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/framermotion-UI/671b68050787bd893e90cfe25d2c836501831ee6/2021-09-17_18-51-13.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](2021-09-17_18-51-13.gif) 2 | 3 |

React Animation UI

4 | 5 | 
 6 |   * React, material-UI, Framer-motion
 7 |
8 | 9 |

:gear: Getting started

10 | 11 | 1. Clone project. 12 | 2. Install required dependencies with `yarn install`. 13 | 3. Run project using `npm start` command 14 | 4. Deploy on github-pages using `yarn build` command. 15 | 16 | 17 | 
18 |   Demo site (https://refi.easyrefi.me/)
19 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mortcorp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@hot-loader/react-dom": "^17.0.1", 7 | "@material-ui/core": "^4.11.2", 8 | "@material-ui/icons": "^4.11.2", 9 | "@testing-library/jest-dom": "^5.11.4", 10 | "@testing-library/react": "^11.1.0", 11 | "@testing-library/user-event": "^12.1.10", 12 | "framer-motion": "^2.9.5", 13 | "lodash": "^4.17.20", 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1", 16 | "react-hot-loader": "^4.13.0", 17 | "react-router-dom": "^5.2.0", 18 | "react-scripts": "4.0.1", 19 | "web-vitals": "^0.2.4" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/framermotion-UI/671b68050787bd893e90cfe25d2c836501831ee6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 28 | Mortgage Refinance 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/framermotion-UI/671b68050787bd893e90cfe25d2c836501831ee6/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/framermotion-UI/671b68050787bd893e90cfe25d2c836501831ee6/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.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | .MuiContainer-root { 41 | padding-left: 0 !important; 42 | padding-right: 0 !important; 43 | } 44 | 45 | input, select, textarea{ 46 | -ms-box-sizing:border-box; 47 | -moz-box-sizing:border-box; 48 | box-sizing:border-box; 49 | -webkit-box-sizing:border-box; 50 | } 51 | 52 | 53 | .next-btn { 54 | background-color: #0000ff; 55 | border: none; 56 | color: #FFFFFF; 57 | text-align: center; 58 | font-size: 24px; 59 | padding: 10px 25px; 60 | transition: all 0.5s; 61 | cursor: pointer; 62 | margin: 5px; 63 | } 64 | 65 | .next-btn span { 66 | cursor: pointer; 67 | display: inline-block; 68 | position: relative; 69 | transition: 0.5s; 70 | } 71 | 72 | .next-btn span:after { 73 | content: '\00bb'; 74 | position: absolute; 75 | opacity: 0; 76 | top: 0; 77 | right: -20px; 78 | transition: 0.5s; 79 | } 80 | 81 | .next-btn:hover span { 82 | padding-right: 20px; 83 | } 84 | 85 | .next-btn:hover span:after { 86 | opacity: 1; 87 | right: 0; 88 | } 89 | 90 | .checked { 91 | color: orange; 92 | } 93 | 94 | .unchecked { 95 | color: #636363; 96 | } 97 | 98 | select { 99 | -webkit-appearance: none; 100 | -moz-appearance: none; 101 | -ms-appearance: none; 102 | -o-appearance: none; 103 | appearance: none; 104 | } 105 | 106 | .select-wrapper { 107 | position: relative; 108 | } 109 | 110 | .select-wrapper:after { 111 | font-family: FontAwesome; 112 | content: '\f107'; 113 | font-size: 28px; 114 | position: absolute; 115 | top: 18px; 116 | right: 20px; 117 | color: #0000ff; 118 | pointer-events: none; 119 | } 120 | 121 | .select-prompt-wrapper { 122 | position: relative; 123 | } 124 | 125 | .select-prompt-wrapper:after { 126 | font-family: FontAwesome; 127 | content: '\f107'; 128 | font-size: 28px; 129 | position: absolute; 130 | top: 30px; 131 | right: 20px; 132 | color: #0000ff; 133 | pointer-events: none; 134 | } 135 | 136 | select::-ms-expand { 137 | display: none; 138 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import React from 'react'; 3 | import {ThemeProvider} from '@material-ui/styles'; 4 | import theme from './theme'; 5 | import { hot } from 'react-hot-loader'; 6 | import { BrowserRouter as Router, Route} from 'react-router-dom'; 7 | import MainPage from './components/MainPage'; 8 | // import Header from './components/Header'; 9 | function App() { 10 | React.useEffect(() => { 11 | const jssStyles = document.querySelector('#jss-server-side') 12 | if (jssStyles) { 13 | jssStyles.parentNode.removeChild(jssStyles) 14 | } 15 | }, []); 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default hot(module)(App); 26 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/AnimateInputSection.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useEffect, useState } from 'react'; 2 | import _ from 'lodash'; 3 | import Grid from '@material-ui/core/Grid'; 4 | import { makeStyles } from '@material-ui/core/styles'; 5 | 6 | import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion'; 7 | 8 | const useStyles = makeStyles(theme => ({ 9 | selectedItem: { 10 | maxWidth: 800, 11 | margin: 'auto', 12 | textAlign: 'center', 13 | marginTop: theme.spacing(5), 14 | paddingBottom: theme.spacing(2), 15 | boxShadow: '0 3px 5px 2px rgba(0, 105, 200, .3)' 16 | }, 17 | error: { 18 | verticalAlign: 'middle' 19 | }, 20 | title: { 21 | color: theme.palette.openTitle, 22 | backgroundColor: theme.palette.primary.contrastText, 23 | }, 24 | inputField: { 25 | padding: 'auto', 26 | textAlign: 'center', 27 | backgroundColor: theme.palette.primary.dark 28 | }, 29 | submit: { 30 | margin: 'auto', 31 | marginBottom: theme.spacing(2) 32 | }, 33 | showItem: { 34 | height: 50 35 | } 36 | })) 37 | const AnimateInputSection = (props) =>{ 38 | const [selectedId, setSelectedId] = useState(null); 39 | const [selectedItem, setItem] = useState(null); 40 | useEffect(()=> { 41 | setItem(_.find(props.showItems, {label: selectedId})); 42 | }); 43 | return ( 44 | 45 | 46 | 47 | { props.showItems.map(item => ( 48 | 49 | setSelectedId(item.label)}> 50 | 51 | 52 | 53 | 54 | ))} 55 | 56 | {selectedItem && ( 57 | 58 | 59 | 60 | setSelectedId(null)}/> 61 | 62 | )} 63 | 64 | 65 | 66 | 67 | 68 | ); 69 | } 70 | export default AnimateInputSection; -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import AppBar from '@material-ui/core/AppBar' 3 | import Toolbar from '@material-ui/core/Toolbar' 4 | import Typography from '@material-ui/core/Typography' 5 | import IconButton from '@material-ui/core/IconButton' 6 | import HomeIcon from '@material-ui/icons/Home' 7 | import Button from '@material-ui/core/Button' 8 | import {Link, withRouter} from 'react-router-dom' 9 | 10 | const isActive = (history, path) => { 11 | if (history.location.pathname == path) 12 | return {color: '#ffa726'} 13 | else 14 | return {color: '#ffffff'} 15 | } 16 | const Menu = withRouter(({history}) => ( 17 | 18 | 19 | 20 | CodeChef7 21 | 22 | 23 | 24 | )) 25 | 26 | export default Menu -------------------------------------------------------------------------------- /src/components/MainPage.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState } from 'react'; 2 | import _ from 'lodash'; 3 | import Grid from '@material-ui/core/Grid'; 4 | import { makeStyles } from '@material-ui/core/styles'; 5 | import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion'; 6 | import logo from '../logo.svg'; 7 | import clsx from 'clsx'; 8 | import Container from '@material-ui/core/Container'; 9 | 10 | const useStyles = makeStyles(theme => ({ 11 | root: { 12 | 13 | }, 14 | screen: { 15 | width: '100%' 16 | }, 17 | error: { 18 | verticalAlign: 'middle' 19 | }, 20 | title: { 21 | backgroundColor: theme.palette.primary.contrastText, 22 | textAlign: 'left', 23 | color: theme.palette.primary.light, 24 | }, 25 | questions: { 26 | textAlign: 'left', 27 | backgroundColor: theme.palette.primary.dark, 28 | width: '100%', 29 | padding: '20px', 30 | position: 'relative' 31 | }, 32 | submit: { 33 | margin: 'auto', 34 | marginBottom: theme.spacing(2) 35 | }, 36 | logoTitle: { 37 | display: 'inline-block', 38 | marginTop: '0 !important', 39 | marginBottom: '0 !important', 40 | marginLeft: '5px' 41 | }, 42 | contactInfo: { 43 | color: theme.palette.primary.grey 44 | }, 45 | logo: { 46 | width: '60px !important', 47 | }, 48 | logoSmall: { 49 | width: '30px !important', 50 | height: '30px !important' 51 | }, 52 | inputItem: { 53 | backgroundColor: theme.palette.primary.contrastText, 54 | with: '50px !important', 55 | height: '200 !important', 56 | }, 57 | 58 | termsOfService: { 59 | color: 'white', 60 | position: 'absolute', 61 | right: 10, 62 | }, 63 | adTitle: { 64 | color: 'white', 65 | fontSize: 40, 66 | textAlign: 'center', 67 | marginTop: 40, 68 | }, 69 | inputField: { 70 | 71 | }, 72 | questionLabel:{ 73 | color: 'white', 74 | fontSize: '18px', 75 | fontWeight: '500' 76 | }, 77 | questionInput: { 78 | backgroundColor: 'white', 79 | height: 55, 80 | marginTop: 5, 81 | width: '100%', 82 | border: 'none', 83 | padding: '10px !important', 84 | fontSize: '18px', 85 | fontWeight: '500' 86 | }, 87 | questionPromptLabel: { 88 | color: 'white', 89 | fontSize: '22px', 90 | fontWeight: '500' 91 | }, 92 | questionPromptInput: { 93 | backgroundColor: 'white', 94 | height: 70, 95 | width: '100%', 96 | border: 'none', 97 | padding: '10px !important', 98 | fontSize: '22px', 99 | fontWeight: '500', 100 | marginTop: 10, 101 | }, 102 | selectedSection: { 103 | position: 'absolute', 104 | margin: 'auto', 105 | top: 0, left: 0, bottom: 0, right: 0, 106 | width: '40%', 107 | height:'100px' 108 | }, 109 | header: { 110 | padding: '5px 0px 5px 0px' 111 | }, 112 | paddingSmall: { 113 | padding: '5px' 114 | }, 115 | paddingMedium: { 116 | padding: '10px' 117 | }, 118 | paddingLarge: { 119 | padding: '20px' 120 | }, 121 | fontLenderValue: { 122 | fontSize: '30px', 123 | fontWeight: '700' 124 | }, 125 | mbLarge: { 126 | marginBottom: '30px' 127 | }, 128 | mbMedium: { 129 | marginBottom: '20px' 130 | }, 131 | mbSmall: { 132 | marginBottom: '10px' 133 | }, 134 | lenderTitle: { 135 | fontSize: '14px', 136 | fontWeight: '500', 137 | color: theme.palette.primary.grey 138 | }, 139 | btnDefault: { 140 | backgroundColor: theme.palette.primary.main 141 | } 142 | })) 143 | 144 | const MainPage = () => { 145 | const classes = useStyles(); 146 | const [selectedId, setSelectedId] = useState(null); 147 | const items = [ 148 | {label:"Role", type:"select", value:"Frontend Developer", options:['Frontend Developer','Backend Developer']}, 149 | {label:"Earn Amount", type:"text", value:"$15000", placeholder:"$000000"}, 150 | {label:"Sallery", type:"text", value:"$8000", placeholder:"$000000"}, 151 | {label:"Contact", type:"text", value:"live:.cid.bf34bce4d3afbc06", placeholder:"00000"}, 152 | {label:"Skill Set", type:"select", value:"React", options:['React','Vue','Angular', 'Laravel']}, 153 | {label:"Level", type:"select", value:"Senior", options:['Senior','Junior']}, 154 | 155 | ]; 156 | const [opacity, setOpacity] = useState(1); 157 | const [showItems, setShowItems] = useState(items); 158 | const onChange = (e) => { 159 | let inputItms = showItems; 160 | inputItms[Number(selectedId)].value=e.target.value; 161 | setShowItems([...inputItms]); 162 | } 163 | const onHandleClick = (e) => { 164 | if(selectedId && selectedId !== e.target.id){ 165 | setSelectedId(null); 166 | setOpacity(1); 167 | } 168 | } 169 | const onSelectQuestion = (index) => { 170 | setSelectedId(String(index)); 171 | setOpacity(0.1); 172 | } 173 | return ( 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |

CodeChef7

182 | 183 | 184 |

Skype

185 |

live:.cid.bf34bce4d3afbc06

186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |
Terms of Service
195 |
CodeChef7
196 | 197 | 198 | 199 | 200 | 201 | {showItems.map(({label,options,...input},index) => ( 202 | 203 | onSelectQuestion(index)} animate={{opacity: opacity}}> 204 | 205 | { 206 | options ? 207 | (
208 | 216 |
) : 217 | ( 218 | 222 | ) 223 | } 224 | 225 | 226 | 227 | ))} 228 | 229 | 230 | {selectedId && ( 231 | 232 | 233 | { 234 | showItems[Number(selectedId)].options ? 235 | (
236 | 243 |
) : 244 | ( 245 | 251 | ) 252 | } 253 | 254 | {/* setSelectedId(null)}>x */} 255 | 256 | )} 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 |
LENDER
265 |
266 | 267 |
CodeChef7
268 |
269 |
270 | 271 | 272 | 273 | 274 | 275 |
276 | 277 | 278 |
RATE
279 |
2.375%
280 |
CodeChef7
281 | 282 | 283 |
APR
284 |
2.466%
285 | 286 | 287 |
MO PAYMENT
288 |
$948
289 | 290 | 291 |
HARD UPFRONT COSTS
292 |
$3416
293 | 294 | 295 |
296 | 297 | 298 | 299 | 300 | 301 | ); 302 | } 303 | export default MainPage; -------------------------------------------------------------------------------- /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/framermotion-UI/671b68050787bd893e90cfe25d2c836501831ee6/src/favicon.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /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 reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/theme.js: -------------------------------------------------------------------------------- 1 | import { createMuiTheme } from '@material-ui/core/styles' 2 | import { teal, orange } from '@material-ui/core/colors' 3 | 4 | const theme = createMuiTheme({ 5 | palette: { 6 | primary: { 7 | light: '#0067ac', 8 | main: '#0000ff', 9 | dark: '#1b1464', 10 | contrastText: '#fff', 11 | grey: '#636363' 12 | }, 13 | secondary: { 14 | light: '#ffd95b', 15 | main: '#ffa726', 16 | dark: '#c77800', 17 | contrastText: '#000', 18 | }, 19 | openTitle: teal['700'], 20 | protectedTitle: orange['700'], 21 | type: 'light' 22 | } 23 | }) 24 | 25 | export default theme --------------------------------------------------------------------------------