├── .babelrc ├── .env ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── bower.json ├── documentation ├── assets │ ├── css │ │ ├── bootstrap.min.css │ │ ├── demo-documentation.css │ │ └── material-dashboard.css │ ├── img │ │ ├── apple-icon.png │ │ ├── cover.jpeg │ │ ├── faces │ │ │ └── marc.jpg │ │ ├── favicon.png │ │ ├── mask.png │ │ ├── new_logo.png │ │ ├── reactlogo.png │ │ ├── sidebar-1.jpg │ │ ├── sidebar-2.jpg │ │ ├── sidebar-3.jpg │ │ ├── sidebar-4.jpg │ │ └── tim_80x80.png │ └── js │ │ ├── bootstrap.min.js │ │ └── jquery-3.2.1.min.js └── tutorial-components.html ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html └── manifest.json └── src ├── assets ├── css │ └── material-dashboard-react.css ├── github │ ├── angular.png │ ├── chrome.png │ ├── dashboard.jpg │ ├── edge.png │ ├── firefox.png │ ├── html.png │ ├── map.jpg │ ├── md-react.gif │ ├── notifications.jpg │ ├── opera.png │ ├── opt_md_angular_thumbnail.jpg │ ├── opt_md_thumbnail.jpg │ ├── opt_md_vue_thumbnail.jpg │ ├── opt_mdr_thumbnail.jpg │ ├── react.svg │ ├── safari.png │ ├── tables.jpg │ ├── userprofile.jpg │ └── vuejs.png ├── img │ ├── apple-icon.png │ ├── cover.jpeg │ ├── faces │ │ └── marc.jpg │ ├── favicon.png │ ├── mask.png │ ├── new_logo.png │ ├── reactlogo.png │ ├── sidebar-1.jpg │ ├── sidebar-2.jpg │ ├── sidebar-3.jpg │ ├── sidebar-4.jpg │ └── tim_80x80.png └── jss │ ├── material-dashboard-react.jsx │ └── material-dashboard-react │ ├── cardImagesStyles.jsx │ ├── checkboxAdnRadioStyle.jsx │ ├── components │ ├── buttonStyle.jsx │ ├── cardAvatarStyle.jsx │ ├── cardBodyStyle.jsx │ ├── cardFooterStyle.jsx │ ├── cardHeaderStyle.jsx │ ├── cardIconStyle.jsx │ ├── cardStyle.jsx │ ├── customInputStyle.jsx │ ├── customTabsStyle.jsx │ ├── footerStyle.jsx │ ├── headerLinksStyle.jsx │ ├── headerStyle.jsx │ ├── sidebarStyle.jsx │ ├── snackbarContentStyle.jsx │ ├── tableStyle.jsx │ ├── tasksStyle.jsx │ └── typographyStyle.jsx │ ├── dropdownStyle.jsx │ ├── layouts │ └── dashboardStyle.jsx │ ├── tooltipStyle.jsx │ └── views │ ├── dashboardStyle.jsx │ └── iconsStyle.jsx ├── components ├── Card │ ├── Card.jsx │ ├── CardAvatar.jsx │ ├── CardBody.jsx │ ├── CardFooter.jsx │ ├── CardHeader.jsx │ └── CardIcon.jsx ├── CustomButtons │ └── Button.jsx ├── CustomInput │ └── CustomInput.jsx ├── CustomTabs │ └── CustomTabs.jsx ├── Footer │ └── Footer.jsx ├── Grid │ ├── GridContainer.jsx │ └── GridItem.jsx ├── Header │ ├── Header.jsx │ └── HeaderLinks.jsx ├── Sidebar │ └── Sidebar.jsx ├── Snackbar │ ├── Snackbar.jsx │ └── SnackbarContent.jsx ├── Table │ └── Table.jsx ├── Tasks │ └── Tasks.jsx └── Typography │ ├── Danger.jsx │ ├── Info.jsx │ ├── Muted.jsx │ ├── Primary.jsx │ ├── Quote.jsx │ ├── Success.jsx │ └── Warning.jsx ├── index.js ├── layouts └── Dashboard │ └── Dashboard.jsx ├── logo.svg ├── routes ├── dashboard.jsx └── index.jsx ├── variables ├── charts.jsx └── general.jsx └── views ├── Dashboard └── Dashboard.jsx ├── Icons └── Icons.jsx ├── Maps └── Maps.jsx ├── Notifications └── Notifications.jsx ├── TableList └── TableList.jsx ├── Typography └── Typography.jsx ├── UpgradeToPro └── UpgradeToPro.jsx └── UserProfile └── UserProfile.jsx /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": [ 4 | "transform-class-properties", 5 | "transform-react-jsx", 6 | "transform-object-rest-spread", 7 | ["module-resolver", { 8 | "root": ["./src"], 9 | }], 10 | ["import-rename", {"^(.*)\\.jsx$": "$1"}] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | NODE_PATH=./src 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | !.eslintrc.js 2 | documentation/ 3 | build/ 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: "babel-eslint", 3 | env: { 4 | es6: true, 5 | node: true, 6 | browser: true 7 | }, 8 | parserOptions: { 9 | ecmaVersion: 6, 10 | sourceType: "module", 11 | ecmaFeatures: { 12 | jsx: true 13 | } 14 | }, 15 | plugins: ["react"], 16 | extends: [ 17 | "eslint:recommended", 18 | "plugin:react/recommended", 19 | "plugin:prettier/recommended" 20 | ] 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # npmjs 13 | /dist 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.5.0] 2018-09-21 2 | ### Nice stuff 3 | - Added `install:clean` command (deletes `node_modules` and `package-lock.json` and runs `npm install`) 4 | ### Major style changes 5 | - `src/assets/jss/material-dashboard-react/components/tasksStyle.jsx` 6 | - `src/assets/jss/material-dashboard-react/checkboxAdnRadioStyle.jsx` 7 | - `src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx` 8 | - `src/assets/jss/material-dashboard-react/components/snackbarContentStyle.jsx` 9 | ### Deleted dependencies 10 | - `@babel/runtime v7.0.0-beta.55` 11 | ### Added dependencies 12 | ### Updated dependencies 13 | - `@material-ui/core` *1.4.3* → **3.1.0** 14 | - `@material-ui/icons` *2.0.1* → **3.0.1** 15 | - `@types/googlemaps` *3.30.11* → **3.30.13** 16 | - `ajv` *6.5.2* → **5.0.0** (to stop some warnings) 17 | - `react` *16.4.1* → **16.5.2** 18 | - `react-dom` *16.4.1* → **16.5.2** 19 | - `react-scripts` *1.1.4* → **1.1.5** 20 | - `react-swipeable-views` *0.12.15* → **0.12.17** 21 | - `eslint-config-prettier` *^2.9.0* → **3.0.1** 22 | - `eslint-plugin-react` *^7.10.0* → **7.11.1** 23 | - `prettier` *^1.13.7* → **1.14.3** 24 | 25 | ## [1.4.1] 2018-08-10 26 | ### Bug Fixing 27 | - Github solved issues: 28 | - `https://github.com/creativetimofficial/material-dashboard-react/issues/58` 29 | - Changed the `GridContainer` component 30 | ### Major style changes 31 | - `src/assets/jss/material-dashboard-react/components/footerStyle.jsx` 32 | - `src/assets/jss/material-dashboard-react/components/headerStyle.jsx` 33 | ### Added dependencies 34 | - `@babel/runtime v7.0.0-beta.55` 35 | ### Update dependencies 36 | - `@material-ui/core v1.4.1` to `@material-ui/core v1.4.3` 37 | - `@material-ui/icons v2.0.0` to `@material-ui/icons v2.0.1` 38 | 39 | 40 | ## [1.4.0] 2018-07-26 41 | ### Bug Fixing 42 | - Added resize event listener for window ([see this issue here](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/40#issuecomment-406983150)) 43 | - Added issues template file 44 | - Github solved issues: 45 | - https://github.com/creativetimofficial/material-dashboard-react/issues/49 (dropped `react-popper` in favour of `@material-ui/core/Popper`) 46 | - https://github.com/creativetimofficial/material-dashboard-react/issues/47 47 | - https://github.com/creativetimofficial/material-dashboard-react/issues/45 48 | - https://github.com/creativetimofficial/material-dashboard-react/issues/38 49 | - https://github.com/creativetimofficial/material-dashboard-react/issues/37 50 | - Github enhancement issues: 51 | - https://github.com/creativetimofficial/material-dashboard-react/issues/47 (read the [./README.md](./README.md) file) 52 | ### Major style changes 53 | - Added styles for `svg`'s, **font-awesome** classes and `.material-icons` class inside 54 | - `src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx` 55 | - `src/assets/jss/material-dashboard-react/components/buttonStyle.jsx` 56 | - `src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx` 57 | - `src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx` 58 | - `src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx` 59 | - `src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx` 60 | - Others 61 | - `src/assets/jss/material-dashboard-react/tooltipStyle.jsx` 62 | - `src/assets/jss/material-dashboard-react/dropdownStyle.jsx` 63 | ### Dropped components 64 | - Dropped popper usage in favour of `@material-ui/core/Popper` (Changes in `src/components/Header/HeaderLinks.jsx`) 65 | ### Added components 66 | - `src/components/Grid/GridContainer.jsx` (instead of MUI's ` 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tutorial Components - Material Dashboard React by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 31 | 32 | 33 | 34 | 70 |
71 |
72 |
73 |
74 |

Material Dashboard React

75 |

Tutorial and Components

