├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── material-react-app ├── .env.example ├── .eslintrc.json ├── .gitignore ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ ├── .gitignore │ ├── apple-icon.png │ ├── favicon.png │ ├── images │ │ ├── dashboard.png │ │ ├── forgot-password.png │ │ ├── login.png │ │ ├── profile.png │ │ ├── register.png │ │ └── reset-password.png │ ├── index.html │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── assets │ ├── images │ │ ├── apple-icon.png │ │ ├── bg-profile.jpeg │ │ ├── bg-reset-cover.jpeg │ │ ├── bg-sign-in-basic.jpeg │ │ ├── bg-sign-up-cover.jpeg │ │ ├── bruce-mars.jpg │ │ ├── favicon.png │ │ ├── home-decor-1.jpg │ │ ├── home-decor-2.jpg │ │ ├── home-decor-3.jpg │ │ ├── home-decor-4.jpeg │ │ ├── icons │ │ │ └── flags │ │ │ │ ├── AU.png │ │ │ │ ├── BR.png │ │ │ │ ├── DE.png │ │ │ │ ├── GB.png │ │ │ │ └── US.png │ │ ├── illustrations │ │ │ └── pattern-tree.svg │ │ ├── ivana-square.jpg │ │ ├── kal-visuals-square.jpg │ │ ├── logo-ct-dark.png │ │ ├── logo-ct.png │ │ ├── logos │ │ │ ├── gray-logos │ │ │ │ ├── logo-coinbase.svg │ │ │ │ ├── logo-nasa.svg │ │ │ │ ├── logo-netflix.svg │ │ │ │ ├── logo-pinterest.svg │ │ │ │ ├── logo-spotify.svg │ │ │ │ └── logo-vodafone.svg │ │ │ ├── mastercard.png │ │ │ └── visa.png │ │ ├── marie.jpg │ │ ├── small-logos │ │ │ ├── bootstrap.svg │ │ │ ├── creative-tim.svg │ │ │ ├── devto.svg │ │ │ ├── github.svg │ │ │ ├── google-webdev.svg │ │ │ ├── icon-bulb.svg │ │ │ ├── logo-asana.svg │ │ │ ├── logo-atlassian.svg │ │ │ ├── logo-invision.svg │ │ │ ├── logo-jira.svg │ │ │ ├── logo-slack.svg │ │ │ ├── logo-spotify.svg │ │ │ └── logo-xd.svg │ │ ├── team-1.jpg │ │ ├── team-2.jpg │ │ ├── team-3.jpg │ │ ├── team-4.jpg │ │ └── team-5.jpg │ ├── theme-dark │ │ ├── base │ │ │ ├── borders.js │ │ │ ├── boxShadows.js │ │ │ ├── breakpoints.js │ │ │ ├── colors.js │ │ │ ├── globals.js │ │ │ └── typography.js │ │ ├── components │ │ │ ├── appBar.js │ │ │ ├── avatar.js │ │ │ ├── breadcrumbs.js │ │ │ ├── button │ │ │ │ ├── contained.js │ │ │ │ ├── index.js │ │ │ │ ├── outlined.js │ │ │ │ ├── root.js │ │ │ │ └── text.js │ │ │ ├── buttonBase.js │ │ │ ├── card │ │ │ │ ├── cardContent.js │ │ │ │ ├── cardMedia.js │ │ │ │ └── index.js │ │ │ ├── container.js │ │ │ ├── dialog │ │ │ │ ├── dialogActions.js │ │ │ │ ├── dialogContent.js │ │ │ │ ├── dialogContentText.js │ │ │ │ ├── dialogTitle.js │ │ │ │ └── index.js │ │ │ ├── divider.js │ │ │ ├── form │ │ │ │ ├── autocomplete.js │ │ │ │ ├── checkbox.js │ │ │ │ ├── formControlLabel.js │ │ │ │ ├── formLabel.js │ │ │ │ ├── input.js │ │ │ │ ├── inputLabel.js │ │ │ │ ├── inputOutlined.js │ │ │ │ ├── radio.js │ │ │ │ ├── select.js │ │ │ │ ├── switchButton.js │ │ │ │ └── textField.js │ │ │ ├── icon.js │ │ │ ├── iconButton.js │ │ │ ├── linearProgress.js │ │ │ ├── link.js │ │ │ ├── list │ │ │ │ ├── index.js │ │ │ │ ├── listItem.js │ │ │ │ └── listItemText.js │ │ │ ├── menu │ │ │ │ ├── index.js │ │ │ │ └── menuItem.js │ │ │ ├── popover.js │ │ │ ├── sidenav.js │ │ │ ├── slider.js │ │ │ ├── stepper │ │ │ │ ├── index.js │ │ │ │ ├── step.js │ │ │ │ ├── stepConnector.js │ │ │ │ ├── stepIcon.js │ │ │ │ └── stepLabel.js │ │ │ ├── svgIcon.js │ │ │ ├── table │ │ │ │ ├── tableCell.js │ │ │ │ ├── tableContainer.js │ │ │ │ └── tableHead.js │ │ │ ├── tabs │ │ │ │ ├── index.js │ │ │ │ └── tab.js │ │ │ └── tooltip.js │ │ ├── functions │ │ │ ├── boxShadow.js │ │ │ ├── gradientChartLine.js │ │ │ ├── hexToRgb.js │ │ │ ├── linearGradient.js │ │ │ ├── pxToRem.js │ │ │ └── rgba.js │ │ ├── index.js │ │ └── theme-rtl.js │ └── theme │ │ ├── base │ │ ├── borders.js │ │ ├── boxShadows.js │ │ ├── breakpoints.js │ │ ├── colors.js │ │ ├── globals.js │ │ └── typography.js │ │ ├── components │ │ ├── appBar.js │ │ ├── avatar.js │ │ ├── breadcrumbs.js │ │ ├── button │ │ │ ├── contained.js │ │ │ ├── index.js │ │ │ ├── outlined.js │ │ │ ├── root.js │ │ │ └── text.js │ │ ├── buttonBase.js │ │ ├── card │ │ │ ├── cardContent.js │ │ │ ├── cardMedia.js │ │ │ └── index.js │ │ ├── container.js │ │ ├── dialog │ │ │ ├── dialogActions.js │ │ │ ├── dialogContent.js │ │ │ ├── dialogContentText.js │ │ │ ├── dialogTitle.js │ │ │ └── index.js │ │ ├── divider.js │ │ ├── flatpickr.js │ │ ├── form │ │ │ ├── autocomplete.js │ │ │ ├── checkbox.js │ │ │ ├── formControlLabel.js │ │ │ ├── formLabel.js │ │ │ ├── input.js │ │ │ ├── inputLabel.js │ │ │ ├── inputOutlined.js │ │ │ ├── radio.js │ │ │ ├── select.js │ │ │ ├── switchButton.js │ │ │ └── textField.js │ │ ├── icon.js │ │ ├── iconButton.js │ │ ├── linearProgress.js │ │ ├── link.js │ │ ├── list │ │ │ ├── index.js │ │ │ ├── listItem.js │ │ │ └── listItemText.js │ │ ├── menu │ │ │ ├── index.js │ │ │ └── menuItem.js │ │ ├── popover.js │ │ ├── sidenav.js │ │ ├── slider.js │ │ ├── stepper │ │ │ ├── index.js │ │ │ ├── step.js │ │ │ ├── stepConnector.js │ │ │ ├── stepIcon.js │ │ │ └── stepLabel.js │ │ ├── svgIcon.js │ │ ├── table │ │ │ ├── tableCell.js │ │ │ ├── tableContainer.js │ │ │ └── tableHead.js │ │ ├── tabs │ │ │ ├── index.js │ │ │ └── tab.js │ │ └── tooltip.js │ │ ├── functions │ │ ├── boxShadow.js │ │ ├── gradientChartLine.js │ │ ├── hexToRgb.js │ │ ├── linearGradient.js │ │ ├── pxToRem.js │ │ └── rgba.js │ │ ├── index.js │ │ └── theme-rtl.js │ ├── auth │ ├── forgot-password │ │ └── index.js │ ├── login │ │ └── index.js │ ├── register │ │ └── index.js │ └── reset-password │ │ └── index.js │ ├── components │ ├── MDAlert │ │ ├── MDAlertCloseIcon.js │ │ ├── MDAlertRoot.js │ │ └── index.js │ ├── MDAvatar │ │ ├── MDAvatarRoot.js │ │ └── index.js │ ├── MDBadge │ │ ├── MDBadgeRoot.js │ │ └── index.js │ ├── MDBox │ │ ├── MDBoxRoot.js │ │ └── index.js │ ├── MDButton │ │ ├── MDButtonRoot.js │ │ └── index.js │ ├── MDInput │ │ ├── MDInputRoot.js │ │ └── index.js │ ├── MDPagination │ │ ├── MDPaginationItemRoot.js │ │ └── index.js │ ├── MDProgress │ │ ├── MDProgressRoot.js │ │ └── index.js │ ├── MDSnackbar │ │ ├── MDSnackbarIconRoot.js │ │ └── index.js │ └── MDTypography │ │ ├── MDTypographyRoot.js │ │ └── index.js │ ├── context │ └── index.js │ ├── examples │ ├── Breadcrumbs │ │ └── index.js │ ├── Cards │ │ ├── BlogCards │ │ │ └── SimpleBlogCard │ │ │ │ └── index.js │ │ ├── InfoCards │ │ │ ├── DefaultInfoCard │ │ │ │ └── index.js │ │ │ └── ProfileInfoCard │ │ │ │ └── index.js │ │ ├── MasterCard │ │ │ └── index.js │ │ ├── ProjectCards │ │ │ └── DefaultProjectCard │ │ │ │ └── index.js │ │ └── StatisticsCards │ │ │ └── ComplexStatisticsCard │ │ │ └── index.js │ ├── Charts │ │ ├── BarCharts │ │ │ ├── HorizontalBarChart │ │ │ │ ├── configs │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── ReportsBarChart │ │ │ │ ├── configs │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ └── VerticalBarChart │ │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── BubbleChart │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── DoughnutCharts │ │ │ └── DefaultDoughnutChart │ │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── LineCharts │ │ │ ├── DefaultLineChart │ │ │ │ ├── configs │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── GradientLineChart │ │ │ │ ├── configs │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── ProgressLineChart │ │ │ │ ├── config │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ └── ReportsLineChart │ │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── MixedChart │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── PieChart │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── PolarChart │ │ │ ├── configs │ │ │ │ └── index.js │ │ │ └── index.js │ │ └── RadarChart │ │ │ ├── configs │ │ │ └── index.js │ │ │ └── index.js │ ├── Configurator │ │ ├── ConfiguratorRoot.js │ │ └── index.js │ ├── Footer │ │ └── index.js │ ├── Items │ │ └── NotificationItem │ │ │ ├── index.js │ │ │ └── styles.js │ ├── LayoutContainers │ │ ├── DashboardLayout │ │ │ └── index.js │ │ └── PageLayout │ │ │ └── index.js │ ├── Lists │ │ └── ProfilesList │ │ │ └── index.js │ ├── Navbars │ │ ├── DashboardNavbar │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── DefaultNavbar │ │ │ ├── DefaultNavbarLink.js │ │ │ ├── DefaultNavbarMobile.js │ │ │ └── index.js │ ├── ProtectedRoute │ │ └── index.js │ ├── Sidenav │ │ ├── SidenavCollapse.js │ │ ├── SidenavRoot.js │ │ ├── index.js │ │ └── styles │ │ │ ├── sidenav.js │ │ │ └── sidenavCollapse.js │ ├── Tables │ │ └── DataTable │ │ │ ├── DataTableBodyCell.js │ │ │ ├── DataTableHeadCell.js │ │ │ └── index.js │ └── Timeline │ │ ├── TimelineItem │ │ ├── index.js │ │ └── styles.js │ │ ├── TimelineList │ │ └── index.js │ │ └── context │ │ └── index.js │ ├── index.js │ ├── layouts │ ├── authentication │ │ ├── components │ │ │ ├── BasicLayout │ │ │ │ └── index.js │ │ │ ├── BasicLayoutLanding │ │ │ │ └── index.js │ │ │ ├── CoverLayout │ │ │ │ └── index.js │ │ │ └── Footer │ │ │ │ └── index.js │ │ ├── reset-password │ │ │ └── cover │ │ │ │ └── index.js │ │ ├── sign-in │ │ │ └── index.js │ │ └── sign-up │ │ │ └── index.js │ ├── billing │ │ ├── components │ │ │ ├── Bill │ │ │ │ └── index.js │ │ │ ├── BillingInformation │ │ │ │ └── index.js │ │ │ ├── Invoice │ │ │ │ └── index.js │ │ │ ├── Invoices │ │ │ │ └── index.js │ │ │ ├── PaymentMethod │ │ │ │ └── index.js │ │ │ ├── Transaction │ │ │ │ └── index.js │ │ │ └── Transactions │ │ │ │ └── index.js │ │ └── index.js │ ├── dashboard │ │ ├── components │ │ │ ├── OrdersOverview │ │ │ │ └── index.js │ │ │ └── Projects │ │ │ │ ├── data │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── data │ │ │ ├── reportsBarChartData.js │ │ │ └── reportsLineChartData.js │ │ └── index.js │ ├── notifications │ │ └── index.js │ ├── profile │ │ ├── components │ │ │ ├── Header │ │ │ │ └── index.js │ │ │ └── PlatformSettings │ │ │ │ └── index.js │ │ ├── data │ │ │ └── profilesListData.js │ │ └── index.js │ ├── rtl │ │ ├── components │ │ │ ├── OrdersOverview │ │ │ │ └── index.js │ │ │ └── Projects │ │ │ │ ├── data │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── data │ │ │ ├── reportsBarChartData.js │ │ │ └── reportsLineChartData.js │ │ └── index.js │ ├── tables │ │ ├── data │ │ │ ├── authorsTableData.js │ │ │ └── projectsTableData.js │ │ └── index.js │ ├── user-management │ │ ├── data.js │ │ └── index.js │ └── user-profile │ │ ├── Header │ │ └── index.js │ │ ├── PlatformSettings │ │ └── index.js │ │ └── index.js │ ├── routes.js │ └── services │ ├── auth-service.js │ ├── htttp.service.js │ └── interceptor.js └── node-api ├── .env.example ├── .gitignore ├── README.md ├── images ├── admin.jpg ├── creator.jpg └── member.jpg ├── package.json └── src ├── index.js ├── landing └── index.html ├── mongo ├── ReseedAction.js ├── clearDbs.js ├── index.js └── seedData.js ├── passport.js ├── routes ├── auth │ └── index.js ├── index.js ├── me │ └── index.js └── users │ └── index.js ├── schemas ├── passwordResets.schema.js └── user.schema.js └── services ├── auth └── index.js └── me └── index.js /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to `React Material Dashboard NodeJs` will be documented in this file. 4 | 5 | ## Version 1.0.0 6 | 7 | - Authentication: login, logout, forget password and reset password 8 | - Profile update 9 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Prerequisites 2 | 3 | Please answer the following questions for yourself before submitting an issue. 4 | 5 | - [ ] I am running the latest version 6 | - [ ] I checked the documentation and found no answer 7 | - [ ] I checked to make sure that this issue has not already been filed 8 | - [ ] I'm reporting the issue to the correct repository (for multi-repository projects) 9 | 10 | # Expected Behavior 11 | 12 | Please describe the behavior you are expecting 13 | 14 | # Current Behavior 15 | 16 | What is the current behavior? 17 | 18 | # Failure Information (for bugs) 19 | 20 | Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template. 21 | 22 | ## Steps to Reproduce 23 | 24 | Please provide detailed steps for reproducing the issue. 25 | 26 | 1. step 1 27 | 2. step 2 28 | 3. you get it... 29 | 30 | ## Context 31 | 32 | Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions. 33 | 34 | * Device: 35 | * Operating System: 36 | * Browser and Version: 37 | 38 | ## Failure Logs 39 | 40 | Please include any relevant log snippets or files here. 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Creative Tim 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /material-react-app/.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=https://node-json-api-free.creative-tim.com/ 2 | 3 | REACT_APP_URL=https://material-dashboard-react-nodejs.creative-tim.com 4 | 5 | REACT_APP_IS_DEMO= 6 | -------------------------------------------------------------------------------- /material-react-app/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /material-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 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 | -------------------------------------------------------------------------------- /material-react-app/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["public/src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /material-react-app/public/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 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 | -------------------------------------------------------------------------------- /material-react-app/public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/apple-icon.png -------------------------------------------------------------------------------- /material-react-app/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/favicon.png -------------------------------------------------------------------------------- /material-react-app/public/images/dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/dashboard.png -------------------------------------------------------------------------------- /material-react-app/public/images/forgot-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/forgot-password.png -------------------------------------------------------------------------------- /material-react-app/public/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/login.png -------------------------------------------------------------------------------- /material-react-app/public/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/profile.png -------------------------------------------------------------------------------- /material-react-app/public/images/register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/register.png -------------------------------------------------------------------------------- /material-react-app/public/images/reset-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/public/images/reset-password.png -------------------------------------------------------------------------------- /material-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Material Dashboard 2 React Node.js by Creative Tim & UPDIVISION 26 | 30 | 36 | 40 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /material-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Material Dashboard", 3 | "name": "Material Dashboard 2 React", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#1A73E8", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /material-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/apple-icon.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/bg-profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/bg-profile.jpeg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/bg-reset-cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/bg-reset-cover.jpeg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/bg-sign-in-basic.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/bg-sign-in-basic.jpeg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/bg-sign-up-cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/bg-sign-up-cover.jpeg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/bruce-mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/bruce-mars.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/favicon.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/home-decor-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/home-decor-1.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/home-decor-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/home-decor-2.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/home-decor-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/home-decor-3.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/home-decor-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/home-decor-4.jpeg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/icons/flags/AU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/icons/flags/AU.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/icons/flags/BR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/icons/flags/BR.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/icons/flags/DE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/icons/flags/DE.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/icons/flags/GB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/icons/flags/GB.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/icons/flags/US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/icons/flags/US.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/ivana-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/ivana-square.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/kal-visuals-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/kal-visuals-square.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/logo-ct-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/logo-ct-dark.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/logo-ct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/logo-ct.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/logos/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/logos/mastercard.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/logos/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/logos/visa.png -------------------------------------------------------------------------------- /material-react-app/src/assets/images/marie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/marie.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/small-logos/devto.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | devto 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/small-logos/logo-asana.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/small-logos/logo-atlassian.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/small-logos/logo-jira.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/small-logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /material-react-app/src/assets/images/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/team-1.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/team-2.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/team-3.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/team-4.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/images/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/material-react-app/src/assets/images/team-5.jpg -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/base/borders.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | * The base border styles for the Material Dashboard 2 PRO React. 18 | * You can add new border width, border color or border radius using this file. 19 | * You can customized the borders value for the entire Material Dashboard 2 PRO React using thie file. 20 | */ 21 | 22 | // Material Dashboard 2 React Base Styles 23 | import colors from "assets/theme-dark/base/colors"; 24 | 25 | // Material Dashboard 2 React Helper Functions 26 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 27 | import rgba from "assets/theme-dark/functions/rgba"; 28 | 29 | const { white } = colors; 30 | 31 | const borders = { 32 | borderColor: rgba(white.main, 0.4), 33 | 34 | borderWidth: { 35 | 0: 0, 36 | 1: pxToRem(1), 37 | 2: pxToRem(2), 38 | 3: pxToRem(3), 39 | 4: pxToRem(4), 40 | 5: pxToRem(5), 41 | }, 42 | 43 | borderRadius: { 44 | xs: pxToRem(1.6), 45 | sm: pxToRem(2), 46 | md: pxToRem(6), 47 | lg: pxToRem(8), 48 | xl: pxToRem(12), 49 | xxl: pxToRem(16), 50 | section: pxToRem(160), 51 | }, 52 | }; 53 | 54 | export default borders; 55 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | * The base breakpoints for the Material Dashboard 2 PRO React. 18 | * You can add new breakpoints using this file. 19 | * You can customized the breakpoints for the entire Material Dashboard 2 PRO React using thie file. 20 | */ 21 | 22 | const breakpoints = { 23 | values: { 24 | xs: 0, 25 | sm: 576, 26 | md: 768, 27 | lg: 992, 28 | xl: 1200, 29 | xxl: 1400, 30 | }, 31 | }; 32 | 33 | export default breakpoints; 34 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/base/globals.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | const { info, dark } = colors; 20 | 21 | const globals = { 22 | html: { 23 | scrollBehavior: "smooth", 24 | }, 25 | "*, *::before, *::after": { 26 | margin: 0, 27 | padding: 0, 28 | }, 29 | "a, a:link, a:visited": { 30 | textDecoration: "none !important", 31 | }, 32 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 33 | color: `${dark.main} !important`, 34 | transition: "color 150ms ease-in !important", 35 | }, 36 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 37 | color: `${info.main} !important`, 38 | }, 39 | }; 40 | 41 | export default globals; 42 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/appBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const appBar = { 17 | defaultProps: { 18 | color: "transparent", 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | boxShadow: "none", 24 | }, 25 | }, 26 | }; 27 | 28 | export default appBar; 29 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | 19 | const { borderRadius } = borders; 20 | 21 | const avatar = { 22 | styleOverrides: { 23 | root: { 24 | transition: "all 200ms ease-in-out", 25 | }, 26 | 27 | rounded: { 28 | borderRadius: borderRadius.lg, 29 | }, 30 | 31 | img: { 32 | height: "auto", 33 | }, 34 | }, 35 | }; 36 | 37 | export default avatar; 38 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import typography from "assets/theme-dark/base/typography"; 19 | 20 | const { grey } = colors; 21 | const { size } = typography; 22 | 23 | const breadcrumbs = { 24 | styleOverrides: { 25 | li: { 26 | lineHeight: 0, 27 | }, 28 | 29 | separator: { 30 | fontSize: size.sm, 31 | color: grey[600], 32 | }, 33 | }, 34 | }; 35 | 36 | export default breadcrumbs; 37 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Button Styles 17 | import root from "assets/theme-dark/components/button/root"; 18 | import contained from "assets/theme-dark/components/button/contained"; 19 | import outlined from "assets/theme-dark/components/button/outlined"; 20 | import buttonText from "assets/theme-dark/components/button/text"; 21 | 22 | const button = { 23 | defaultProps: { 24 | disableRipple: false, 25 | }, 26 | styleOverrides: { 27 | root: { ...root }, 28 | contained: { ...contained.base }, 29 | containedSizeSmall: { ...contained.small }, 30 | containedSizeLarge: { ...contained.large }, 31 | containedPrimary: { ...contained.primary }, 32 | containedSecondary: { ...contained.secondary }, 33 | outlined: { ...outlined.base }, 34 | outlinedSizeSmall: { ...outlined.small }, 35 | outlinedSizeLarge: { ...outlined.large }, 36 | outlinedPrimary: { ...outlined.primary }, 37 | outlinedSecondary: { ...outlined.secondary }, 38 | text: { ...buttonText.base }, 39 | textSizeSmall: { ...buttonText.small }, 40 | textSizeLarge: { ...buttonText.large }, 41 | textPrimary: { ...buttonText.primary }, 42 | textSecondary: { ...buttonText.secondary }, 43 | }, 44 | }; 45 | 46 | export default button; 47 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/button/root.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import typography from "assets/theme-dark/base/typography"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | 20 | // Material Dashboard 2 React Helper Functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | 23 | const { fontWeightBold, size } = typography; 24 | const { borderRadius } = borders; 25 | 26 | const root = { 27 | display: "inline-flex", 28 | justifyContent: "center", 29 | alignItems: "center", 30 | fontSize: size.xs, 31 | fontWeight: fontWeightBold, 32 | borderRadius: borderRadius.lg, 33 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 34 | lineHeight: 1.4, 35 | textAlign: "center", 36 | textTransform: "uppercase", 37 | userSelect: "none", 38 | backgroundSize: "150% !important", 39 | backgroundPositionX: "25% !important", 40 | transition: "all 150ms ease-in", 41 | 42 | "&:disabled": { 43 | pointerEvent: "none", 44 | opacity: 0.65, 45 | }, 46 | 47 | "& .material-icons": { 48 | fontSize: pxToRem(15), 49 | marginTop: pxToRem(-2), 50 | }, 51 | }; 52 | 53 | export default root; 54 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const buttonBase = { 17 | defaultProps: { 18 | disableRipple: false, 19 | }, 20 | }; 21 | 22 | export default buttonBase; 23 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Helper Functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | const cardContent = { 20 | styleOverrides: { 21 | root: { 22 | marginTop: 0, 23 | marginBottom: 0, 24 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 25 | }, 26 | }, 27 | }; 28 | 29 | export default cardContent; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | 19 | // Material Dashboard 2 React Helper Functions 20 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | const cardMedia = { 25 | styleOverrides: { 26 | root: { 27 | borderRadius: borderRadius.xl, 28 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 29 | }, 30 | 31 | media: { 32 | width: "auto", 33 | }, 34 | }, 35 | }; 36 | 37 | export default cardMedia; 38 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | import boxShadows from "assets/theme-dark/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React Helper Function 22 | import rgba from "assets/theme-dark/functions/rgba"; 23 | 24 | const { black, background } = colors; 25 | const { borderWidth, borderRadius } = borders; 26 | const { md } = boxShadows; 27 | 28 | const card = { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | flexDirection: "column", 33 | position: "relative", 34 | minWidth: 0, 35 | wordWrap: "break-word", 36 | backgroundImage: "none", 37 | backgroundColor: background.card, 38 | backgroundClip: "border-box", 39 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 40 | borderRadius: borderRadius.xl, 41 | boxShadow: md, 42 | overflow: "visible", 43 | }, 44 | }, 45 | }; 46 | 47 | export default card; 48 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | const dialogActions = { 20 | styleOverrides: { 21 | root: { 22 | padding: pxToRem(16), 23 | }, 24 | }, 25 | }; 26 | 27 | export default dialogActions; 28 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme-dark/base/typography"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | import colors from "assets/theme-dark/base/colors"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 23 | import rgba from "assets/theme-dark/functions/rgba"; 24 | 25 | const { size } = typography; 26 | const { white } = colors; 27 | const { borderWidth, borderColor } = borders; 28 | 29 | const dialogContent = { 30 | styleOverrides: { 31 | root: { 32 | padding: pxToRem(16), 33 | fontSize: size.md, 34 | color: rgba(white.main, 0.8), 35 | }, 36 | 37 | dividers: { 38 | borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, 39 | borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, 40 | }, 41 | }, 42 | }; 43 | 44 | export default dialogContent; 45 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme-dark/base/typography"; 18 | import colors from "assets/theme-dark/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import rgba from "assets/theme-dark/functions/rgba"; 22 | 23 | const { size } = typography; 24 | const { white } = colors; 25 | 26 | const dialogContentText = { 27 | styleOverrides: { 28 | root: { 29 | fontSize: size.md, 30 | color: rgba(white.main, 0.8), 31 | }, 32 | }, 33 | }; 34 | 35 | export default dialogContentText; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme-dark/base/typography"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 21 | 22 | const { size } = typography; 23 | 24 | const dialogTitle = { 25 | styleOverrides: { 26 | root: { 27 | padding: pxToRem(16), 28 | fontSize: size.xl, 29 | }, 30 | }, 31 | }; 32 | 33 | export default dialogTitle; 34 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | import boxShadows from "assets/theme-dark/base/boxShadows"; 19 | 20 | const { borderRadius } = borders; 21 | const { xxl } = boxShadows; 22 | 23 | const dialog = { 24 | styleOverrides: { 25 | paper: { 26 | borderRadius: borderRadius.lg, 27 | boxShadow: xxl, 28 | }, 29 | 30 | paperFullScreen: { 31 | borderRadius: 0, 32 | }, 33 | }, 34 | }; 35 | 36 | export default dialog; 37 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import typography from "assets/theme-dark/base/typography"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | 23 | const { white } = colors; 24 | const { size, fontWeightBold } = typography; 25 | 26 | const formControlLabel = { 27 | styleOverrides: { 28 | root: { 29 | display: "block", 30 | minHeight: pxToRem(24), 31 | marginBottom: pxToRem(2), 32 | }, 33 | 34 | label: { 35 | display: "inline-block", 36 | fontSize: size.sm, 37 | fontWeight: fontWeightBold, 38 | color: white.main, 39 | lineHeight: 1, 40 | transform: `translateY(${pxToRem(1)})`, 41 | marginLeft: pxToRem(4), 42 | 43 | "&.Mui-disabled": { 44 | color: white.main, 45 | }, 46 | }, 47 | }, 48 | }; 49 | 50 | export default formControlLabel; 51 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | const { text } = colors; 20 | 21 | const formLabel = { 22 | styleOverrides: { 23 | root: { 24 | color: text.main, 25 | }, 26 | }, 27 | }; 28 | 29 | export default formLabel; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import typography from "assets/theme-dark/base/typography"; 19 | import borders from "assets/theme-dark/base/borders"; 20 | 21 | // Material Dashboard 2 React Helper Functions 22 | import rgba from "assets/theme-dark/functions/rgba"; 23 | 24 | const { info, inputBorderColor, dark, grey, white } = colors; 25 | const { size } = typography; 26 | const { borderWidth } = borders; 27 | 28 | const input = { 29 | styleOverrides: { 30 | root: { 31 | fontSize: size.sm, 32 | color: dark.main, 33 | 34 | "&:hover:not(.Mui-disabled):before": { 35 | borderBottom: `${borderWidth[1]} solid ${rgba(inputBorderColor, 0.6)}`, 36 | }, 37 | 38 | "&:before": { 39 | borderColor: rgba(inputBorderColor, 0.6), 40 | }, 41 | 42 | "&:after": { 43 | borderColor: info.main, 44 | }, 45 | 46 | input: { 47 | color: white.main, 48 | 49 | "&::-webkit-input-placeholder": { 50 | color: grey[100], 51 | }, 52 | }, 53 | }, 54 | }, 55 | }; 56 | 57 | export default input; 58 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import typography from "assets/theme-dark/base/typography"; 19 | 20 | const { text, info } = colors; 21 | const { size } = typography; 22 | 23 | const inputLabel = { 24 | styleOverrides: { 25 | root: { 26 | fontSize: size.sm, 27 | color: text.main, 28 | lineHeight: 0.9, 29 | 30 | "&.Mui-focused": { 31 | color: info.main, 32 | }, 33 | 34 | "&.MuiInputLabel-shrink": { 35 | lineHeight: 1.5, 36 | fontSize: size.md, 37 | 38 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 39 | fontSize: "0.85em", 40 | }, 41 | }, 42 | }, 43 | 44 | sizeSmall: { 45 | fontSize: size.xs, 46 | lineHeight: 1.625, 47 | 48 | "&.MuiInputLabel-shrink": { 49 | lineHeight: 1.6, 50 | fontSize: size.sm, 51 | 52 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 53 | fontSize: "0.72em", 54 | }, 55 | }, 56 | }, 57 | }, 58 | }; 59 | 60 | export default inputLabel; 61 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/select.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 21 | 22 | const { transparent } = colors; 23 | 24 | const select = { 25 | styleOverrides: { 26 | select: { 27 | display: "grid", 28 | alignItems: "center", 29 | padding: `0 ${pxToRem(12)} !important`, 30 | 31 | "& .Mui-selected": { 32 | backgroundColor: transparent.main, 33 | }, 34 | }, 35 | 36 | selectMenu: { 37 | background: "none", 38 | height: "none", 39 | minHeight: "none", 40 | overflow: "unset", 41 | }, 42 | 43 | icon: { 44 | display: "none", 45 | }, 46 | }, 47 | }; 48 | 49 | export default select; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/form/textField.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | const textField = { 22 | styleOverrides: { 23 | root: { 24 | backgroundColor: transparent.main, 25 | }, 26 | }, 27 | }; 28 | 29 | export default textField; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | const icon = { 20 | defaultProps: { 21 | baseClassName: "material-icons-round", 22 | fontSize: "inherit", 23 | }, 24 | 25 | styleOverrides: { 26 | fontSizeInherit: { 27 | fontSize: "inherit !important", 28 | }, 29 | 30 | fontSizeSmall: { 31 | fontSize: `${pxToRem(20)} !important`, 32 | }, 33 | 34 | fontSizeLarge: { 35 | fontSize: `${pxToRem(36)} !important`, 36 | }, 37 | }, 38 | }; 39 | 40 | export default icon; 41 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/iconButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | const iconButton = { 22 | styleOverrides: { 23 | root: { 24 | "&:hover": { 25 | backgroundColor: transparent.main, 26 | }, 27 | }, 28 | }, 29 | }; 30 | 31 | export default iconButton; 32 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | import colors from "assets/theme-dark/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | 23 | const { borderRadius } = borders; 24 | const { light } = colors; 25 | 26 | const linearProgress = { 27 | styleOverrides: { 28 | root: { 29 | height: pxToRem(6), 30 | borderRadius: borderRadius.md, 31 | overflow: "visible", 32 | position: "relative", 33 | }, 34 | 35 | colorPrimary: { 36 | backgroundColor: light.main, 37 | }, 38 | 39 | colorSecondary: { 40 | backgroundColor: light.main, 41 | }, 42 | 43 | bar: { 44 | height: pxToRem(6), 45 | borderRadius: borderRadius.sm, 46 | position: "absolute", 47 | transform: `translate(0, 0) !important`, 48 | transition: "width 0.6s ease !important", 49 | }, 50 | }, 51 | }; 52 | 53 | export default linearProgress; 54 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const link = { 17 | defaultProps: { 18 | underline: "none", 19 | color: "inherit", 20 | }, 21 | }; 22 | 23 | export default link; 24 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/list/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const list = { 17 | styleOverrides: { 18 | padding: { 19 | paddingTop: 0, 20 | paddingBottom: 0, 21 | }, 22 | }, 23 | }; 24 | 25 | export default list; 26 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const listItem = { 17 | defaultProps: { 18 | disableGutters: true, 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | paddingTop: 0, 24 | paddingBottom: 0, 25 | }, 26 | }, 27 | }; 28 | 29 | export default listItem; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const listItemText = { 17 | styleOverrides: { 18 | root: { 19 | marginTop: 0, 20 | marginBottom: 0, 21 | }, 22 | }, 23 | }; 24 | 25 | export default listItemText; 26 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/menu/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import boxShadows from "assets/theme-dark/base/boxShadows"; 18 | import typography from "assets/theme-dark/base/typography"; 19 | import colors from "assets/theme-dark/base/colors"; 20 | import borders from "assets/theme-dark/base/borders"; 21 | 22 | // Material Dashboard 2 React helper functions 23 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 24 | 25 | const { md } = boxShadows; 26 | const { size } = typography; 27 | const { text, background } = colors; 28 | const { borderRadius } = borders; 29 | 30 | const menu = { 31 | defaultProps: { 32 | disableAutoFocusItem: true, 33 | }, 34 | 35 | styleOverrides: { 36 | paper: { 37 | minWidth: pxToRem(160), 38 | boxShadow: md, 39 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 40 | fontSize: size.sm, 41 | color: text.main, 42 | textAlign: "left", 43 | backgroundColor: `${background.card} !important`, 44 | borderRadius: borderRadius.md, 45 | }, 46 | }, 47 | }; 48 | 49 | export default menu; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | import typography from "assets/theme-dark/base/typography"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 23 | import rgba from "assets/theme-dark/functions/rgba"; 24 | 25 | const { dark, white } = colors; 26 | const { borderRadius } = borders; 27 | const { size } = typography; 28 | 29 | const menuItem = { 30 | styleOverrides: { 31 | root: { 32 | minWidth: pxToRem(160), 33 | minHeight: "unset", 34 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 35 | borderRadius: borderRadius.md, 36 | fontSize: size.sm, 37 | color: rgba(white.main, 0.8), 38 | transition: "background-color 300ms ease, color 300ms ease", 39 | 40 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 41 | backgroundColor: dark.main, 42 | color: white.main, 43 | }, 44 | }, 45 | }, 46 | }; 47 | 48 | export default menuItem; 49 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | // Material Dashboard 2 React base styles 20 | import colors from "assets/theme-dark/base/colors"; 21 | import boxShadows from "assets/theme-dark/base/boxShadows"; 22 | import borders from "assets/theme-dark/base/borders"; 23 | 24 | const { transparent } = colors; 25 | const { md } = boxShadows; 26 | const { borderRadius } = borders; 27 | 28 | const popover = { 29 | styleOverrides: { 30 | paper: { 31 | backgroundColor: transparent.main, 32 | boxShadow: md, 33 | padding: pxToRem(8), 34 | borderRadius: borderRadius.md, 35 | }, 36 | }, 37 | }; 38 | 39 | export default popover; 40 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/sidenav.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | 23 | const { background } = colors; 24 | const { borderRadius } = borders; 25 | 26 | const sidenav = { 27 | styleOverrides: { 28 | root: { 29 | width: pxToRem(250), 30 | whiteSpace: "nowrap", 31 | border: "none", 32 | }, 33 | 34 | paper: { 35 | width: pxToRem(250), 36 | backgroundColor: background.sidenav, 37 | height: `calc(100vh - ${pxToRem(32)})`, 38 | margin: pxToRem(16), 39 | borderRadius: borderRadius.xl, 40 | border: "none", 41 | }, 42 | 43 | paperAnchorDockedLeft: { 44 | borderRight: "none", 45 | }, 46 | }, 47 | }; 48 | 49 | export default sidenav; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | import boxShadows from "assets/theme-dark/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 23 | import linearGradient from "assets/theme-dark/functions/linearGradient"; 24 | 25 | const { transparent, gradients } = colors; 26 | const { borderRadius } = borders; 27 | const { colored } = boxShadows; 28 | 29 | const stepper = { 30 | styleOverrides: { 31 | root: { 32 | background: linearGradient(gradients.info.main, gradients.info.state), 33 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 34 | borderRadius: borderRadius.lg, 35 | boxShadow: colored.info, 36 | 37 | "&.MuiPaper-root": { 38 | backgroundColor: transparent.main, 39 | }, 40 | }, 41 | }, 42 | }; 43 | 44 | export default stepper; 45 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | const step = { 20 | styleOverrides: { 21 | root: { 22 | padding: `0 ${pxToRem(6)}`, 23 | }, 24 | }, 25 | }; 26 | 27 | export default step; 28 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | import colors from "assets/theme-dark/base/colors"; 19 | 20 | const { white } = colors; 21 | const { borderWidth } = borders; 22 | 23 | const stepConnector = { 24 | styleOverrides: { 25 | root: { 26 | color: "#9fc9ff", 27 | transition: "all 200ms linear", 28 | 29 | "&.Mui-active": { 30 | color: white.main, 31 | }, 32 | 33 | "&.Mui-completed": { 34 | color: white.main, 35 | }, 36 | }, 37 | 38 | alternativeLabel: { 39 | top: "14%", 40 | left: "-50%", 41 | right: "50%", 42 | }, 43 | 44 | line: { 45 | borderWidth: `${borderWidth[2]} !important`, 46 | borderColor: "currentColor", 47 | opacity: 0.5, 48 | }, 49 | }, 50 | }; 51 | 52 | export default stepConnector; 53 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 21 | import boxShadow from "assets/theme-dark/functions/boxShadow"; 22 | 23 | const { white } = colors; 24 | 25 | const stepIcon = { 26 | styleOverrides: { 27 | root: { 28 | background: "#9fc9ff", 29 | fill: "#9fc9ff", 30 | stroke: "#9fc9ff", 31 | strokeWidth: pxToRem(10), 32 | width: pxToRem(13), 33 | height: pxToRem(13), 34 | borderRadius: "50%", 35 | zIndex: 99, 36 | transition: "all 200ms linear", 37 | 38 | "&.Mui-active": { 39 | background: white.main, 40 | fill: white.main, 41 | stroke: white.main, 42 | borderColor: white.main, 43 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 44 | }, 45 | 46 | "&.Mui-completed": { 47 | background: white.main, 48 | fill: white.main, 49 | stroke: white.main, 50 | borderColor: white.main, 51 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 52 | }, 53 | }, 54 | }, 55 | }; 56 | 57 | export default stepIcon; 58 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme-dark/base/typography"; 18 | import colors from "assets/theme-dark/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | import rgba from "assets/theme-dark/functions/rgba"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { white } = colors; 26 | 27 | const stepLabel = { 28 | styleOverrides: { 29 | label: { 30 | marginTop: `${pxToRem(8)} !important`, 31 | fontWeight: fontWeightRegular, 32 | fontSize: size.xs, 33 | color: "#9fc9ff", 34 | textTransform: "uppercase", 35 | 36 | "&.Mui-active": { 37 | fontWeight: `${fontWeightRegular} !important`, 38 | color: `${rgba(white.main, 0.8)} !important`, 39 | }, 40 | 41 | "&.Mui-completed": { 42 | fontWeight: `${fontWeightRegular} !important`, 43 | color: `${rgba(white.main, 0.8)} !important`, 44 | }, 45 | }, 46 | }, 47 | }; 48 | 49 | export default stepLabel; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 18 | 19 | const svgIcon = { 20 | defaultProps: { 21 | fontSize: "inherit", 22 | }, 23 | 24 | styleOverrides: { 25 | fontSizeInherit: { 26 | fontSize: "inherit !important", 27 | }, 28 | 29 | fontSizeSmall: { 30 | fontSize: `${pxToRem(20)} !important`, 31 | }, 32 | 33 | fontSizeLarge: { 34 | fontSize: `${pxToRem(36)} !important`, 35 | }, 36 | }, 37 | }; 38 | 39 | export default svgIcon; 40 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | import colors from "assets/theme-dark/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 22 | 23 | const { borderWidth } = borders; 24 | const { light } = colors; 25 | 26 | const tableCell = { 27 | styleOverrides: { 28 | root: { 29 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 30 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 31 | }, 32 | }, 33 | }; 34 | 35 | export default tableCell; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import boxShadows from "assets/theme-dark/base/boxShadows"; 19 | import borders from "assets/theme-dark/base/borders"; 20 | 21 | const { background } = colors; 22 | const { md } = boxShadows; 23 | const { borderRadius } = borders; 24 | 25 | const tableContainer = { 26 | styleOverrides: { 27 | root: { 28 | backgroundColor: background.card, 29 | boxShadow: md, 30 | borderRadius: borderRadius.xl, 31 | }, 32 | }, 33 | }; 34 | 35 | export default tableContainer; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme-dark/base/borders"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | const tableHead = { 25 | styleOverrides: { 26 | root: { 27 | display: "block", 28 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 29 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 30 | }, 31 | }, 32 | }; 33 | 34 | export default tableHead; 35 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme-dark/base/colors"; 18 | import borders from "assets/theme-dark/base/borders"; 19 | import boxShadows from "assets/theme-dark/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 23 | 24 | const { background } = colors; 25 | const { borderRadius } = borders; 26 | const { md } = boxShadows; 27 | 28 | const tabs = { 29 | styleOverrides: { 30 | root: { 31 | position: "relative", 32 | backgroundColor: background.card, 33 | borderRadius: borderRadius.xl, 34 | minHeight: "unset", 35 | padding: pxToRem(4), 36 | }, 37 | 38 | flexContainer: { 39 | height: "100%", 40 | position: "relative", 41 | zIndex: 10, 42 | }, 43 | 44 | fixed: { 45 | overflow: "unset !important", 46 | overflowX: "unset !important", 47 | }, 48 | 49 | vertical: { 50 | "& .MuiTabs-indicator": { 51 | width: "100%", 52 | }, 53 | }, 54 | 55 | indicator: { 56 | height: "100%", 57 | borderRadius: borderRadius.lg, 58 | backgroundColor: background.default, 59 | boxShadow: md, 60 | transition: "all 500ms ease", 61 | }, 62 | }, 63 | }; 64 | 65 | export default tabs; 66 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/components/tooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Fade from "@mui/material/Fade"; 18 | 19 | // Material Dashboard 2 React base styles 20 | import colors from "assets/theme-dark/base/colors"; 21 | import typography from "assets/theme-dark/base/typography"; 22 | import borders from "assets/theme-dark/base/borders"; 23 | 24 | // Material Dashboard 2 React helper functions 25 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 26 | 27 | const { black, white } = colors; 28 | const { size, fontWeightRegular } = typography; 29 | const { borderRadius } = borders; 30 | 31 | const tooltip = { 32 | defaultProps: { 33 | arrow: true, 34 | TransitionComponent: Fade, 35 | }, 36 | 37 | styleOverrides: { 38 | tooltip: { 39 | maxWidth: pxToRem(200), 40 | backgroundColor: black.main, 41 | color: white.main, 42 | fontSize: size.sm, 43 | fontWeight: fontWeightRegular, 44 | textAlign: "center", 45 | borderRadius: borderRadius.md, 46 | opacity: 0.7, 47 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 48 | }, 49 | 50 | arrow: { 51 | color: black.main, 52 | }, 53 | }, 54 | }; 55 | 56 | export default tooltip; 57 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The boxShadow() function helps you to create a box shadow for an element 18 | */ 19 | 20 | // Material Dashboard 2 React helper functions 21 | import rgba from "assets/theme-dark/functions/rgba"; 22 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 23 | 24 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 25 | const [x, y] = offset; 26 | const [blur, spread] = radius; 27 | 28 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 29 | color, 30 | opacity 31 | )}`; 32 | } 33 | 34 | export default boxShadow; 35 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The gradientChartLine() function helps you to create a gradient color for the chart line 18 | */ 19 | 20 | // Material Dashboard 2 React helper functions 21 | import rgba from "assets/theme-dark/functions/rgba"; 22 | 23 | function gradientChartLine(chart, color, opacity = 0.2) { 24 | const ctx = chart.getContext("2d"); 25 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 26 | const primaryColor = rgba(color, opacity).toString(); 27 | 28 | gradientStroke.addColorStop(1, primaryColor); 29 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 30 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 31 | 32 | return gradientStroke; 33 | } 34 | 35 | export default gradientChartLine; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The hexToRgb() function helps you to change the hex color code to rgb 18 | using chroma-js library. 19 | */ 20 | 21 | // chroma-js is a library for all kinds of color conversions and color scales. 22 | import chroma from "chroma-js"; 23 | 24 | function hexToRgb(color) { 25 | return chroma(color).rgb().join(", "); 26 | } 27 | 28 | export default hexToRgb; 29 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The linearGradient() function helps you to create a linear gradient color background 18 | */ 19 | 20 | function linearGradient(color, colorState, angle = 195) { 21 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 22 | } 23 | 24 | export default linearGradient; 25 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The pxToRem() function helps you to convert a px unit into a rem unit, 18 | */ 19 | 20 | function pxToRem(number, baseNumber = 16) { 21 | return `${number / baseNumber}rem`; 22 | } 23 | 24 | export default pxToRem; 25 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme-dark/functions/rgba.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 18 | to convert the hex code into rgb for using it inside the rgba color format. 19 | */ 20 | 21 | // Material Dashboard 2 React helper functions 22 | import hexToRgb from "assets/theme-dark/functions/hexToRgb"; 23 | 24 | function rgba(color, opacity) { 25 | return `rgba(${hexToRgb(color)}, ${opacity})`; 26 | } 27 | 28 | export default rgba; 29 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | * The base border styles for the Material Dashboard 2 PRO React. 18 | * You can add new border width, border color or border radius using this file. 19 | * You can customized the borders value for the entire Material Dashboard 2 PRO React using thie file. 20 | */ 21 | 22 | // Material Dashboard 2 React Base Styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | // Material Dashboard 2 React Helper Functions 26 | import pxToRem from "assets/theme/functions/pxToRem"; 27 | 28 | const { grey } = colors; 29 | 30 | const borders = { 31 | borderColor: grey[300], 32 | 33 | borderWidth: { 34 | 0: 0, 35 | 1: pxToRem(1), 36 | 2: pxToRem(2), 37 | 3: pxToRem(3), 38 | 4: pxToRem(4), 39 | 5: pxToRem(5), 40 | }, 41 | 42 | borderRadius: { 43 | xs: pxToRem(1.6), 44 | sm: pxToRem(2), 45 | md: pxToRem(6), 46 | lg: pxToRem(8), 47 | xl: pxToRem(12), 48 | xxl: pxToRem(16), 49 | section: pxToRem(160), 50 | }, 51 | }; 52 | 53 | export default borders; 54 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | * The base breakpoints for the Material Dashboard 2 PRO React. 18 | * You can add new breakpoints using this file. 19 | * You can customized the breakpoints for the entire Material Dashboard 2 PRO React using thie file. 20 | */ 21 | 22 | const breakpoints = { 23 | values: { 24 | xs: 0, 25 | sm: 576, 26 | md: 768, 27 | lg: 992, 28 | xl: 1200, 29 | xxl: 1400, 30 | }, 31 | }; 32 | 33 | export default breakpoints; 34 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { info, dark } = colors; 20 | 21 | const globals = { 22 | html: { 23 | scrollBehavior: "smooth", 24 | overflowX: "hidden", 25 | }, 26 | "*, *::before, *::after": { 27 | margin: 0, 28 | padding: 0, 29 | }, 30 | "a, a:link, a:visited": { 31 | textDecoration: "none !important", 32 | }, 33 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 34 | color: `${dark.main} !important`, 35 | transition: "color 150ms ease-in !important", 36 | }, 37 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 38 | color: `${info.main} !important`, 39 | }, 40 | }; 41 | 42 | export default globals; 43 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const appBar = { 17 | defaultProps: { 18 | color: "transparent", 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | boxShadow: "none", 24 | }, 25 | }, 26 | }; 27 | 28 | export default appBar; 29 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | const { borderRadius } = borders; 20 | 21 | const avatar = { 22 | styleOverrides: { 23 | root: { 24 | transition: "all 200ms ease-in-out", 25 | }, 26 | 27 | rounded: { 28 | borderRadius: borderRadius.lg, 29 | }, 30 | 31 | img: { 32 | height: "auto", 33 | }, 34 | }, 35 | }; 36 | 37 | export default avatar; 38 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { grey } = colors; 21 | const { size } = typography; 22 | 23 | const breadcrumbs = { 24 | styleOverrides: { 25 | li: { 26 | lineHeight: 0, 27 | }, 28 | 29 | separator: { 30 | fontSize: size.sm, 31 | color: grey[600], 32 | }, 33 | }, 34 | }; 35 | 36 | export default breadcrumbs; 37 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Button Styles 17 | import root from "assets/theme/components/button/root"; 18 | import contained from "assets/theme/components/button/contained"; 19 | import outlined from "assets/theme/components/button/outlined"; 20 | import buttonText from "assets/theme/components/button/text"; 21 | 22 | const button = { 23 | defaultProps: { 24 | disableRipple: false, 25 | }, 26 | styleOverrides: { 27 | root: { ...root }, 28 | contained: { ...contained.base }, 29 | containedSizeSmall: { ...contained.small }, 30 | containedSizeLarge: { ...contained.large }, 31 | containedPrimary: { ...contained.primary }, 32 | containedSecondary: { ...contained.secondary }, 33 | outlined: { ...outlined.base }, 34 | outlinedSizeSmall: { ...outlined.small }, 35 | outlinedSizeLarge: { ...outlined.large }, 36 | outlinedPrimary: { ...outlined.primary }, 37 | outlinedSecondary: { ...outlined.secondary }, 38 | text: { ...buttonText.base }, 39 | textSizeSmall: { ...buttonText.small }, 40 | textSizeLarge: { ...buttonText.large }, 41 | textPrimary: { ...buttonText.primary }, 42 | textSecondary: { ...buttonText.secondary }, 43 | }, 44 | }; 45 | 46 | export default button; 47 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | 20 | // Material Dashboard 2 React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { fontWeightBold, size } = typography; 24 | const { borderRadius } = borders; 25 | 26 | const root = { 27 | display: "inline-flex", 28 | justifyContent: "center", 29 | alignItems: "center", 30 | fontSize: size.xs, 31 | fontWeight: fontWeightBold, 32 | borderRadius: borderRadius.lg, 33 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 34 | lineHeight: 1.4, 35 | textAlign: "center", 36 | textTransform: "uppercase", 37 | userSelect: "none", 38 | backgroundSize: "150% !important", 39 | backgroundPositionX: "25% !important", 40 | transition: "all 150ms ease-in", 41 | 42 | "&:disabled": { 43 | pointerEvent: "none", 44 | opacity: 0.65, 45 | }, 46 | 47 | "& .material-icons": { 48 | fontSize: pxToRem(15), 49 | marginTop: pxToRem(-2), 50 | }, 51 | }; 52 | 53 | export default root; 54 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const buttonBase = { 17 | defaultProps: { 18 | disableRipple: false, 19 | }, 20 | }; 21 | 22 | export default buttonBase; 23 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Helper Functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | const cardContent = { 20 | styleOverrides: { 21 | root: { 22 | marginTop: 0, 23 | marginBottom: 0, 24 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 25 | }, 26 | }, 27 | }; 28 | 29 | export default cardContent; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Dashboard 2 React Helper Functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | const cardMedia = { 25 | styleOverrides: { 26 | root: { 27 | borderRadius: borderRadius.xl, 28 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 29 | }, 30 | 31 | media: { 32 | width: "auto", 33 | }, 34 | }, 35 | }; 36 | 37 | export default cardMedia; 38 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React Helper Function 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { black, white } = colors; 25 | const { borderWidth, borderRadius } = borders; 26 | const { md } = boxShadows; 27 | 28 | const card = { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | flexDirection: "column", 33 | position: "relative", 34 | minWidth: 0, 35 | wordWrap: "break-word", 36 | backgroundColor: white.main, 37 | backgroundClip: "border-box", 38 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 39 | borderRadius: borderRadius.xl, 40 | boxShadow: md, 41 | overflow: "visible", 42 | }, 43 | }, 44 | }; 45 | 46 | export default card; 47 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | const dialogActions = { 20 | styleOverrides: { 21 | root: { 22 | padding: pxToRem(16), 23 | }, 24 | }, 25 | }; 26 | 27 | export default dialogActions; 28 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | import colors from "assets/theme/base/colors"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { size } = typography; 25 | const { text } = colors; 26 | const { borderWidth, borderColor } = borders; 27 | 28 | const dialogContent = { 29 | styleOverrides: { 30 | root: { 31 | padding: pxToRem(16), 32 | fontSize: size.md, 33 | color: text.main, 34 | }, 35 | 36 | dividers: { 37 | borderTop: `${borderWidth[1]} solid ${borderColor}`, 38 | borderBottom: `${borderWidth[1]} solid ${borderColor}`, 39 | }, 40 | }, 41 | }; 42 | 43 | export default dialogContent; 44 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | // import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { size } = typography; 24 | const { text } = colors; 25 | 26 | const dialogContentText = { 27 | styleOverrides: { 28 | root: { 29 | fontSize: size.md, 30 | color: text.main, 31 | }, 32 | }, 33 | }; 34 | 35 | export default dialogContentText; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { size } = typography; 23 | 24 | const dialogTitle = { 25 | styleOverrides: { 26 | root: { 27 | padding: pxToRem(16), 28 | fontSize: size.xl, 29 | }, 30 | }, 31 | }; 32 | 33 | export default dialogTitle; 34 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | 20 | const { borderRadius } = borders; 21 | const { xxl } = boxShadows; 22 | 23 | const dialog = { 24 | styleOverrides: { 25 | paper: { 26 | borderRadius: borderRadius.lg, 27 | boxShadow: xxl, 28 | }, 29 | 30 | paperFullScreen: { 31 | borderRadius: 0, 32 | }, 33 | }, 34 | }; 35 | 36 | export default dialog; 37 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/flatpickr.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import rgba from "assets/theme/functions/rgba"; 21 | 22 | const { info, white, gradients } = colors; 23 | 24 | const flatpickr = { 25 | ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": 26 | { 27 | background: rgba(info.main, 0.28), 28 | border: "none", 29 | }, 30 | 31 | ".flatpickr-day.today": { 32 | background: info.main, 33 | color: white.main, 34 | border: "none", 35 | 36 | "&:hover, &:focus": { 37 | background: `${info.focus} !important`, 38 | }, 39 | }, 40 | 41 | ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": 42 | { 43 | background: `${gradients.info.state} !important`, 44 | color: white.main, 45 | border: "none", 46 | }, 47 | 48 | ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": 49 | { 50 | color: `${info.main} !important`, 51 | fill: `${info.main} !important`, 52 | }, 53 | }; 54 | 55 | export default flatpickr; 56 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { dark } = colors; 24 | const { size, fontWeightBold } = typography; 25 | 26 | const formControlLabel = { 27 | styleOverrides: { 28 | root: { 29 | display: "block", 30 | minHeight: pxToRem(24), 31 | marginBottom: pxToRem(2), 32 | }, 33 | 34 | label: { 35 | display: "inline-block", 36 | fontSize: size.sm, 37 | fontWeight: fontWeightBold, 38 | color: dark.main, 39 | lineHeight: 1, 40 | transform: `translateY(${pxToRem(1)})`, 41 | marginLeft: pxToRem(4), 42 | 43 | "&.Mui-disabled": { 44 | color: dark.main, 45 | }, 46 | }, 47 | }, 48 | }; 49 | 50 | export default formControlLabel; 51 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { text } = colors; 20 | 21 | const formLabel = { 22 | styleOverrides: { 23 | root: { 24 | color: text.main, 25 | }, 26 | }, 27 | }; 28 | 29 | export default formLabel; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { info, inputBorderColor, dark } = colors; 22 | const { size } = typography; 23 | const { borderWidth } = borders; 24 | 25 | const input = { 26 | styleOverrides: { 27 | root: { 28 | fontSize: size.sm, 29 | color: dark.main, 30 | 31 | "&:hover:not(.Mui-disabled):before": { 32 | borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, 33 | }, 34 | 35 | "&:before": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&:after": { 40 | borderColor: info.main, 41 | }, 42 | }, 43 | }, 44 | }; 45 | 46 | export default input; 47 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { text, info } = colors; 21 | const { size } = typography; 22 | 23 | const inputLabel = { 24 | styleOverrides: { 25 | root: { 26 | fontSize: size.sm, 27 | color: text.main, 28 | lineHeight: 0.9, 29 | 30 | "&.Mui-focused": { 31 | color: info.main, 32 | }, 33 | 34 | "&.MuiInputLabel-shrink": { 35 | lineHeight: 1.5, 36 | fontSize: size.md, 37 | 38 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 39 | fontSize: "0.85em", 40 | }, 41 | }, 42 | }, 43 | 44 | sizeSmall: { 45 | fontSize: size.xs, 46 | lineHeight: 1.625, 47 | 48 | "&.MuiInputLabel-shrink": { 49 | lineHeight: 1.6, 50 | fontSize: size.sm, 51 | 52 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 53 | fontSize: "0.72em", 54 | }, 55 | }, 56 | }, 57 | }, 58 | }; 59 | 60 | export default inputLabel; 61 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/inputOutlined.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { inputBorderColor, info, grey, transparent } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | const inputOutlined = { 29 | styleOverrides: { 30 | root: { 31 | backgroundColor: transparent.main, 32 | fontSize: size.sm, 33 | borderRadius: borderRadius.md, 34 | 35 | "&:hover .MuiOutlinedInput-notchedOutline": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&.Mui-focused": { 40 | "& .MuiOutlinedInput-notchedOutline": { 41 | borderColor: info.main, 42 | }, 43 | }, 44 | }, 45 | 46 | notchedOutline: { 47 | borderColor: inputBorderColor, 48 | }, 49 | 50 | input: { 51 | color: grey[700], 52 | padding: pxToRem(12), 53 | backgroundColor: transparent.main, 54 | }, 55 | 56 | inputSizeSmall: { 57 | fontSize: size.xs, 58 | padding: pxToRem(10), 59 | }, 60 | 61 | multiline: { 62 | color: grey[700], 63 | padding: 0, 64 | }, 65 | }, 66 | }; 67 | 68 | export default inputOutlined; 69 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/select.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { transparent } = colors; 23 | 24 | const select = { 25 | styleOverrides: { 26 | select: { 27 | display: "grid", 28 | alignItems: "center", 29 | padding: `0 ${pxToRem(12)} !important`, 30 | 31 | "& .Mui-selected": { 32 | backgroundColor: transparent.main, 33 | }, 34 | }, 35 | 36 | selectMenu: { 37 | background: "none", 38 | height: "none", 39 | minHeight: "none", 40 | overflow: "unset", 41 | }, 42 | 43 | icon: { 44 | display: "none", 45 | }, 46 | }, 47 | }; 48 | 49 | export default select; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/form/textField.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | const textField = { 22 | styleOverrides: { 23 | root: { 24 | backgroundColor: transparent.main, 25 | }, 26 | }, 27 | }; 28 | 29 | export default textField; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | const icon = { 20 | defaultProps: { 21 | baseClassName: "material-icons-round", 22 | fontSize: "inherit", 23 | }, 24 | 25 | styleOverrides: { 26 | fontSizeInherit: { 27 | fontSize: "inherit !important", 28 | }, 29 | 30 | fontSizeSmall: { 31 | fontSize: `${pxToRem(20)} !important`, 32 | }, 33 | 34 | fontSizeLarge: { 35 | fontSize: `${pxToRem(36)} !important`, 36 | }, 37 | }, 38 | }; 39 | 40 | export default icon; 41 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | const iconButton = { 22 | styleOverrides: { 23 | root: { 24 | "&:hover": { 25 | backgroundColor: transparent.main, 26 | }, 27 | }, 28 | }, 29 | }; 30 | 31 | export default iconButton; 32 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { borderRadius } = borders; 24 | const { light } = colors; 25 | 26 | const linearProgress = { 27 | styleOverrides: { 28 | root: { 29 | height: pxToRem(6), 30 | borderRadius: borderRadius.md, 31 | overflow: "visible", 32 | position: "relative", 33 | }, 34 | 35 | colorPrimary: { 36 | backgroundColor: light.main, 37 | }, 38 | 39 | colorSecondary: { 40 | backgroundColor: light.main, 41 | }, 42 | 43 | bar: { 44 | height: pxToRem(6), 45 | borderRadius: borderRadius.sm, 46 | position: "absolute", 47 | transform: `translate(0, 0) !important`, 48 | transition: "width 0.6s ease !important", 49 | }, 50 | }, 51 | }; 52 | 53 | export default linearProgress; 54 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const link = { 17 | defaultProps: { 18 | underline: "none", 19 | color: "inherit", 20 | }, 21 | }; 22 | 23 | export default link; 24 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const list = { 17 | styleOverrides: { 18 | padding: { 19 | paddingTop: 0, 20 | paddingBottom: 0, 21 | }, 22 | }, 23 | }; 24 | 25 | export default list; 26 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const listItem = { 17 | defaultProps: { 18 | disableGutters: true, 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | paddingTop: 0, 24 | paddingBottom: 0, 25 | }, 26 | }, 27 | }; 28 | 29 | export default listItem; 30 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | const listItemText = { 17 | styleOverrides: { 18 | root: { 19 | marginTop: 0, 20 | marginBottom: 0, 21 | }, 22 | }, 23 | }; 24 | 25 | export default listItemText; 26 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import boxShadows from "assets/theme/base/boxShadows"; 18 | import typography from "assets/theme/base/typography"; 19 | import colors from "assets/theme/base/colors"; 20 | import borders from "assets/theme/base/borders"; 21 | 22 | // Material Dashboard 2 React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { lg } = boxShadows; 26 | const { size } = typography; 27 | const { text, white } = colors; 28 | const { borderRadius } = borders; 29 | 30 | const menu = { 31 | defaultProps: { 32 | disableAutoFocusItem: true, 33 | }, 34 | 35 | styleOverrides: { 36 | paper: { 37 | minWidth: pxToRem(160), 38 | boxShadow: lg, 39 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 40 | fontSize: size.sm, 41 | color: text.main, 42 | textAlign: "left", 43 | backgroundColor: `${white.main} !important`, 44 | borderRadius: borderRadius.md, 45 | }, 46 | }, 47 | }; 48 | 49 | export default menu; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { light, text, dark } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | const menuItem = { 29 | styleOverrides: { 30 | root: { 31 | minWidth: pxToRem(160), 32 | minHeight: "unset", 33 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 34 | borderRadius: borderRadius.md, 35 | fontSize: size.sm, 36 | color: text.main, 37 | transition: "background-color 300ms ease, color 300ms ease", 38 | 39 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 40 | backgroundColor: light.main, 41 | color: dark.main, 42 | }, 43 | }, 44 | }, 45 | }; 46 | 47 | export default menuItem; 48 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | // Material Dashboard 2 React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import boxShadows from "assets/theme/base/boxShadows"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | const { transparent } = colors; 25 | const { lg } = boxShadows; 26 | const { borderRadius } = borders; 27 | 28 | const popover = { 29 | styleOverrides: { 30 | paper: { 31 | backgroundColor: transparent.main, 32 | boxShadow: lg, 33 | padding: pxToRem(8), 34 | borderRadius: borderRadius.md, 35 | }, 36 | }, 37 | }; 38 | 39 | export default popover; 40 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/sidenav.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { white } = colors; 24 | const { borderRadius } = borders; 25 | 26 | const sidenav = { 27 | styleOverrides: { 28 | root: { 29 | width: pxToRem(250), 30 | whiteSpace: "nowrap", 31 | border: "none", 32 | }, 33 | 34 | paper: { 35 | width: pxToRem(250), 36 | backgroundColor: white.main, 37 | height: `calc(100vh - ${pxToRem(32)})`, 38 | margin: pxToRem(16), 39 | borderRadius: borderRadius.xl, 40 | border: "none", 41 | }, 42 | 43 | paperAnchorDockedLeft: { 44 | borderRight: "none", 45 | }, 46 | }, 47 | }; 48 | 49 | export default sidenav; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | import linearGradient from "assets/theme/functions/linearGradient"; 24 | 25 | const { transparent, gradients } = colors; 26 | const { borderRadius } = borders; 27 | const { colored } = boxShadows; 28 | 29 | const stepper = { 30 | styleOverrides: { 31 | root: { 32 | background: linearGradient(gradients.info.main, gradients.info.state), 33 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 34 | borderRadius: borderRadius.lg, 35 | boxShadow: colored.info, 36 | 37 | "&.MuiPaper-root": { 38 | backgroundColor: transparent.main, 39 | }, 40 | }, 41 | }, 42 | }; 43 | 44 | export default stepper; 45 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | const step = { 20 | styleOverrides: { 21 | root: { 22 | padding: `0 ${pxToRem(6)}`, 23 | }, 24 | }, 25 | }; 26 | 27 | export default step; 28 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | const { white } = colors; 21 | const { borderWidth } = borders; 22 | 23 | const stepConnector = { 24 | styleOverrides: { 25 | root: { 26 | color: "#9fc9ff", 27 | transition: "all 200ms linear", 28 | 29 | "&.Mui-active": { 30 | color: white.main, 31 | }, 32 | 33 | "&.Mui-completed": { 34 | color: white.main, 35 | }, 36 | }, 37 | 38 | alternativeLabel: { 39 | top: "14%", 40 | left: "-50%", 41 | right: "50%", 42 | }, 43 | 44 | line: { 45 | borderWidth: `${borderWidth[2]} !important`, 46 | borderColor: "currentColor", 47 | opacity: 0.5, 48 | }, 49 | }, 50 | }; 51 | 52 | export default stepConnector; 53 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | import boxShadow from "assets/theme/functions/boxShadow"; 22 | 23 | const { white } = colors; 24 | 25 | const stepIcon = { 26 | styleOverrides: { 27 | root: { 28 | background: "#9fc9ff", 29 | fill: "#9fc9ff", 30 | stroke: "#9fc9ff", 31 | strokeWidth: pxToRem(10), 32 | width: pxToRem(13), 33 | height: pxToRem(13), 34 | borderRadius: "50%", 35 | zIndex: 99, 36 | transition: "all 200ms linear", 37 | 38 | "&.Mui-active": { 39 | background: white.main, 40 | fill: white.main, 41 | stroke: white.main, 42 | borderColor: white.main, 43 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 44 | }, 45 | 46 | "&.Mui-completed": { 47 | background: white.main, 48 | fill: white.main, 49 | stroke: white.main, 50 | borderColor: white.main, 51 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 52 | }, 53 | }, 54 | }, 55 | }; 56 | 57 | export default stepIcon; 58 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { white } = colors; 26 | 27 | const stepLabel = { 28 | styleOverrides: { 29 | label: { 30 | marginTop: `${pxToRem(8)} !important`, 31 | fontWeight: fontWeightRegular, 32 | fontSize: size.xs, 33 | color: "#9fc9ff", 34 | textTransform: "uppercase", 35 | 36 | "&.Mui-active": { 37 | fontWeight: `${fontWeightRegular} !important`, 38 | color: `${rgba(white.main, 0.8)} !important`, 39 | }, 40 | 41 | "&.Mui-completed": { 42 | fontWeight: `${fontWeightRegular} !important`, 43 | color: `${rgba(white.main, 0.8)} !important`, 44 | }, 45 | }, 46 | }, 47 | }; 48 | 49 | export default stepLabel; 50 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | const svgIcon = { 20 | defaultProps: { 21 | fontSize: "inherit", 22 | }, 23 | 24 | styleOverrides: { 25 | fontSizeInherit: { 26 | fontSize: "inherit !important", 27 | }, 28 | 29 | fontSizeSmall: { 30 | fontSize: `${pxToRem(20)} !important`, 31 | }, 32 | 33 | fontSizeLarge: { 34 | fontSize: `${pxToRem(36)} !important`, 35 | }, 36 | }, 37 | }; 38 | 39 | export default svgIcon; 40 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Dashboard 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { borderWidth } = borders; 24 | const { light } = colors; 25 | 26 | const tableCell = { 27 | styleOverrides: { 28 | root: { 29 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 30 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 31 | }, 32 | }, 33 | }; 34 | 35 | export default tableCell; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { white } = colors; 22 | const { md } = boxShadows; 23 | const { borderRadius } = borders; 24 | 25 | const tableContainer = { 26 | styleOverrides: { 27 | root: { 28 | backgroundColor: white.main, 29 | boxShadow: md, 30 | borderRadius: borderRadius.xl, 31 | }, 32 | }, 33 | }; 34 | 35 | export default tableContainer; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Dashboard 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | const tableHead = { 25 | styleOverrides: { 26 | root: { 27 | display: "block", 28 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 29 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 30 | }, 31 | }, 32 | }; 33 | 34 | export default tableHead; 35 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // Material Dashboard 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Dashboard 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { grey, white } = colors; 25 | const { borderRadius } = borders; 26 | const { tabsBoxShadow } = boxShadows; 27 | 28 | const tabs = { 29 | styleOverrides: { 30 | root: { 31 | position: "relative", 32 | backgroundColor: grey[100], 33 | borderRadius: borderRadius.xl, 34 | minHeight: "unset", 35 | padding: pxToRem(4), 36 | }, 37 | 38 | flexContainer: { 39 | height: "100%", 40 | position: "relative", 41 | zIndex: 10, 42 | }, 43 | 44 | fixed: { 45 | overflow: "unset !important", 46 | overflowX: "unset !important", 47 | }, 48 | 49 | vertical: { 50 | "& .MuiTabs-indicator": { 51 | width: "100%", 52 | }, 53 | }, 54 | 55 | indicator: { 56 | height: "100%", 57 | borderRadius: borderRadius.lg, 58 | backgroundColor: white.main, 59 | boxShadow: tabsBoxShadow.indicator, 60 | transition: "all 500ms ease", 61 | }, 62 | }, 63 | }; 64 | 65 | export default tabs; 66 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Fade from "@mui/material/Fade"; 18 | 19 | // Material Dashboard 2 React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | // Material Dashboard 2 React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { black, light } = colors; 28 | const { size, fontWeightRegular } = typography; 29 | const { borderRadius } = borders; 30 | 31 | const tooltip = { 32 | defaultProps: { 33 | arrow: true, 34 | TransitionComponent: Fade, 35 | }, 36 | 37 | styleOverrides: { 38 | tooltip: { 39 | maxWidth: pxToRem(200), 40 | backgroundColor: black.main, 41 | color: light.main, 42 | fontSize: size.sm, 43 | fontWeight: fontWeightRegular, 44 | textAlign: "center", 45 | borderRadius: borderRadius.md, 46 | opacity: 0.7, 47 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 48 | }, 49 | 50 | arrow: { 51 | color: black.main, 52 | }, 53 | }, 54 | }; 55 | 56 | export default tooltip; 57 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The boxShadow() function helps you to create a box shadow for an element 18 | */ 19 | 20 | // Material Dashboard 2 React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 25 | const [x, y] = offset; 26 | const [blur, spread] = radius; 27 | 28 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 29 | color, 30 | opacity 31 | )}`; 32 | } 33 | 34 | export default boxShadow; 35 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The gradientChartLine() function helps you to create a gradient color for the chart line 18 | */ 19 | 20 | // Material Dashboard 2 React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | 23 | function gradientChartLine(chart, color, opacity = 0.2) { 24 | const ctx = chart.getContext("2d"); 25 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 26 | const primaryColor = rgba(color, opacity).toString(); 27 | 28 | gradientStroke.addColorStop(1, primaryColor); 29 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 30 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 31 | 32 | return gradientStroke; 33 | } 34 | 35 | export default gradientChartLine; 36 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The hexToRgb() function helps you to change the hex color code to rgb 18 | using chroma-js library. 19 | */ 20 | 21 | // chroma-js is a library for all kinds of color conversions and color scales. 22 | import chroma from "chroma-js"; 23 | 24 | function hexToRgb(color) { 25 | return chroma(color).rgb().join(", "); 26 | } 27 | 28 | export default hexToRgb; 29 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The linearGradient() function helps you to create a linear gradient color background 18 | */ 19 | 20 | function linearGradient(color, colorState, angle = 195) { 21 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 22 | } 23 | 24 | export default linearGradient; 25 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The pxToRem() function helps you to convert a px unit into a rem unit, 18 | */ 19 | 20 | function pxToRem(number, baseNumber = 16) { 21 | return `${number / baseNumber}rem`; 22 | } 23 | 24 | export default pxToRem; 25 | -------------------------------------------------------------------------------- /material-react-app/src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 18 | to convert the hex code into rgb for using it inside the rgba color format. 19 | */ 20 | 21 | // Material Dashboard 2 React helper functions 22 | import hexToRgb from "assets/theme/functions/hexToRgb"; 23 | 24 | function rgba(color, opacity) { 25 | return `rgba(${hexToRgb(color)}, ${opacity})`; 26 | } 27 | 28 | export default rgba; 29 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDAlert/MDAlertCloseIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import { styled } from "@mui/material/styles"; 18 | 19 | export default styled("span")(({ theme }) => { 20 | const { palette, typography, functions } = theme; 21 | 22 | const { white } = palette; 23 | const { size, fontWeightMedium } = typography; 24 | const { pxToRem } = functions; 25 | 26 | return { 27 | color: white.main, 28 | fontSize: size.xl, 29 | padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, 30 | marginLeft: pxToRem(40), 31 | fontWeight: fontWeightMedium, 32 | cursor: "pointer", 33 | lineHeight: 0, 34 | }; 35 | }); 36 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDAlert/MDAlertRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Box from "@mui/material/Box"; 18 | import { styled } from "@mui/material/styles"; 19 | 20 | export default styled(Box)(({ theme, ownerState }) => { 21 | const { palette, typography, borders, functions } = theme; 22 | const { color } = ownerState; 23 | 24 | const { white, gradients } = palette; 25 | const { fontSizeRegular, fontWeightMedium } = typography; 26 | const { borderRadius } = borders; 27 | const { pxToRem, linearGradient } = functions; 28 | 29 | // backgroundImage value 30 | const backgroundImageValue = gradients[color] 31 | ? linearGradient(gradients[color].main, gradients[color].state) 32 | : linearGradient(gradients.info.main, gradients.info.state); 33 | 34 | return { 35 | display: "flex", 36 | justifyContent: "space-between", 37 | alignItems: "center", 38 | minHeight: pxToRem(60), 39 | backgroundImage: backgroundImageValue, 40 | color: white.main, 41 | position: "relative", 42 | padding: pxToRem(16), 43 | marginBottom: pxToRem(16), 44 | borderRadius: borderRadius.md, 45 | fontSize: fontSizeRegular, 46 | fontWeight: fontWeightMedium, 47 | }; 48 | }); 49 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDAvatar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MDAvatar 22 | import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot"; 23 | 24 | const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( 25 | 26 | )); 27 | 28 | // Setting default values for the props of MDAvatar 29 | MDAvatar.defaultProps = { 30 | bgColor: "transparent", 31 | size: "md", 32 | shadow: "none", 33 | }; 34 | 35 | // Typechecking props for the MDAvatar 36 | MDAvatar.propTypes = { 37 | bgColor: PropTypes.oneOf([ 38 | "transparent", 39 | "primary", 40 | "secondary", 41 | "info", 42 | "success", 43 | "warning", 44 | "error", 45 | "light", 46 | "dark", 47 | ]), 48 | size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), 49 | shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), 50 | }; 51 | 52 | export default MDAvatar; 53 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDBox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MDBox 22 | import MDBoxRoot from "components/MDBox/MDBoxRoot"; 23 | 24 | const MDBox = forwardRef( 25 | ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( 26 | 31 | ) 32 | ); 33 | 34 | // Setting default values for the props of MDBox 35 | MDBox.defaultProps = { 36 | variant: "contained", 37 | bgColor: "transparent", 38 | color: "dark", 39 | opacity: 1, 40 | borderRadius: "none", 41 | shadow: "none", 42 | coloredShadow: "none", 43 | }; 44 | 45 | // Typechecking props for the MDBox 46 | MDBox.propTypes = { 47 | variant: PropTypes.oneOf(["contained", "gradient"]), 48 | bgColor: PropTypes.string, 49 | color: PropTypes.string, 50 | opacity: PropTypes.number, 51 | borderRadius: PropTypes.string, 52 | shadow: PropTypes.string, 53 | coloredShadow: PropTypes.oneOf([ 54 | "primary", 55 | "secondary", 56 | "info", 57 | "success", 58 | "warning", 59 | "error", 60 | "light", 61 | "dark", 62 | "none", 63 | ]), 64 | }; 65 | 66 | export default MDBox; 67 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDInput/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MDInput 22 | import MDInputRoot from "components/MDInput/MDInputRoot"; 23 | 24 | const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => ( 25 | 26 | )); 27 | 28 | // Setting default values for the props of MDInput 29 | MDInput.defaultProps = { 30 | error: false, 31 | success: false, 32 | disabled: false, 33 | }; 34 | 35 | // Typechecking props for the MDInput 36 | MDInput.propTypes = { 37 | error: PropTypes.bool, 38 | success: PropTypes.bool, 39 | disabled: PropTypes.bool, 40 | }; 41 | 42 | export default MDInput; 43 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDProgress/MDProgressRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import { styled } from "@mui/material/styles"; 18 | import LinearProgress from "@mui/material/LinearProgress"; 19 | 20 | export default styled(LinearProgress)(({ theme, ownerState }) => { 21 | const { palette, functions } = theme; 22 | const { color, value, variant } = ownerState; 23 | 24 | const { text, gradients } = palette; 25 | const { linearGradient } = functions; 26 | 27 | // background value 28 | let backgroundValue; 29 | 30 | if (variant === "gradient") { 31 | backgroundValue = gradients[color] 32 | ? linearGradient(gradients[color].main, gradients[color].state) 33 | : linearGradient(gradients.info.main, gradients.info.state); 34 | } else { 35 | backgroundValue = palette[color] ? palette[color].main : palette.info.main; 36 | } 37 | 38 | return { 39 | "& .MuiLinearProgress-bar": { 40 | background: backgroundValue, 41 | width: `${value}%`, 42 | color: text.main, 43 | }, 44 | }; 45 | }); 46 | -------------------------------------------------------------------------------- /material-react-app/src/components/MDSnackbar/MDSnackbarIconRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Icon from "@mui/material/Icon"; 18 | import { styled } from "@mui/material/styles"; 19 | 20 | export default styled(Icon)(({ theme, ownerState }) => { 21 | const { palette, functions, typography } = theme; 22 | const { color, bgWhite } = ownerState; 23 | 24 | const { white, transparent, gradients } = palette; 25 | const { pxToRem, linearGradient } = functions; 26 | const { size } = typography; 27 | 28 | // backgroundImage value 29 | let backgroundImageValue; 30 | 31 | if (bgWhite) { 32 | backgroundImageValue = gradients[color] 33 | ? linearGradient(gradients[color].main, gradients[color].state) 34 | : linearGradient(gradients.info.main, gradients.info.state); 35 | } else if (color === "light") { 36 | backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state); 37 | } 38 | 39 | return { 40 | backgroundImage: backgroundImageValue, 41 | WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main, 42 | WebkitBackgroundClip: "text", 43 | marginRight: pxToRem(8), 44 | fontSize: size.lg, 45 | transform: `translateY(${pxToRem(-2)})`, 46 | }; 47 | }); 48 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Charts/PolarChart/configs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | /* eslint-disable no-dupe-keys */ 17 | // Material Dashboard 2 React base styles 18 | import colors from "assets/theme/base/colors"; 19 | 20 | const { gradients, dark } = colors; 21 | 22 | function configs(labels, datasets) { 23 | const backgroundColors = []; 24 | 25 | if (datasets.backgroundColors) { 26 | datasets.backgroundColors.forEach((color) => 27 | gradients[color] 28 | ? backgroundColors.push(gradients[color].state) 29 | : backgroundColors.push(dark.main) 30 | ); 31 | } else { 32 | backgroundColors.push(dark.main); 33 | } 34 | 35 | return { 36 | data: { 37 | labels, 38 | datasets: [ 39 | { 40 | label: datasets.label, 41 | backgroundColor: backgroundColors, 42 | data: datasets.data, 43 | }, 44 | ], 45 | }, 46 | options: { 47 | plugins: { 48 | legend: { 49 | display: false, 50 | }, 51 | }, 52 | }, 53 | }; 54 | } 55 | 56 | export default configs; 57 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Charts/RadarChart/configs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | function configs(labels, datasets) { 17 | return { 18 | data: { 19 | labels, 20 | datasets: [...datasets], 21 | }, 22 | options: { 23 | plugins: { 24 | legend: { 25 | display: false, 26 | }, 27 | }, 28 | }, 29 | }; 30 | } 31 | 32 | export default configs; 33 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Configurator/ConfiguratorRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Drawer from "@mui/material/Drawer"; 18 | import { styled } from "@mui/material/styles"; 19 | 20 | export default styled(Drawer)(({ theme, ownerState }) => { 21 | const { boxShadows, functions, transitions } = theme; 22 | const { openConfigurator } = ownerState; 23 | 24 | const configuratorWidth = 360; 25 | const { lg } = boxShadows; 26 | const { pxToRem } = functions; 27 | 28 | // drawer styles when openConfigurator={true} 29 | const drawerOpenStyles = () => ({ 30 | width: configuratorWidth, 31 | left: "initial", 32 | right: 0, 33 | transition: transitions.create("right", { 34 | easing: transitions.easing.sharp, 35 | duration: transitions.duration.short, 36 | }), 37 | }); 38 | 39 | // drawer styles when openConfigurator={false} 40 | const drawerCloseStyles = () => ({ 41 | left: "initial", 42 | right: pxToRem(-350), 43 | transition: transitions.create("all", { 44 | easing: transitions.easing.sharp, 45 | duration: transitions.duration.short, 46 | }), 47 | }); 48 | 49 | return { 50 | "& .MuiDrawer-paper": { 51 | height: "100vh", 52 | margin: 0, 53 | padding: `0 ${pxToRem(10)}`, 54 | borderRadius: 0, 55 | boxShadow: lg, 56 | overflowY: "auto", 57 | ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), 58 | }, 59 | }; 60 | }); 61 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Items/NotificationItem/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props. 19 | import PropTypes from "prop-types"; 20 | 21 | // @mui material components 22 | import MenuItem from "@mui/material/MenuItem"; 23 | import Link from "@mui/material/Link"; 24 | 25 | // Material Dashboard 2 React components 26 | import MDBox from "components/MDBox"; 27 | import MDTypography from "components/MDTypography"; 28 | 29 | // custom styles for the NotificationItem 30 | import menuItem from "examples/Items/NotificationItem/styles"; 31 | 32 | const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => ( 33 | menuItem(theme)}> 34 | 35 | 36 | {icon} 37 | 38 | 39 | {title} 40 | 41 | 42 | 43 | )); 44 | 45 | // Typechecking props for the NotificationItem 46 | NotificationItem.propTypes = { 47 | icon: PropTypes.node.isRequired, 48 | title: PropTypes.string.isRequired, 49 | }; 50 | 51 | export default NotificationItem; 52 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Items/NotificationItem/styles.js: -------------------------------------------------------------------------------- 1 | function menuItem(theme) { 2 | const { palette, borders, transitions } = theme; 3 | 4 | const { secondary, light, dark } = palette; 5 | const { borderRadius } = borders; 6 | 7 | return { 8 | display: "flex", 9 | alignItems: "center", 10 | width: "100%", 11 | color: secondary.main, 12 | borderRadius: borderRadius.md, 13 | transition: transitions.create("background-color", { 14 | easing: transitions.easing.easeInOut, 15 | duration: transitions.duration.standard, 16 | }), 17 | 18 | "& *": { 19 | transition: "color 100ms linear", 20 | }, 21 | 22 | "&:not(:last-child)": { 23 | mb: 1, 24 | }, 25 | 26 | "&:hover": { 27 | backgroundColor: light.main, 28 | 29 | "& *": { 30 | color: dark.main, 31 | }, 32 | }, 33 | }; 34 | } 35 | 36 | export default menuItem; 37 | -------------------------------------------------------------------------------- /material-react-app/src/examples/LayoutContainers/PageLayout/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import { useEffect } from "react"; 17 | 18 | // react-router-dom components 19 | import { useLocation } from "react-router-dom"; 20 | 21 | // prop-types is a library for typechecking of props. 22 | import PropTypes from "prop-types"; 23 | 24 | // Material Dashboard 2 React components 25 | import MDBox from "components/MDBox"; 26 | 27 | // Material Dashboard 2 React context 28 | import { useMaterialUIController, setLayout } from "context"; 29 | 30 | function PageLayout({ background, children }) { 31 | const [, dispatch] = useMaterialUIController(); 32 | const { pathname } = useLocation(); 33 | 34 | useEffect(() => { 35 | setLayout(dispatch, "page"); 36 | }, [pathname]); 37 | 38 | return ( 39 | 46 | {children} 47 | 48 | ); 49 | } 50 | 51 | // Setting default values for the props for PageLayout 52 | PageLayout.defaultProps = { 53 | background: "default", 54 | }; 55 | 56 | // Typechecking props for the PageLayout 57 | PageLayout.propTypes = { 58 | background: PropTypes.oneOf(["white", "light", "default"]), 59 | children: PropTypes.node.isRequired, 60 | }; 61 | 62 | export default PageLayout; 63 | -------------------------------------------------------------------------------- /material-react-app/src/examples/ProtectedRoute/index.js: -------------------------------------------------------------------------------- 1 | import { Navigate } from "react-router-dom"; 2 | 3 | const ProtectedRoute = ({ isAuthenticated, redirectPath = "/auth/login", children }) => { 4 | 5 | if (!isAuthenticated) { 6 | return ; 7 | } 8 | 9 | return children; 10 | }; 11 | 12 | export default ProtectedRoute; 13 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Sidenav/styles/sidenav.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | export default function sidenavLogoLabel(theme, ownerState) { 16 | const { functions, transitions, typography, breakpoints } = theme; 17 | const { miniSidenav } = ownerState; 18 | 19 | const { pxToRem } = functions; 20 | const { fontWeightMedium } = typography; 21 | 22 | return { 23 | ml: 0.5, 24 | fontWeight: fontWeightMedium, 25 | wordSpacing: pxToRem(-1), 26 | transition: transitions.create("opacity", { 27 | easing: transitions.easing.easeInOut, 28 | duration: transitions.duration.standard, 29 | }), 30 | 31 | [breakpoints.up("xl")]: { 32 | opacity: miniSidenav ? 0 : 1, 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Tables/DataTable/DataTableBodyCell.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // Material Dashboard 2 React components 20 | import MDBox from "components/MDBox"; 21 | 22 | function DataTableBodyCell({ noBorder, align, children }) { 23 | return ( 24 | ({ 30 | fontSize: size.sm, 31 | borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, 32 | })} 33 | > 34 | 40 | {children} 41 | 42 | 43 | ); 44 | } 45 | 46 | // Setting default values for the props of DataTableBodyCell 47 | DataTableBodyCell.defaultProps = { 48 | noBorder: false, 49 | align: "left", 50 | }; 51 | 52 | // Typechecking props for the DataTableBodyCell 53 | DataTableBodyCell.propTypes = { 54 | children: PropTypes.node.isRequired, 55 | noBorder: PropTypes.bool, 56 | align: PropTypes.oneOf(["left", "right", "center"]), 57 | }; 58 | 59 | export default DataTableBodyCell; 60 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Timeline/TimelineItem/styles.js: -------------------------------------------------------------------------------- 1 | function timelineItem(theme, ownerState) { 2 | const { borders } = theme; 3 | const { lastItem, isDark } = ownerState; 4 | 5 | const { borderWidth, borderColor } = borders; 6 | 7 | return { 8 | "&:after": { 9 | content: !lastItem && "''", 10 | position: "absolute", 11 | top: "2rem", 12 | left: "17px", 13 | height: "100%", 14 | opacity: isDark ? 0.1 : 1, 15 | borderRight: `${borderWidth[2]} solid ${borderColor}`, 16 | }, 17 | }; 18 | } 19 | 20 | export default timelineItem; 21 | -------------------------------------------------------------------------------- /material-react-app/src/examples/Timeline/context/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | /* eslint-disable react/prop-types */ 17 | /** 18 | This file is used for controlling the dark and light state of the TimelineList and TimelineItem. 19 | */ 20 | 21 | import { createContext, useContext } from "react"; 22 | 23 | // The Timeline main context 24 | const Timeline = createContext(); 25 | 26 | // Timeline context provider 27 | function TimelineProvider({ children, value }) { 28 | return {children}; 29 | } 30 | 31 | // Timeline custom hook for using context 32 | function useTimeline() { 33 | return useContext(Timeline); 34 | } 35 | 36 | export { TimelineProvider, useTimeline }; 37 | /* eslint-enable react/prop-types */ 38 | -------------------------------------------------------------------------------- /material-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | import React from "react"; 17 | import { createRoot } from "react-dom/client"; 18 | import { BrowserRouter } from "react-router-dom"; 19 | import App from "App"; 20 | import { AuthContextProvider } from "context"; 21 | 22 | // Material Dashboard 2 React Context Provider 23 | import { MaterialUIControllerProvider } from "context"; 24 | 25 | const rootElement = document.getElementById("root"); 26 | const root = createRoot(rootElement); 27 | 28 | root.render( 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); -------------------------------------------------------------------------------- /material-react-app/src/layouts/billing/components/Invoices/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | // @mui material components 17 | import Card from "@mui/material/Card"; 18 | 19 | // Material Dashboard 2 React components 20 | import MDBox from "components/MDBox"; 21 | import MDTypography from "components/MDTypography"; 22 | import MDButton from "components/MDButton"; 23 | 24 | // Billing page components 25 | import Invoice from "layouts/billing/components/Invoice"; 26 | 27 | function Invoices() { 28 | return ( 29 | 30 | 31 | 32 | Invoices 33 | 34 | 35 | view all 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | 51 | export default Invoices; 52 | -------------------------------------------------------------------------------- /material-react-app/src/layouts/dashboard/data/reportsBarChartData.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | export default { 17 | labels: ["M", "T", "W", "T", "F", "S", "S"], 18 | datasets: { label: "Sales", data: [50, 20, 10, 22, 50, 10, 40] }, 19 | }; 20 | -------------------------------------------------------------------------------- /material-react-app/src/layouts/dashboard/data/reportsLineChartData.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | export default { 17 | sales: { 18 | labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 19 | datasets: { label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500] }, 20 | }, 21 | tasks: { 22 | labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 23 | datasets: { label: "Desktop apps", data: [50, 40, 300, 220, 500, 250, 400, 230, 500] }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /material-react-app/src/layouts/rtl/data/reportsBarChartData.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | export default { 17 | labels: ["M", "T", "W", "T", "F", "S", "S"], 18 | datasets: { label: "Sales", data: [50, 20, 10, 22, 50, 10, 40] }, 19 | }; 20 | -------------------------------------------------------------------------------- /material-react-app/src/layouts/rtl/data/reportsLineChartData.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Dashboard 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-dashboard-react 7 | * Copyright 2022 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 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 | export default { 17 | sales: { 18 | labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 19 | datasets: { label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500] }, 20 | }, 21 | tasks: { 22 | labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 23 | datasets: { label: "Desktop apps", data: [50, 40, 300, 220, 500, 250, 400, 230, 500] }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /material-react-app/src/services/auth-service.js: -------------------------------------------------------------------------------- 1 | import HttpService from "./htttp.service"; 2 | 3 | class AuthService { 4 | // authEndpoint = process.env.API_URL; 5 | 6 | login = async (payload) => { 7 | const loginEndpoint = 'login'; 8 | return await HttpService.post(loginEndpoint, payload); 9 | }; 10 | 11 | register = async (credentials) => { 12 | const registerEndpoint = 'register'; 13 | return await HttpService.post(registerEndpoint, credentials); 14 | }; 15 | 16 | logout = async () => { 17 | const logoutEndpoint = 'logout'; 18 | return await HttpService.post(logoutEndpoint); 19 | }; 20 | 21 | forgotPassword = async (payload) => { 22 | const forgotPassword = 'password-forgot'; 23 | return await HttpService.post(forgotPassword, payload); 24 | } 25 | 26 | resetPassword = async (credentials) => { 27 | const resetPassword = 'password-reset'; 28 | return await HttpService.post(resetPassword, credentials); 29 | } 30 | 31 | getProfile = async() => { 32 | const getProfile = 'me'; 33 | return await HttpService.get(getProfile); 34 | } 35 | 36 | updateProfile = async (newInfo) => { 37 | const updateProfile = "me"; 38 | return await HttpService.patch(updateProfile, newInfo); 39 | } 40 | } 41 | 42 | export default new AuthService(); 43 | -------------------------------------------------------------------------------- /material-react-app/src/services/htttp.service.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | 3 | const API_URL = process.env.REACT_APP_API_URL; 4 | Axios.defaults.baseURL = API_URL; 5 | 6 | export class HttpService { 7 | _axios = Axios.create(); 8 | 9 | addRequestInterceptor = (onFulfilled, onRejected) => { 10 | this._axios.interceptors.request.use(onFulfilled, onRejected); 11 | }; 12 | 13 | addResponseInterceptor = (onFulfilled, onRejected) => { 14 | this._axios.interceptors.response.use(onFulfilled, onRejected); 15 | }; 16 | 17 | get = async (url) => await this.request(this.getOptionsConfig("get", url)); 18 | 19 | post = async (url, data) => await this.request(this.getOptionsConfig("post", url, data)); 20 | 21 | put = async (url, data) => await this.request(this.getOptionsConfig("put", url, data)); 22 | 23 | patch = async (url, data) => await this.request(this.getOptionsConfig("patch", url, data)); 24 | 25 | delete = async (url) => await this.request(this.getOptionsConfig("delete", url)); 26 | 27 | getOptionsConfig = (method, url, data) => { 28 | return { 29 | method, 30 | url, 31 | data, 32 | headers: { "Content-Type": "application/vnd.api+json", "Accept": "application/vnd.api+json", 'Access-Control-Allow-Credentials': true }, 33 | }; 34 | }; 35 | 36 | request(options) { 37 | return new Promise((resolve, reject) => { 38 | this._axios 39 | .request(options) 40 | .then((res) => resolve(res.data)) 41 | .catch((ex) => reject(ex.response.data)); 42 | }); 43 | } 44 | } 45 | 46 | export default new HttpService(); 47 | -------------------------------------------------------------------------------- /material-react-app/src/services/interceptor.js: -------------------------------------------------------------------------------- 1 | import HttpService from "./htttp.service"; 2 | 3 | export const setupAxiosInterceptors = (onUnauthenticated) => { 4 | const onRequestSuccess = async (config) => { 5 | const token = localStorage.getItem("token"); 6 | config.headers.Authorization = `Bearer ${token}`; 7 | return config; 8 | }; 9 | const onRequestFail = (error) => Promise.reject(error); 10 | 11 | HttpService.addRequestInterceptor(onRequestSuccess, onRequestFail); 12 | 13 | const onResponseSuccess = (response) => response; 14 | 15 | const onResponseFail = (error) => { 16 | const status = error.status || error.response.status; 17 | if (status === 403 || status === 401) { 18 | onUnauthenticated(); 19 | } 20 | 21 | return Promise.reject(error); 22 | }; 23 | HttpService.addResponseInterceptor(onResponseSuccess, onResponseFail); 24 | }; 25 | -------------------------------------------------------------------------------- /node-api/.env.example: -------------------------------------------------------------------------------- 1 | DB_LINK="mongo-link-to-connect" 2 | 3 | JWT_SECRET="token" 4 | 5 | APP_URL_CLIENT=https://material-dashboard-react-node.creative-tim.com 6 | APP_URL_API=https://node-json-api-free.creative-tim.com/login 7 | 8 | MAILTRAP_USER= 9 | MAILTRAP_PASSWORD= -------------------------------------------------------------------------------- /node-api/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | .env -------------------------------------------------------------------------------- /node-api/images/admin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/node-api/images/admin.jpg -------------------------------------------------------------------------------- /node-api/images/creator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/node-api/images/creator.jpg -------------------------------------------------------------------------------- /node-api/images/member.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codev612/material-dashboard-react-nodejs/22f7ef0445dbe8558d88c176fcbbb88d4843c853/node-api/images/member.jpg -------------------------------------------------------------------------------- /node-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-json-api-free", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "bcrypt": "^5.0.1", 8 | "body-parser": "^1.20.0", 9 | "cors": "^2.8.5", 10 | "dotenv": "^16.0.1", 11 | "express": "^4.18.1", 12 | "jsonwebtoken": "^8.5.1", 13 | "mongoose": "^6.5.0", 14 | "mysql": "^2.18.1", 15 | "mysql2": "^2.3.3", 16 | "node-cron": "^3.0.2", 17 | "nodemailer": "^6.7.5", 18 | "nodemon": "^2.0.16", 19 | "passport": "^0.6.0", 20 | "passport-jwt": "^4.0.0", 21 | "passport-local": "^1.0.0", 22 | "pg": "^8.7.3", 23 | "random-token": "0.0.8", 24 | "sequelize": "^6.20.1" 25 | }, 26 | "type": "module", 27 | "devDependencies": { 28 | "@babel/cli": "^7.17.10", 29 | "@babel/core": "^7.18.5", 30 | "@babel/node": "^7.18.5", 31 | "@babel/plugin-proposal-class-properties": "^7.17.12", 32 | "@babel/plugin-proposal-object-rest-spread": "^7.18.0", 33 | "@babel/preset-env": "^7.18.2", 34 | "@babel/register": "^7.17.7", 35 | "sequelize-cli": "^6.4.1" 36 | }, 37 | "scripts": { 38 | "start:dev": "nodemon --exec babel-node --experimental-specifier-resolution=node src/index.js", 39 | "test": "echo \"Error: no test specified\" && exit 1", 40 | "seed": "node src/mongo/seedData.js", 41 | "clear": "node src/mongo/clearDbs.js" 42 | }, 43 | "author": "", 44 | "license": "ISC" 45 | } 46 | -------------------------------------------------------------------------------- /node-api/src/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import bodyParser from "body-parser"; 3 | import cors from "cors"; 4 | import dotenv from "dotenv"; 5 | import "./passport.js"; 6 | import { dbConnect } from "./mongo"; 7 | import { meRoutes, authRoutes } from "./routes"; 8 | import path from "path"; 9 | import * as fs from "fs"; 10 | import cron from "node-cron"; 11 | import ReseedAction from "./mongo/ReseedAction"; 12 | 13 | dotenv.config(); 14 | 15 | const PORT = process.env.PORT || 8080; 16 | const app = express(); 17 | 18 | const whitelist = [process.env.APP_URL_CLIENT]; 19 | const corsOptions = { 20 | origin: function (origin, callback) { 21 | if (!origin || whitelist.indexOf(origin) !== -1) { 22 | callback(null, true); 23 | } else { 24 | callback(new Error("Not allowed by CORS")); 25 | } 26 | }, 27 | credentials: true, 28 | }; 29 | 30 | dbConnect(); 31 | 32 | app.use(cors(corsOptions)); 33 | app.use(bodyParser.json({ type: "application/vnd.api+json", strict: false })); 34 | 35 | app.get("/", function (req, res) { 36 | const __dirname = fs.realpathSync("."); 37 | res.sendFile(path.join(__dirname, "/src/landing/index.html")); 38 | }); 39 | 40 | app.use("/", authRoutes); 41 | app.use("/me", meRoutes); 42 | 43 | if (process.env.SCHEDULE_HOUR) { 44 | cron.schedule(`0 */${process.env.SCHEDULE_HOUR} * * *'`, () => { 45 | ReseedAction(); 46 | }); 47 | } 48 | 49 | app.listen(PORT, () => console.log(`Server listening to port ${PORT}`)); 50 | -------------------------------------------------------------------------------- /node-api/src/mongo/ReseedAction.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | import bcrypt from "bcrypt"; 3 | import { userModel } from "../schemas/user.schema.js"; 4 | import { dbConnect } from "./index.js"; 5 | 6 | const ReseedAction = () => { 7 | async function clear() { 8 | dbConnect(); 9 | await userModel.deleteMany({}); 10 | console.log("DB cleared"); 11 | } 12 | 13 | async function seedDB() { 14 | await clear(); 15 | const salt = await bcrypt.genSalt(10); 16 | const hashPassword = await bcrypt.hash("secret", salt); 17 | 18 | const user = { 19 | _id: mongoose.Types.ObjectId(1), 20 | name: "Admin", 21 | email: "admin@jsonapi.com", 22 | password: hashPassword, 23 | created_at: new Date(), 24 | profile_image: "../../images/admin.jpg", 25 | }; 26 | 27 | const admin = new userModel(user); 28 | await admin.save(); 29 | 30 | console.log("DB seeded"); 31 | } 32 | 33 | seedDB(); 34 | }; 35 | 36 | export default ReseedAction; 37 | -------------------------------------------------------------------------------- /node-api/src/mongo/clearDbs.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | import { userModel } from "../schemas/user.schema.js"; 3 | import { dbConnect } from "../mongo/index.js"; 4 | 5 | async function clear() { 6 | dbConnect(); 7 | await userModel.deleteMany({}); 8 | console.log("DB cleared"); 9 | } 10 | 11 | clear().then(() => { 12 | mongoose.connection.close(); 13 | }); 14 | -------------------------------------------------------------------------------- /node-api/src/mongo/index.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | import dotenv from "dotenv"; 3 | 4 | dotenv.config(); 5 | 6 | export const dbConnect = () => { 7 | mongoose.connection.once("open", () => console.log("DB connection")); 8 | return mongoose.connect( 9 | `mongodb+srv://${process.env.DB_LINK}?retryWrites=true&w=majority`, 10 | { keepAlive: true } 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /node-api/src/mongo/seedData.js: -------------------------------------------------------------------------------- 1 | import bcrypt from "bcrypt"; 2 | import mongoose from "mongoose"; 3 | import { userModel } from "../schemas/user.schema.js"; 4 | import { dbConnect } from "../mongo/index.js"; 5 | 6 | async function seedDB() { 7 | dbConnect(); 8 | const salt = await bcrypt.genSalt(10); 9 | const hashPassword = await bcrypt.hash("secret", salt); 10 | 11 | const user = { 12 | _id: mongoose.Types.ObjectId(1), 13 | name: "Admin", 14 | email: "admin@jsonapi.com", 15 | password: hashPassword, 16 | created_at: new Date(), 17 | profile_image: "../../images/admin.jpg", 18 | }; 19 | 20 | const admin = new userModel(user); 21 | await admin.save(); 22 | 23 | console.log("DB seeded"); 24 | } 25 | 26 | seedDB().then(() => { 27 | mongoose.connection.close(); 28 | }); 29 | -------------------------------------------------------------------------------- /node-api/src/passport.js: -------------------------------------------------------------------------------- 1 | import { ExtractJwt } from "passport-jwt"; 2 | import passportJWT from "passport-jwt"; 3 | import dotenv from "dotenv"; 4 | import passport from "passport"; 5 | 6 | import { userModel } from "./schemas/user.schema"; 7 | const JWTStrategy = passportJWT.Strategy; 8 | dotenv.config(); 9 | 10 | passport.use( 11 | new JWTStrategy( 12 | { 13 | jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), 14 | secretOrKey: process.env.JWT_SECRET, 15 | }, 16 | function (jwtPayload, done) { 17 | return userModel 18 | .findOne({ _id: jwtPayload.id }) 19 | .then((user) => { 20 | return done(null, user); 21 | }) 22 | .catch((err) => { 23 | return done(err); 24 | }); 25 | } 26 | ) 27 | ); 28 | -------------------------------------------------------------------------------- /node-api/src/routes/auth/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { 3 | forgotPasswordRouteHandler, 4 | loginRouteHandler, 5 | registerRouteHandler, 6 | resetPasswordRouteHandler, 7 | } from "../../services/auth"; 8 | 9 | const router = express.Router(); 10 | 11 | router.post("/login", async (req, res, next) => { 12 | const { email, password } = req.body.data.attributes; 13 | await loginRouteHandler(req, res, email, password); 14 | }); 15 | 16 | router.post("/logout", (req, res) => { 17 | return res.sendStatus(204); 18 | }); 19 | 20 | router.post("/register", async (req, res) => { 21 | const { name, email, password } = req.body.data.attributes; 22 | await registerRouteHandler(req, res, name, email, password); 23 | }); 24 | 25 | router.post("/password-forgot", async (req, res) => { 26 | const { email } = req.body.data.attributes; 27 | await forgotPasswordRouteHandler(req, res, email); 28 | }); 29 | 30 | router.post("/password-reset", async (req, res) => { 31 | await resetPasswordRouteHandler(req, res); 32 | }); 33 | 34 | export default router; 35 | -------------------------------------------------------------------------------- /node-api/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import userRoutes from './users'; 2 | import meRoutes from './me'; 3 | import authRoutes from './auth'; 4 | 5 | export { userRoutes, meRoutes, authRoutes }; 6 | -------------------------------------------------------------------------------- /node-api/src/routes/me/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import passport from "passport"; 3 | import jwt from 'jsonwebtoken'; 4 | 5 | const router = express.Router(); 6 | import { getProfileRouteHandler, patchProfileRouteHandler } from "../../services/me"; 7 | 8 | // get user's profile 9 | router.get("/", passport.authenticate('jwt',{session: false}), (req, res) => { 10 | getProfileRouteHandler(req, res); 11 | }); 12 | 13 | // update user's profile 14 | router.patch("/", passport.authenticate('jwt',{session: false}), async (req, res) => { 15 | patchProfileRouteHandler(req, res); 16 | }); 17 | 18 | export default router; 19 | -------------------------------------------------------------------------------- /node-api/src/routes/users/index.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | 3 | const router = express.Router(); 4 | 5 | router.get('/', (req, res) => { 6 | res.send({ 7 | data: [ 8 | { 9 | id: 1, 10 | firstName: 'John', 11 | lastName: 'Smith', 12 | }, 13 | { 14 | id: 2, 15 | firstName: 'Stacey', 16 | lastName: 'Smith', 17 | }, 18 | ], 19 | }); 20 | }); 21 | 22 | export default router; 23 | -------------------------------------------------------------------------------- /node-api/src/schemas/passwordResets.schema.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const passwordResetSchema = new mongoose.Schema({ 4 | email: { required: true, type: String }, 5 | token: { required: true, type: String }, 6 | created_at: { type: Date }, 7 | }); 8 | 9 | passwordResetSchema.virtual("id").get(function () { 10 | return this._id.toHexString(); 11 | }); 12 | 13 | passwordResetSchema.set("toJSON", { virtuals: true }); 14 | 15 | export const passwordResetModel = mongoose.model("PasswordReset", passwordResetSchema); 16 | -------------------------------------------------------------------------------- /node-api/src/schemas/user.schema.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const userSchema = new mongoose.Schema({ 4 | name: { required: true, type: String }, 5 | email: { required: true, type: String }, 6 | email_verified_at: { type: Date }, 7 | password: { required: true, type: String }, 8 | profile_image: { type: String }, 9 | created_at: { type: Date }, 10 | updated_at: { type: Date }, 11 | }); 12 | 13 | userSchema.virtual("id").get(function () { 14 | return this._id.toHexString(); 15 | }); 16 | 17 | userSchema.set("toJSON", { virtuals: true }); 18 | 19 | export const userModel = mongoose.model("User", userSchema); 20 | --------------------------------------------------------------------------------