76 |
v1.5.0
77 | View documentation 78 |
79 |
80 |
81 |
82 | 130 | 131 | 132 | 133 | 134 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-dashboard-react", 3 | "version": "1.5.0", 4 | "description": "Material Dashboard React. Coded by Creative Tim", 5 | "private": false, 6 | "main": "dist/index.js", 7 | "dependencies": { 8 | "@material-ui/core": "3.1.0", 9 | "@material-ui/icons": "3.0.1", 10 | "@types/googlemaps": "3.30.13", 11 | "@types/markerclustererplus": "2.1.33", 12 | "ajv": "^5.0.0", 13 | "chartist": "0.10.1", 14 | "classnames": "2.2.6", 15 | "npm-run-all": "4.1.3", 16 | "perfect-scrollbar": "1.4.0", 17 | "react": "16.5.2", 18 | "react-chartist": "0.13.1", 19 | "react-dom": "16.5.2", 20 | "react-google-maps": "9.4.5", 21 | "react-router-dom": "4.3.1", 22 | "react-scripts": "1.1.5", 23 | "react-swipeable-views": "0.12.17" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test --env=jsdom", 29 | "eject": "react-scripts eject", 30 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", 31 | "lint:check": "eslint . --ext=js,jsx; exit 0", 32 | "lint:fix": "eslint . --ext=js,jsx --fix; exit 0", 33 | "build-package": "babel src --out-dir dist" 34 | }, 35 | "repository": { 36 | "type": "git", 37 | "url": "git+https://github.com/creativetimofficial/material-dashboard-react.git" 38 | }, 39 | "keywords": [], 40 | "author": "Creative Tim (https://www.creative-tim.com/)", 41 | "license": "MIT", 42 | "bugs": { 43 | "url": "https://github.com/creativetimofficial/material-dashboard-react/issues" 44 | }, 45 | "homepage": "https://creativetimofficial.github.io/material-dashboard-react/#/dashboard", 46 | "optionalDependencies": { 47 | "babel-eslint": "7.2.3", 48 | "eslint": "4.19.1", 49 | "eslint-config-prettier": "3.0.1", 50 | "eslint-plugin-prettier": "2.6.2", 51 | "eslint-plugin-react": "7.11.1", 52 | "prettier": "1.14.3" 53 | }, 54 | "devDependencies": { 55 | "babel-cli": "6.26.0", 56 | "babel-plugin-module-resolver": "3.1.1", 57 | "babel-plugin-import-rename": "1.0.1", 58 | "babel-plugin-transform-object-rest-spread": "6.26.0", 59 | "babel-plugin-transform-react-jsx": "6.24.1", 60 | "babel-preset-es2015": "6.24.1" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 27 | Material Dashboard React by Creative Tim 28 | 29 | 30 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/css/material-dashboard-react.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard React - v1.5.0 based on Material Dashboard - v1.2.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/material-dashboard-react 8 | * Copyright 2018 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | .ct-grid { 17 | stroke: rgba(255, 255, 255, 0.2); 18 | stroke-width: 1px; 19 | stroke-dasharray: 2px; 20 | } 21 | 22 | .ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { 23 | stroke: rgba(255, 255, 255, 0.8); 24 | } 25 | 26 | .ct-label.ct-horizontal.ct-end { 27 | -webkit-box-align: flex-start; 28 | -webkit-align-items: flex-start; 29 | -ms-flex-align: flex-start; 30 | align-items: flex-start; 31 | -webkit-box-pack: flex-start; 32 | -webkit-justify-content: flex-start; 33 | -ms-flex-pack: flex-start; 34 | justify-content: flex-start; 35 | text-align: left; 36 | text-anchor: start; 37 | } 38 | 39 | .ct-label { 40 | color: rgba(255, 255, 255, 0.7); 41 | } 42 | 43 | .ct-chart-line .ct-label, .ct-chart-bar .ct-label { 44 | display: block; 45 | display: -webkit-box; 46 | display: -moz-box; 47 | display: -ms-flexbox; 48 | display: -webkit-flex; 49 | display: flex; 50 | } 51 | 52 | .ct-label { 53 | fill: rgba(0, 0, 0, 0.4); 54 | line-height: 1; 55 | } 56 | html * { 57 | -webkit-font-smoothing: antialiased; 58 | -moz-osx-font-smoothing: grayscale; 59 | } 60 | body { 61 | background-color: #EEEEEE; 62 | color: #3C4858; 63 | margin: 0; 64 | font-family: Roboto, Helvetica, Arial, sans-serif; 65 | font-weight: 300; 66 | line-height: 1.5em; 67 | } 68 | 69 | blockquote footer:before, blockquote small:before { 70 | content: '\2014 \00A0'; 71 | } 72 | 73 | small { 74 | font-size: 80%; 75 | } 76 | 77 | h1 { 78 | font-size: 3em; 79 | line-height: 1.15em; 80 | } 81 | 82 | h2 { 83 | font-size: 2.4em; 84 | } 85 | 86 | h3 { 87 | font-size: 1.825em; 88 | line-height: 1.4em; 89 | margin: 20px 0 10px; 90 | } 91 | 92 | h4 { 93 | font-size: 1.3em; 94 | line-height: 1.4em; 95 | } 96 | 97 | h5 { 98 | font-size: 1.25em; 99 | line-height: 1.4em; 100 | margin-bottom: 15px; 101 | } 102 | 103 | h6 { 104 | font-size: 1em; 105 | text-transform: uppercase; 106 | font-weight: 500; 107 | } 108 | 109 | body { 110 | background-color: #EEEEEE; 111 | color: #3C4858; 112 | } 113 | 114 | blockquote p { 115 | font-style: italic; 116 | } 117 | 118 | body, h1, h2, h3, h4, h5, h6 { 119 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; 120 | font-weight: 300; 121 | line-height: 1.5em; 122 | } 123 | 124 | a { 125 | color: #9c27b0; 126 | text-decoration: none; 127 | } 128 | 129 | a:hover, a:focus { 130 | color: #89229b; 131 | text-decoration: none; 132 | } 133 | 134 | legend { 135 | border-bottom: 0; 136 | } 137 | 138 | * { 139 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 140 | -webkit-tap-highlight-color: transparent; 141 | } 142 | 143 | *:focus { 144 | outline: 0; 145 | } 146 | 147 | a:focus, a:active, 148 | button:active, button:focus, button:hover, 149 | button::-moz-focus-inner, 150 | input[type="reset"]::-moz-focus-inner, 151 | input[type="button"]::-moz-focus-inner, 152 | input[type="submit"]::-moz-focus-inner, 153 | select::-moz-focus-inner, 154 | input[type="file"] > input[type="button"]::-moz-focus-inner { 155 | outline: 0 !important; 156 | } 157 | 158 | legend { 159 | margin-bottom: 20px; 160 | font-size: 21px; 161 | } 162 | 163 | output { 164 | padding-top: 8px; 165 | font-size: 14px; 166 | line-height: 1.42857; 167 | } 168 | 169 | label { 170 | font-size: 14px; 171 | line-height: 1.42857; 172 | color: #AAAAAA; 173 | font-weight: 400; 174 | } 175 | 176 | footer { 177 | padding: 15px 0; 178 | } 179 | 180 | footer ul { 181 | margin-bottom: 0; 182 | padding: 0; 183 | list-style: none; 184 | } 185 | 186 | footer ul li { 187 | display: inline-block; 188 | } 189 | 190 | footer ul li a { 191 | color: inherit; 192 | padding: 15px; 193 | font-weight: 500; 194 | font-size: 12px; 195 | text-transform: uppercase; 196 | border-radius: 3px; 197 | text-decoration: none; 198 | position: relative; 199 | display: block; 200 | } 201 | 202 | footer ul li a:hover { 203 | text-decoration: none; 204 | } 205 | 206 | @media (max-width: 991px) { 207 | body, 208 | html { 209 | position: relative; 210 | overflow-x: hidden; 211 | } 212 | 213 | #bodyClick { 214 | height: 100%; 215 | width: 100%; 216 | position: fixed; 217 | opacity: 0; 218 | top: 0; 219 | left: auto; 220 | right: 260px; 221 | content: ""; 222 | z-index: 9999; 223 | overflow-x: hidden; 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /src/assets/github/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/angular.png -------------------------------------------------------------------------------- /src/assets/github/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/chrome.png -------------------------------------------------------------------------------- /src/assets/github/dashboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/dashboard.jpg -------------------------------------------------------------------------------- /src/assets/github/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/edge.png -------------------------------------------------------------------------------- /src/assets/github/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/firefox.png -------------------------------------------------------------------------------- /src/assets/github/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/html.png -------------------------------------------------------------------------------- /src/assets/github/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/map.jpg -------------------------------------------------------------------------------- /src/assets/github/md-react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/md-react.gif -------------------------------------------------------------------------------- /src/assets/github/notifications.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/notifications.jpg -------------------------------------------------------------------------------- /src/assets/github/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/opera.png -------------------------------------------------------------------------------- /src/assets/github/opt_md_angular_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/opt_md_angular_thumbnail.jpg -------------------------------------------------------------------------------- /src/assets/github/opt_md_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/opt_md_thumbnail.jpg -------------------------------------------------------------------------------- /src/assets/github/opt_md_vue_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/opt_md_vue_thumbnail.jpg -------------------------------------------------------------------------------- /src/assets/github/opt_mdr_thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/opt_mdr_thumbnail.jpg -------------------------------------------------------------------------------- /src/assets/github/react.svg: -------------------------------------------------------------------------------- 1 | 2 | React Logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/github/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/safari.png -------------------------------------------------------------------------------- /src/assets/github/tables.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/tables.jpg -------------------------------------------------------------------------------- /src/assets/github/userprofile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/userprofile.jpg -------------------------------------------------------------------------------- /src/assets/github/vuejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/github/vuejs.png -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/cover.jpeg -------------------------------------------------------------------------------- /src/assets/img/faces/marc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/faces/marc.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/mask.png -------------------------------------------------------------------------------- /src/assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/new_logo.png -------------------------------------------------------------------------------- /src/assets/img/reactlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/reactlogo.png -------------------------------------------------------------------------------- /src/assets/img/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/sidebar-1.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/sidebar-2.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/sidebar-3.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/sidebar-4.jpg -------------------------------------------------------------------------------- /src/assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsguru-git/material-dashboard-react/873c857d7c62862021008bf773f29bac207b764a/src/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react.jsx: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard React - v1.5.0 based on Material Dashboard - v1.2.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/material-dashboard-react 8 | * Copyright 2018 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | // ############################## 18 | // // // Variables - Styles that are used on more than one component 19 | // ############################# 20 | 21 | const drawerWidth = 260; 22 | 23 | const transition = { 24 | transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)" 25 | }; 26 | 27 | const container = { 28 | paddingRight: "15px", 29 | paddingLeft: "15px", 30 | marginRight: "auto", 31 | marginLeft: "auto" 32 | }; 33 | 34 | const boxShadow = { 35 | boxShadow: 36 | "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)" 37 | }; 38 | 39 | const card = { 40 | display: "inline-block", 41 | position: "relative", 42 | width: "100%", 43 | margin: "25px 0", 44 | boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)", 45 | borderRadius: "3px", 46 | color: "rgba(0, 0, 0, 0.87)", 47 | background: "#fff" 48 | }; 49 | 50 | const defaultFont = { 51 | fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', 52 | fontWeight: "300", 53 | lineHeight: "1.5em" 54 | }; 55 | 56 | const primaryColor = "#9c27b0"; 57 | const warningColor = "#ff9800"; 58 | const dangerColor = "#f44336"; 59 | const successColor = "#4caf50"; 60 | const infoColor = "#00acc1"; 61 | const roseColor = "#e91e63"; 62 | const grayColor = "#999999"; 63 | 64 | const primaryBoxShadow = { 65 | boxShadow: 66 | "0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2)" 67 | }; 68 | const infoBoxShadow = { 69 | boxShadow: 70 | "0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2)" 71 | }; 72 | const successBoxShadow = { 73 | boxShadow: 74 | "0 12px 20px -10px rgba(76, 175, 80, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2)" 75 | }; 76 | const warningBoxShadow = { 77 | boxShadow: 78 | "0 12px 20px -10px rgba(255, 152, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 152, 0, 0.2)" 79 | }; 80 | const dangerBoxShadow = { 81 | boxShadow: 82 | "0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)" 83 | }; 84 | const roseBoxShadow = { 85 | boxShadow: 86 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4)" 87 | }; 88 | 89 | const warningCardHeader = { 90 | background: "linear-gradient(60deg, #ffa726, #fb8c00)", 91 | ...warningBoxShadow 92 | }; 93 | const successCardHeader = { 94 | background: "linear-gradient(60deg, #66bb6a, #43a047)", 95 | ...successBoxShadow 96 | }; 97 | const dangerCardHeader = { 98 | background: "linear-gradient(60deg, #ef5350, #e53935)", 99 | ...dangerBoxShadow 100 | }; 101 | const infoCardHeader = { 102 | background: "linear-gradient(60deg, #26c6da, #00acc1)", 103 | ...infoBoxShadow 104 | }; 105 | const primaryCardHeader = { 106 | background: "linear-gradient(60deg, #ab47bc, #8e24aa)", 107 | ...primaryBoxShadow 108 | }; 109 | const roseCardHeader = { 110 | background: "linear-gradient(60deg, #ec407a, #d81b60)", 111 | ...roseBoxShadow 112 | }; 113 | 114 | const cardActions = { 115 | margin: "0 20px 10px", 116 | paddingTop: "10px", 117 | borderTop: "1px solid #eeeeee", 118 | height: "auto", 119 | ...defaultFont 120 | }; 121 | 122 | const cardHeader = { 123 | margin: "-20px 15px 0", 124 | borderRadius: "3px", 125 | padding: "15px" 126 | }; 127 | 128 | const defaultBoxShadow = { 129 | border: "0", 130 | borderRadius: "3px", 131 | boxShadow: 132 | "0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", 133 | padding: "10px 0", 134 | transition: "all 150ms ease 0s" 135 | }; 136 | 137 | const title = { 138 | color: "#3C4858", 139 | textDecoration: "none", 140 | fontWeight: "300", 141 | marginTop: "30px", 142 | marginBottom: "25px", 143 | minHeight: "32px", 144 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 145 | "& small": { 146 | color: "#777", 147 | fontWeight: "400", 148 | lineHeight: "1" 149 | } 150 | }; 151 | 152 | const cardTitle = { 153 | ...title, 154 | marginTop: "0", 155 | marginBottom: "3px", 156 | minHeight: "auto", 157 | "& a": { 158 | ...title, 159 | marginTop: ".625rem", 160 | marginBottom: "0.75rem", 161 | minHeight: "auto" 162 | } 163 | }; 164 | 165 | const cardSubtitle = { 166 | marginTop: "-.375rem" 167 | }; 168 | 169 | const cardLink = { 170 | "& + $cardLink": { 171 | marginLeft: "1.25rem" 172 | } 173 | }; 174 | 175 | export { 176 | //variables 177 | drawerWidth, 178 | transition, 179 | container, 180 | boxShadow, 181 | card, 182 | defaultFont, 183 | primaryColor, 184 | warningColor, 185 | dangerColor, 186 | successColor, 187 | infoColor, 188 | roseColor, 189 | grayColor, 190 | primaryBoxShadow, 191 | infoBoxShadow, 192 | successBoxShadow, 193 | warningBoxShadow, 194 | dangerBoxShadow, 195 | roseBoxShadow, 196 | warningCardHeader, 197 | successCardHeader, 198 | dangerCardHeader, 199 | infoCardHeader, 200 | primaryCardHeader, 201 | roseCardHeader, 202 | cardActions, 203 | cardHeader, 204 | defaultBoxShadow, 205 | title, 206 | cardTitle, 207 | cardSubtitle, 208 | cardLink 209 | }; 210 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/cardImagesStyles.jsx: -------------------------------------------------------------------------------- 1 | const cardImagesStyles = { 2 | cardImgTop: { 3 | width: "100%", 4 | borderTopLeftRadius: "calc(.25rem - 1px)", 5 | borderTopRightRadius: "calc(.25rem - 1px)" 6 | }, 7 | cardImgBottom: { 8 | width: "100%", 9 | borderBottomRightRadius: "calc(.25rem - 1px)", 10 | borderBottomLeftRadius: "calc(.25rem - 1px)" 11 | }, 12 | cardImgOverlay: { 13 | position: "absolute", 14 | top: "0", 15 | right: "0", 16 | bottom: "0", 17 | left: "0", 18 | padding: "1.25rem" 19 | }, 20 | cardImg: { 21 | width: "100%", 22 | borderRadius: "calc(.25rem - 1px)" 23 | } 24 | }; 25 | 26 | export default cardImagesStyles; 27 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/checkboxAdnRadioStyle.jsx: -------------------------------------------------------------------------------- 1 | import { primaryColor } from "assets/jss/material-dashboard-react.jsx"; 2 | 3 | const checkboxAdnRadioStyle = { 4 | root: { 5 | padding: "13px" 6 | }, 7 | checked: { 8 | color: primaryColor + "!important" 9 | }, 10 | checkedIcon: { 11 | width: "20px", 12 | height: "20px", 13 | border: "1px solid rgba(0, 0, 0, .54)", 14 | borderRadius: "3px" 15 | }, 16 | uncheckedIcon: { 17 | width: "0px", 18 | height: "0px", 19 | padding: "10px", 20 | border: "1px solid rgba(0, 0, 0, .54)", 21 | borderRadius: "3px" 22 | }, 23 | radio: { 24 | color: primaryColor + "!important" 25 | }, 26 | radioChecked: { 27 | width: "20px", 28 | height: "20px", 29 | border: "1px solid " + primaryColor, 30 | borderRadius: "50%" 31 | }, 32 | radioUnchecked: { 33 | width: "0px", 34 | height: "0px", 35 | padding: "10px", 36 | border: "1px solid rgba(0, 0, 0, .54)", 37 | borderRadius: "50%" 38 | } 39 | }; 40 | 41 | export default checkboxAdnRadioStyle; 42 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/buttonStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | grayColor, 3 | primaryColor, 4 | infoColor, 5 | successColor, 6 | warningColor, 7 | dangerColor, 8 | roseColor 9 | } from "assets/jss/material-dashboard-react.jsx"; 10 | 11 | const buttonStyle = { 12 | button: { 13 | minHeight: "auto", 14 | minWidth: "auto", 15 | backgroundColor: grayColor, 16 | color: "#FFFFFF", 17 | boxShadow: 18 | "0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)", 19 | border: "none", 20 | borderRadius: "3px", 21 | position: "relative", 22 | padding: "12px 30px", 23 | margin: ".3125rem 1px", 24 | fontSize: "12px", 25 | fontWeight: "400", 26 | textTransform: "uppercase", 27 | letterSpacing: "0", 28 | willChange: "box-shadow, transform", 29 | transition: 30 | "box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)", 31 | lineHeight: "1.42857143", 32 | textAlign: "center", 33 | whiteSpace: "nowrap", 34 | verticalAlign: "middle", 35 | touchAction: "manipulation", 36 | cursor: "pointer", 37 | "&:hover,&:focus": { 38 | color: "#FFFFFF", 39 | backgroundColor: grayColor, 40 | boxShadow: 41 | "0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)" 42 | }, 43 | "& .fab,& .fas,& .far,& .fal, &.material-icons": { 44 | position: "relative", 45 | display: "inline-block", 46 | top: "0", 47 | marginTop: "-1em", 48 | marginBottom: "-1em", 49 | fontSize: "1.1rem", 50 | marginRight: "4px", 51 | verticalAlign: "middle" 52 | }, 53 | "& svg": { 54 | position: "relative", 55 | display: "inline-block", 56 | top: "0", 57 | width: "18px", 58 | height: "18px", 59 | marginRight: "4px", 60 | verticalAlign: "middle" 61 | }, 62 | "&$justIcon": { 63 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 64 | marginTop: "0px", 65 | position: "absolute", 66 | width: "100%", 67 | transform: "none", 68 | left: "0px", 69 | top: "0px", 70 | height: "100%", 71 | lineHeight: "41px", 72 | fontSize: "20px" 73 | } 74 | } 75 | }, 76 | white: { 77 | "&,&:focus,&:hover": { 78 | backgroundColor: "#FFFFFF", 79 | color: grayColor 80 | } 81 | }, 82 | rose: { 83 | backgroundColor: roseColor, 84 | boxShadow: 85 | "0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12)", 86 | "&:hover,&:focus": { 87 | backgroundColor: roseColor, 88 | boxShadow: 89 | "0 14px 26px -12px rgba(233, 30, 99, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(233, 30, 99, 0.2)" 90 | } 91 | }, 92 | primary: { 93 | backgroundColor: primaryColor, 94 | boxShadow: 95 | "0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12)", 96 | "&:hover,&:focus": { 97 | backgroundColor: primaryColor, 98 | boxShadow: 99 | "0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2)" 100 | } 101 | }, 102 | info: { 103 | backgroundColor: infoColor, 104 | boxShadow: 105 | "0 2px 2px 0 rgba(0, 188, 212, 0.14), 0 3px 1px -2px rgba(0, 188, 212, 0.2), 0 1px 5px 0 rgba(0, 188, 212, 0.12)", 106 | "&:hover,&:focus": { 107 | backgroundColor: infoColor, 108 | boxShadow: 109 | "0 14px 26px -12px rgba(0, 188, 212, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 188, 212, 0.2)" 110 | } 111 | }, 112 | success: { 113 | backgroundColor: successColor, 114 | boxShadow: 115 | "0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12)", 116 | "&:hover,&:focus": { 117 | backgroundColor: successColor, 118 | boxShadow: 119 | "0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2)" 120 | } 121 | }, 122 | warning: { 123 | backgroundColor: warningColor, 124 | boxShadow: 125 | "0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12)", 126 | "&:hover,&:focus": { 127 | backgroundColor: warningColor, 128 | boxShadow: 129 | "0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2)" 130 | } 131 | }, 132 | danger: { 133 | backgroundColor: dangerColor, 134 | boxShadow: 135 | "0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12)", 136 | "&:hover,&:focus": { 137 | backgroundColor: dangerColor, 138 | boxShadow: 139 | "0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2)" 140 | } 141 | }, 142 | simple: { 143 | "&,&:focus,&:hover": { 144 | color: "#FFFFFF", 145 | background: "transparent", 146 | boxShadow: "none" 147 | }, 148 | "&$rose": { 149 | "&,&:focus,&:hover,&:visited": { 150 | color: roseColor 151 | } 152 | }, 153 | "&$primary": { 154 | "&,&:focus,&:hover,&:visited": { 155 | color: primaryColor 156 | } 157 | }, 158 | "&$info": { 159 | "&,&:focus,&:hover,&:visited": { 160 | color: infoColor 161 | } 162 | }, 163 | "&$success": { 164 | "&,&:focus,&:hover,&:visited": { 165 | color: successColor 166 | } 167 | }, 168 | "&$warning": { 169 | "&,&:focus,&:hover,&:visited": { 170 | color: warningColor 171 | } 172 | }, 173 | "&$danger": { 174 | "&,&:focus,&:hover,&:visited": { 175 | color: dangerColor 176 | } 177 | } 178 | }, 179 | transparent: { 180 | "&,&:focus,&:hover": { 181 | color: "inherit", 182 | background: "transparent", 183 | boxShadow: "none" 184 | } 185 | }, 186 | disabled: { 187 | opacity: "0.65", 188 | pointerEvents: "none" 189 | }, 190 | lg: { 191 | padding: "1.125rem 2.25rem", 192 | fontSize: "0.875rem", 193 | lineHeight: "1.333333", 194 | borderRadius: "0.2rem" 195 | }, 196 | sm: { 197 | padding: "0.40625rem 1.25rem", 198 | fontSize: "0.6875rem", 199 | lineHeight: "1.5", 200 | borderRadius: "0.2rem" 201 | }, 202 | round: { 203 | borderRadius: "30px" 204 | }, 205 | block: { 206 | width: "100% !important" 207 | }, 208 | link: { 209 | "&,&:hover,&:focus": { 210 | backgroundColor: "transparent", 211 | color: "#999999", 212 | boxShadow: "none" 213 | } 214 | }, 215 | justIcon: { 216 | paddingLeft: "12px", 217 | paddingRight: "12px", 218 | fontSize: "20px", 219 | height: "41px", 220 | minWidth: "41px", 221 | width: "41px", 222 | "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": { 223 | marginRight: "0px" 224 | }, 225 | "&$lg": { 226 | height: "57px", 227 | minWidth: "57px", 228 | width: "57px", 229 | lineHeight: "56px", 230 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 231 | fontSize: "32px", 232 | lineHeight: "56px" 233 | }, 234 | "& svg": { 235 | width: "32px", 236 | height: "32px" 237 | } 238 | }, 239 | "&$sm": { 240 | height: "30px", 241 | minWidth: "30px", 242 | width: "30px", 243 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 244 | fontSize: "17px", 245 | lineHeight: "29px" 246 | }, 247 | "& svg": { 248 | width: "17px", 249 | height: "17px" 250 | } 251 | } 252 | } 253 | }; 254 | 255 | export default buttonStyle; 256 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardAvatarStyle.jsx: -------------------------------------------------------------------------------- 1 | const cardAvatarStyle = { 2 | cardAvatar: { 3 | "&$cardAvatarProfile img": { 4 | width: "100%", 5 | height: "auto" 6 | } 7 | }, 8 | cardAvatarProfile: { 9 | maxWidth: "130px", 10 | maxHeight: "130px", 11 | margin: "-50px auto 0", 12 | borderRadius: "50%", 13 | overflow: "hidden", 14 | padding: "0", 15 | boxShadow: 16 | "0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", 17 | "&$cardAvatarPlain": { 18 | marginTop: "0" 19 | } 20 | }, 21 | cardAvatarPlain: {} 22 | }; 23 | 24 | export default cardAvatarStyle; 25 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardBodyStyle.jsx: -------------------------------------------------------------------------------- 1 | const cardBodyStyle = { 2 | cardBody: { 3 | padding: "0.9375rem 20px", 4 | flex: "1 1 auto", 5 | WebkitBoxFlex: "1", 6 | position: "relative" 7 | }, 8 | cardBodyPlain: { 9 | paddingLeft: "5px", 10 | paddingRight: "5px" 11 | }, 12 | cardBodyProfile: { 13 | marginTop: "15px" 14 | } 15 | }; 16 | 17 | export default cardBodyStyle; 18 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx: -------------------------------------------------------------------------------- 1 | const cardFooterStyle = { 2 | cardFooter: { 3 | padding: "0", 4 | paddingTop: "10px", 5 | margin: "0 15px 10px", 6 | borderRadius: "0", 7 | justifyContent: "space-between", 8 | alignItems: "center", 9 | display: "flex", 10 | backgroundColor: "transparent", 11 | border: "0" 12 | }, 13 | cardFooterProfile: { 14 | marginTop: "-15px" 15 | }, 16 | cardFooterPlain: { 17 | paddingLeft: "5px", 18 | paddingRight: "5px", 19 | backgroundColor: "transparent" 20 | }, 21 | cardFooterStats: { 22 | borderTop: "1px solid #eee", 23 | marginTop: "20px", 24 | "& svg": { 25 | position: "relative", 26 | top: "4px", 27 | marginRight: "3px", 28 | marginLeft: "3px", 29 | width: "16px", 30 | height: "16px" 31 | }, 32 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 33 | fontSize: "16px", 34 | position: "relative", 35 | top: "4px", 36 | marginRight: "3px", 37 | marginLeft: "3px" 38 | } 39 | }, 40 | cardFooterChart: { 41 | borderTop: "1px solid #eee" 42 | } 43 | }; 44 | 45 | export default cardFooterStyle; 46 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | warningCardHeader, 3 | successCardHeader, 4 | dangerCardHeader, 5 | infoCardHeader, 6 | primaryCardHeader, 7 | roseCardHeader 8 | } from "assets/jss/material-dashboard-react.jsx"; 9 | const cardHeaderStyle = { 10 | cardHeader: { 11 | padding: "0.75rem 1.25rem", 12 | marginBottom: "0", 13 | borderBottom: "none", 14 | background: "transparent", 15 | zIndex: "3 !important", 16 | "&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": { 17 | margin: "0 15px", 18 | padding: "0", 19 | position: "relative", 20 | color: "#FFFFFF" 21 | }, 22 | "&:first-child": { 23 | borderRadius: "calc(.25rem - 1px) calc(.25rem - 1px) 0 0" 24 | }, 25 | "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": { 26 | "&:not($cardHeaderIcon)": { 27 | borderRadius: "3px", 28 | marginTop: "-20px", 29 | padding: "15px" 30 | } 31 | }, 32 | "&$cardHeaderStats svg": { 33 | fontSize: "36px", 34 | lineHeight: "56px", 35 | textAlign: "center", 36 | width: "36px", 37 | height: "36px", 38 | margin: "10px 10px 4px" 39 | }, 40 | "&$cardHeaderStats i,&$cardHeaderStats .material-icons": { 41 | fontSize: "36px", 42 | lineHeight: "56px", 43 | width: "56px", 44 | height: "56px", 45 | textAlign: "center", 46 | overflow: "unset", 47 | marginBottom: "1px" 48 | }, 49 | "&$cardHeaderStats$cardHeaderIcon": { 50 | textAlign: "right" 51 | } 52 | }, 53 | cardHeaderPlain: { 54 | marginLeft: "0px !important", 55 | marginRight: "0px !important" 56 | }, 57 | cardHeaderStats: { 58 | "& $cardHeaderIcon": { 59 | textAlign: "right" 60 | }, 61 | "& h1,& h2,& h3,& h4,& h5,& h6": { 62 | margin: "0 !important" 63 | } 64 | }, 65 | cardHeaderIcon: { 66 | "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": { 67 | background: "transparent", 68 | boxShadow: "none" 69 | }, 70 | "& i,& .material-icons": { 71 | width: "33px", 72 | height: "33px", 73 | textAlign: "center", 74 | lineHeight: "33px" 75 | }, 76 | "& svg": { 77 | width: "24px", 78 | height: "24px", 79 | textAlign: "center", 80 | lineHeight: "33px", 81 | margin: "5px 4px 0px" 82 | } 83 | }, 84 | warningCardHeader: { 85 | color: "#FFFFFF", 86 | "&:not($cardHeaderIcon)": { 87 | ...warningCardHeader 88 | } 89 | }, 90 | successCardHeader: { 91 | color: "#FFFFFF", 92 | "&:not($cardHeaderIcon)": { 93 | ...successCardHeader 94 | } 95 | }, 96 | dangerCardHeader: { 97 | color: "#FFFFFF", 98 | "&:not($cardHeaderIcon)": { 99 | ...dangerCardHeader 100 | } 101 | }, 102 | infoCardHeader: { 103 | color: "#FFFFFF", 104 | "&:not($cardHeaderIcon)": { 105 | ...infoCardHeader 106 | } 107 | }, 108 | primaryCardHeader: { 109 | color: "#FFFFFF", 110 | "&:not($cardHeaderIcon)": { 111 | ...primaryCardHeader 112 | } 113 | }, 114 | roseCardHeader: { 115 | color: "#FFFFFF", 116 | "&:not($cardHeaderIcon)": { 117 | ...roseCardHeader 118 | } 119 | } 120 | }; 121 | 122 | export default cardHeaderStyle; 123 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardIconStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | warningCardHeader, 3 | successCardHeader, 4 | dangerCardHeader, 5 | infoCardHeader, 6 | primaryCardHeader, 7 | roseCardHeader 8 | } from "assets/jss/material-dashboard-react.jsx"; 9 | const cardIconStyle = { 10 | cardIcon: { 11 | "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": { 12 | borderRadius: "3px", 13 | backgroundColor: "#999", 14 | padding: "15px", 15 | marginTop: "-20px", 16 | marginRight: "15px", 17 | float: "left" 18 | } 19 | }, 20 | warningCardHeader, 21 | successCardHeader, 22 | dangerCardHeader, 23 | infoCardHeader, 24 | primaryCardHeader, 25 | roseCardHeader 26 | }; 27 | 28 | export default cardIconStyle; 29 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/cardStyle.jsx: -------------------------------------------------------------------------------- 1 | const cardStyle = { 2 | card: { 3 | border: "0", 4 | marginBottom: "30px", 5 | marginTop: "30px", 6 | borderRadius: "6px", 7 | color: "rgba(0, 0, 0, 0.87)", 8 | background: "#fff", 9 | width: "100%", 10 | boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)", 11 | position: "relative", 12 | display: "flex", 13 | flexDirection: "column", 14 | minWidth: "0", 15 | wordWrap: "break-word", 16 | fontSize: ".875rem" 17 | }, 18 | cardPlain: { 19 | background: "transparent", 20 | boxShadow: "none" 21 | }, 22 | cardProfile: { 23 | marginTop: "30px", 24 | textAlign: "center" 25 | }, 26 | cardChart: { 27 | "& p": { 28 | marginTop: "0px", 29 | paddingTop: "0px" 30 | } 31 | } 32 | }; 33 | 34 | export default cardStyle; 35 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/customInputStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | primaryColor, 3 | dangerColor, 4 | successColor, 5 | defaultFont 6 | } from "assets/jss/material-dashboard-react.jsx"; 7 | 8 | const customInputStyle = { 9 | disabled: { 10 | "&:before": { 11 | backgroundColor: "transparent !important" 12 | } 13 | }, 14 | underline: { 15 | "&:hover:not($disabled):before,&:before": { 16 | borderColor: "#D2D2D2 !important", 17 | borderWidth: "1px !important" 18 | }, 19 | "&:after": { 20 | borderColor: primaryColor 21 | } 22 | }, 23 | underlineError: { 24 | "&:after": { 25 | borderColor: dangerColor 26 | } 27 | }, 28 | underlineSuccess: { 29 | "&:after": { 30 | borderColor: successColor 31 | } 32 | }, 33 | labelRoot: { 34 | ...defaultFont, 35 | color: "#AAAAAA !important", 36 | fontWeight: "400", 37 | fontSize: "14px", 38 | lineHeight: "1.42857" 39 | }, 40 | labelRootError: { 41 | color: dangerColor 42 | }, 43 | labelRootSuccess: { 44 | color: successColor 45 | }, 46 | feedback: { 47 | position: "absolute", 48 | top: "18px", 49 | right: "0", 50 | zIndex: "2", 51 | display: "block", 52 | width: "24px", 53 | height: "24px", 54 | textAlign: "center", 55 | pointerEvents: "none" 56 | }, 57 | marginTop: { 58 | marginTop: "16px" 59 | }, 60 | formControl: { 61 | paddingBottom: "10px", 62 | margin: "27px 0 0 0", 63 | position: "relative" 64 | } 65 | }; 66 | 67 | export default customInputStyle; 68 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx: -------------------------------------------------------------------------------- 1 | const customTabsStyle = { 2 | cardTitle: { 3 | float: "left", 4 | padding: "10px 10px 10px 0px", 5 | lineHeight: "24px" 6 | }, 7 | cardTitleRTL: { 8 | float: "right", 9 | padding: "10px 0px 10px 10px !important" 10 | }, 11 | displayNone: { 12 | display: "none !important" 13 | }, 14 | tabsRoot: { 15 | minHeight: "unset !important", 16 | overflowX: "visible", 17 | "& $tabRootButton": { 18 | fontSize: "0.875rem" 19 | } 20 | }, 21 | tabRootButton: { 22 | minHeight: "unset !important", 23 | minWidth: "unset !important", 24 | width: "unset !important", 25 | height: "unset !important", 26 | maxWidth: "unset !important", 27 | maxHeight: "unset !important", 28 | padding: "10px 15px", 29 | borderRadius: "3px", 30 | lineHeight: "24px", 31 | border: "0 !important", 32 | color: "#fff !important", 33 | marginLeft: "4px", 34 | "&:last-child": { 35 | marginLeft: "0px" 36 | } 37 | }, 38 | tabLabelContainer: { 39 | padding: "0px" 40 | }, 41 | tabLabel: { 42 | fontWeight: "500", 43 | fontSize: "12px" 44 | }, 45 | tabSelected: { 46 | backgroundColor: "rgba(255, 255, 255, 0.2)", 47 | transition: "0.2s background-color 0.1s" 48 | }, 49 | tabWrapper: { 50 | display: "inline-block", 51 | minHeight: "unset !important", 52 | minWidth: "unset !important", 53 | width: "unset !important", 54 | height: "unset !important", 55 | maxWidth: "unset !important", 56 | maxHeight: "unset !important", 57 | "& > svg,& > .material-icons": { 58 | verticalAlign: "middle", 59 | margin: "-1px 5px 0 0" 60 | } 61 | } 62 | }; 63 | 64 | export default customTabsStyle; 65 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/footerStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | defaultFont, 3 | container, 4 | primaryColor 5 | } from "assets/jss/material-dashboard-react.jsx"; 6 | 7 | const footerStyle = { 8 | block: { 9 | color: "inherit", 10 | padding: "15px", 11 | textTransform: "uppercase", 12 | borderRadius: "3px", 13 | textDecoration: "none", 14 | position: "relative", 15 | display: "block", 16 | ...defaultFont, 17 | fontWeight: "500", 18 | fontSize: "12px" 19 | }, 20 | left: { 21 | float: "left!important", 22 | display: "block" 23 | }, 24 | right: { 25 | padding: "15px 0", 26 | margin: "0", 27 | fontSize: "14px", 28 | float: "right!important" 29 | }, 30 | footer: { 31 | bottom: "0", 32 | borderTop: "1px solid #e7e7e7", 33 | padding: "15px 0", 34 | ...defaultFont 35 | }, 36 | container, 37 | a: { 38 | color: primaryColor, 39 | textDecoration: "none", 40 | backgroundColor: "transparent" 41 | }, 42 | list: { 43 | marginBottom: "0", 44 | padding: "0", 45 | marginTop: "0" 46 | }, 47 | inlineBlock: { 48 | display: "inline-block", 49 | padding: "0px", 50 | width: "auto" 51 | } 52 | }; 53 | export default footerStyle; 54 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | defaultFont, 3 | dangerColor 4 | } from "assets/jss/material-dashboard-react.jsx"; 5 | 6 | import dropdownStyle from "assets/jss/material-dashboard-react/dropdownStyle.jsx"; 7 | 8 | const headerLinksStyle = theme => ({ 9 | ...dropdownStyle(theme), 10 | search: { 11 | "& > div": { 12 | marginTop: "0" 13 | }, 14 | [theme.breakpoints.down("sm")]: { 15 | margin: "10px 15px !important", 16 | float: "none !important", 17 | paddingTop: "1px", 18 | paddingBottom: "1px", 19 | padding: "0!important", 20 | width: "60%", 21 | marginTop: "40px", 22 | "& input": { 23 | color: "#FFFFFF" 24 | } 25 | } 26 | }, 27 | linkText: { 28 | zIndex: "4", 29 | ...defaultFont, 30 | fontSize: "14px", 31 | margin: "0px" 32 | }, 33 | buttonLink: { 34 | [theme.breakpoints.down("sm")]: { 35 | display: "flex", 36 | margin: "10px 15px 0", 37 | width: "-webkit-fill-available", 38 | "& svg": { 39 | width: "24px", 40 | height: "30px", 41 | marginRight: "15px", 42 | marginLeft: "-15px" 43 | }, 44 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 45 | fontSize: "24px", 46 | lineHeight: "30px", 47 | width: "24px", 48 | height: "30px", 49 | marginRight: "15px", 50 | marginLeft: "-15px" 51 | }, 52 | "& > span": { 53 | justifyContent: "flex-start", 54 | width: "100%" 55 | } 56 | } 57 | }, 58 | searchButton: { 59 | [theme.breakpoints.down("sm")]: { 60 | top: "-50px !important", 61 | marginRight: "22px", 62 | float: "right" 63 | } 64 | }, 65 | margin: { 66 | zIndex: "4", 67 | margin: "0" 68 | }, 69 | searchIcon: { 70 | width: "17px", 71 | zIndex: "4" 72 | }, 73 | notifications: { 74 | zIndex: "4", 75 | [theme.breakpoints.up("md")]: { 76 | position: "absolute", 77 | top: "2px", 78 | border: "1px solid #FFF", 79 | right: "4px", 80 | fontSize: "9px", 81 | background: dangerColor, 82 | color: "#FFFFFF", 83 | minWidth: "16px", 84 | height: "16px", 85 | borderRadius: "10px", 86 | textAlign: "center", 87 | lineHeight: "16px", 88 | verticalAlign: "middle", 89 | display: "block" 90 | }, 91 | [theme.breakpoints.down("sm")]: { 92 | ...defaultFont, 93 | fontSize: "14px", 94 | marginRight: "8px" 95 | } 96 | }, 97 | manager: { 98 | [theme.breakpoints.down("sm")]: { 99 | width: "100%" 100 | }, 101 | display: "inline-block" 102 | }, 103 | searchWrapper: { 104 | [theme.breakpoints.down("sm")]: { 105 | width: "-webkit-fill-available", 106 | margin: "10px 15px 0" 107 | }, 108 | display: "inline-block" 109 | } 110 | }); 111 | 112 | export default headerLinksStyle; 113 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/headerStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | container, 3 | defaultFont, 4 | primaryColor, 5 | defaultBoxShadow, 6 | infoColor, 7 | successColor, 8 | warningColor, 9 | dangerColor 10 | } from "assets/jss/material-dashboard-react.jsx"; 11 | 12 | const headerStyle = theme => ({ 13 | appBar: { 14 | backgroundColor: "transparent", 15 | boxShadow: "none", 16 | borderBottom: "0", 17 | marginBottom: "0", 18 | position: "absolute", 19 | width: "100%", 20 | paddingTop: "10px", 21 | zIndex: "1029", 22 | color: "#555555", 23 | border: "0", 24 | borderRadius: "3px", 25 | padding: "10px 0", 26 | transition: "all 150ms ease 0s", 27 | minHeight: "50px", 28 | display: "block" 29 | }, 30 | container: { 31 | ...container, 32 | minHeight: "50px" 33 | }, 34 | flex: { 35 | flex: 1 36 | }, 37 | title: { 38 | ...defaultFont, 39 | lineHeight: "30px", 40 | fontSize: "18px", 41 | borderRadius: "3px", 42 | textTransform: "none", 43 | color: "inherit", 44 | margin: "0", 45 | "&:hover,&:focus": { 46 | background: "transparent" 47 | } 48 | }, 49 | appResponsive: { 50 | top: "8px" 51 | }, 52 | primary: { 53 | backgroundColor: primaryColor, 54 | color: "#FFFFFF", 55 | ...defaultBoxShadow 56 | }, 57 | info: { 58 | backgroundColor: infoColor, 59 | color: "#FFFFFF", 60 | ...defaultBoxShadow 61 | }, 62 | success: { 63 | backgroundColor: successColor, 64 | color: "#FFFFFF", 65 | ...defaultBoxShadow 66 | }, 67 | warning: { 68 | backgroundColor: warningColor, 69 | color: "#FFFFFF", 70 | ...defaultBoxShadow 71 | }, 72 | danger: { 73 | backgroundColor: dangerColor, 74 | color: "#FFFFFF", 75 | ...defaultBoxShadow 76 | } 77 | }); 78 | 79 | export default headerStyle; 80 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | drawerWidth, 3 | transition, 4 | boxShadow, 5 | defaultFont, 6 | primaryColor, 7 | primaryBoxShadow, 8 | infoColor, 9 | successColor, 10 | warningColor, 11 | dangerColor 12 | } from "assets/jss/material-dashboard-react.jsx"; 13 | 14 | const sidebarStyle = theme => ({ 15 | drawerPaper: { 16 | border: "none", 17 | position: "fixed", 18 | top: "0", 19 | bottom: "0", 20 | left: "0", 21 | zIndex: "1", 22 | ...boxShadow, 23 | width: drawerWidth, 24 | [theme.breakpoints.up("md")]: { 25 | width: drawerWidth, 26 | position: "fixed", 27 | height: "100%" 28 | }, 29 | [theme.breakpoints.down("sm")]: { 30 | width: drawerWidth, 31 | ...boxShadow, 32 | position: "fixed", 33 | display: "block", 34 | top: "0", 35 | height: "100vh", 36 | right: "0", 37 | left: "auto", 38 | zIndex: "1032", 39 | visibility: "visible", 40 | overflowY: "visible", 41 | borderTop: "none", 42 | textAlign: "left", 43 | paddingRight: "0px", 44 | paddingLeft: "0", 45 | transform: `translate3d(${drawerWidth}px, 0, 0)`, 46 | ...transition 47 | } 48 | }, 49 | logo: { 50 | position: "relative", 51 | padding: "15px 15px", 52 | zIndex: "4", 53 | "&:after": { 54 | content: '""', 55 | position: "absolute", 56 | bottom: "0", 57 | 58 | height: "1px", 59 | right: "15px", 60 | width: "calc(100% - 30px)", 61 | backgroundColor: "rgba(180, 180, 180, 0.3)" 62 | } 63 | }, 64 | logoLink: { 65 | ...defaultFont, 66 | textTransform: "uppercase", 67 | padding: "5px 0", 68 | display: "block", 69 | fontSize: "18px", 70 | textAlign: "left", 71 | fontWeight: "400", 72 | lineHeight: "30px", 73 | textDecoration: "none", 74 | backgroundColor: "transparent", 75 | "&,&:hover": { 76 | color: "#FFFFFF" 77 | } 78 | }, 79 | logoImage: { 80 | width: "30px", 81 | display: "inline-block", 82 | maxHeight: "30px", 83 | marginLeft: "10px", 84 | marginRight: "15px" 85 | }, 86 | img: { 87 | width: "35px", 88 | top: "22px", 89 | position: "absolute", 90 | verticalAlign: "middle", 91 | border: "0" 92 | }, 93 | background: { 94 | position: "absolute", 95 | zIndex: "1", 96 | height: "100%", 97 | width: "100%", 98 | display: "block", 99 | top: "0", 100 | left: "0", 101 | backgroundSize: "cover", 102 | backgroundPosition: "center center", 103 | "&:after": { 104 | position: "absolute", 105 | zIndex: "3", 106 | width: "100%", 107 | height: "100%", 108 | content: '""', 109 | display: "block", 110 | background: "#000", 111 | opacity: ".8" 112 | } 113 | }, 114 | list: { 115 | marginTop: "20px", 116 | paddingLeft: "0", 117 | paddingTop: "0", 118 | paddingBottom: "0", 119 | marginBottom: "0", 120 | listStyle: "none", 121 | position: "unset" 122 | }, 123 | item: { 124 | position: "relative", 125 | display: "block", 126 | textDecoration: "none", 127 | "&:hover,&:focus,&:visited,&": { 128 | color: "#FFFFFF" 129 | } 130 | }, 131 | itemLink: { 132 | width: "auto", 133 | transition: "all 300ms linear", 134 | margin: "10px 15px 0", 135 | borderRadius: "3px", 136 | position: "relative", 137 | display: "block", 138 | padding: "10px 15px", 139 | backgroundColor: "transparent", 140 | ...defaultFont 141 | }, 142 | itemIcon: { 143 | width: "24px", 144 | height: "30px", 145 | fontSize: "24px", 146 | lineHeight: "30px", 147 | float: "left", 148 | marginRight: "15px", 149 | textAlign: "center", 150 | verticalAlign: "middle", 151 | color: "rgba(255, 255, 255, 0.8)" 152 | }, 153 | itemText: { 154 | ...defaultFont, 155 | margin: "0", 156 | lineHeight: "30px", 157 | fontSize: "14px", 158 | color: "#FFFFFF" 159 | }, 160 | whiteFont: { 161 | color: "#FFFFFF" 162 | }, 163 | purple: { 164 | backgroundColor: primaryColor, 165 | ...primaryBoxShadow, 166 | "&:hover": { 167 | backgroundColor: primaryColor, 168 | ...primaryBoxShadow 169 | } 170 | }, 171 | blue: { 172 | backgroundColor: infoColor, 173 | boxShadow: 174 | "0 12px 20px -10px rgba(0,188,212,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(0,188,212,.2)", 175 | "&:hover": { 176 | backgroundColor: infoColor, 177 | boxShadow: 178 | "0 12px 20px -10px rgba(0,188,212,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(0,188,212,.2)" 179 | } 180 | }, 181 | green: { 182 | backgroundColor: successColor, 183 | boxShadow: 184 | "0 12px 20px -10px rgba(76,175,80,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(76,175,80,.2)", 185 | "&:hover": { 186 | backgroundColor: successColor, 187 | boxShadow: 188 | "0 12px 20px -10px rgba(76,175,80,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(76,175,80,.2)" 189 | } 190 | }, 191 | orange: { 192 | backgroundColor: warningColor, 193 | boxShadow: 194 | "0 12px 20px -10px rgba(255,152,0,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(255,152,0,.2)", 195 | "&:hover": { 196 | backgroundColor: warningColor, 197 | boxShadow: 198 | "0 12px 20px -10px rgba(255,152,0,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(255,152,0,.2)" 199 | } 200 | }, 201 | red: { 202 | backgroundColor: dangerColor, 203 | boxShadow: 204 | "0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2)", 205 | "&:hover": { 206 | backgroundColor: dangerColor, 207 | boxShadow: 208 | "0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2)" 209 | } 210 | }, 211 | sidebarWrapper: { 212 | position: "relative", 213 | height: "calc(100vh - 75px)", 214 | overflow: "auto", 215 | width: "260px", 216 | zIndex: "4", 217 | overflowScrolling: "touch" 218 | }, 219 | activePro: { 220 | [theme.breakpoints.up("md")]: { 221 | position: "absolute", 222 | width: "100%", 223 | bottom: "13px" 224 | } 225 | } 226 | }); 227 | 228 | export default sidebarStyle; 229 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/snackbarContentStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | defaultFont, 3 | primaryBoxShadow, 4 | infoBoxShadow, 5 | successBoxShadow, 6 | warningBoxShadow, 7 | dangerBoxShadow, 8 | roseBoxShadow 9 | } from "assets/jss/material-dashboard-react.jsx"; 10 | 11 | const snackbarContentStyle = { 12 | root: { 13 | ...defaultFont, 14 | flexWrap: "unset", 15 | position: "relative", 16 | padding: "20px 15px", 17 | lineHeight: "20px", 18 | marginBottom: "20px", 19 | fontSize: "14px", 20 | backgroundColor: "white", 21 | color: "#555555", 22 | borderRadius: "3px", 23 | boxShadow: 24 | "0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2)" 25 | }, 26 | top20: { 27 | top: "20px" 28 | }, 29 | top40: { 30 | top: "40px" 31 | }, 32 | info: { 33 | backgroundColor: "#00d3ee", 34 | color: "#ffffff", 35 | ...infoBoxShadow 36 | }, 37 | success: { 38 | backgroundColor: "#5cb860", 39 | color: "#ffffff", 40 | ...successBoxShadow 41 | }, 42 | warning: { 43 | backgroundColor: "#ffa21a", 44 | color: "#ffffff", 45 | ...warningBoxShadow 46 | }, 47 | danger: { 48 | backgroundColor: "#f55a4e", 49 | color: "#ffffff", 50 | ...dangerBoxShadow 51 | }, 52 | primary: { 53 | backgroundColor: "#af2cc5", 54 | color: "#ffffff", 55 | ...primaryBoxShadow 56 | }, 57 | rose: { 58 | backgroundColor: "#eb3573", 59 | color: "#ffffff", 60 | ...roseBoxShadow 61 | }, 62 | message: { 63 | padding: "0", 64 | display: "block", 65 | maxWidth: "89%" 66 | }, 67 | close: { 68 | width: "11px", 69 | height: "11px" 70 | }, 71 | iconButton: { 72 | width: "24px", 73 | height: "24px", 74 | padding: "0px" 75 | }, 76 | icon: { 77 | display: "block", 78 | left: "15px", 79 | position: "absolute", 80 | top: "50%", 81 | marginTop: "-15px", 82 | width: "30px", 83 | height: "30px" 84 | }, 85 | infoIcon: { 86 | color: "#00d3ee" 87 | }, 88 | successIcon: { 89 | color: "#5cb860" 90 | }, 91 | warningIcon: { 92 | color: "#ffa21a" 93 | }, 94 | dangerIcon: { 95 | color: "#f55a4e" 96 | }, 97 | primaryIcon: { 98 | color: "#af2cc5" 99 | }, 100 | roseIcon: { 101 | color: "#eb3573" 102 | }, 103 | iconMessage: { 104 | paddingLeft: "50px", 105 | display: "block" 106 | } 107 | }; 108 | 109 | export default snackbarContentStyle; 110 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/tableStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | warningColor, 3 | primaryColor, 4 | dangerColor, 5 | successColor, 6 | infoColor, 7 | roseColor, 8 | grayColor, 9 | defaultFont 10 | } from "assets/jss/material-dashboard-react.jsx"; 11 | 12 | const tableStyle = theme => ({ 13 | warningTableHeader: { 14 | color: warningColor 15 | }, 16 | primaryTableHeader: { 17 | color: primaryColor 18 | }, 19 | dangerTableHeader: { 20 | color: dangerColor 21 | }, 22 | successTableHeader: { 23 | color: successColor 24 | }, 25 | infoTableHeader: { 26 | color: infoColor 27 | }, 28 | roseTableHeader: { 29 | color: roseColor 30 | }, 31 | grayTableHeader: { 32 | color: grayColor 33 | }, 34 | table: { 35 | marginBottom: "0", 36 | width: "100%", 37 | maxWidth: "100%", 38 | backgroundColor: "transparent", 39 | borderSpacing: "0", 40 | borderCollapse: "collapse" 41 | }, 42 | tableHeadCell: { 43 | color: "inherit", 44 | ...defaultFont, 45 | fontSize: "1em" 46 | }, 47 | tableCell: { 48 | ...defaultFont, 49 | lineHeight: "1.42857143", 50 | padding: "12px 8px", 51 | verticalAlign: "middle" 52 | }, 53 | tableResponsive: { 54 | width: "100%", 55 | marginTop: theme.spacing.unit * 3, 56 | overflowX: "auto" 57 | } 58 | }); 59 | 60 | export default tableStyle; 61 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/tasksStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | defaultFont, 3 | primaryColor, 4 | dangerColor 5 | } from "assets/jss/material-dashboard-react.jsx"; 6 | import tooltipStyle from "assets/jss/material-dashboard-react/tooltipStyle.jsx"; 7 | import checkboxAdnRadioStyle from "assets/jss/material-dashboard-react/checkboxAdnRadioStyle.jsx"; 8 | const tasksStyle = { 9 | ...tooltipStyle, 10 | ...checkboxAdnRadioStyle, 11 | table: { 12 | marginBottom: "0", 13 | overflow: "visible" 14 | }, 15 | tableRow: { 16 | position: "relative", 17 | borderBottom: "1px solid #dddddd" 18 | }, 19 | tableActions: { 20 | display: "flex", 21 | border: "none", 22 | padding: "12px 8px !important", 23 | verticalAlign: "middle" 24 | }, 25 | tableCell: { 26 | ...defaultFont, 27 | padding: "8px", 28 | verticalAlign: "middle", 29 | border: "none", 30 | lineHeight: "1.42857143", 31 | fontSize: "14px" 32 | }, 33 | tableActionButton: { 34 | width: "27px", 35 | height: "27px", 36 | padding: "0" 37 | }, 38 | tableActionButtonIcon: { 39 | width: "17px", 40 | height: "17px" 41 | }, 42 | edit: { 43 | backgroundColor: "transparent", 44 | color: primaryColor, 45 | boxShadow: "none" 46 | }, 47 | close: { 48 | backgroundColor: "transparent", 49 | color: dangerColor, 50 | boxShadow: "none" 51 | } 52 | }; 53 | export default tasksStyle; 54 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/components/typographyStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | defaultFont, 3 | primaryColor, 4 | infoColor, 5 | successColor, 6 | warningColor, 7 | dangerColor 8 | } from "assets/jss/material-dashboard-react.jsx"; 9 | 10 | const typographyStyle = { 11 | defaultFontStyle: { 12 | ...defaultFont, 13 | fontSize: "14px" 14 | }, 15 | defaultHeaderMargins: { 16 | marginTop: "20px", 17 | marginBottom: "10px" 18 | }, 19 | quote: { 20 | padding: "10px 20px", 21 | margin: "0 0 20px", 22 | fontSize: "17.5px", 23 | borderLeft: "5px solid #eee" 24 | }, 25 | quoteText: { 26 | margin: "0 0 10px", 27 | fontStyle: "italic" 28 | }, 29 | quoteAuthor: { 30 | display: "block", 31 | fontSize: "80%", 32 | lineHeight: "1.42857143", 33 | color: "#777" 34 | }, 35 | mutedText: { 36 | color: "#777" 37 | }, 38 | primaryText: { 39 | color: primaryColor 40 | }, 41 | infoText: { 42 | color: infoColor 43 | }, 44 | successText: { 45 | color: successColor 46 | }, 47 | warningText: { 48 | color: warningColor 49 | }, 50 | dangerText: { 51 | color: dangerColor 52 | } 53 | }; 54 | 55 | export default typographyStyle; 56 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/dropdownStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | primaryColor, 3 | primaryBoxShadow, 4 | defaultFont 5 | } from "assets/jss/material-dashboard-react.jsx"; 6 | 7 | const dropdownStyle = theme => ({ 8 | buttonLink: { 9 | [theme.breakpoints.down("md")]: { 10 | display: "flex", 11 | marginLeft: "30px", 12 | width: "auto" 13 | } 14 | }, 15 | links: { 16 | width: "20px", 17 | height: "20px", 18 | zIndex: "4", 19 | [theme.breakpoints.down("md")]: { 20 | display: "block", 21 | width: "30px", 22 | height: "30px", 23 | color: "#a9afbb", 24 | marginRight: "15px" 25 | } 26 | }, 27 | linkText: { 28 | zIndex: "4", 29 | ...defaultFont, 30 | fontSize: "14px" 31 | }, 32 | popperClose: { 33 | pointerEvents: "none" 34 | }, 35 | pooperResponsive: { 36 | [theme.breakpoints.down("md")]: { 37 | zIndex: "1640", 38 | position: "static", 39 | float: "none", 40 | width: "auto", 41 | marginTop: "0", 42 | backgroundColor: "transparent", 43 | border: "0", 44 | WebkitBoxShadow: "none", 45 | boxShadow: "none", 46 | color: "black" 47 | } 48 | }, 49 | pooperNav: { 50 | [theme.breakpoints.down("sm")]: { 51 | position: "static !important", 52 | left: "unset !important", 53 | top: "unset !important", 54 | transform: "none !important", 55 | willChange: "none !important", 56 | "& > div": { 57 | boxShadow: "none !important", 58 | marginLeft: "0rem", 59 | marginRight: "0rem", 60 | transition: "none !important", 61 | marginTop: "0px !important", 62 | marginBottom: "0px !important", 63 | padding: "0px !important", 64 | backgroundColor: "transparent !important", 65 | "& ul li": { 66 | color: "#FFF !important", 67 | margin: "10px 15px 0!important", 68 | padding: "10px 15px !important", 69 | "&:hover": { 70 | backgroundColor: "hsla(0,0%,78%,.2)", 71 | boxShadow: "none" 72 | } 73 | } 74 | } 75 | } 76 | }, 77 | dropdown: { 78 | borderRadius: "3px", 79 | border: "0", 80 | boxShadow: "0 2px 5px 0 rgba(0, 0, 0, 0.26)", 81 | top: "100%", 82 | zIndex: "1000", 83 | minWidth: "160px", 84 | padding: "5px 0", 85 | margin: "2px 0 0", 86 | fontSize: "14px", 87 | textAlign: "left", 88 | listStyle: "none", 89 | backgroundColor: "#fff", 90 | WebkitBackgroundClip: "padding-box", 91 | backgroundClip: "padding-box" 92 | }, 93 | dropdownItem: { 94 | ...defaultFont, 95 | fontSize: "13px", 96 | padding: "10px 20px", 97 | margin: "0 5px", 98 | borderRadius: "2px", 99 | WebkitTransition: "all 150ms linear", 100 | MozTransition: "all 150ms linear", 101 | OTransition: "all 150ms linear", 102 | MsTransition: "all 150ms linear", 103 | transition: "all 150ms linear", 104 | display: "block", 105 | clear: "both", 106 | fontWeight: "400", 107 | lineHeight: "1.42857143", 108 | color: "#333", 109 | whiteSpace: "nowrap", 110 | height: "unset", 111 | "&:hover": { 112 | backgroundColor: primaryColor, 113 | color: "#FFFFFF", 114 | ...primaryBoxShadow 115 | } 116 | } 117 | }); 118 | 119 | export default dropdownStyle; 120 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | drawerWidth, 3 | transition, 4 | container 5 | } from "assets/jss/material-dashboard-react.jsx"; 6 | 7 | const appStyle = theme => ({ 8 | wrapper: { 9 | position: "relative", 10 | top: "0", 11 | height: "100vh" 12 | }, 13 | mainPanel: { 14 | [theme.breakpoints.up("md")]: { 15 | width: `calc(100% - ${drawerWidth}px)` 16 | }, 17 | overflow: "auto", 18 | position: "relative", 19 | float: "right", 20 | ...transition, 21 | maxHeight: "100%", 22 | width: "100%", 23 | overflowScrolling: "touch" 24 | }, 25 | content: { 26 | marginTop: "70px", 27 | padding: "30px 15px", 28 | minHeight: "calc(100vh - 123px)" 29 | }, 30 | container, 31 | map: { 32 | marginTop: "70px" 33 | } 34 | }); 35 | 36 | export default appStyle; 37 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/tooltipStyle.jsx: -------------------------------------------------------------------------------- 1 | const tooltipStyle = { 2 | tooltip: { 3 | padding: "10px 15px", 4 | minWidth: "130px", 5 | lineHeight: "1.7em", 6 | border: "none", 7 | borderRadius: "3px", 8 | boxShadow: 9 | "0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)", 10 | maxWidth: "200px", 11 | textAlign: "center", 12 | fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', 13 | fontSize: "12px", 14 | fontStyle: "normal", 15 | fontWeight: "400", 16 | textShadow: "none", 17 | textTransform: "none", 18 | letterSpacing: "normal", 19 | wordBreak: "normal", 20 | wordSpacing: "normal", 21 | wordWrap: "normal", 22 | whiteSpace: "normal", 23 | lineBreak: "auto" 24 | } 25 | }; 26 | export default tooltipStyle; 27 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx: -------------------------------------------------------------------------------- 1 | import { successColor } from "assets/jss/material-dashboard-react.jsx"; 2 | 3 | const dashboardStyle = { 4 | successText: { 5 | color: successColor 6 | }, 7 | upArrowCardCategory: { 8 | width: "16px", 9 | height: "16px" 10 | }, 11 | stats: { 12 | color: "#999999", 13 | display: "inline-flex", 14 | fontSize: "12px", 15 | lineHeight: "22px", 16 | "& svg": { 17 | top: "4px", 18 | width: "16px", 19 | height: "16px", 20 | position: "relative", 21 | marginRight: "3px", 22 | marginLeft: "3px" 23 | }, 24 | "& .fab,& .fas,& .far,& .fal,& .material-icons": { 25 | top: "4px", 26 | fontSize: "16px", 27 | position: "relative", 28 | marginRight: "3px", 29 | marginLeft: "3px" 30 | } 31 | }, 32 | cardCategory: { 33 | color: "#999999", 34 | margin: "0", 35 | fontSize: "14px", 36 | marginTop: "0", 37 | paddingTop: "10px", 38 | marginBottom: "0" 39 | }, 40 | cardCategoryWhite: { 41 | color: "rgba(255,255,255,.62)", 42 | margin: "0", 43 | fontSize: "14px", 44 | marginTop: "0", 45 | marginBottom: "0" 46 | }, 47 | cardTitle: { 48 | color: "#3C4858", 49 | marginTop: "0px", 50 | minHeight: "auto", 51 | fontWeight: "300", 52 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 53 | marginBottom: "3px", 54 | textDecoration: "none", 55 | "& small": { 56 | color: "#777", 57 | fontWeight: "400", 58 | lineHeight: "1" 59 | } 60 | }, 61 | cardTitleWhite: { 62 | color: "#FFFFFF", 63 | marginTop: "0px", 64 | minHeight: "auto", 65 | fontWeight: "300", 66 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 67 | marginBottom: "3px", 68 | textDecoration: "none", 69 | "& small": { 70 | color: "#777", 71 | fontWeight: "400", 72 | lineHeight: "1" 73 | } 74 | } 75 | }; 76 | 77 | export default dashboardStyle; 78 | -------------------------------------------------------------------------------- /src/assets/jss/material-dashboard-react/views/iconsStyle.jsx: -------------------------------------------------------------------------------- 1 | import { boxShadow } from "assets/jss/material-dashboard-react.jsx"; 2 | 3 | const iconsStyle = { 4 | iframe: { 5 | width: "100%", 6 | height: "500px", 7 | border: "0", 8 | ...boxShadow 9 | }, 10 | iframeContainer: { 11 | margin: "0 -20px 0" 12 | }, 13 | cardCategoryWhite: { 14 | "&,& a,& a:hover,& a:focus": { 15 | color: "rgba(255,255,255,.62)", 16 | margin: "0", 17 | fontSize: "14px", 18 | marginTop: "0", 19 | marginBottom: "0" 20 | }, 21 | "& a,& a:hover,& a:focus": { 22 | color: "#FFFFFF" 23 | } 24 | }, 25 | cardTitleWhite: { 26 | color: "#FFFFFF", 27 | marginTop: "0px", 28 | minHeight: "auto", 29 | fontWeight: "300", 30 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 31 | marginBottom: "3px", 32 | textDecoration: "none", 33 | "& small": { 34 | color: "#777", 35 | fontWeight: "400", 36 | lineHeight: "1" 37 | } 38 | } 39 | }; 40 | 41 | export default iconsStyle; 42 | -------------------------------------------------------------------------------- /src/components/Card/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | 10 | // core components 11 | import cardStyle from "assets/jss/material-dashboard-react/components/cardStyle.jsx"; 12 | 13 | function Card({ ...props }) { 14 | const { 15 | classes, 16 | className, 17 | children, 18 | plain, 19 | profile, 20 | chart, 21 | ...rest 22 | } = props; 23 | const cardClasses = classNames({ 24 | [classes.card]: true, 25 | [classes.cardPlain]: plain, 26 | [classes.cardProfile]: profile, 27 | [classes.cardChart]: chart, 28 | [className]: className !== undefined 29 | }); 30 | return ( 31 |
32 | {children} 33 |
34 | ); 35 | } 36 | 37 | Card.propTypes = { 38 | classes: PropTypes.object.isRequired, 39 | className: PropTypes.string, 40 | plain: PropTypes.bool, 41 | profile: PropTypes.bool, 42 | chart: PropTypes.bool 43 | }; 44 | 45 | export default withStyles(cardStyle)(Card); 46 | -------------------------------------------------------------------------------- /src/components/Card/CardAvatar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | // core components 10 | 11 | import cardAvatarStyle from "assets/jss/material-dashboard-react/components/cardAvatarStyle.jsx"; 12 | 13 | function CardAvatar({ ...props }) { 14 | const { classes, children, className, plain, profile, ...rest } = props; 15 | const cardAvatarClasses = classNames({ 16 | [classes.cardAvatar]: true, 17 | [classes.cardAvatarProfile]: profile, 18 | [classes.cardAvatarPlain]: plain, 19 | [className]: className !== undefined 20 | }); 21 | return ( 22 |
23 | {children} 24 |
25 | ); 26 | } 27 | 28 | CardAvatar.propTypes = { 29 | children: PropTypes.node.isRequired, 30 | className: PropTypes.string, 31 | profile: PropTypes.bool, 32 | plain: PropTypes.bool 33 | }; 34 | 35 | export default withStyles(cardAvatarStyle)(CardAvatar); 36 | -------------------------------------------------------------------------------- /src/components/Card/CardBody.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | 10 | // core components 11 | import cardBodyStyle from "assets/jss/material-dashboard-react/components/cardBodyStyle.jsx"; 12 | 13 | function CardBody({ ...props }) { 14 | const { classes, className, children, plain, profile, ...rest } = props; 15 | const cardBodyClasses = classNames({ 16 | [classes.cardBody]: true, 17 | [classes.cardBodyPlain]: plain, 18 | [classes.cardBodyProfile]: profile, 19 | [className]: className !== undefined 20 | }); 21 | return ( 22 |
23 | {children} 24 |
25 | ); 26 | } 27 | 28 | CardBody.propTypes = { 29 | classes: PropTypes.object.isRequired, 30 | className: PropTypes.string, 31 | plain: PropTypes.bool, 32 | profile: PropTypes.bool 33 | }; 34 | 35 | export default withStyles(cardBodyStyle)(CardBody); 36 | -------------------------------------------------------------------------------- /src/components/Card/CardFooter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | 10 | // core components 11 | import cardFooterStyle from "assets/jss/material-dashboard-react/components/cardFooterStyle.jsx"; 12 | 13 | function CardFooter({ ...props }) { 14 | const { 15 | classes, 16 | className, 17 | children, 18 | plain, 19 | profile, 20 | stats, 21 | chart, 22 | ...rest 23 | } = props; 24 | const cardFooterClasses = classNames({ 25 | [classes.cardFooter]: true, 26 | [classes.cardFooterPlain]: plain, 27 | [classes.cardFooterProfile]: profile, 28 | [classes.cardFooterStats]: stats, 29 | [classes.cardFooterChart]: chart, 30 | [className]: className !== undefined 31 | }); 32 | return ( 33 |
34 | {children} 35 |
36 | ); 37 | } 38 | 39 | CardFooter.propTypes = { 40 | classes: PropTypes.object.isRequired, 41 | className: PropTypes.string, 42 | plain: PropTypes.bool, 43 | profile: PropTypes.bool, 44 | stats: PropTypes.bool, 45 | chart: PropTypes.bool 46 | }; 47 | 48 | export default withStyles(cardFooterStyle)(CardFooter); 49 | -------------------------------------------------------------------------------- /src/components/Card/CardHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | 10 | // core components 11 | import cardHeaderStyle from "assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx"; 12 | 13 | function CardHeader({ ...props }) { 14 | const { 15 | classes, 16 | className, 17 | children, 18 | color, 19 | plain, 20 | stats, 21 | icon, 22 | ...rest 23 | } = props; 24 | const cardHeaderClasses = classNames({ 25 | [classes.cardHeader]: true, 26 | [classes[color + "CardHeader"]]: color, 27 | [classes.cardHeaderPlain]: plain, 28 | [classes.cardHeaderStats]: stats, 29 | [classes.cardHeaderIcon]: icon, 30 | [className]: className !== undefined 31 | }); 32 | return ( 33 |
34 | {children} 35 |
36 | ); 37 | } 38 | 39 | CardHeader.propTypes = { 40 | classes: PropTypes.object.isRequired, 41 | className: PropTypes.string, 42 | color: PropTypes.oneOf([ 43 | "warning", 44 | "success", 45 | "danger", 46 | "info", 47 | "primary", 48 | "rose" 49 | ]), 50 | plain: PropTypes.bool, 51 | stats: PropTypes.bool, 52 | icon: PropTypes.bool 53 | }; 54 | 55 | export default withStyles(cardHeaderStyle)(CardHeader); 56 | -------------------------------------------------------------------------------- /src/components/Card/CardIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | // @material-ui/core components 7 | import withStyles from "@material-ui/core/styles/withStyles"; 8 | // @material-ui/icons 9 | 10 | // core components 11 | import cardIconStyle from "assets/jss/material-dashboard-react/components/cardIconStyle.jsx"; 12 | 13 | function CardIcon({ ...props }) { 14 | const { classes, className, children, color, ...rest } = props; 15 | const cardIconClasses = classNames({ 16 | [classes.cardIcon]: true, 17 | [classes[color + "CardHeader"]]: color, 18 | [className]: className !== undefined 19 | }); 20 | return ( 21 |
22 | {children} 23 |
24 | ); 25 | } 26 | 27 | CardIcon.propTypes = { 28 | classes: PropTypes.object.isRequired, 29 | className: PropTypes.string, 30 | color: PropTypes.oneOf([ 31 | "warning", 32 | "success", 33 | "danger", 34 | "info", 35 | "primary", 36 | "rose" 37 | ]) 38 | }; 39 | 40 | export default withStyles(cardIconStyle)(CardIcon); 41 | -------------------------------------------------------------------------------- /src/components/CustomButtons/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | 7 | // material-ui components 8 | import withStyles from "@material-ui/core/styles/withStyles"; 9 | import Button from "@material-ui/core/Button"; 10 | 11 | import buttonStyle from "assets/jss/material-dashboard-react/components/buttonStyle.jsx"; 12 | function RegularButton({ ...props }) { 13 | const { 14 | classes, 15 | color, 16 | round, 17 | children, 18 | disabled, 19 | simple, 20 | size, 21 | block, 22 | link, 23 | justIcon, 24 | className, 25 | muiClasses, 26 | ...rest 27 | } = props; 28 | const btnClasses = classNames({ 29 | [classes.button]: true, 30 | [classes[size]]: size, 31 | [classes[color]]: color, 32 | [classes.round]: round, 33 | [classes.disabled]: disabled, 34 | [classes.simple]: simple, 35 | [classes.block]: block, 36 | [classes.link]: link, 37 | [classes.justIcon]: justIcon, 38 | [className]: className 39 | }); 40 | return ( 41 | 44 | ); 45 | } 46 | 47 | RegularButton.propTypes = { 48 | classes: PropTypes.object.isRequired, 49 | color: PropTypes.oneOf([ 50 | "primary", 51 | "info", 52 | "success", 53 | "warning", 54 | "danger", 55 | "rose", 56 | "white", 57 | "transparent" 58 | ]), 59 | size: PropTypes.oneOf(["sm", "lg"]), 60 | simple: PropTypes.bool, 61 | round: PropTypes.bool, 62 | disabled: PropTypes.bool, 63 | block: PropTypes.bool, 64 | link: PropTypes.bool, 65 | justIcon: PropTypes.bool, 66 | className: PropTypes.string, 67 | // use this to pass the classes props from Material-UI 68 | muiClasses: PropTypes.object 69 | }; 70 | 71 | export default withStyles(buttonStyle)(RegularButton); 72 | -------------------------------------------------------------------------------- /src/components/CustomInput/CustomInput.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | // @material-ui/core components 5 | import withStyles from "@material-ui/core/styles/withStyles"; 6 | import FormControl from "@material-ui/core/FormControl"; 7 | import InputLabel from "@material-ui/core/InputLabel"; 8 | import Input from "@material-ui/core/Input"; 9 | // @material-ui/icons 10 | import Clear from "@material-ui/icons/Clear"; 11 | import Check from "@material-ui/icons/Check"; 12 | // core components 13 | import customInputStyle from "assets/jss/material-dashboard-react/components/customInputStyle.jsx"; 14 | 15 | function CustomInput({ ...props }) { 16 | const { 17 | classes, 18 | formControlProps, 19 | labelText, 20 | id, 21 | labelProps, 22 | inputProps, 23 | error, 24 | success 25 | } = props; 26 | 27 | const labelClasses = classNames({ 28 | [" " + classes.labelRootError]: error, 29 | [" " + classes.labelRootSuccess]: success && !error 30 | }); 31 | const underlineClasses = classNames({ 32 | [classes.underlineError]: error, 33 | [classes.underlineSuccess]: success && !error, 34 | [classes.underline]: true 35 | }); 36 | const marginTop = classNames({ 37 | [classes.marginTop]: labelText === undefined 38 | }); 39 | return ( 40 | 44 | {labelText !== undefined ? ( 45 | 50 | {labelText} 51 | 52 | ) : null} 53 | 62 | {error ? ( 63 | 64 | ) : success ? ( 65 | 66 | ) : null} 67 | 68 | ); 69 | } 70 | 71 | CustomInput.propTypes = { 72 | classes: PropTypes.object.isRequired, 73 | labelText: PropTypes.node, 74 | labelProps: PropTypes.object, 75 | id: PropTypes.string, 76 | inputProps: PropTypes.object, 77 | formControlProps: PropTypes.object, 78 | error: PropTypes.bool, 79 | success: PropTypes.bool 80 | }; 81 | 82 | export default withStyles(customInputStyle)(CustomInput); 83 | -------------------------------------------------------------------------------- /src/components/CustomTabs/CustomTabs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | import PropTypes from "prop-types"; 6 | 7 | // material-ui components 8 | import withStyles from "@material-ui/core/styles/withStyles"; 9 | import Tabs from "@material-ui/core/Tabs"; 10 | import Tab from "@material-ui/core/Tab"; 11 | // core components 12 | import Card from "components/Card/Card.jsx"; 13 | import CardBody from "components/Card/CardBody.jsx"; 14 | import CardHeader from "components/Card/CardHeader.jsx"; 15 | 16 | import customTabsStyle from "assets/jss/material-dashboard-react/components/customTabsStyle.jsx"; 17 | 18 | class CustomTabs extends React.Component { 19 | state = { 20 | value: 0 21 | }; 22 | 23 | handleChange = (event, value) => { 24 | this.setState({ value }); 25 | }; 26 | 27 | render() { 28 | const { 29 | classes, 30 | headerColor, 31 | plainTabs, 32 | tabs, 33 | title, 34 | rtlActive 35 | } = this.props; 36 | const cardTitle = classNames({ 37 | [classes.cardTitle]: true, 38 | [classes.cardTitleRTL]: rtlActive 39 | }); 40 | return ( 41 | 42 | 43 | {title !== undefined ? ( 44 |
{title}
45 | ) : null} 46 | 57 | {tabs.map((prop, key) => { 58 | var icon = {}; 59 | if (prop.tabIcon) { 60 | icon = { 61 | icon: 62 | }; 63 | } 64 | return ( 65 | 77 | ); 78 | })} 79 | 80 | 81 | 82 | {tabs.map((prop, key) => { 83 | if (key === this.state.value) { 84 | return
{prop.tabContent}
; 85 | } 86 | return null; 87 | })} 88 | 89 | 90 | ); 91 | } 92 | } 93 | 94 | CustomTabs.propTypes = { 95 | classes: PropTypes.object.isRequired, 96 | headerColor: PropTypes.oneOf([ 97 | "warning", 98 | "success", 99 | "danger", 100 | "info", 101 | "primary" 102 | ]), 103 | title: PropTypes.string, 104 | tabs: PropTypes.arrayOf( 105 | PropTypes.shape({ 106 | tabName: PropTypes.string.isRequired, 107 | tabIcon: PropTypes.func, 108 | tabContent: PropTypes.node.isRequired 109 | }) 110 | ), 111 | rtlActive: PropTypes.bool, 112 | plainTabs: PropTypes.bool 113 | }; 114 | 115 | export default withStyles(customTabsStyle)(CustomTabs); 116 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | import ListItem from "@material-ui/core/ListItem"; 6 | import List from "@material-ui/core/List"; 7 | // core components 8 | import footerStyle from "assets/jss/material-dashboard-react/components/footerStyle.jsx"; 9 | 10 | function Footer({ ...props }) { 11 | const { classes } = props; 12 | return ( 13 | 49 | ); 50 | } 51 | 52 | Footer.propTypes = { 53 | classes: PropTypes.object.isRequired 54 | }; 55 | 56 | export default withStyles(footerStyle)(Footer); 57 | -------------------------------------------------------------------------------- /src/components/Grid/GridContainer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | import Grid from "@material-ui/core/Grid"; 5 | 6 | const style = { 7 | grid: { 8 | margin: "0 -15px !important", 9 | width: "unset" 10 | } 11 | }; 12 | 13 | function GridContainer(props) { 14 | const { classes, children, ...rest } = props; 15 | return ( 16 | 17 | {children} 18 | 19 | ); 20 | } 21 | 22 | export default withStyles(style)(GridContainer); 23 | -------------------------------------------------------------------------------- /src/components/Grid/GridItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | import Grid from "@material-ui/core/Grid"; 5 | 6 | const style = { 7 | grid: { 8 | padding: "0 15px !important" 9 | } 10 | }; 11 | 12 | function GridItem({ ...props }) { 13 | const { classes, children, ...rest } = props; 14 | return ( 15 | 16 | {children} 17 | 18 | ); 19 | } 20 | 21 | export default withStyles(style)(GridItem); 22 | -------------------------------------------------------------------------------- /src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | // @material-ui/core components 5 | import withStyles from "@material-ui/core/styles/withStyles"; 6 | import AppBar from "@material-ui/core/AppBar"; 7 | import Toolbar from "@material-ui/core/Toolbar"; 8 | import IconButton from "@material-ui/core/IconButton"; 9 | import Hidden from "@material-ui/core/Hidden"; 10 | // @material-ui/icons 11 | import Menu from "@material-ui/icons/Menu"; 12 | // core components 13 | import HeaderLinks from "./HeaderLinks.jsx"; 14 | import Button from "components/CustomButtons/Button.jsx"; 15 | 16 | import headerStyle from "assets/jss/material-dashboard-react/components/headerStyle.jsx"; 17 | 18 | function Header({ ...props }) { 19 | function makeBrand() { 20 | var name; 21 | props.routes.map((prop, key) => { 22 | if (prop.path === props.location.pathname) { 23 | name = prop.navbarName; 24 | } 25 | return null; 26 | }); 27 | return name; 28 | } 29 | const { classes, color } = props; 30 | const appBarClasses = classNames({ 31 | [" " + classes[color]]: color 32 | }); 33 | return ( 34 | 35 | 36 |
37 | {/* Here we create navbar brand, based on route name */} 38 | 41 |
42 | 43 | 44 | 45 | 46 | 51 | 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | 59 | Header.propTypes = { 60 | classes: PropTypes.object.isRequired, 61 | color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]) 62 | }; 63 | 64 | export default withStyles(headerStyle)(Header); 65 | -------------------------------------------------------------------------------- /src/components/Header/HeaderLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | import MenuItem from "@material-ui/core/MenuItem"; 6 | import MenuList from "@material-ui/core/MenuList"; 7 | import Grow from "@material-ui/core/Grow"; 8 | import Paper from "@material-ui/core/Paper"; 9 | import ClickAwayListener from "@material-ui/core/ClickAwayListener"; 10 | import Hidden from "@material-ui/core/Hidden"; 11 | import Poppers from "@material-ui/core/Popper"; 12 | // @material-ui/icons 13 | import Person from "@material-ui/icons/Person"; 14 | import Notifications from "@material-ui/icons/Notifications"; 15 | import Dashboard from "@material-ui/icons/Dashboard"; 16 | import Search from "@material-ui/icons/Search"; 17 | // core components 18 | import CustomInput from "components/CustomInput/CustomInput.jsx"; 19 | import Button from "components/CustomButtons/Button.jsx"; 20 | 21 | import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.jsx"; 22 | 23 | class HeaderLinks extends React.Component { 24 | state = { 25 | open: false 26 | }; 27 | handleToggle = () => { 28 | this.setState(state => ({ open: !state.open })); 29 | }; 30 | 31 | handleClose = event => { 32 | if (this.anchorEl.contains(event.target)) { 33 | return; 34 | } 35 | 36 | this.setState({ open: false }); 37 | }; 38 | 39 | render() { 40 | const { classes } = this.props; 41 | const { open } = this.state; 42 | return ( 43 |
44 |
45 | 56 | 59 |
60 | 72 |
73 | 93 | 104 | {({ TransitionProps, placement }) => ( 105 | 113 | 114 | 115 | 116 | 120 | Mike John responded to your email 121 | 122 | 126 | You have 5 new tasks 127 | 128 | 132 | You're now friend with Andrew 133 | 134 | 138 | Another Notification 139 | 140 | 144 | Another One 145 | 146 | 147 | 148 | 149 | 150 | )} 151 | 152 |
153 | 165 |
166 | ); 167 | } 168 | } 169 | 170 | export default withStyles(headerLinksStyle)(HeaderLinks); 171 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | import { NavLink } from "react-router-dom"; 5 | // @material-ui/core components 6 | import withStyles from "@material-ui/core/styles/withStyles"; 7 | import Drawer from "@material-ui/core/Drawer"; 8 | import Hidden from "@material-ui/core/Hidden"; 9 | import List from "@material-ui/core/List"; 10 | import ListItem from "@material-ui/core/ListItem"; 11 | import ListItemIcon from "@material-ui/core/ListItemIcon"; 12 | import ListItemText from "@material-ui/core/ListItemText"; 13 | import Icon from "@material-ui/core/Icon"; 14 | // core components 15 | import HeaderLinks from "components/Header/HeaderLinks.jsx"; 16 | 17 | import sidebarStyle from "assets/jss/material-dashboard-react/components/sidebarStyle.jsx"; 18 | 19 | const Sidebar = ({ ...props }) => { 20 | // verifies if routeName is the one active (in browser input) 21 | function activeRoute(routeName) { 22 | return props.location.pathname.indexOf(routeName) > -1 ? true : false; 23 | } 24 | const { classes, color, logo, image, logoText, routes } = props; 25 | var links = ( 26 | 27 | {routes.map((prop, key) => { 28 | if (prop.redirect) return null; 29 | var activePro = " "; 30 | var listItemClasses; 31 | if (prop.path === "/upgrade-to-pro") { 32 | activePro = classes.activePro + " "; 33 | listItemClasses = classNames({ 34 | [" " + classes[color]]: true 35 | }); 36 | } else { 37 | listItemClasses = classNames({ 38 | [" " + classes[color]]: activeRoute(prop.path) 39 | }); 40 | } 41 | const whiteFontClasses = classNames({ 42 | [" " + classes.whiteFont]: activeRoute(prop.path) 43 | }); 44 | return ( 45 | 51 | 52 | 53 | {typeof prop.icon === "string" ? ( 54 | {prop.icon} 55 | ) : ( 56 | 57 | )} 58 | 59 | 64 | 65 | 66 | ); 67 | })} 68 | 69 | ); 70 | var brand = ( 71 | 79 | ); 80 | return ( 81 |
82 | 83 | 95 | {brand} 96 |
97 | 98 | {links} 99 |
100 | {image !== undefined ? ( 101 |
105 | ) : null} 106 | 107 | 108 | 109 | 117 | {brand} 118 |
{links}
119 | {image !== undefined ? ( 120 |
124 | ) : null} 125 | 126 | 127 |
128 | ); 129 | }; 130 | 131 | Sidebar.propTypes = { 132 | classes: PropTypes.object.isRequired 133 | }; 134 | 135 | export default withStyles(sidebarStyle)(Sidebar); 136 | -------------------------------------------------------------------------------- /src/components/Snackbar/Snackbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | // @material-ui/core components 5 | import withStyles from "@material-ui/core/styles/withStyles"; 6 | import Snack from "@material-ui/core/Snackbar"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | // @material-ui/icons 9 | import Close from "@material-ui/icons/Close"; 10 | // core components 11 | import snackbarContentStyle from "assets/jss/material-dashboard-react/components/snackbarContentStyle.jsx"; 12 | 13 | function Snackbar({ ...props }) { 14 | const { classes, message, color, close, icon, place, open } = props; 15 | var action = []; 16 | const messageClasses = classNames({ 17 | [classes.iconMessage]: icon !== undefined 18 | }); 19 | if (close !== undefined) { 20 | action = [ 21 | props.closeNotification()} 27 | > 28 | 29 | 30 | ]; 31 | } 32 | return ( 33 | 44 | {icon !== undefined ? : null} 45 | {message} 46 |
47 | } 48 | action={action} 49 | ContentProps={{ 50 | classes: { 51 | root: classes.root + " " + classes[color], 52 | message: classes.message 53 | } 54 | }} 55 | /> 56 | ); 57 | } 58 | 59 | Snackbar.propTypes = { 60 | classes: PropTypes.object.isRequired, 61 | message: PropTypes.node.isRequired, 62 | color: PropTypes.oneOf(["info", "success", "warning", "danger", "primary"]), 63 | close: PropTypes.bool, 64 | icon: PropTypes.func, 65 | place: PropTypes.oneOf(["tl", "tr", "tc", "br", "bl", "bc"]), 66 | open: PropTypes.bool 67 | }; 68 | 69 | export default withStyles(snackbarContentStyle)(Snackbar); 70 | -------------------------------------------------------------------------------- /src/components/Snackbar/SnackbarContent.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import classNames from "classnames"; 4 | // @material-ui/core components 5 | import withStyles from "@material-ui/core/styles/withStyles"; 6 | import Snack from "@material-ui/core/SnackbarContent"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | // @material-ui/icons 9 | import Close from "@material-ui/icons/Close"; 10 | // core components 11 | import snackbarContentStyle from "assets/jss/material-dashboard-react/components/snackbarContentStyle.jsx"; 12 | 13 | function SnackbarContent({ ...props }) { 14 | const { classes, message, color, close, icon } = props; 15 | var action = []; 16 | const messageClasses = classNames({ 17 | [classes.iconMessage]: icon !== undefined 18 | }); 19 | if (close !== undefined) { 20 | action = [ 21 | 27 | 28 | 29 | ]; 30 | } 31 | return ( 32 | 35 | {icon !== undefined ? : null} 36 | {message} 37 |
38 | } 39 | classes={{ 40 | root: classes.root + " " + classes[color], 41 | message: classes.message 42 | }} 43 | action={action} 44 | /> 45 | ); 46 | } 47 | 48 | SnackbarContent.propTypes = { 49 | classes: PropTypes.object.isRequired, 50 | message: PropTypes.node.isRequired, 51 | color: PropTypes.oneOf(["info", "success", "warning", "danger", "primary"]), 52 | close: PropTypes.bool, 53 | icon: PropTypes.func 54 | }; 55 | 56 | export default withStyles(snackbarContentStyle)(SnackbarContent); 57 | -------------------------------------------------------------------------------- /src/components/Table/Table.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | import Table from "@material-ui/core/Table"; 6 | import TableHead from "@material-ui/core/TableHead"; 7 | import TableRow from "@material-ui/core/TableRow"; 8 | import TableBody from "@material-ui/core/TableBody"; 9 | import TableCell from "@material-ui/core/TableCell"; 10 | // core components 11 | import tableStyle from "assets/jss/material-dashboard-react/components/tableStyle.jsx"; 12 | 13 | function CustomTable({ ...props }) { 14 | const { classes, tableHead, tableData, tableHeaderColor } = props; 15 | return ( 16 |
17 | 18 | {tableHead !== undefined ? ( 19 | 20 | 21 | {tableHead.map((prop, key) => { 22 | return ( 23 | 27 | {prop} 28 | 29 | ); 30 | })} 31 | 32 | 33 | ) : null} 34 | 35 | {tableData.map((prop, key) => { 36 | return ( 37 | 38 | {prop.map((prop, key) => { 39 | return ( 40 | 41 | {prop} 42 | 43 | ); 44 | })} 45 | 46 | ); 47 | })} 48 | 49 |
50 |
51 | ); 52 | } 53 | 54 | CustomTable.defaultProps = { 55 | tableHeaderColor: "gray" 56 | }; 57 | 58 | CustomTable.propTypes = { 59 | classes: PropTypes.object.isRequired, 60 | tableHeaderColor: PropTypes.oneOf([ 61 | "warning", 62 | "primary", 63 | "danger", 64 | "success", 65 | "info", 66 | "rose", 67 | "gray" 68 | ]), 69 | tableHead: PropTypes.arrayOf(PropTypes.string), 70 | tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)) 71 | }; 72 | 73 | export default withStyles(tableStyle)(CustomTable); 74 | -------------------------------------------------------------------------------- /src/components/Tasks/Tasks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | import Checkbox from "@material-ui/core/Checkbox"; 6 | import Tooltip from "@material-ui/core/Tooltip"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | import Table from "@material-ui/core/Table"; 9 | import TableRow from "@material-ui/core/TableRow"; 10 | import TableBody from "@material-ui/core/TableBody"; 11 | import TableCell from "@material-ui/core/TableCell"; 12 | // @material-ui/icons 13 | import Edit from "@material-ui/icons/Edit"; 14 | import Close from "@material-ui/icons/Close"; 15 | import Check from "@material-ui/icons/Check"; 16 | // core components 17 | import tasksStyle from "assets/jss/material-dashboard-react/components/tasksStyle.jsx"; 18 | 19 | class Tasks extends React.Component { 20 | state = { 21 | checked: this.props.checkedIndexes 22 | }; 23 | handleToggle = value => () => { 24 | const { checked } = this.state; 25 | const currentIndex = checked.indexOf(value); 26 | const newChecked = [...checked]; 27 | 28 | if (currentIndex === -1) { 29 | newChecked.push(value); 30 | } else { 31 | newChecked.splice(currentIndex, 1); 32 | } 33 | 34 | this.setState({ 35 | checked: newChecked 36 | }); 37 | }; 38 | render() { 39 | const { classes, tasksIndexes, tasks } = this.props; 40 | return ( 41 | 42 | 43 | {tasksIndexes.map(value => ( 44 | 45 | 46 | } 51 | icon={} 52 | classes={{ 53 | checked: classes.checked, 54 | root: classes.root 55 | }} 56 | /> 57 | 58 | 59 | {tasks[value]} 60 | 61 | 62 | 68 | 72 | 77 | 78 | 79 | 85 | 89 | 94 | 95 | 96 | 97 | 98 | ))} 99 | 100 |
101 | ); 102 | } 103 | } 104 | 105 | Tasks.propTypes = { 106 | classes: PropTypes.object.isRequired, 107 | tasksIndexes: PropTypes.arrayOf(PropTypes.number), 108 | tasks: PropTypes.arrayOf(PropTypes.node) 109 | }; 110 | 111 | export default withStyles(tasksStyle)(Tasks); 112 | -------------------------------------------------------------------------------- /src/components/Typography/Danger.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Danger({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Danger.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Danger); 22 | -------------------------------------------------------------------------------- /src/components/Typography/Info.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Info({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Info.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Info); 22 | -------------------------------------------------------------------------------- /src/components/Typography/Muted.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Muted({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Muted.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Muted); 22 | -------------------------------------------------------------------------------- /src/components/Typography/Primary.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Primary({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Primary.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Primary); 22 | -------------------------------------------------------------------------------- /src/components/Typography/Quote.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Quote({ ...props }) { 9 | const { classes, text, author } = props; 10 | return ( 11 |
12 |

{text}

13 | {author} 14 |
15 | ); 16 | } 17 | 18 | Quote.propTypes = { 19 | classes: PropTypes.object.isRequired, 20 | text: PropTypes.node, 21 | author: PropTypes.node 22 | }; 23 | 24 | export default withStyles(typographyStyle)(Quote); 25 | -------------------------------------------------------------------------------- /src/components/Typography/Success.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Success({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Success.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Success); 22 | -------------------------------------------------------------------------------- /src/components/Typography/Warning.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // core components 6 | import typographyStyle from "assets/jss/material-dashboard-react/components/typographyStyle.jsx"; 7 | 8 | function Warning({ ...props }) { 9 | const { classes, children } = props; 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | } 16 | 17 | Warning.propTypes = { 18 | classes: PropTypes.object.isRequired 19 | }; 20 | 21 | export default withStyles(typographyStyle)(Warning); 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { createBrowserHistory } from "history"; 4 | import { Router, Route, Switch } from "react-router-dom"; 5 | 6 | import "assets/css/material-dashboard-react.css?v=1.5.0"; 7 | 8 | import indexRoutes from "routes/index.jsx"; 9 | 10 | const hist = createBrowserHistory(); 11 | 12 | ReactDOM.render( 13 | 14 | 15 | {indexRoutes.map((prop, key) => { 16 | return ; 17 | })} 18 | 19 | , 20 | document.getElementById("root") 21 | ); 22 | -------------------------------------------------------------------------------- /src/layouts/Dashboard/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | import { Switch, Route, Redirect } from "react-router-dom"; 5 | // creates a beautiful scrollbar 6 | import PerfectScrollbar from "perfect-scrollbar"; 7 | import "perfect-scrollbar/css/perfect-scrollbar.css"; 8 | // @material-ui/core components 9 | import withStyles from "@material-ui/core/styles/withStyles"; 10 | // core components 11 | import Header from "components/Header/Header.jsx"; 12 | import Footer from "components/Footer/Footer.jsx"; 13 | import Sidebar from "components/Sidebar/Sidebar.jsx"; 14 | 15 | import dashboardRoutes from "routes/dashboard.jsx"; 16 | 17 | import dashboardStyle from "assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx"; 18 | 19 | import image from "assets/img/sidebar-2.jpg"; 20 | import logo from "assets/img/reactlogo.png"; 21 | 22 | const switchRoutes = ( 23 | 24 | {dashboardRoutes.map((prop, key) => { 25 | if (prop.redirect) 26 | return ; 27 | return ; 28 | })} 29 | 30 | ); 31 | 32 | class App extends React.Component { 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | mobileOpen: false 37 | }; 38 | this.resizeFunction = this.resizeFunction.bind(this); 39 | } 40 | handleDrawerToggle = () => { 41 | this.setState({ mobileOpen: !this.state.mobileOpen }); 42 | }; 43 | getRoute() { 44 | return this.props.location.pathname !== "/maps"; 45 | } 46 | resizeFunction() { 47 | if (window.innerWidth >= 960) { 48 | this.setState({ mobileOpen: false }); 49 | } 50 | } 51 | componentDidMount() { 52 | if (navigator.platform.indexOf("Win") > -1) { 53 | const ps = new PerfectScrollbar(this.refs.mainPanel); 54 | } 55 | window.addEventListener("resize", this.resizeFunction); 56 | } 57 | componentDidUpdate(e) { 58 | if (e.history.location.pathname !== e.location.pathname) { 59 | this.refs.mainPanel.scrollTop = 0; 60 | if (this.state.mobileOpen) { 61 | this.setState({ mobileOpen: false }); 62 | } 63 | } 64 | } 65 | componentWillUnmount() { 66 | window.removeEventListener("resize", this.resizeFunction); 67 | } 68 | render() { 69 | const { classes, ...rest } = this.props; 70 | return ( 71 |
72 | 82 |
83 |
88 | {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */} 89 | {this.getRoute() ? ( 90 |
91 |
{switchRoutes}
92 |
93 | ) : ( 94 |
{switchRoutes}
95 | )} 96 | {this.getRoute() ?
: null} 97 |
98 |
99 | ); 100 | } 101 | } 102 | 103 | App.propTypes = { 104 | classes: PropTypes.object.isRequired 105 | }; 106 | 107 | export default withStyles(dashboardStyle)(App); 108 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes/dashboard.jsx: -------------------------------------------------------------------------------- 1 | // @material-ui/icons 2 | import Dashboard from "@material-ui/icons/Dashboard"; 3 | import Person from "@material-ui/icons/Person"; 4 | // import ContentPaste from "@material-ui/icons/ContentPaste"; 5 | import LibraryBooks from "@material-ui/icons/LibraryBooks"; 6 | import BubbleChart from "@material-ui/icons/BubbleChart"; 7 | import LocationOn from "@material-ui/icons/LocationOn"; 8 | import Notifications from "@material-ui/icons/Notifications"; 9 | import Unarchive from "@material-ui/icons/Unarchive"; 10 | // core components/views 11 | import DashboardPage from "views/Dashboard/Dashboard.jsx"; 12 | import UserProfile from "views/UserProfile/UserProfile.jsx"; 13 | import TableList from "views/TableList/TableList.jsx"; 14 | import Typography from "views/Typography/Typography.jsx"; 15 | import Icons from "views/Icons/Icons.jsx"; 16 | import Maps from "views/Maps/Maps.jsx"; 17 | import NotificationsPage from "views/Notifications/Notifications.jsx"; 18 | import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx"; 19 | 20 | const dashboardRoutes = [ 21 | { 22 | path: "/dashboard", 23 | sidebarName: "Dashboard", 24 | navbarName: "Material Dashboard", 25 | icon: Dashboard, 26 | component: DashboardPage 27 | }, 28 | { 29 | path: "/user", 30 | sidebarName: "User Profile", 31 | navbarName: "Profile", 32 | icon: Person, 33 | component: UserProfile 34 | }, 35 | { 36 | path: "/table", 37 | sidebarName: "Table List", 38 | navbarName: "Table List", 39 | icon: "content_paste", 40 | component: TableList 41 | }, 42 | { 43 | path: "/typography", 44 | sidebarName: "Typography", 45 | navbarName: "Typography", 46 | icon: LibraryBooks, 47 | component: Typography 48 | }, 49 | { 50 | path: "/icons", 51 | sidebarName: "Icons", 52 | navbarName: "Icons", 53 | icon: BubbleChart, 54 | component: Icons 55 | }, 56 | { 57 | path: "/maps", 58 | sidebarName: "Maps", 59 | navbarName: "Map", 60 | icon: LocationOn, 61 | component: Maps 62 | }, 63 | { 64 | path: "/notifications", 65 | sidebarName: "Notifications", 66 | navbarName: "Notifications", 67 | icon: Notifications, 68 | component: NotificationsPage 69 | }, 70 | { 71 | path: "/upgrade-to-pro", 72 | sidebarName: "Upgrade To PRO", 73 | navbarName: "Upgrade To PRO", 74 | icon: Unarchive, 75 | component: UpgradeToPro 76 | }, 77 | { redirect: true, path: "/", to: "/dashboard", navbarName: "Redirect" } 78 | ]; 79 | 80 | export default dashboardRoutes; 81 | -------------------------------------------------------------------------------- /src/routes/index.jsx: -------------------------------------------------------------------------------- 1 | import Dashboard from "layouts/Dashboard/Dashboard.jsx"; 2 | 3 | const indexRoutes = [{ path: "/", component: Dashboard }]; 4 | 5 | export default indexRoutes; 6 | -------------------------------------------------------------------------------- /src/variables/charts.jsx: -------------------------------------------------------------------------------- 1 | // ############################## 2 | // // // javascript library for creating charts 3 | // ############################# 4 | var Chartist = require("chartist"); 5 | 6 | // ############################## 7 | // // // variables used to create animation on charts 8 | // ############################# 9 | var delays = 80, 10 | durations = 500; 11 | var delays2 = 80, 12 | durations2 = 500; 13 | 14 | // ############################## 15 | // // // Daily Sales 16 | // ############################# 17 | 18 | const dailySalesChart = { 19 | data: { 20 | labels: ["M", "T", "W", "T", "F", "S", "S"], 21 | series: [[12, 17, 7, 17, 23, 18, 38]] 22 | }, 23 | options: { 24 | lineSmooth: Chartist.Interpolation.cardinal({ 25 | tension: 0 26 | }), 27 | low: 0, 28 | high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look 29 | chartPadding: { 30 | top: 0, 31 | right: 0, 32 | bottom: 0, 33 | left: 0 34 | } 35 | }, 36 | // for animation 37 | animation: { 38 | draw: function(data) { 39 | if (data.type === "line" || data.type === "area") { 40 | data.element.animate({ 41 | d: { 42 | begin: 600, 43 | dur: 700, 44 | from: data.path 45 | .clone() 46 | .scale(1, 0) 47 | .translate(0, data.chartRect.height()) 48 | .stringify(), 49 | to: data.path.clone().stringify(), 50 | easing: Chartist.Svg.Easing.easeOutQuint 51 | } 52 | }); 53 | } else if (data.type === "point") { 54 | data.element.animate({ 55 | opacity: { 56 | begin: (data.index + 1) * delays, 57 | dur: durations, 58 | from: 0, 59 | to: 1, 60 | easing: "ease" 61 | } 62 | }); 63 | } 64 | } 65 | } 66 | }; 67 | 68 | // ############################## 69 | // // // Email Subscriptions 70 | // ############################# 71 | 72 | const emailsSubscriptionChart = { 73 | data: { 74 | labels: [ 75 | "Jan", 76 | "Feb", 77 | "Mar", 78 | "Apr", 79 | "Mai", 80 | "Jun", 81 | "Jul", 82 | "Aug", 83 | "Sep", 84 | "Oct", 85 | "Nov", 86 | "Dec" 87 | ], 88 | series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]] 89 | }, 90 | options: { 91 | axisX: { 92 | showGrid: false 93 | }, 94 | low: 0, 95 | high: 1000, 96 | chartPadding: { 97 | top: 0, 98 | right: 5, 99 | bottom: 0, 100 | left: 0 101 | } 102 | }, 103 | responsiveOptions: [ 104 | [ 105 | "screen and (max-width: 640px)", 106 | { 107 | seriesBarDistance: 5, 108 | axisX: { 109 | labelInterpolationFnc: function(value) { 110 | return value[0]; 111 | } 112 | } 113 | } 114 | ] 115 | ], 116 | animation: { 117 | draw: function(data) { 118 | if (data.type === "bar") { 119 | data.element.animate({ 120 | opacity: { 121 | begin: (data.index + 1) * delays2, 122 | dur: durations2, 123 | from: 0, 124 | to: 1, 125 | easing: "ease" 126 | } 127 | }); 128 | } 129 | } 130 | } 131 | }; 132 | 133 | // ############################## 134 | // // // Completed Tasks 135 | // ############################# 136 | 137 | const completedTasksChart = { 138 | data: { 139 | labels: ["12am", "3pm", "6pm", "9pm", "12pm", "3am", "6am", "9am"], 140 | series: [[230, 750, 450, 300, 280, 240, 200, 190]] 141 | }, 142 | options: { 143 | lineSmooth: Chartist.Interpolation.cardinal({ 144 | tension: 0 145 | }), 146 | low: 0, 147 | high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look 148 | chartPadding: { 149 | top: 0, 150 | right: 0, 151 | bottom: 0, 152 | left: 0 153 | } 154 | }, 155 | animation: { 156 | draw: function(data) { 157 | if (data.type === "line" || data.type === "area") { 158 | data.element.animate({ 159 | d: { 160 | begin: 600, 161 | dur: 700, 162 | from: data.path 163 | .clone() 164 | .scale(1, 0) 165 | .translate(0, data.chartRect.height()) 166 | .stringify(), 167 | to: data.path.clone().stringify(), 168 | easing: Chartist.Svg.Easing.easeOutQuint 169 | } 170 | }); 171 | } else if (data.type === "point") { 172 | data.element.animate({ 173 | opacity: { 174 | begin: (data.index + 1) * delays, 175 | dur: durations, 176 | from: 0, 177 | to: 1, 178 | easing: "ease" 179 | } 180 | }); 181 | } 182 | } 183 | } 184 | }; 185 | 186 | module.exports = { 187 | dailySalesChart, 188 | emailsSubscriptionChart, 189 | completedTasksChart 190 | }; 191 | -------------------------------------------------------------------------------- /src/variables/general.jsx: -------------------------------------------------------------------------------- 1 | // ############################## 2 | // // // Tasks for TasksCard - see Dashboard view 3 | // ############################# 4 | 5 | var bugs = [ 6 | 'Sign contract for "What are conference organizers afraid of?"', 7 | "Lines From Great Russian Literature? Or E-mails From My Boss?", 8 | "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit", 9 | "Create 4 Invisible User Experiences you Never Knew About" 10 | ]; 11 | var website = [ 12 | "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit", 13 | 'Sign contract for "What are conference organizers afraid of?"' 14 | ]; 15 | var server = [ 16 | "Lines From Great Russian Literature? Or E-mails From My Boss?", 17 | "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit", 18 | 'Sign contract for "What are conference organizers afraid of?"' 19 | ]; 20 | 21 | module.exports = { 22 | // these 3 are used to create the tasks lists in TasksCard - Dashboard view 23 | bugs, 24 | website, 25 | server 26 | }; 27 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // react plugin for creating charts 4 | import ChartistGraph from "react-chartist"; 5 | // @material-ui/core 6 | import withStyles from "@material-ui/core/styles/withStyles"; 7 | import Icon from "@material-ui/core/Icon"; 8 | // @material-ui/icons 9 | import Store from "@material-ui/icons/Store"; 10 | import Warning from "@material-ui/icons/Warning"; 11 | import DateRange from "@material-ui/icons/DateRange"; 12 | import LocalOffer from "@material-ui/icons/LocalOffer"; 13 | import Update from "@material-ui/icons/Update"; 14 | import ArrowUpward from "@material-ui/icons/ArrowUpward"; 15 | import AccessTime from "@material-ui/icons/AccessTime"; 16 | import Accessibility from "@material-ui/icons/Accessibility"; 17 | import BugReport from "@material-ui/icons/BugReport"; 18 | import Code from "@material-ui/icons/Code"; 19 | import Cloud from "@material-ui/icons/Cloud"; 20 | // core components 21 | import GridItem from "components/Grid/GridItem.jsx"; 22 | import GridContainer from "components/Grid/GridContainer.jsx"; 23 | import Table from "components/Table/Table.jsx"; 24 | import Tasks from "components/Tasks/Tasks.jsx"; 25 | import CustomTabs from "components/CustomTabs/CustomTabs.jsx"; 26 | import Danger from "components/Typography/Danger.jsx"; 27 | import Card from "components/Card/Card.jsx"; 28 | import CardHeader from "components/Card/CardHeader.jsx"; 29 | import CardIcon from "components/Card/CardIcon.jsx"; 30 | import CardBody from "components/Card/CardBody.jsx"; 31 | import CardFooter from "components/Card/CardFooter.jsx"; 32 | 33 | import { bugs, website, server } from "variables/general.jsx"; 34 | 35 | import { 36 | dailySalesChart, 37 | emailsSubscriptionChart, 38 | completedTasksChart 39 | } from "variables/charts.jsx"; 40 | 41 | import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.jsx"; 42 | 43 | class Dashboard extends React.Component { 44 | state = { 45 | value: 0 46 | }; 47 | handleChange = (event, value) => { 48 | this.setState({ value }); 49 | }; 50 | 51 | handleChangeIndex = index => { 52 | this.setState({ value: index }); 53 | }; 54 | render() { 55 | const { classes } = this.props; 56 | return ( 57 |
58 | 59 | 60 | 61 | 62 | 63 | content_copy 64 | 65 |

Used Space

66 |

67 | 49/50 GB 68 |

69 | 70 | 71 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

Revenue

89 |

$34,245

90 | 91 | 92 |
93 | 94 | Last 24 Hours 95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | info_outline 104 | 105 |

Fixed Issues

106 |

75

107 | 108 | 109 |
110 | 111 | Tracked from Github 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |

Followers

123 |

+245

124 | 125 | 126 |
127 | 128 | Just Updated 129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 145 | 146 | 147 |

Daily Sales

148 |

149 | 150 | 55% 151 | {" "} 152 | increase in today sales. 153 |

154 | 155 | 156 |
157 | updated 4 minutes ago 158 |
159 | 160 | 161 | 162 | 163 | 164 | 165 | 173 | 174 | 175 |

Email Subscriptions

176 |

177 | Last Campaign Performance 178 |

179 | 180 | 181 |
182 | campaign sent 2 days ago 183 |
184 | 185 | 186 | 187 | 188 | 189 | 190 | 197 | 198 | 199 |

Completed Tasks

200 |

201 | Last Campaign Performance 202 |

203 | 204 | 205 |
206 | campaign sent 2 days ago 207 |
208 | 209 | 210 | 211 | 212 | 213 | 214 | 227 | ) 228 | }, 229 | { 230 | tabName: "Website", 231 | tabIcon: Code, 232 | tabContent: ( 233 | 238 | ) 239 | }, 240 | { 241 | tabName: "Server", 242 | tabIcon: Cloud, 243 | tabContent: ( 244 | 249 | ) 250 | } 251 | ]} 252 | /> 253 | 254 | 255 | 256 | 257 |

Employees Stats

258 |

259 | New employees on 15th September, 2016 260 |

261 | 262 | 263 | 273 | 274 | 275 | 276 | 277 | 278 | ); 279 | } 280 | } 281 | 282 | Dashboard.propTypes = { 283 | classes: PropTypes.object.isRequired 284 | }; 285 | 286 | export default withStyles(dashboardStyle)(Dashboard); 287 | -------------------------------------------------------------------------------- /src/views/Icons/Icons.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | import Hidden from "@material-ui/core/Hidden"; 6 | // core components 7 | import GridItem from "components/Grid/GridItem.jsx"; 8 | import GridContainer from "components/Grid/GridContainer.jsx"; 9 | import Card from "components/Card/Card.jsx"; 10 | import CardHeader from "components/Card/CardHeader.jsx"; 11 | import CardBody from "components/Card/CardBody.jsx"; 12 | 13 | import iconsStyle from "assets/jss/material-dashboard-react/views/iconsStyle.jsx"; 14 | 15 | function Icons(props) { 16 | const { classes } = props; 17 | return ( 18 | 19 | 20 | 21 | 22 |

Material Design Icons

23 |

24 | Handcrafted by our friends from{" "} 25 | 30 | Google 31 | 32 |

33 | 34 | 35 | 36 | 43 | 44 | 45 | 46 |
47 | The icons are visible on Desktop mode inside an iframe. Since 48 | the iframe is not working on Mobile and Tablets please visit 49 | the icons on their original page on Google. Check the 50 | 55 | Material Icons 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | 67 | Icons.propTypes = { 68 | classes: PropTypes.object.isRequired 69 | }; 70 | 71 | export default withStyles(iconsStyle)(Icons); 72 | -------------------------------------------------------------------------------- /src/views/Maps/Maps.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | withScriptjs, 4 | withGoogleMap, 5 | GoogleMap, 6 | Marker 7 | } from "react-google-maps"; 8 | 9 | const CustomSkinMap = withScriptjs( 10 | withGoogleMap(props => ( 11 | 79 | 80 | 81 | )) 82 | ); 83 | 84 | function Maps({ ...props }) { 85 | return ( 86 | } 89 | containerElement={
} 90 | mapElement={
} 91 | /> 92 | ); 93 | } 94 | 95 | export default Maps; 96 | -------------------------------------------------------------------------------- /src/views/Notifications/Notifications.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React from "react"; 3 | // @material-ui/core components 4 | import withStyles from "@material-ui/core/styles/withStyles"; 5 | // @material-ui/icons 6 | import AddAlert from "@material-ui/icons/AddAlert"; 7 | // core components 8 | import GridItem from "components/Grid/GridItem.jsx"; 9 | import GridContainer from "components/Grid/GridContainer.jsx"; 10 | import Button from "components/CustomButtons/Button.jsx"; 11 | import SnackbarContent from "components/Snackbar/SnackbarContent.jsx"; 12 | import Snackbar from "components/Snackbar/Snackbar.jsx"; 13 | import Card from "components/Card/Card.jsx"; 14 | import CardHeader from "components/Card/CardHeader.jsx"; 15 | import CardBody from "components/Card/CardBody.jsx"; 16 | 17 | const styles = { 18 | cardCategoryWhite: { 19 | "&,& a,& a:hover,& a:focus": { 20 | color: "rgba(255,255,255,.62)", 21 | margin: "0", 22 | fontSize: "14px", 23 | marginTop: "0", 24 | marginBottom: "0" 25 | }, 26 | "& a,& a:hover,& a:focus": { 27 | color: "#FFFFFF" 28 | } 29 | }, 30 | cardTitleWhite: { 31 | color: "#FFFFFF", 32 | marginTop: "0px", 33 | minHeight: "auto", 34 | fontWeight: "300", 35 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 36 | marginBottom: "3px", 37 | textDecoration: "none", 38 | "& small": { 39 | color: "#777", 40 | fontSize: "65%", 41 | fontWeight: "400", 42 | lineHeight: "1" 43 | } 44 | } 45 | }; 46 | 47 | class Notifications extends React.Component { 48 | constructor(props) { 49 | super(props); 50 | this.state = { 51 | tl: false, 52 | tc: false, 53 | tr: false, 54 | bl: false, 55 | bc: false, 56 | br: false 57 | }; 58 | } 59 | // to stop the warning of calling setState of unmounted component 60 | componentWillUnmount() { 61 | var id = window.setTimeout(null, 0); 62 | while (id--) { 63 | window.clearTimeout(id); 64 | } 65 | } 66 | showNotification(place) { 67 | var x = []; 68 | x[place] = true; 69 | this.setState(x); 70 | this.alertTimeout = setTimeout( 71 | function() { 72 | x[place] = false; 73 | this.setState(x); 74 | }.bind(this), 75 | 6000 76 | ); 77 | } 78 | render() { 79 | const { classes } = this.props; 80 | return ( 81 | 82 | 83 |

Notifications

84 |

85 | Handcrafted by our friends from{" "} 86 | 87 | Material UI 88 | {" "} 89 | and styled by{" "} 90 | 91 | Creative Tim 92 | . Please checkout the{" "} 93 | 94 | full documentation 95 | . 96 |

97 | 98 | 99 | 100 | 101 |
Notifications Style
102 |
103 | 104 | 108 | 113 | 120 | 121 | 122 |
Notifications States
123 |
124 | 131 | 138 | 145 | 152 | 159 | 160 | 161 |
162 |
163 | 164 | 165 |
166 | Notifications Places 167 | Click to view notifications 168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 182 | this.setState({ tl: false })} 189 | close 190 | /> 191 | 192 | 193 | 200 | this.setState({ tc: false })} 207 | close 208 | /> 209 | 210 | 211 | 218 | this.setState({ tr: false })} 225 | close 226 | /> 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 242 | this.setState({ bl: false })} 249 | close 250 | /> 251 | 252 | 253 | 260 | this.setState({ bc: false })} 267 | close 268 | /> 269 | 270 | 271 | 278 | this.setState({ br: false })} 285 | close 286 | /> 287 | 288 | 289 | 290 | 291 | 292 | 293 | ); 294 | } 295 | } 296 | 297 | export default withStyles(styles)(Notifications); 298 | -------------------------------------------------------------------------------- /src/views/TableList/TableList.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | // core components 5 | import GridItem from "components/Grid/GridItem.jsx"; 6 | import GridContainer from "components/Grid/GridContainer.jsx"; 7 | import Table from "components/Table/Table.jsx"; 8 | import Card from "components/Card/Card.jsx"; 9 | import CardHeader from "components/Card/CardHeader.jsx"; 10 | import CardBody from "components/Card/CardBody.jsx"; 11 | 12 | const styles = { 13 | cardCategoryWhite: { 14 | "&,& a,& a:hover,& a:focus": { 15 | color: "rgba(255,255,255,.62)", 16 | margin: "0", 17 | fontSize: "14px", 18 | marginTop: "0", 19 | marginBottom: "0" 20 | }, 21 | "& a,& a:hover,& a:focus": { 22 | color: "#FFFFFF" 23 | } 24 | }, 25 | cardTitleWhite: { 26 | color: "#FFFFFF", 27 | marginTop: "0px", 28 | minHeight: "auto", 29 | fontWeight: "300", 30 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 31 | marginBottom: "3px", 32 | textDecoration: "none", 33 | "& small": { 34 | color: "#777", 35 | fontSize: "65%", 36 | fontWeight: "400", 37 | lineHeight: "1" 38 | } 39 | } 40 | }; 41 | 42 | function TableList(props) { 43 | const { classes } = props; 44 | return ( 45 | 46 | 47 | 48 | 49 |

Simple Table

50 |

51 | Here is a subtitle for this table 52 |

53 | 54 | 55 |
67 | 68 | 69 | 70 | 71 | 72 | 73 |

74 | Table on Plain Background 75 |

76 |

77 | Here is a subtitle for this table 78 |

79 | 80 | 81 |
105 | 106 | 107 | 108 | 109 | ); 110 | } 111 | 112 | export default withStyles(styles)(TableList); 113 | -------------------------------------------------------------------------------- /src/views/Typography/Typography.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | // core components 5 | import Quote from "components/Typography/Quote.jsx"; 6 | import Muted from "components/Typography/Muted.jsx"; 7 | import Primary from "components/Typography/Primary.jsx"; 8 | import Info from "components/Typography/Info.jsx"; 9 | import Success from "components/Typography/Success.jsx"; 10 | import Warning from "components/Typography/Warning.jsx"; 11 | import Danger from "components/Typography/Danger.jsx"; 12 | import Card from "components/Card/Card.jsx"; 13 | import CardHeader from "components/Card/CardHeader.jsx"; 14 | import CardBody from "components/Card/CardBody.jsx"; 15 | 16 | const style = { 17 | typo: { 18 | paddingLeft: "25%", 19 | marginBottom: "40px", 20 | position: "relative" 21 | }, 22 | note: { 23 | fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', 24 | bottom: "10px", 25 | color: "#c0c1c2", 26 | display: "block", 27 | fontWeight: "400", 28 | fontSize: "13px", 29 | lineHeight: "13px", 30 | left: "0", 31 | marginLeft: "20px", 32 | position: "absolute", 33 | width: "260px" 34 | }, 35 | cardCategoryWhite: { 36 | color: "rgba(255,255,255,.62)", 37 | margin: "0", 38 | fontSize: "14px", 39 | marginTop: "0", 40 | marginBottom: "0" 41 | }, 42 | cardTitleWhite: { 43 | color: "#FFFFFF", 44 | marginTop: "0px", 45 | minHeight: "auto", 46 | fontWeight: "300", 47 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 48 | marginBottom: "3px", 49 | textDecoration: "none" 50 | } 51 | }; 52 | function TypographyPage(props) { 53 | const { classes } = props; 54 | return ( 55 | 56 | 57 |

Material Dashboard Heading

58 |

59 | Created using Roboto Font Family 60 |

61 | 62 | 63 |
64 |
Header 1
65 |

The Life of Material Dashboard

66 |
67 |
68 |
Header 2
69 |

The Life of Material Dashboard

70 |
71 |
72 |
Header 3
73 |

The Life of Material Dashboard

74 |
75 |
76 |
Header 4
77 |

The Life of Material Dashboard

78 |
79 |
80 |
Header 5
81 |
The Life of Material Dashboard
82 |
83 |
84 |
Header 6
85 |
The Life of Material Dashboard
86 |
87 |
88 |
Paragraph
89 |

90 | I will be the leader of a company that ends up being worth billions 91 | of dollars, because I got the answers. I understand culture. I am 92 | the nucleus. I think that’s a responsibility that I have, to push 93 | possibilities, to show people, this is the level that things could 94 | be at. 95 |

96 |
97 |
98 |
Quote
99 | 103 |
104 |
105 |
Muted Text
106 | 107 | I will be the leader of a company that ends up being worth billions 108 | of dollars, because I got the answers... 109 | 110 |
111 |
112 |
Primary Text
113 | 114 | I will be the leader of a company that ends up being worth billions 115 | of dollars, because I got the answers... 116 | 117 |
118 |
119 |
Info Text
120 | 121 | I will be the leader of a company that ends up being worth billions 122 | of dollars, because I got the answers... 123 | 124 |
125 |
126 |
Success Text
127 | 128 | I will be the leader of a company that ends up being worth billions 129 | of dollars, because I got the answers... 130 | 131 |
132 |
133 |
Warning Text
134 | 135 | I will be the leader of a company that ends up being worth billions 136 | of dollars, because I got the answers... 137 | 138 |
139 |
140 |
Danger Text
141 | 142 | I will be the leader of a company that ends up being worth billions 143 | of dollars, because I got the answers... 144 | 145 |
146 |
147 |
Small Tag
148 |

149 | Header with small subtitle
150 | Use "Small" tag for the headers 151 |

152 |
153 | 154 | 155 | ); 156 | } 157 | 158 | export default withStyles(style)(TypographyPage); 159 | -------------------------------------------------------------------------------- /src/views/UpgradeToPro/UpgradeToPro.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | // @material-ui/icons 5 | import Close from "@material-ui/icons/Close"; 6 | import Check from "@material-ui/icons/Check"; 7 | // core components 8 | import GridItem from "components/Grid/GridItem.jsx"; 9 | import GridContainer from "components/Grid/GridContainer.jsx"; 10 | import Danger from "components/Typography/Danger.jsx"; 11 | import Success from "components/Typography/Success.jsx"; 12 | import Button from "components/CustomButtons/Button.jsx"; 13 | import Card from "components/Card/Card.jsx"; 14 | import CardHeader from "components/Card/CardHeader.jsx"; 15 | import CardBody from "components/Card/CardBody.jsx"; 16 | 17 | const styles = { 18 | cardCategoryWhite: { 19 | "&,& a,& a:hover,& a:focus": { 20 | color: "rgba(255,255,255,.62)", 21 | margin: "0", 22 | fontSize: "14px", 23 | marginTop: "0", 24 | marginBottom: "0" 25 | }, 26 | "& a,& a:hover,& a:focus": { 27 | color: "#FFFFFF" 28 | } 29 | }, 30 | cardTitleWhite: { 31 | color: "#FFFFFF", 32 | marginTop: "0px", 33 | minHeight: "auto", 34 | fontWeight: "300", 35 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 36 | marginBottom: "3px", 37 | textDecoration: "none", 38 | "& small": { 39 | color: "#777", 40 | fontSize: "65%", 41 | fontWeight: "400", 42 | lineHeight: "1" 43 | } 44 | }, 45 | tableUpgradeWrapper: { 46 | display: "block", 47 | width: "100%", 48 | overflowX: "auto", 49 | WebkitOverflowScrolling: "touch", 50 | MsOverflowStyle: "-ms-autohiding-scrollbar" 51 | }, 52 | table: { 53 | width: "100%", 54 | maxWidth: "100%", 55 | marginBottom: "1rem", 56 | backgroundColor: "transparent", 57 | borderCollapse: "collapse", 58 | display: "table", 59 | borderSpacing: "2px", 60 | borderColor: "grey", 61 | "& thdead tr th": { 62 | fontSize: "1.063rem", 63 | padding: "12px 8px", 64 | verticalAlign: "middle", 65 | fontWeight: "300", 66 | borderTopWidth: "0", 67 | borderBottom: "1px solid rgba(0, 0, 0, 0.06)", 68 | textAlign: "inherit" 69 | }, 70 | "& tbody tr td": { 71 | padding: "12px 8px", 72 | verticalAlign: "middle", 73 | borderTop: "1px solid rgba(0, 0, 0, 0.06)" 74 | }, 75 | "& td, & th": { 76 | display: "table-cell" 77 | } 78 | }, 79 | center: { 80 | textAlign: "center" 81 | } 82 | }; 83 | 84 | function UpgradeToPro(props) { 85 | const { classes } = props; 86 | return ( 87 | 88 | 89 | 90 | 91 |

92 | Material Dashboard PRO React 93 |

94 |

95 | Are you looking for more components? Please check our Premium 96 | Version of Material Dashboard Angular. 97 |

98 | 99 | 100 |
101 |
102 | 103 | 104 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 132 | 137 | 138 | 139 | 143 | 148 | 153 | 154 | 155 | 156 | 161 | 166 | 167 | 168 | 169 | 174 | 179 | 180 | 181 | 183 | 184 | 185 | 186 | 192 | 201 | 202 | 203 |
105 | FreePRO
Components30200
Plugins210
Example Pages728
Login, Register, Pricing, Lock Pages 128 | 129 | 130 | 131 | 133 | 134 | 135 | 136 |
140 | ReactTables, ReactVectorMap, ReactSweetAlert, Wizard, 141 | Validation, ReactBigCalendar etc... 142 | 144 | 145 | 146 | 147 | 149 | 150 | 151 | 152 |
Mini Sidebar 157 | 158 | 159 | 160 | 162 | 163 | 164 | 165 |
Premium Support 170 | 171 | 172 | 173 | 175 | 176 | 177 | 178 |
182 | FreeJust $59
187 | 188 | 191 | 193 | 200 |
204 |
205 | 206 | 207 | 208 | 209 | ); 210 | } 211 | 212 | export default withStyles(styles)(UpgradeToPro); 213 | -------------------------------------------------------------------------------- /src/views/UserProfile/UserProfile.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // @material-ui/core components 3 | import withStyles from "@material-ui/core/styles/withStyles"; 4 | import InputLabel from "@material-ui/core/InputLabel"; 5 | // core components 6 | import GridItem from "components/Grid/GridItem.jsx"; 7 | import GridContainer from "components/Grid/GridContainer.jsx"; 8 | import CustomInput from "components/CustomInput/CustomInput.jsx"; 9 | import Button from "components/CustomButtons/Button.jsx"; 10 | import Card from "components/Card/Card.jsx"; 11 | import CardHeader from "components/Card/CardHeader.jsx"; 12 | import CardAvatar from "components/Card/CardAvatar.jsx"; 13 | import CardBody from "components/Card/CardBody.jsx"; 14 | import CardFooter from "components/Card/CardFooter.jsx"; 15 | 16 | import avatar from "assets/img/faces/marc.jpg"; 17 | 18 | const styles = { 19 | cardCategoryWhite: { 20 | color: "rgba(255,255,255,.62)", 21 | margin: "0", 22 | fontSize: "14px", 23 | marginTop: "0", 24 | marginBottom: "0" 25 | }, 26 | cardTitleWhite: { 27 | color: "#FFFFFF", 28 | marginTop: "0px", 29 | minHeight: "auto", 30 | fontWeight: "300", 31 | fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", 32 | marginBottom: "3px", 33 | textDecoration: "none" 34 | } 35 | }; 36 | 37 | function UserProfile(props) { 38 | const { classes } = props; 39 | return ( 40 |
41 | 42 | 43 | 44 | 45 |

Edit Profile

46 |

Complete your profile

47 | 48 | 49 | 50 | 51 | 61 | 62 | 63 | 70 | 71 | 72 | 79 | 80 | 81 | 82 | 83 | 90 | 91 | 92 | 99 | 100 | 101 | 102 | 103 | 110 | 111 | 112 | 119 | 120 | 121 | 128 | 129 | 130 | 131 | 132 | About me 133 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | e.preventDefault()}> 156 | ... 157 | 158 | 159 | 160 |
CEO / CO-FOUNDER
161 |

Alec Thompson

162 |

163 | Don't be scared of the truth because we need to restart the 164 | human foundation in truth And I love you like Kanye loves Kanye 165 | I love Rick Owens’ bed design but the back is... 166 |

167 | 170 | 171 | 172 | 173 | 174 |
175 | ); 176 | } 177 | 178 | export default withStyles(styles)(UserProfile); 179 | --------------------------------------------------------------------------------