├── .gitignore ├── README.md ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.png ├── firebase-messaging-sw.js ├── 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 ├── 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 ├── AuthContext.js └── 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 │ └── LineCharts │ │ └── ReportsLineChart │ │ ├── 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 │ │ └── indexLogin.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 ├── addBankCard │ └── index.js └── carousels │ ├── components │ └── Detail.js │ ├── data │ ├── carouselsDetailCard.js │ └── carouselsNameTable.js │ └── index.js ├── firebase.js ├── index.js ├── layouts ├── addSale │ ├── components │ │ └── Detail.js │ ├── data │ │ ├── SalesNameTable.js │ │ └── salesDetailCard.js │ └── index.js ├── authentication │ ├── BasicLayout.js │ ├── BasicLayoutLogin.js │ └── users │ │ ├── Login.js │ │ └── Signup.js ├── banks │ ├── components │ │ └── Detail.js │ ├── data │ │ ├── banksDetailCard.js │ │ ├── banksNameTable.js │ │ └── cardsNameTable.js │ └── index.js ├── brands │ ├── components │ │ └── Detail.js │ ├── data │ │ ├── brandsDetailCard.js │ │ └── brandsNameTable.js │ └── index.js ├── carousels │ ├── components │ │ └── Detail.js │ ├── data │ │ ├── carouselsDetailCard.js │ │ └── carouselsNameTable.js │ └── index.js ├── categories │ ├── data │ │ └── categoriesNameTable.js │ └── index.js ├── dashboard │ ├── components │ │ ├── OrdersOverview │ │ │ └── index.js │ │ └── Projects │ │ │ ├── data │ │ │ └── index.js │ │ │ └── index.js │ ├── data │ │ ├── reportsBarChartData.js │ │ └── reportsLineChartData.js │ └── index.js ├── discounts │ ├── components │ │ └── Detail.js │ ├── data │ │ ├── discountsDetailCard.js │ │ └── discountsNameTable.js │ └── index.js └── notifications │ ├── Notifications.js │ └── SendNotifications.js └── routes.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | .DS_Store 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | package-lock.json 25 | yarn.lock 26 | 27 | commit.sh 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Project Video 2 | https://user-images.githubusercontent.com/114060450/223982435-5cc15e6e-a281-4dff-a4b5-9c0fef852a6e.mp4 3 | 4 | https://user-images.githubusercontent.com/114060450/223983650-ef426d4e-3aed-4c66-bdd3-f1c60c791bd1.mp4 5 | 6 | https://user-images.githubusercontent.com/114060450/223983856-bddd26c3-167f-4d2c-8968-c0fc3c095472.mp4 7 | 8 | ![admin_panel'](https://user-images.githubusercontent.com/114060450/223984537-9a75353e-752e-4da1-8114-d138443bd898.png) 9 | 10 | ## Available Scripts 11 | 12 | In the root directory of project, you can run this commands on terminal: 13 | ### `npm install` 14 | ### `npm start` 15 | 16 | In this project, 3 panels are included: 17 | ### `Admin Panel` 18 | ### `Brand Panel` 19 | ### `Bank Panel` 20 | 21 | ## Technologies 22 | *** 23 | A list of technologies used within the project: 24 | * node v16.16.0 25 | * npm v8.11.0 26 | * reactjs + Material_UI for UI 27 | * cloud firestore for database 28 | * complete role base authentication, authorization and protected all routes 29 | 30 | ## Login Credentials 31 | *** 32 | Admin have all access: 33 | * ##### `Admin Panel/admin`: email=admin@123.com, password=admin123 34 | 35 | Every brandUser has its separate credentials that is given by admin to brandUser/him: 36 | * ##### `Brand Panel/polo_brand`: email=polo@123.com, password=polo123 37 | 38 | Every bankUser has its separate credentials that is given by admin to bankUser/him: 39 | * ##### `Bank Panel/hbl_bank`: email=hbl@123.com, password=hbl123 40 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["public/src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "admin-panel", 3 | "version": "2.1.0", 4 | "private": true, 5 | "author": "Hurarah", 6 | "description": "Admin panel", 7 | "engines": { 8 | "node": "14 || 15 || 16", 9 | "npm": ">=6" 10 | }, 11 | "dependencies": { 12 | "@emotion/cache": "11.7.1", 13 | "@emotion/react": "^11.7.1", 14 | "@emotion/styled": "^11.6.0", 15 | "@fontsource/roboto": "^4.5.8", 16 | "@mui/icons-material": "5.4.1", 17 | "@mui/material": "^5.11.5", 18 | "@mui/styled-engine": "5.4.1", 19 | "@mui/styled-engine-sc": "^5.11.0", 20 | "@testing-library/jest-dom": "5.16.2", 21 | "@testing-library/react": "12.1.2", 22 | "@testing-library/user-event": "13.5.0", 23 | "chart.js": "3.4.1", 24 | "chroma-js": "2.4.2", 25 | "firebase": "^9.16.0", 26 | "prop-types": "15.8.1", 27 | "react": "17.0.2", 28 | "react-chartjs-2": "3.0.4", 29 | "react-dom": "17.0.2", 30 | "react-github-btn": "1.2.1", 31 | "react-router-dom": "6.2.1", 32 | "react-scripts": "5.0.0", 33 | "react-table": "7.7.0", 34 | "styled-components": "^5.3.6", 35 | "stylis": "4.0.13", 36 | "stylis-plugin-rtl": "2.1.1", 37 | "web-vitals": "2.1.4", 38 | "yup": "0.32.11" 39 | }, 40 | "scripts": { 41 | "start": "react-scripts start", 42 | "build": "react-scripts build", 43 | "test": "react-scripts test", "eject": "react-scripts eject", 44 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 45 | }, 46 | "eslintConfig": { 47 | "extends": [ 48 | "react-app", 49 | "react-app/jest" 50 | ] 51 | }, 52 | "browserslist": { 53 | "production": [ 54 | ">0.2%", 55 | "not dead", 56 | "not op_mini all" 57 | ], 58 | "development": [ 59 | "last 1 chrome version", 60 | "last 1 firefox version", 61 | "last 1 safari version" 62 | ] 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/public/favicon.png -------------------------------------------------------------------------------- /public/firebase-messaging-sw.js: -------------------------------------------------------------------------------- 1 | // Scripts for firebase and firebase messaging 2 | importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js'); 3 | importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js'); 4 | 5 | // Initialize the Firebase app in the service worker by passing the generated config 6 | var firebaseConfig = { 7 | apiKey: "AIzaSyABF4m8puuckAImYCAF5HRFsZ_03J609LQ", 8 | authDomain: "admin-panel-76a17.firebaseapp.com", 9 | databaseURL: "https://admin-panel-76a17-default-rtdb.firebaseio.com", 10 | projectId: "admin-panel-76a17", 11 | storageBucket: "admin-panel-76a17.appspot.com", 12 | messagingSenderId: "215078169100", 13 | appId: "1:215078169100:web:61f5a720a5ff127b645c29", 14 | measurementId: "G-7CXT51EQ6T" 15 | }; 16 | 17 | firebase.initializeApp(firebaseConfig); 18 | 19 | // Retrieve firebase messaging 20 | const messaging = firebase.messaging(); 21 | 22 | messaging.onBackgroundMessage(function (payload) { 23 | console.log('Received background message ', payload); 24 | 25 | const notificationTitle = payload.notification.title; 26 | const notificationOptions = { 27 | body: payload.notification.body, 28 | }; 29 | self.registration.showNotification(notificationTitle, notificationOptions); 30 | }); 31 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Admin Panel 11 | 15 | 21 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Admin Panel", 3 | "name": "Admin Panel 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 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/apple-icon.png -------------------------------------------------------------------------------- /src/assets/images/bg-profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/bg-profile.jpeg -------------------------------------------------------------------------------- /src/assets/images/bg-reset-cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/bg-reset-cover.jpeg -------------------------------------------------------------------------------- /src/assets/images/bg-sign-in-basic.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/bg-sign-in-basic.jpeg -------------------------------------------------------------------------------- /src/assets/images/bg-sign-up-cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/bg-sign-up-cover.jpeg -------------------------------------------------------------------------------- /src/assets/images/bruce-mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/bruce-mars.jpg -------------------------------------------------------------------------------- /src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/favicon.png -------------------------------------------------------------------------------- /src/assets/images/home-decor-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/home-decor-1.jpg -------------------------------------------------------------------------------- /src/assets/images/home-decor-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/home-decor-2.jpg -------------------------------------------------------------------------------- /src/assets/images/home-decor-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/home-decor-3.jpg -------------------------------------------------------------------------------- /src/assets/images/home-decor-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/home-decor-4.jpeg -------------------------------------------------------------------------------- /src/assets/images/icons/flags/AU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/icons/flags/AU.png -------------------------------------------------------------------------------- /src/assets/images/icons/flags/BR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/icons/flags/BR.png -------------------------------------------------------------------------------- /src/assets/images/icons/flags/DE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/icons/flags/DE.png -------------------------------------------------------------------------------- /src/assets/images/icons/flags/GB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/icons/flags/GB.png -------------------------------------------------------------------------------- /src/assets/images/icons/flags/US.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/icons/flags/US.png -------------------------------------------------------------------------------- /src/assets/images/ivana-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/ivana-square.jpg -------------------------------------------------------------------------------- /src/assets/images/kal-visuals-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/kal-visuals-square.jpg -------------------------------------------------------------------------------- /src/assets/images/logo-ct-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/logo-ct-dark.png -------------------------------------------------------------------------------- /src/assets/images/logo-ct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/logo-ct.png -------------------------------------------------------------------------------- /src/assets/images/logos/gray-logos/logo-netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/logos/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/logos/mastercard.png -------------------------------------------------------------------------------- /src/assets/images/logos/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/logos/visa.png -------------------------------------------------------------------------------- /src/assets/images/marie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/marie.jpg -------------------------------------------------------------------------------- /src/assets/images/small-logos/bootstrap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bootstrap 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/devto.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | devto 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/google-webdev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | google-webdev 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/logo-asana.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/team-1.jpg -------------------------------------------------------------------------------- /src/assets/images/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/team-2.jpg -------------------------------------------------------------------------------- /src/assets/images/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/team-3.jpg -------------------------------------------------------------------------------- /src/assets/images/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/team-4.jpg -------------------------------------------------------------------------------- /src/assets/images/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goshurarah/admin-panel-react-firebase/1644bc15d70704f1d2bc741cbe9841a71dcf1ab6/src/assets/images/team-5.jpg -------------------------------------------------------------------------------- /src/assets/theme-dark/base/borders.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | import rgba from "assets/theme-dark/functions/rgba"; 6 | 7 | const { white } = colors; 8 | 9 | const borders = { 10 | borderColor: rgba(white.main, 0.4), 11 | 12 | borderWidth: { 13 | 0: 0, 14 | 1: pxToRem(1), 15 | 2: pxToRem(2), 16 | 3: pxToRem(3), 17 | 4: pxToRem(4), 18 | 5: pxToRem(5), 19 | }, 20 | 21 | borderRadius: { 22 | xs: pxToRem(1.6), 23 | sm: pxToRem(2), 24 | md: pxToRem(6), 25 | lg: pxToRem(8), 26 | xl: pxToRem(12), 27 | xxl: pxToRem(16), 28 | section: pxToRem(160), 29 | }, 30 | }; 31 | 32 | export default borders; 33 | -------------------------------------------------------------------------------- /src/assets/theme-dark/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | 2 | const breakpoints = { 3 | values: { 4 | xs: 0, 5 | sm: 576, 6 | md: 768, 7 | lg: 992, 8 | xl: 1200, 9 | xxl: 1400, 10 | }, 11 | }; 12 | 13 | export default breakpoints; 14 | -------------------------------------------------------------------------------- /src/assets/theme-dark/base/globals.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme-dark/base/colors"; 2 | 3 | const { info, dark } = colors; 4 | 5 | const globals = { 6 | html: { 7 | scrollBehavior: "smooth", 8 | }, 9 | "*, *::before, *::after": { 10 | margin: 0, 11 | padding: 0, 12 | }, 13 | "a, a:link, a:visited": { 14 | textDecoration: "none !important", 15 | }, 16 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 17 | color: `${dark.main} !important`, 18 | transition: "color 150ms ease-in !important", 19 | }, 20 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 21 | color: `${info.main} !important`, 22 | }, 23 | }; 24 | 25 | export default globals; 26 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/appBar.js: -------------------------------------------------------------------------------- 1 | 2 | const appBar = { 3 | defaultProps: { 4 | color: "transparent", 5 | }, 6 | 7 | styleOverrides: { 8 | root: { 9 | boxShadow: "none", 10 | }, 11 | }, 12 | }; 13 | 14 | export default appBar; 15 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/avatar.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | 4 | const { borderRadius } = borders; 5 | 6 | const avatar = { 7 | styleOverrides: { 8 | root: { 9 | transition: "all 200ms ease-in-out", 10 | }, 11 | 12 | rounded: { 13 | borderRadius: borderRadius.lg, 14 | }, 15 | 16 | img: { 17 | height: "auto", 18 | }, 19 | }, 20 | }; 21 | 22 | export default avatar; 23 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | 5 | const { grey } = colors; 6 | const { size } = typography; 7 | 8 | const breadcrumbs = { 9 | styleOverrides: { 10 | li: { 11 | lineHeight: 0, 12 | }, 13 | 14 | separator: { 15 | fontSize: size.sm, 16 | color: grey[600], 17 | }, 18 | }, 19 | }; 20 | 21 | export default breadcrumbs; 22 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/button/contained.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { white, text, info, secondary } = colors; 7 | const { size } = typography; 8 | 9 | const contained = { 10 | base: { 11 | backgroundColor: white.main, 12 | minHeight: pxToRem(37), 13 | color: text.main, 14 | padding: `${pxToRem(9)} ${pxToRem(24)}`, 15 | 16 | "&:hover": { 17 | backgroundColor: white.main, 18 | }, 19 | 20 | "&:active, &:active:focus, &:active:hover": { 21 | opacity: 0.85, 22 | }, 23 | 24 | "& .material-icon, .material-icons-round, svg": { 25 | fontSize: `${pxToRem(16)} !important`, 26 | }, 27 | }, 28 | 29 | small: { 30 | minHeight: pxToRem(29), 31 | padding: `${pxToRem(6)} ${pxToRem(18)}`, 32 | fontSize: size.xs, 33 | 34 | "& .material-icon, .material-icons-round, svg": { 35 | fontSize: `${pxToRem(12)} !important`, 36 | }, 37 | }, 38 | 39 | large: { 40 | minHeight: pxToRem(44), 41 | padding: `${pxToRem(12)} ${pxToRem(64)}`, 42 | fontSize: size.sm, 43 | 44 | "& .material-icon, .material-icons-round, svg": { 45 | fontSize: `${pxToRem(22)} !important`, 46 | }, 47 | }, 48 | 49 | primary: { 50 | backgroundColor: info.main, 51 | 52 | "&:hover": { 53 | backgroundColor: info.main, 54 | }, 55 | 56 | "&:focus:not(:hover)": { 57 | backgroundColor: info.focus, 58 | }, 59 | }, 60 | 61 | secondary: { 62 | backgroundColor: secondary.main, 63 | 64 | "&:hover": { 65 | backgroundColor: secondary.main, 66 | }, 67 | 68 | "&:focus:not(:hover)": { 69 | backgroundColor: secondary.focus, 70 | }, 71 | }, 72 | }; 73 | 74 | export default contained; 75 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/button/index.js: -------------------------------------------------------------------------------- 1 | 2 | import root from "assets/theme-dark/components/button/root"; 3 | import contained from "assets/theme-dark/components/button/contained"; 4 | import outlined from "assets/theme-dark/components/button/outlined"; 5 | import buttonText from "assets/theme-dark/components/button/text"; 6 | 7 | const button = { 8 | defaultProps: { 9 | disableRipple: false, 10 | }, 11 | styleOverrides: { 12 | root: { ...root }, 13 | contained: { ...contained.base }, 14 | containedSizeSmall: { ...contained.small }, 15 | containedSizeLarge: { ...contained.large }, 16 | containedPrimary: { ...contained.primary }, 17 | containedSecondary: { ...contained.secondary }, 18 | outlined: { ...outlined.base }, 19 | outlinedSizeSmall: { ...outlined.small }, 20 | outlinedSizeLarge: { ...outlined.large }, 21 | outlinedPrimary: { ...outlined.primary }, 22 | outlinedSecondary: { ...outlined.secondary }, 23 | text: { ...buttonText.base }, 24 | textSizeSmall: { ...buttonText.small }, 25 | textSizeLarge: { ...buttonText.large }, 26 | textPrimary: { ...buttonText.primary }, 27 | textSecondary: { ...buttonText.secondary }, 28 | }, 29 | }; 30 | 31 | export default button; 32 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/button/outlined.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | 7 | const { transparent, light, info, secondary } = colors; 8 | const { size } = typography; 9 | 10 | const outlined = { 11 | base: { 12 | minHeight: pxToRem(39), 13 | color: light.main, 14 | borderColor: light.main, 15 | padding: `${pxToRem(9)} ${pxToRem(24)}`, 16 | 17 | "&:hover": { 18 | opacity: 0.75, 19 | backgroundColor: transparent.main, 20 | }, 21 | 22 | "& .material-icon, .material-icons-round, svg": { 23 | fontSize: `${pxToRem(16)} !important`, 24 | }, 25 | }, 26 | 27 | small: { 28 | minHeight: pxToRem(31), 29 | padding: `${pxToRem(6)} ${pxToRem(18)}`, 30 | fontSize: size.xs, 31 | 32 | "& .material-icon, .material-icons-round, svg": { 33 | fontSize: `${pxToRem(12)} !important`, 34 | }, 35 | }, 36 | 37 | large: { 38 | minHeight: pxToRem(46), 39 | padding: `${pxToRem(12)} ${pxToRem(64)}`, 40 | fontSize: size.sm, 41 | 42 | "& .material-icon, .material-icons-round, svg": { 43 | fontSize: `${pxToRem(22)} !important`, 44 | }, 45 | }, 46 | 47 | primary: { 48 | backgroundColor: transparent.main, 49 | borderColor: info.main, 50 | 51 | "&:hover": { 52 | backgroundColor: transparent.main, 53 | }, 54 | }, 55 | 56 | secondary: { 57 | backgroundColor: transparent.main, 58 | borderColor: secondary.main, 59 | 60 | "&:hover": { 61 | backgroundColor: transparent.main, 62 | }, 63 | }, 64 | }; 65 | 66 | export default outlined; 67 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/button/root.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { fontWeightBold, size } = typography; 7 | const { borderRadius } = borders; 8 | 9 | const root = { 10 | display: "inline-flex", 11 | justifyContent: "center", 12 | alignItems: "center", 13 | fontSize: size.xs, 14 | fontWeight: fontWeightBold, 15 | borderRadius: borderRadius.lg, 16 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 17 | lineHeight: 1.4, 18 | textAlign: "center", 19 | textTransform: "uppercase", 20 | userSelect: "none", 21 | backgroundSize: "150% !important", 22 | backgroundPositionX: "25% !important", 23 | transition: "all 150ms ease-in", 24 | 25 | "&:disabled": { 26 | pointerEvent: "none", 27 | opacity: 0.65, 28 | }, 29 | 30 | "& .material-icons": { 31 | fontSize: pxToRem(15), 32 | marginTop: pxToRem(-2), 33 | }, 34 | }; 35 | 36 | export default root; 37 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/button/text.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | 7 | const { text, info, secondary, transparent } = colors; 8 | const { size } = typography; 9 | 10 | const buttonText = { 11 | base: { 12 | backgroundColor: transparent.main, 13 | minHeight: pxToRem(37), 14 | color: text.main, 15 | boxShadow: "none", 16 | padding: `${pxToRem(9)} ${pxToRem(24)}`, 17 | 18 | "&:hover": { 19 | backgroundColor: transparent.main, 20 | boxShadow: "none", 21 | }, 22 | 23 | "&:focus": { 24 | boxShadow: "none", 25 | }, 26 | 27 | "&:active, &:active:focus, &:active:hover": { 28 | opacity: 0.85, 29 | boxShadow: "none", 30 | }, 31 | 32 | "&:disabled": { 33 | boxShadow: "none", 34 | }, 35 | 36 | "& .material-icon, .material-icons-round, svg": { 37 | fontSize: `${pxToRem(16)} !important`, 38 | }, 39 | }, 40 | 41 | small: { 42 | minHeight: pxToRem(29), 43 | padding: `${pxToRem(6)} ${pxToRem(18)}`, 44 | fontSize: size.xs, 45 | 46 | "& .material-icon, .material-icons-round, svg": { 47 | fontSize: `${pxToRem(12)} !important`, 48 | }, 49 | }, 50 | 51 | large: { 52 | minHeight: pxToRem(44), 53 | padding: `${pxToRem(12)} ${pxToRem(64)}`, 54 | fontSize: size.sm, 55 | 56 | "& .material-icon, .material-icons-round, svg": { 57 | fontSize: `${pxToRem(22)} !important`, 58 | }, 59 | }, 60 | 61 | primary: { 62 | color: info.main, 63 | 64 | "&:hover": { 65 | color: info.main, 66 | }, 67 | 68 | "&:focus:not(:hover)": { 69 | color: info.focus, 70 | boxShadow: "none", 71 | }, 72 | }, 73 | 74 | secondary: { 75 | color: secondary.main, 76 | 77 | "&:hover": { 78 | color: secondary.main, 79 | }, 80 | 81 | "&:focus:not(:hover)": { 82 | color: secondary.focus, 83 | boxShadow: "none", 84 | }, 85 | }, 86 | }; 87 | 88 | export default buttonText; 89 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | 2 | const buttonBase = { 3 | defaultProps: { 4 | disableRipple: false, 5 | }, 6 | }; 7 | 8 | export default buttonBase; 9 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | const cardContent = { 5 | styleOverrides: { 6 | root: { 7 | marginTop: 0, 8 | marginBottom: 0, 9 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 10 | }, 11 | }, 12 | }; 13 | 14 | export default cardContent; 15 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { borderRadius } = borders; 7 | 8 | const cardMedia = { 9 | styleOverrides: { 10 | root: { 11 | borderRadius: borderRadius.xl, 12 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 13 | }, 14 | 15 | media: { 16 | width: "auto", 17 | }, 18 | }, 19 | }; 20 | 21 | export default cardMedia; 22 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/card/index.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import boxShadows from "assets/theme-dark/base/boxShadows"; 5 | 6 | import rgba from "assets/theme-dark/functions/rgba"; 7 | 8 | const { black, background } = colors; 9 | const { borderWidth, borderRadius } = borders; 10 | const { md } = boxShadows; 11 | 12 | const card = { 13 | styleOverrides: { 14 | root: { 15 | display: "flex", 16 | flexDirection: "column", 17 | position: "relative", 18 | minWidth: 0, 19 | wordWrap: "break-word", 20 | backgroundImage: "none", 21 | backgroundColor: background.card, 22 | backgroundClip: "border-box", 23 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 24 | borderRadius: borderRadius.xl, 25 | boxShadow: md, 26 | overflow: "visible", 27 | }, 28 | }, 29 | }; 30 | 31 | export default card; 32 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/container.js: -------------------------------------------------------------------------------- 1 | 2 | import breakpoints from "assets/theme-dark/base/breakpoints"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { 7 | values: { sm, md, lg, xl, xxl }, 8 | } = breakpoints; 9 | 10 | const SM = `@media (min-width: ${sm}px)`; 11 | const MD = `@media (min-width: ${md}px)`; 12 | const LG = `@media (min-width: ${lg}px)`; 13 | const XL = `@media (min-width: ${xl}px)`; 14 | const XXL = `@media (min-width: ${xxl}px)`; 15 | 16 | const sharedClasses = { 17 | paddingRight: `${pxToRem(24)} !important`, 18 | paddingLeft: `${pxToRem(24)} !important`, 19 | marginRight: "auto !important", 20 | marginLeft: "auto !important", 21 | width: "100% !important", 22 | position: "relative", 23 | }; 24 | 25 | const container = { 26 | [SM]: { 27 | ".MuiContainer-root": { 28 | ...sharedClasses, 29 | maxWidth: "540px !important", 30 | }, 31 | }, 32 | [MD]: { 33 | ".MuiContainer-root": { 34 | ...sharedClasses, 35 | maxWidth: "720px !important", 36 | }, 37 | }, 38 | [LG]: { 39 | ".MuiContainer-root": { 40 | ...sharedClasses, 41 | maxWidth: "960px !important", 42 | }, 43 | }, 44 | [XL]: { 45 | ".MuiContainer-root": { 46 | ...sharedClasses, 47 | maxWidth: "1140px !important", 48 | }, 49 | }, 50 | [XXL]: { 51 | ".MuiContainer-root": { 52 | ...sharedClasses, 53 | maxWidth: "1320px !important", 54 | }, 55 | }, 56 | }; 57 | 58 | export default container; 59 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | const dialogActions = { 5 | styleOverrides: { 6 | root: { 7 | padding: pxToRem(16), 8 | }, 9 | }, 10 | }; 11 | 12 | export default dialogActions; 13 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import colors from "assets/theme-dark/base/colors"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | import rgba from "assets/theme-dark/functions/rgba"; 8 | 9 | const { size } = typography; 10 | const { white } = colors; 11 | const { borderWidth, borderColor } = borders; 12 | 13 | const dialogContent = { 14 | styleOverrides: { 15 | root: { 16 | padding: pxToRem(16), 17 | fontSize: size.md, 18 | color: rgba(white.main, 0.8), 19 | }, 20 | 21 | dividers: { 22 | borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, 23 | borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, 24 | }, 25 | }, 26 | }; 27 | 28 | export default dialogContent; 29 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | 5 | import rgba from "assets/theme-dark/functions/rgba"; 6 | 7 | const { size } = typography; 8 | const { white } = colors; 9 | 10 | const dialogContentText = { 11 | styleOverrides: { 12 | root: { 13 | fontSize: size.md, 14 | color: rgba(white.main, 0.8), 15 | }, 16 | }, 17 | }; 18 | 19 | export default dialogContentText; 20 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { size } = typography; 7 | 8 | const dialogTitle = { 9 | styleOverrides: { 10 | root: { 11 | padding: pxToRem(16), 12 | fontSize: size.xl, 13 | }, 14 | }, 15 | }; 16 | 17 | export default dialogTitle; 18 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import boxShadows from "assets/theme-dark/base/boxShadows"; 4 | 5 | const { borderRadius } = borders; 6 | const { xxl } = boxShadows; 7 | 8 | const dialog = { 9 | styleOverrides: { 10 | paper: { 11 | borderRadius: borderRadius.lg, 12 | boxShadow: xxl, 13 | }, 14 | 15 | paperFullScreen: { 16 | borderRadius: 0, 17 | }, 18 | }, 19 | }; 20 | 21 | export default dialog; 22 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/divider.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import rgba from "assets/theme-dark/functions/rgba"; 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { dark, transparent, white } = colors; 7 | 8 | const divider = { 9 | styleOverrides: { 10 | root: { 11 | backgroundColor: transparent.main, 12 | backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${white.main}, ${rgba( 13 | dark.main, 14 | 0 15 | )}) !important`, 16 | height: pxToRem(1), 17 | margin: `${pxToRem(16)} 0`, 18 | borderBottom: "none", 19 | opacity: 0.25, 20 | }, 21 | 22 | vertical: { 23 | backgroundColor: transparent.main, 24 | backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${white.main}, ${rgba( 25 | dark.main, 26 | 0 27 | )}) !important`, 28 | width: pxToRem(1), 29 | height: "100%", 30 | margin: `0 ${pxToRem(16)}`, 31 | borderRight: "none", 32 | }, 33 | 34 | light: { 35 | backgroundColor: transparent.main, 36 | backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${rgba( 37 | dark.main, 38 | 0.4 39 | )}, ${rgba(white.main, 0)}) !important`, 40 | 41 | "&.MuiDivider-vertical": { 42 | backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${rgba( 43 | dark.main, 44 | 0.4 45 | )}, ${rgba(white.main, 0)}) !important`, 46 | }, 47 | }, 48 | }, 49 | }; 50 | 51 | export default divider; 52 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/checkbox.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | import linearGradient from "assets/theme-dark/functions/linearGradient"; 7 | 8 | const { borderWidth, borderColor } = borders; 9 | const { transparent, info } = colors; 10 | 11 | const checkbox = { 12 | styleOverrides: { 13 | root: { 14 | "& .MuiSvgIcon-root": { 15 | backgroundPosition: "center", 16 | backgroundSize: "contain", 17 | backgroundRepeat: "no-repeat", 18 | width: pxToRem(20), 19 | height: pxToRem(20), 20 | color: transparent.main, 21 | border: `${borderWidth[1]} solid ${borderColor}`, 22 | borderRadius: pxToRem(5.6), 23 | }, 24 | 25 | "&:hover": { 26 | backgroundColor: transparent.main, 27 | }, 28 | 29 | "&.Mui-focusVisible": { 30 | border: `${borderWidth[2]} solid ${info.main} !important`, 31 | }, 32 | }, 33 | 34 | colorPrimary: { 35 | color: borderColor, 36 | 37 | "&.Mui-checked": { 38 | color: info.main, 39 | 40 | "& .MuiSvgIcon-root": { 41 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 42 | info.main, 43 | info.main 44 | )}`, 45 | borderColor: info.main, 46 | }, 47 | }, 48 | }, 49 | 50 | colorSecondary: { 51 | color: borderColor, 52 | 53 | "& .MuiSvgIcon-root": { 54 | color: info.main, 55 | "&.Mui-checked": { 56 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 57 | info.main, 58 | info.main 59 | )}`, 60 | borderColor: info.main, 61 | }, 62 | }, 63 | }, 64 | }, 65 | }; 66 | 67 | export default checkbox; 68 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | 7 | const { white } = colors; 8 | const { size, fontWeightBold } = typography; 9 | 10 | const formControlLabel = { 11 | styleOverrides: { 12 | root: { 13 | display: "block", 14 | minHeight: pxToRem(24), 15 | marginBottom: pxToRem(2), 16 | }, 17 | 18 | label: { 19 | display: "inline-block", 20 | fontSize: size.sm, 21 | fontWeight: fontWeightBold, 22 | color: white.main, 23 | lineHeight: 1, 24 | transform: `translateY(${pxToRem(1)})`, 25 | marginLeft: pxToRem(4), 26 | 27 | "&.Mui-disabled": { 28 | color: white.main, 29 | }, 30 | }, 31 | }, 32 | }; 33 | 34 | export default formControlLabel; 35 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | const { text } = colors; 5 | 6 | const formLabel = { 7 | styleOverrides: { 8 | root: { 9 | color: text.main, 10 | }, 11 | }, 12 | }; 13 | 14 | export default formLabel; 15 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/input.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | import borders from "assets/theme-dark/base/borders"; 5 | 6 | import rgba from "assets/theme-dark/functions/rgba"; 7 | 8 | const { info, inputBorderColor, dark, grey, white } = colors; 9 | const { size } = typography; 10 | const { borderWidth } = borders; 11 | 12 | const input = { 13 | styleOverrides: { 14 | root: { 15 | fontSize: size.sm, 16 | color: dark.main, 17 | 18 | "&:hover:not(.Mui-disabled):before": { 19 | borderBottom: `${borderWidth[1]} solid ${rgba(inputBorderColor, 0.6)}`, 20 | }, 21 | 22 | "&:before": { 23 | borderColor: rgba(inputBorderColor, 0.6), 24 | }, 25 | 26 | "&:after": { 27 | borderColor: info.main, 28 | }, 29 | 30 | input: { 31 | color: white.main, 32 | 33 | "&::-webkit-input-placeholder": { 34 | color: grey[100], 35 | }, 36 | }, 37 | }, 38 | }, 39 | }; 40 | 41 | export default input; 42 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | 5 | const { text, info } = colors; 6 | const { size } = typography; 7 | 8 | const inputLabel = { 9 | styleOverrides: { 10 | root: { 11 | fontSize: size.sm, 12 | color: text.main, 13 | lineHeight: 0.9, 14 | 15 | "&.Mui-focused": { 16 | color: info.main, 17 | }, 18 | 19 | "&.MuiInputLabel-shrink": { 20 | lineHeight: 1.5, 21 | fontSize: size.md, 22 | 23 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 24 | fontSize: "0.85em", 25 | }, 26 | }, 27 | }, 28 | 29 | sizeSmall: { 30 | fontSize: size.xs, 31 | lineHeight: 1.625, 32 | 33 | "&.MuiInputLabel-shrink": { 34 | lineHeight: 1.6, 35 | fontSize: size.sm, 36 | 37 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 38 | fontSize: "0.72em", 39 | }, 40 | }, 41 | }, 42 | }, 43 | }; 44 | 45 | export default inputLabel; 46 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/inputOutlined.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import typography from "assets/theme-dark/base/typography"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | import rgba from "assets/theme-dark/functions/rgba"; 8 | 9 | const { inputBorderColor, info, grey, transparent, white } = colors; 10 | const { borderRadius } = borders; 11 | const { size } = typography; 12 | 13 | const inputOutlined = { 14 | styleOverrides: { 15 | root: { 16 | backgroundColor: transparent.main, 17 | fontSize: size.sm, 18 | borderRadius: borderRadius.md, 19 | 20 | "&:hover .MuiOutlinedInput-notchedOutline": { 21 | borderColor: rgba(inputBorderColor, 0.6), 22 | }, 23 | 24 | "&.Mui-focused": { 25 | "& .MuiOutlinedInput-notchedOutline": { 26 | borderColor: info.main, 27 | }, 28 | }, 29 | }, 30 | 31 | notchedOutline: { 32 | borderColor: rgba(inputBorderColor, 0.6), 33 | }, 34 | 35 | input: { 36 | color: white.main, 37 | padding: pxToRem(12), 38 | backgroundColor: transparent.main, 39 | 40 | "&::-webkit-input-placeholder": { 41 | color: grey[100], 42 | }, 43 | }, 44 | 45 | inputSizeSmall: { 46 | fontSize: size.xs, 47 | padding: pxToRem(10), 48 | }, 49 | 50 | multiline: { 51 | color: grey[700], 52 | padding: 0, 53 | }, 54 | }, 55 | }; 56 | 57 | export default inputOutlined; 58 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/radio.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | import linearGradient from "assets/theme-dark/functions/linearGradient"; 6 | 7 | const { borderWidth, borderColor } = borders; 8 | const { transparent, info } = colors; 9 | 10 | const radio = { 11 | styleOverrides: { 12 | root: { 13 | "& .MuiSvgIcon-root": { 14 | width: pxToRem(20), 15 | height: pxToRem(20), 16 | color: transparent.main, 17 | border: `${borderWidth[1]} solid ${borderColor}`, 18 | borderRadius: "50%", 19 | }, 20 | 21 | "&:after": { 22 | transition: "opacity 250ms ease-in-out", 23 | content: `""`, 24 | position: "absolute", 25 | width: pxToRem(14), 26 | height: pxToRem(14), 27 | borderRadius: "50%", 28 | backgroundImage: linearGradient(info.main, info.main), 29 | opacity: 0, 30 | left: 0, 31 | right: 0, 32 | top: 0, 33 | bottom: 0, 34 | margin: "auto", 35 | }, 36 | 37 | "&:hover": { 38 | backgroundColor: transparent.main, 39 | }, 40 | 41 | "&.Mui-focusVisible": { 42 | border: `${borderWidth[2]} solid ${info.main} !important`, 43 | }, 44 | }, 45 | 46 | colorPrimary: { 47 | color: borderColor, 48 | 49 | "&.Mui-checked": { 50 | color: info.main, 51 | 52 | "& .MuiSvgIcon-root": { 53 | borderColor: info.main, 54 | }, 55 | 56 | "&:after": { 57 | opacity: 1, 58 | }, 59 | }, 60 | }, 61 | 62 | colorSecondary: { 63 | color: borderColor, 64 | 65 | "&.Mui-checked": { 66 | color: info.main, 67 | 68 | "& .MuiSvgIcon-root": { 69 | borderColor: info.main, 70 | }, 71 | 72 | "&:after": { 73 | opacity: 1, 74 | }, 75 | }, 76 | }, 77 | }, 78 | }; 79 | 80 | export default radio; 81 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/select.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { transparent } = colors; 7 | 8 | const select = { 9 | styleOverrides: { 10 | select: { 11 | display: "grid", 12 | alignItems: "center", 13 | padding: `0 ${pxToRem(12)} !important`, 14 | 15 | "& .Mui-selected": { 16 | backgroundColor: transparent.main, 17 | }, 18 | }, 19 | 20 | selectMenu: { 21 | background: "none", 22 | height: "none", 23 | minHeight: "none", 24 | overflow: "unset", 25 | }, 26 | 27 | icon: { 28 | display: "none", 29 | }, 30 | }, 31 | }; 32 | 33 | export default select; 34 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/switchButton.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import boxShadows from "assets/theme-dark/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | import linearGradient from "assets/theme-dark/functions/linearGradient"; 8 | 9 | const { white, gradients, grey, transparent } = colors; 10 | const { borderWidth } = borders; 11 | const { md } = boxShadows; 12 | 13 | const switchButton = { 14 | defaultProps: { 15 | disableRipple: false, 16 | }, 17 | 18 | styleOverrides: { 19 | switchBase: { 20 | color: gradients.dark.main, 21 | 22 | "&:hover": { 23 | backgroundColor: transparent.main, 24 | }, 25 | 26 | "&.Mui-checked": { 27 | color: gradients.dark.main, 28 | 29 | "&:hover": { 30 | backgroundColor: transparent.main, 31 | }, 32 | 33 | "& .MuiSwitch-thumb": { 34 | borderColor: `${gradients.dark.main} !important`, 35 | }, 36 | 37 | "& + .MuiSwitch-track": { 38 | backgroundColor: `${gradients.dark.main} !important`, 39 | borderColor: `${gradients.dark.main} !important`, 40 | opacity: 1, 41 | }, 42 | }, 43 | 44 | "&.Mui-disabled + .MuiSwitch-track": { 45 | opacity: "0.3 !important", 46 | }, 47 | 48 | "&.Mui-focusVisible .MuiSwitch-thumb": { 49 | backgroundImage: linearGradient(gradients.info.main, gradients.info.state), 50 | }, 51 | }, 52 | 53 | thumb: { 54 | backgroundColor: white.main, 55 | boxShadow: md, 56 | border: `${borderWidth[1]} solid ${grey[400]}`, 57 | }, 58 | 59 | track: { 60 | width: pxToRem(32), 61 | height: pxToRem(15), 62 | backgroundColor: grey[400], 63 | border: `${borderWidth[1]} solid ${grey[400]}`, 64 | opacity: 1, 65 | }, 66 | 67 | checked: {}, 68 | }, 69 | }; 70 | 71 | export default switchButton; 72 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/form/textField.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | const { transparent } = colors; 5 | 6 | const textField = { 7 | styleOverrides: { 8 | root: { 9 | backgroundColor: transparent.main, 10 | }, 11 | }, 12 | }; 13 | 14 | export default textField; 15 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/icon.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | const icon = { 5 | defaultProps: { 6 | baseClassName: "material-icons-round", 7 | fontSize: "inherit", 8 | }, 9 | 10 | styleOverrides: { 11 | fontSizeInherit: { 12 | fontSize: "inherit !important", 13 | }, 14 | 15 | fontSizeSmall: { 16 | fontSize: `${pxToRem(20)} !important`, 17 | }, 18 | 19 | fontSizeLarge: { 20 | fontSize: `${pxToRem(36)} !important`, 21 | }, 22 | }, 23 | }; 24 | 25 | export default icon; 26 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/iconButton.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | const { transparent } = colors; 5 | 6 | const iconButton = { 7 | styleOverrides: { 8 | root: { 9 | "&:hover": { 10 | backgroundColor: transparent.main, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export default iconButton; 17 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | 7 | const { borderRadius } = borders; 8 | const { light } = colors; 9 | 10 | const linearProgress = { 11 | styleOverrides: { 12 | root: { 13 | height: pxToRem(6), 14 | borderRadius: borderRadius.md, 15 | overflow: "visible", 16 | position: "relative", 17 | }, 18 | 19 | colorPrimary: { 20 | backgroundColor: light.main, 21 | }, 22 | 23 | colorSecondary: { 24 | backgroundColor: light.main, 25 | }, 26 | 27 | bar: { 28 | height: pxToRem(6), 29 | borderRadius: borderRadius.sm, 30 | position: "absolute", 31 | transform: `translate(0, 0) !important`, 32 | transition: "width 0.6s ease !important", 33 | }, 34 | }, 35 | }; 36 | 37 | export default linearProgress; 38 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/link.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const link = { 4 | defaultProps: { 5 | underline: "none", 6 | color: "inherit", 7 | }, 8 | }; 9 | 10 | export default link; 11 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/list/index.js: -------------------------------------------------------------------------------- 1 | 2 | const list = { 3 | styleOverrides: { 4 | padding: { 5 | paddingTop: 0, 6 | paddingBottom: 0, 7 | }, 8 | }, 9 | }; 10 | 11 | export default list; 12 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const listItem = { 4 | defaultProps: { 5 | disableGutters: true, 6 | }, 7 | 8 | styleOverrides: { 9 | root: { 10 | paddingTop: 0, 11 | paddingBottom: 0, 12 | }, 13 | }, 14 | }; 15 | 16 | export default listItem; 17 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | 2 | const listItemText = { 3 | styleOverrides: { 4 | root: { 5 | marginTop: 0, 6 | marginBottom: 0, 7 | }, 8 | }, 9 | }; 10 | 11 | export default listItemText; 12 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/menu/index.js: -------------------------------------------------------------------------------- 1 | 2 | import boxShadows from "assets/theme-dark/base/boxShadows"; 3 | import typography from "assets/theme-dark/base/typography"; 4 | import colors from "assets/theme-dark/base/colors"; 5 | import borders from "assets/theme-dark/base/borders"; 6 | 7 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 8 | 9 | const { md } = boxShadows; 10 | const { size } = typography; 11 | const { text, background } = colors; 12 | const { borderRadius } = borders; 13 | 14 | const menu = { 15 | defaultProps: { 16 | disableAutoFocusItem: true, 17 | }, 18 | 19 | styleOverrides: { 20 | paper: { 21 | minWidth: pxToRem(160), 22 | boxShadow: md, 23 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 24 | fontSize: size.sm, 25 | color: text.main, 26 | textAlign: "left", 27 | backgroundColor: `${background.card} !important`, 28 | borderRadius: borderRadius.md, 29 | }, 30 | }, 31 | }; 32 | 33 | export default menu; 34 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import typography from "assets/theme-dark/base/typography"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | import rgba from "assets/theme-dark/functions/rgba"; 8 | 9 | const { dark, white } = colors; 10 | const { borderRadius } = borders; 11 | const { size } = typography; 12 | 13 | const menuItem = { 14 | styleOverrides: { 15 | root: { 16 | minWidth: pxToRem(160), 17 | minHeight: "unset", 18 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 19 | borderRadius: borderRadius.md, 20 | fontSize: size.sm, 21 | color: rgba(white.main, 0.8), 22 | transition: "background-color 300ms ease, color 300ms ease", 23 | 24 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 25 | backgroundColor: dark.main, 26 | color: white.main, 27 | }, 28 | }, 29 | }, 30 | }; 31 | 32 | export default menuItem; 33 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/popover.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | import colors from "assets/theme-dark/base/colors"; 5 | import boxShadows from "assets/theme-dark/base/boxShadows"; 6 | import borders from "assets/theme-dark/base/borders"; 7 | 8 | const { transparent } = colors; 9 | const { md } = boxShadows; 10 | const { borderRadius } = borders; 11 | 12 | const popover = { 13 | styleOverrides: { 14 | paper: { 15 | backgroundColor: transparent.main, 16 | boxShadow: md, 17 | padding: pxToRem(8), 18 | borderRadius: borderRadius.md, 19 | }, 20 | }, 21 | }; 22 | 23 | export default popover; 24 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/sidenav.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | 7 | const { background } = colors; 8 | const { borderRadius } = borders; 9 | 10 | const sidenav = { 11 | styleOverrides: { 12 | root: { 13 | width: pxToRem(250), 14 | whiteSpace: "nowrap", 15 | border: "none", 16 | }, 17 | 18 | paper: { 19 | width: pxToRem(250), 20 | backgroundColor: background.sidenav, 21 | height: `calc(100vh - ${pxToRem(32)})`, 22 | margin: pxToRem(16), 23 | borderRadius: borderRadius.xl, 24 | border: "none", 25 | }, 26 | 27 | paperAnchorDockedLeft: { 28 | borderRight: "none", 29 | }, 30 | }, 31 | }; 32 | 33 | export default sidenav; 34 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/slider.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { grey, white, black, info } = colors; 9 | const { borderRadius, borderWidth } = borders; 10 | const { sliderBoxShadow } = boxShadows; 11 | 12 | const slider = { 13 | styleOverrides: { 14 | root: { 15 | width: "100%", 16 | 17 | "& .MuiSlider-active, & .Mui-focusVisible": { 18 | boxShadow: "none !important", 19 | }, 20 | 21 | "& .MuiSlider-valueLabel": { 22 | color: black.main, 23 | }, 24 | }, 25 | 26 | rail: { 27 | height: pxToRem(2), 28 | background: grey[200], 29 | borderRadius: borderRadius.sm, 30 | opacity: 1, 31 | }, 32 | 33 | track: { 34 | background: info.main, 35 | height: pxToRem(2), 36 | position: "relative", 37 | border: "none", 38 | borderRadius: borderRadius.lg, 39 | zIndex: 1, 40 | }, 41 | 42 | thumb: { 43 | width: pxToRem(14), 44 | height: pxToRem(14), 45 | backgroundColor: white.main, 46 | zIndex: 10, 47 | boxShadow: sliderBoxShadow.thumb, 48 | border: `${borderWidth[1]} solid ${info.main}`, 49 | 50 | "&:hover": { 51 | boxShadow: "none", 52 | }, 53 | }, 54 | }, 55 | }; 56 | 57 | export default slider; 58 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import boxShadows from "assets/theme-dark/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | import linearGradient from "assets/theme-dark/functions/linearGradient"; 8 | 9 | const { transparent, gradients } = colors; 10 | const { borderRadius } = borders; 11 | const { colored } = boxShadows; 12 | 13 | const stepper = { 14 | styleOverrides: { 15 | root: { 16 | background: linearGradient(gradients.info.main, gradients.info.state), 17 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 18 | borderRadius: borderRadius.lg, 19 | boxShadow: colored.info, 20 | 21 | "&.MuiPaper-root": { 22 | backgroundColor: transparent.main, 23 | }, 24 | }, 25 | }, 26 | }; 27 | 28 | export default stepper; 29 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | const step = { 5 | styleOverrides: { 6 | root: { 7 | padding: `0 ${pxToRem(6)}`, 8 | }, 9 | }, 10 | }; 11 | 12 | export default step; 13 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | 5 | const { white } = colors; 6 | const { borderWidth } = borders; 7 | 8 | const stepConnector = { 9 | styleOverrides: { 10 | root: { 11 | color: "#9fc9ff", 12 | transition: "all 200ms linear", 13 | 14 | "&.Mui-active": { 15 | color: white.main, 16 | }, 17 | 18 | "&.Mui-completed": { 19 | color: white.main, 20 | }, 21 | }, 22 | 23 | alternativeLabel: { 24 | top: "14%", 25 | left: "-50%", 26 | right: "50%", 27 | }, 28 | 29 | line: { 30 | borderWidth: `${borderWidth[2]} !important`, 31 | borderColor: "currentColor", 32 | opacity: 0.5, 33 | }, 34 | }, 35 | }; 36 | 37 | export default stepConnector; 38 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | import boxShadow from "assets/theme-dark/functions/boxShadow"; 6 | 7 | const { white } = colors; 8 | 9 | const stepIcon = { 10 | styleOverrides: { 11 | root: { 12 | background: "#9fc9ff", 13 | fill: "#9fc9ff", 14 | stroke: "#9fc9ff", 15 | strokeWidth: pxToRem(10), 16 | width: pxToRem(13), 17 | height: pxToRem(13), 18 | borderRadius: "50%", 19 | zIndex: 99, 20 | transition: "all 200ms linear", 21 | 22 | "&.Mui-active": { 23 | background: white.main, 24 | fill: white.main, 25 | stroke: white.main, 26 | borderColor: white.main, 27 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 28 | }, 29 | 30 | "&.Mui-completed": { 31 | background: white.main, 32 | fill: white.main, 33 | stroke: white.main, 34 | borderColor: white.main, 35 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 36 | }, 37 | }, 38 | }, 39 | }; 40 | 41 | export default stepIcon; 42 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | 5 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 6 | import rgba from "assets/theme-dark/functions/rgba"; 7 | 8 | const { size, fontWeightRegular } = typography; 9 | const { white } = colors; 10 | 11 | const stepLabel = { 12 | styleOverrides: { 13 | label: { 14 | marginTop: `${pxToRem(8)} !important`, 15 | fontWeight: fontWeightRegular, 16 | fontSize: size.xs, 17 | color: "#9fc9ff", 18 | textTransform: "uppercase", 19 | 20 | "&.Mui-active": { 21 | fontWeight: `${fontWeightRegular} !important`, 22 | color: `${rgba(white.main, 0.8)} !important`, 23 | }, 24 | 25 | "&.Mui-completed": { 26 | fontWeight: `${fontWeightRegular} !important`, 27 | color: `${rgba(white.main, 0.8)} !important`, 28 | }, 29 | }, 30 | }, 31 | }; 32 | 33 | export default stepLabel; 34 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 3 | 4 | const svgIcon = { 5 | defaultProps: { 6 | fontSize: "inherit", 7 | }, 8 | 9 | styleOverrides: { 10 | fontSizeInherit: { 11 | fontSize: "inherit !important", 12 | }, 13 | 14 | fontSizeSmall: { 15 | fontSize: `${pxToRem(20)} !important`, 16 | }, 17 | 18 | fontSizeLarge: { 19 | fontSize: `${pxToRem(36)} !important`, 20 | }, 21 | }, 22 | }; 23 | 24 | export default svgIcon; 25 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | import colors from "assets/theme-dark/base/colors"; 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { borderWidth } = borders; 7 | const { light } = colors; 8 | 9 | const tableCell = { 10 | styleOverrides: { 11 | root: { 12 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 13 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 14 | }, 15 | }, 16 | }; 17 | 18 | export default tableCell; 19 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import boxShadows from "assets/theme-dark/base/boxShadows"; 4 | import borders from "assets/theme-dark/base/borders"; 5 | 6 | const { background } = colors; 7 | const { md } = boxShadows; 8 | const { borderRadius } = borders; 9 | 10 | const tableContainer = { 11 | styleOverrides: { 12 | root: { 13 | backgroundColor: background.card, 14 | boxShadow: md, 15 | borderRadius: borderRadius.xl, 16 | }, 17 | }, 18 | }; 19 | 20 | export default tableContainer; 21 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme-dark/base/borders"; 3 | 4 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 5 | 6 | const { borderRadius } = borders; 7 | 8 | const tableHead = { 9 | styleOverrides: { 10 | root: { 11 | display: "block", 12 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 13 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 14 | }, 15 | }, 16 | }; 17 | 18 | export default tableHead; 19 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme-dark/base/colors"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import boxShadows from "assets/theme-dark/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | 8 | const { background } = colors; 9 | const { borderRadius } = borders; 10 | const { md } = boxShadows; 11 | 12 | const tabs = { 13 | styleOverrides: { 14 | root: { 15 | position: "relative", 16 | backgroundColor: background.card, 17 | borderRadius: borderRadius.xl, 18 | minHeight: "unset", 19 | padding: pxToRem(4), 20 | }, 21 | 22 | flexContainer: { 23 | height: "100%", 24 | position: "relative", 25 | zIndex: 10, 26 | }, 27 | 28 | fixed: { 29 | overflow: "unset !important", 30 | overflowX: "unset !important", 31 | }, 32 | 33 | vertical: { 34 | "& .MuiTabs-indicator": { 35 | width: "100%", 36 | }, 37 | }, 38 | 39 | indicator: { 40 | height: "100%", 41 | borderRadius: borderRadius.lg, 42 | backgroundColor: background.default, 43 | boxShadow: md, 44 | transition: "all 500ms ease", 45 | }, 46 | }, 47 | }; 48 | 49 | export default tabs; 50 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme-dark/base/typography"; 3 | import borders from "assets/theme-dark/base/borders"; 4 | import colors from "assets/theme-dark/base/colors"; 5 | 6 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 7 | 8 | const { size, fontWeightRegular } = typography; 9 | const { borderRadius } = borders; 10 | const { white } = colors; 11 | 12 | const tab = { 13 | styleOverrides: { 14 | root: { 15 | display: "flex", 16 | alignItems: "center", 17 | flexDirection: "row", 18 | flex: "1 1 auto", 19 | textAlign: "center", 20 | maxWidth: "unset !important", 21 | minWidth: "unset !important", 22 | minHeight: "unset !important", 23 | fontSize: size.md, 24 | fontWeight: fontWeightRegular, 25 | textTransform: "none", 26 | lineHeight: "inherit", 27 | padding: pxToRem(4), 28 | borderRadius: borderRadius.lg, 29 | color: `${white.main} !important`, 30 | opacity: "1 !important", 31 | 32 | "& .material-icons, .material-icons-round": { 33 | marginBottom: "0 !important", 34 | marginRight: pxToRem(6), 35 | }, 36 | 37 | "& svg": { 38 | marginBottom: "0 !important", 39 | marginRight: pxToRem(6), 40 | }, 41 | }, 42 | 43 | labelIcon: { 44 | paddingTop: pxToRem(4), 45 | }, 46 | }, 47 | }; 48 | 49 | export default tab; 50 | -------------------------------------------------------------------------------- /src/assets/theme-dark/components/tooltip.js: -------------------------------------------------------------------------------- 1 | 2 | import Fade from "@mui/material/Fade"; 3 | 4 | // Amdin panel React base styles 5 | import colors from "assets/theme-dark/base/colors"; 6 | import typography from "assets/theme-dark/base/typography"; 7 | import borders from "assets/theme-dark/base/borders"; 8 | 9 | // Amdin panel React helper functions 10 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 11 | 12 | const { black, white } = colors; 13 | const { size, fontWeightRegular } = typography; 14 | const { borderRadius } = borders; 15 | 16 | const tooltip = { 17 | defaultProps: { 18 | arrow: true, 19 | TransitionComponent: Fade, 20 | }, 21 | 22 | styleOverrides: { 23 | tooltip: { 24 | maxWidth: pxToRem(200), 25 | backgroundColor: black.main, 26 | color: white.main, 27 | fontSize: size.sm, 28 | fontWeight: fontWeightRegular, 29 | textAlign: "center", 30 | borderRadius: borderRadius.md, 31 | opacity: 0.7, 32 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 33 | }, 34 | 35 | arrow: { 36 | color: black.main, 37 | }, 38 | }, 39 | }; 40 | 41 | export default tooltip; 42 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | 2 | import rgba from "assets/theme-dark/functions/rgba"; 3 | import pxToRem from "assets/theme-dark/functions/pxToRem"; 4 | 5 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 6 | const [x, y] = offset; 7 | const [blur, spread] = radius; 8 | 9 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 10 | color, 11 | opacity 12 | )}`; 13 | } 14 | 15 | export default boxShadow; 16 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | 2 | import rgba from "assets/theme-dark/functions/rgba"; 3 | 4 | function gradientChartLine(chart, color, opacity = 0.2) { 5 | const ctx = chart.getContext("2d"); 6 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 7 | const primaryColor = rgba(color, opacity).toString(); 8 | 9 | gradientStroke.addColorStop(1, primaryColor); 10 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 11 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 12 | 13 | return gradientStroke; 14 | } 15 | 16 | export default gradientChartLine; 17 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | 2 | import chroma from "chroma-js"; 3 | 4 | function hexToRgb(color) { 5 | return chroma(color).rgb().join(", "); 6 | } 7 | 8 | export default hexToRgb; 9 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function linearGradient(color, colorState, angle = 195) { 4 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 5 | } 6 | 7 | export default linearGradient; 8 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | 2 | function pxToRem(number, baseNumber = 16) { 3 | return `${number / baseNumber}rem`; 4 | } 5 | 6 | export default pxToRem; 7 | -------------------------------------------------------------------------------- /src/assets/theme-dark/functions/rgba.js: -------------------------------------------------------------------------------- 1 | 2 | import hexToRgb from "assets/theme-dark/functions/hexToRgb"; 3 | 4 | function rgba(color, opacity) { 5 | return `rgba(${hexToRgb(color)}, ${opacity})`; 6 | } 7 | 8 | export default rgba; 9 | -------------------------------------------------------------------------------- /src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | 4 | // Amdin panel React Helper Functions 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { grey } = colors; 8 | 9 | const borders = { 10 | borderColor: grey[300], 11 | 12 | borderWidth: { 13 | 0: 0, 14 | 1: pxToRem(1), 15 | 2: pxToRem(2), 16 | 3: pxToRem(3), 17 | 4: pxToRem(4), 18 | 5: pxToRem(5), 19 | }, 20 | 21 | borderRadius: { 22 | xs: pxToRem(1.6), 23 | sm: pxToRem(2), 24 | md: pxToRem(6), 25 | lg: pxToRem(8), 26 | xl: pxToRem(12), 27 | xxl: pxToRem(16), 28 | section: pxToRem(160), 29 | }, 30 | }; 31 | 32 | export default borders; 33 | -------------------------------------------------------------------------------- /src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | const breakpoints = { 2 | values: { 3 | xs: 0, 4 | sm: 576, 5 | md: 768, 6 | lg: 992, 7 | xl: 1200, 8 | xxl: 1400, 9 | }, 10 | }; 11 | 12 | export default breakpoints; 13 | -------------------------------------------------------------------------------- /src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | 4 | const { info, dark } = colors; 5 | 6 | const globals = { 7 | html: { 8 | scrollBehavior: "smooth", 9 | }, 10 | "*, *::before, *::after": { 11 | margin: 0, 12 | padding: 0, 13 | }, 14 | "a, a:link, a:visited": { 15 | textDecoration: "none !important", 16 | }, 17 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 18 | color: `${dark.main} !important`, 19 | transition: "color 150ms ease-in !important", 20 | }, 21 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 22 | color: `${info.main} !important`, 23 | }, 24 | }; 25 | 26 | export default globals; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | 2 | const appBar = { 3 | defaultProps: { 4 | color: "transparent", 5 | }, 6 | 7 | styleOverrides: { 8 | root: { 9 | boxShadow: "none", 10 | }, 11 | }, 12 | }; 13 | 14 | export default appBar; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme/base/borders"; 3 | 4 | const { borderRadius } = borders; 5 | 6 | const avatar = { 7 | styleOverrides: { 8 | root: { 9 | transition: "all 200ms ease-in-out", 10 | }, 11 | 12 | rounded: { 13 | borderRadius: borderRadius.lg, 14 | }, 15 | 16 | img: { 17 | height: "auto", 18 | }, 19 | }, 20 | }; 21 | 22 | export default avatar; 23 | -------------------------------------------------------------------------------- /src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import typography from "assets/theme/base/typography"; 4 | 5 | const { grey } = colors; 6 | const { size } = typography; 7 | 8 | const breadcrumbs = { 9 | styleOverrides: { 10 | li: { 11 | lineHeight: 0, 12 | }, 13 | 14 | separator: { 15 | fontSize: size.sm, 16 | color: grey[600], 17 | }, 18 | }, 19 | }; 20 | 21 | export default breadcrumbs; 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/contained.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | import typography from "assets/theme/base/typography"; 4 | 5 | // Amdin panel React Helper Functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { white, text, info, secondary } = colors; 9 | const { size } = typography; 10 | 11 | const contained = { 12 | base: { 13 | backgroundColor: white.main, 14 | minHeight: pxToRem(40), 15 | color: text.main, 16 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 17 | 18 | "&:hover": { 19 | backgroundColor: white.main, 20 | }, 21 | 22 | "&:active, &:active:focus, &:active:hover": { 23 | opacity: 0.85, 24 | }, 25 | 26 | "& .material-icon, .material-icons-round, svg": { 27 | fontSize: `${pxToRem(16)} !important`, 28 | }, 29 | }, 30 | 31 | small: { 32 | minHeight: pxToRem(32), 33 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 34 | fontSize: size.xs, 35 | 36 | "& .material-icon, .material-icons-round, svg": { 37 | fontSize: `${pxToRem(12)} !important`, 38 | }, 39 | }, 40 | 41 | large: { 42 | minHeight: pxToRem(47), 43 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 44 | fontSize: size.sm, 45 | 46 | "& .material-icon, .material-icons-round, svg": { 47 | fontSize: `${pxToRem(22)} !important`, 48 | }, 49 | }, 50 | 51 | primary: { 52 | backgroundColor: info.main, 53 | 54 | "&:hover": { 55 | backgroundColor: info.main, 56 | }, 57 | 58 | "&:focus:not(:hover)": { 59 | backgroundColor: info.focus, 60 | }, 61 | }, 62 | 63 | secondary: { 64 | backgroundColor: secondary.main, 65 | 66 | "&:hover": { 67 | backgroundColor: secondary.main, 68 | }, 69 | 70 | "&:focus:not(:hover)": { 71 | backgroundColor: secondary.focus, 72 | }, 73 | }, 74 | }; 75 | 76 | export default contained; 77 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Button Styles 2 | import root from "assets/theme/components/button/root"; 3 | import contained from "assets/theme/components/button/contained"; 4 | import outlined from "assets/theme/components/button/outlined"; 5 | import buttonText from "assets/theme/components/button/text"; 6 | 7 | const button = { 8 | defaultProps: { 9 | disableRipple: false, 10 | }, 11 | styleOverrides: { 12 | root: { ...root }, 13 | contained: { ...contained.base }, 14 | containedSizeSmall: { ...contained.small }, 15 | containedSizeLarge: { ...contained.large }, 16 | containedPrimary: { ...contained.primary }, 17 | containedSecondary: { ...contained.secondary }, 18 | outlined: { ...outlined.base }, 19 | outlinedSizeSmall: { ...outlined.small }, 20 | outlinedSizeLarge: { ...outlined.large }, 21 | outlinedPrimary: { ...outlined.primary }, 22 | outlinedSecondary: { ...outlined.secondary }, 23 | text: { ...buttonText.base }, 24 | textSizeSmall: { ...buttonText.small }, 25 | textSizeLarge: { ...buttonText.large }, 26 | textPrimary: { ...buttonText.primary }, 27 | textSecondary: { ...buttonText.secondary }, 28 | }, 29 | }; 30 | 31 | export default button; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/outlined.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | import typography from "assets/theme/base/typography"; 4 | 5 | // Amdin panel React Helper Functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { transparent, light, info, secondary } = colors; 9 | const { size } = typography; 10 | 11 | const outlined = { 12 | base: { 13 | minHeight: pxToRem(40), 14 | color: light.main, 15 | borderColor: light.main, 16 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 17 | 18 | "&:hover": { 19 | opacity: 0.75, 20 | backgroundColor: transparent.main, 21 | }, 22 | 23 | "& .material-icon, .material-icons-round, svg": { 24 | fontSize: `${pxToRem(16)} !important`, 25 | }, 26 | }, 27 | 28 | small: { 29 | minHeight: pxToRem(32), 30 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 31 | fontSize: size.xs, 32 | 33 | "& .material-icon, .material-icons-round, svg": { 34 | fontSize: `${pxToRem(12)} !important`, 35 | }, 36 | }, 37 | 38 | large: { 39 | minHeight: pxToRem(47), 40 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 41 | fontSize: size.sm, 42 | 43 | "& .material-icon, .material-icons-round, svg": { 44 | fontSize: `${pxToRem(22)} !important`, 45 | }, 46 | }, 47 | 48 | primary: { 49 | backgroundColor: transparent.main, 50 | borderColor: info.main, 51 | 52 | "&:hover": { 53 | backgroundColor: transparent.main, 54 | }, 55 | }, 56 | 57 | secondary: { 58 | backgroundColor: transparent.main, 59 | borderColor: secondary.main, 60 | 61 | "&:hover": { 62 | backgroundColor: transparent.main, 63 | }, 64 | }, 65 | }; 66 | 67 | export default outlined; 68 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import typography from "assets/theme/base/typography"; 3 | import borders from "assets/theme/base/borders"; 4 | 5 | // Amdin panel React Helper Functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { fontWeightBold, size } = typography; 9 | const { borderRadius } = borders; 10 | 11 | const root = { 12 | display: "inline-flex", 13 | justifyContent: "center", 14 | alignItems: "center", 15 | fontSize: size.xs, 16 | fontWeight: fontWeightBold, 17 | borderRadius: borderRadius.lg, 18 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 19 | lineHeight: 1.4, 20 | textAlign: "center", 21 | textTransform: "uppercase", 22 | userSelect: "none", 23 | backgroundSize: "150% !important", 24 | backgroundPositionX: "25% !important", 25 | transition: "all 150ms ease-in", 26 | 27 | "&:disabled": { 28 | pointerEvent: "none", 29 | opacity: 0.65, 30 | }, 31 | 32 | "& .material-icons": { 33 | fontSize: pxToRem(15), 34 | marginTop: pxToRem(-2), 35 | }, 36 | }; 37 | 38 | export default root; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/text.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | import typography from "assets/theme/base/typography"; 4 | 5 | // Amdin panel React Helper Functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { text, info, secondary, transparent } = colors; 9 | const { size } = typography; 10 | 11 | const buttonText = { 12 | base: { 13 | backgroundColor: transparent.main, 14 | minHeight: pxToRem(40), 15 | color: text.main, 16 | boxShadow: "none", 17 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 18 | 19 | "&:hover": { 20 | backgroundColor: transparent.main, 21 | boxShadow: "none", 22 | }, 23 | 24 | "&:focus": { 25 | boxShadow: "none", 26 | }, 27 | 28 | "&:active, &:active:focus, &:active:hover": { 29 | opacity: 0.85, 30 | boxShadow: "none", 31 | }, 32 | 33 | "&:disabled": { 34 | boxShadow: "none", 35 | }, 36 | 37 | "& .material-icon, .material-icons-round, svg": { 38 | fontSize: `${pxToRem(16)} !important`, 39 | }, 40 | }, 41 | 42 | small: { 43 | minHeight: pxToRem(32), 44 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 45 | fontSize: size.xs, 46 | 47 | "& .material-icon, .material-icons-round, svg": { 48 | fontSize: `${pxToRem(12)} !important`, 49 | }, 50 | }, 51 | 52 | large: { 53 | minHeight: pxToRem(47), 54 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 55 | fontSize: size.sm, 56 | 57 | "& .material-icon, .material-icons-round, svg": { 58 | fontSize: `${pxToRem(22)} !important`, 59 | }, 60 | }, 61 | 62 | primary: { 63 | color: info.main, 64 | 65 | "&:hover": { 66 | color: info.main, 67 | }, 68 | 69 | "&:focus:not(:hover)": { 70 | color: info.focus, 71 | boxShadow: "none", 72 | }, 73 | }, 74 | 75 | secondary: { 76 | color: secondary.main, 77 | 78 | "&:hover": { 79 | color: secondary.main, 80 | }, 81 | 82 | "&:focus:not(:hover)": { 83 | color: secondary.focus, 84 | boxShadow: "none", 85 | }, 86 | }, 87 | }; 88 | 89 | export default buttonText; 90 | -------------------------------------------------------------------------------- /src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | 2 | const buttonBase = { 3 | defaultProps: { 4 | disableRipple: false, 5 | }, 6 | }; 7 | 8 | export default buttonBase; 9 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Helper Functions 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const cardContent = { 5 | styleOverrides: { 6 | root: { 7 | marginTop: 0, 8 | marginBottom: 0, 9 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 10 | }, 11 | }, 12 | }; 13 | 14 | export default cardContent; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | 2 | // Amdin panel React Base Styles 3 | import borders from "assets/theme/base/borders"; 4 | 5 | // Amdin panel React Helper Functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { borderRadius } = borders; 9 | 10 | const cardMedia = { 11 | styleOverrides: { 12 | root: { 13 | borderRadius: borderRadius.xl, 14 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 15 | }, 16 | 17 | media: { 18 | width: "auto", 19 | }, 20 | }, 21 | }; 22 | 23 | export default cardMedia; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React Base Styles 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | 6 | // Amdin panel React Helper Function 7 | import rgba from "assets/theme/functions/rgba"; 8 | 9 | const { black, white } = colors; 10 | const { borderWidth, borderRadius } = borders; 11 | const { md } = boxShadows; 12 | 13 | const card = { 14 | styleOverrides: { 15 | root: { 16 | display: "flex", 17 | flexDirection: "column", 18 | position: "relative", 19 | minWidth: 0, 20 | wordWrap: "break-word", 21 | backgroundColor: white.main, 22 | backgroundClip: "border-box", 23 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 24 | borderRadius: borderRadius.xl, 25 | boxShadow: md, 26 | overflow: "visible", 27 | }, 28 | }, 29 | }; 30 | 31 | export default card; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/container.js: -------------------------------------------------------------------------------- 1 | 2 | import breakpoints from "assets/theme/base/breakpoints"; 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | const { 7 | values: { sm, md, lg, xl, xxl }, 8 | } = breakpoints; 9 | 10 | const SM = `@media (min-width: ${sm}px)`; 11 | const MD = `@media (min-width: ${md}px)`; 12 | const LG = `@media (min-width: ${lg}px)`; 13 | const XL = `@media (min-width: ${xl}px)`; 14 | const XXL = `@media (min-width: ${xxl}px)`; 15 | 16 | const sharedClasses = { 17 | paddingRight: `${pxToRem(24)} !important`, 18 | paddingLeft: `${pxToRem(24)} !important`, 19 | marginRight: "auto !important", 20 | marginLeft: "auto !important", 21 | width: "100% !important", 22 | position: "relative", 23 | }; 24 | 25 | const container = { 26 | [SM]: { 27 | ".MuiContainer-root": { 28 | ...sharedClasses, 29 | maxWidth: "540px !important", 30 | }, 31 | }, 32 | [MD]: { 33 | ".MuiContainer-root": { 34 | ...sharedClasses, 35 | maxWidth: "720px !important", 36 | }, 37 | }, 38 | [LG]: { 39 | ".MuiContainer-root": { 40 | ...sharedClasses, 41 | maxWidth: "960px !important", 42 | }, 43 | }, 44 | [XL]: { 45 | ".MuiContainer-root": { 46 | ...sharedClasses, 47 | maxWidth: "1140px !important", 48 | }, 49 | }, 50 | [XXL]: { 51 | ".MuiContainer-root": { 52 | ...sharedClasses, 53 | maxWidth: "1320px !important", 54 | }, 55 | }, 56 | }; 57 | 58 | export default container; 59 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const dialogActions = { 5 | styleOverrides: { 6 | root: { 7 | padding: pxToRem(16), 8 | }, 9 | }, 10 | }; 11 | 12 | export default dialogActions; 13 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React base styles 2 | import typography from "assets/theme/base/typography"; 3 | import borders from "assets/theme/base/borders"; 4 | import colors from "assets/theme/base/colors"; 5 | 6 | // Amdin panel React helper functions 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { size } = typography; 10 | const { text } = colors; 11 | const { borderWidth, borderColor } = borders; 12 | 13 | const dialogContent = { 14 | styleOverrides: { 15 | root: { 16 | padding: pxToRem(16), 17 | fontSize: size.md, 18 | color: text.main, 19 | }, 20 | 21 | dividers: { 22 | borderTop: `${borderWidth[1]} solid ${borderColor}`, 23 | borderBottom: `${borderWidth[1]} solid ${borderColor}`, 24 | }, 25 | }, 26 | }; 27 | 28 | export default dialogContent; 29 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React base styles 2 | import typography from "assets/theme/base/typography"; 3 | import colors from "assets/theme/base/colors"; 4 | 5 | // Amdin panel React helper functions 6 | // import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { size } = typography; 9 | const { text } = colors; 10 | 11 | const dialogContentText = { 12 | styleOverrides: { 13 | root: { 14 | fontSize: size.md, 15 | color: text.main, 16 | }, 17 | }, 18 | }; 19 | 20 | export default dialogContentText; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React base styles 2 | import typography from "assets/theme/base/typography"; 3 | 4 | // Amdin panel React helper functions 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { size } = typography; 8 | 9 | const dialogTitle = { 10 | styleOverrides: { 11 | root: { 12 | padding: pxToRem(16), 13 | fontSize: size.xl, 14 | }, 15 | }, 16 | }; 17 | 18 | export default dialogTitle; 19 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import borders from "assets/theme/base/borders"; 2 | import boxShadows from "assets/theme/base/boxShadows"; 3 | 4 | const { borderRadius } = borders; 5 | const { xxl } = boxShadows; 6 | 7 | const dialog = { 8 | styleOverrides: { 9 | paper: { 10 | borderRadius: borderRadius.lg, 11 | boxShadow: xxl, 12 | }, 13 | 14 | paperFullScreen: { 15 | borderRadius: 0, 16 | }, 17 | }, 18 | }; 19 | 20 | export default dialog; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/divider.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | import rgba from "assets/theme/functions/rgba"; 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { dark, transparent, white } = colors; 8 | 9 | const divider = { 10 | styleOverrides: { 11 | root: { 12 | backgroundColor: transparent.main, 13 | backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba( 14 | dark.main, 15 | 0.4 16 | )}, ${rgba(dark.main, 0)}) !important`, 17 | height: pxToRem(1), 18 | margin: `${pxToRem(16)} 0`, 19 | borderBottom: "none", 20 | opacity: 0.25, 21 | }, 22 | 23 | vertical: { 24 | backgroundColor: transparent.main, 25 | backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba( 26 | dark.main, 27 | 0.4 28 | )}, ${rgba(dark.main, 0)}) !important`, 29 | width: pxToRem(1), 30 | height: "100%", 31 | margin: `0 ${pxToRem(16)}`, 32 | borderRight: "none", 33 | }, 34 | 35 | light: { 36 | backgroundColor: transparent.main, 37 | backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${white.main}, ${rgba( 38 | white.main, 39 | 0 40 | )}) !important`, 41 | 42 | "&.MuiDivider-vertical": { 43 | backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${white.main}, ${rgba( 44 | white.main, 45 | 0 46 | )}) !important`, 47 | }, 48 | }, 49 | }, 50 | }; 51 | 52 | export default divider; 53 | -------------------------------------------------------------------------------- /src/assets/theme/components/flatpickr.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | import rgba from "assets/theme/functions/rgba"; 5 | 6 | const { info, white, gradients } = colors; 7 | 8 | const flatpickr = { 9 | ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": 10 | { 11 | background: rgba(info.main, 0.28), 12 | border: "none", 13 | }, 14 | 15 | ".flatpickr-day.today": { 16 | background: info.main, 17 | color: white.main, 18 | border: "none", 19 | 20 | "&:hover, &:focus": { 21 | background: `${info.focus} !important`, 22 | }, 23 | }, 24 | 25 | ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": 26 | { 27 | background: `${gradients.info.state} !important`, 28 | color: white.main, 29 | border: "none", 30 | }, 31 | 32 | ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": 33 | { 34 | color: `${info.main} !important`, 35 | fill: `${info.main} !important`, 36 | }, 37 | }; 38 | 39 | export default flatpickr; 40 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/autocomplete.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React base styles 2 | import boxShadows from "assets/theme/base/boxShadows"; 3 | import typography from "assets/theme/base/typography"; 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | 7 | // Amdin panel React helper functions 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { lg } = boxShadows; 11 | const { size } = typography; 12 | const { text, white, transparent, light, dark, gradients } = colors; 13 | const { borderRadius } = borders; 14 | 15 | const autocomplete = { 16 | styleOverrides: { 17 | popper: { 18 | boxShadow: lg, 19 | padding: pxToRem(8), 20 | fontSize: size.sm, 21 | color: text.main, 22 | textAlign: "left", 23 | backgroundColor: `${white.main} !important`, 24 | borderRadius: borderRadius.md, 25 | }, 26 | 27 | paper: { 28 | boxShadow: "none", 29 | backgroundColor: transparent.main, 30 | }, 31 | 32 | option: { 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 | '&[aria-selected="true"]': { 45 | backgroundColor: `${light.main} !important`, 46 | color: `${dark.main} !important`, 47 | }, 48 | }, 49 | 50 | noOptions: { 51 | fontSize: size.sm, 52 | color: text.main, 53 | }, 54 | 55 | groupLabel: { 56 | color: dark.main, 57 | }, 58 | 59 | loading: { 60 | fontSize: size.sm, 61 | color: text.main, 62 | }, 63 | 64 | tag: { 65 | display: "flex", 66 | alignItems: "center", 67 | height: "auto", 68 | padding: pxToRem(4), 69 | backgroundColor: gradients.dark.state, 70 | color: white.main, 71 | 72 | "& .MuiChip-label": { 73 | lineHeight: 1.2, 74 | padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, 75 | }, 76 | 77 | "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { 78 | color: white.main, 79 | marginRight: 0, 80 | }, 81 | }, 82 | }, 83 | }; 84 | 85 | export default autocomplete; 86 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/checkbox.js: -------------------------------------------------------------------------------- 1 | // Amdin panel React base styles 2 | import borders from "assets/theme/base/borders"; 3 | import colors from "assets/theme/base/colors"; 4 | 5 | // Amdin panel React helper functions 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | import linearGradient from "assets/theme/functions/linearGradient"; 8 | 9 | const { borderWidth, borderColor } = borders; 10 | const { transparent, info } = colors; 11 | 12 | const checkbox = { 13 | styleOverrides: { 14 | root: { 15 | "& .MuiSvgIcon-root": { 16 | backgroundPosition: "center", 17 | backgroundSize: "contain", 18 | backgroundRepeat: "no-repeat", 19 | width: pxToRem(20), 20 | height: pxToRem(20), 21 | color: transparent.main, 22 | border: `${borderWidth[1]} solid ${borderColor}`, 23 | borderRadius: pxToRem(5.6), 24 | }, 25 | 26 | "&:hover": { 27 | backgroundColor: transparent.main, 28 | }, 29 | 30 | "&.Mui-focusVisible": { 31 | border: `${borderWidth[2]} solid ${info.main} !important`, 32 | }, 33 | }, 34 | 35 | colorPrimary: { 36 | color: borderColor, 37 | 38 | "&.Mui-checked": { 39 | color: info.main, 40 | 41 | "& .MuiSvgIcon-root": { 42 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 43 | info.main, 44 | info.main 45 | )}`, 46 | borderColor: info.main, 47 | }, 48 | }, 49 | }, 50 | 51 | colorSecondary: { 52 | color: borderColor, 53 | 54 | "& .MuiSvgIcon-root": { 55 | color: info.main, 56 | "&.Mui-checked": { 57 | backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( 58 | info.main, 59 | info.main 60 | )}`, 61 | borderColor: info.main, 62 | }, 63 | }, 64 | }, 65 | }, 66 | }; 67 | 68 | export default checkbox; 69 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | 2 | // Amdin panel React base styles 3 | import colors from "assets/theme/base/colors"; 4 | import typography from "assets/theme/base/typography"; 5 | 6 | // Amdin panel React helper functions 7 | import pxToRem from "assets/theme/functions/pxToRem"; 8 | 9 | const { dark } = colors; 10 | const { size, fontWeightBold } = typography; 11 | 12 | const formControlLabel = { 13 | styleOverrides: { 14 | root: { 15 | display: "block", 16 | minHeight: pxToRem(24), 17 | marginBottom: pxToRem(2), 18 | }, 19 | 20 | label: { 21 | display: "inline-block", 22 | fontSize: size.sm, 23 | fontWeight: fontWeightBold, 24 | color: dark.main, 25 | lineHeight: 1, 26 | transform: `translateY(${pxToRem(1)})`, 27 | marginLeft: pxToRem(4), 28 | 29 | "&.Mui-disabled": { 30 | color: dark.main, 31 | }, 32 | }, 33 | }, 34 | }; 35 | 36 | export default formControlLabel; 37 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | const { text } = colors; 5 | 6 | const formLabel = { 7 | styleOverrides: { 8 | root: { 9 | color: text.main, 10 | }, 11 | }, 12 | }; 13 | 14 | export default formLabel; 15 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import typography from "assets/theme/base/typography"; 3 | import borders from "assets/theme/base/borders"; 4 | 5 | const { info, inputBorderColor, dark } = colors; 6 | const { size } = typography; 7 | const { borderWidth } = borders; 8 | 9 | const input = { 10 | styleOverrides: { 11 | root: { 12 | fontSize: size.sm, 13 | color: dark.main, 14 | 15 | "&:hover:not(.Mui-disabled):before": { 16 | borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, 17 | }, 18 | 19 | "&:before": { 20 | borderColor: inputBorderColor, 21 | }, 22 | 23 | "&:after": { 24 | borderColor: info.main, 25 | }, 26 | }, 27 | }, 28 | }; 29 | 30 | export default input; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import typography from "assets/theme/base/typography"; 3 | 4 | const { text, info } = colors; 5 | const { size } = typography; 6 | 7 | const inputLabel = { 8 | styleOverrides: { 9 | root: { 10 | fontSize: size.sm, 11 | color: text.main, 12 | lineHeight: 0.9, 13 | 14 | "&.Mui-focused": { 15 | color: info.main, 16 | }, 17 | 18 | "&.MuiInputLabel-shrink": { 19 | lineHeight: 1.5, 20 | fontSize: size.md, 21 | 22 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 23 | fontSize: "0.85em", 24 | }, 25 | }, 26 | }, 27 | 28 | sizeSmall: { 29 | fontSize: size.xs, 30 | lineHeight: 1.625, 31 | 32 | "&.MuiInputLabel-shrink": { 33 | lineHeight: 1.6, 34 | fontSize: size.sm, 35 | 36 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 37 | fontSize: "0.72em", 38 | }, 39 | }, 40 | }, 41 | }, 42 | }; 43 | 44 | export default inputLabel; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputOutlined.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import borders from "assets/theme/base/borders"; 3 | import typography from "assets/theme/base/typography"; 4 | 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { inputBorderColor, info, grey, transparent } = colors; 8 | const { borderRadius } = borders; 9 | const { size } = typography; 10 | 11 | const inputOutlined = { 12 | styleOverrides: { 13 | root: { 14 | backgroundColor: transparent.main, 15 | fontSize: size.sm, 16 | borderRadius: borderRadius.md, 17 | 18 | "&:hover .MuiOutlinedInput-notchedOutline": { 19 | borderColor: inputBorderColor, 20 | }, 21 | 22 | "&.Mui-focused": { 23 | "& .MuiOutlinedInput-notchedOutline": { 24 | borderColor: info.main, 25 | }, 26 | }, 27 | }, 28 | 29 | notchedOutline: { 30 | borderColor: inputBorderColor, 31 | }, 32 | 33 | input: { 34 | color: grey[700], 35 | padding: pxToRem(12), 36 | backgroundColor: transparent.main, 37 | }, 38 | 39 | inputSizeSmall: { 40 | fontSize: size.xs, 41 | padding: pxToRem(10), 42 | }, 43 | 44 | multiline: { 45 | color: grey[700], 46 | padding: 0, 47 | }, 48 | }, 49 | }; 50 | 51 | export default inputOutlined; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/radio.js: -------------------------------------------------------------------------------- 1 | import borders from "assets/theme/base/borders"; 2 | import colors from "assets/theme/base/colors"; 3 | import pxToRem from "assets/theme/functions/pxToRem"; 4 | import linearGradient from "assets/theme/functions/linearGradient"; 5 | 6 | const { borderWidth, borderColor } = borders; 7 | const { transparent, info } = colors; 8 | 9 | const radio = { 10 | styleOverrides: { 11 | root: { 12 | "& .MuiSvgIcon-root": { 13 | width: pxToRem(20), 14 | height: pxToRem(20), 15 | color: transparent.main, 16 | border: `${borderWidth[1]} solid ${borderColor}`, 17 | borderRadius: "50%", 18 | }, 19 | 20 | "&:after": { 21 | transition: "opacity 250ms ease-in-out", 22 | content: `""`, 23 | position: "absolute", 24 | width: pxToRem(14), 25 | height: pxToRem(14), 26 | borderRadius: "50%", 27 | backgroundImage: linearGradient(info.main, info.main), 28 | opacity: 0, 29 | left: 0, 30 | right: 0, 31 | top: 0, 32 | bottom: 0, 33 | margin: "auto", 34 | }, 35 | 36 | "&:hover": { 37 | backgroundColor: transparent.main, 38 | }, 39 | 40 | "&.Mui-focusVisible": { 41 | border: `${borderWidth[2]} solid ${info.main} !important`, 42 | }, 43 | }, 44 | 45 | colorPrimary: { 46 | color: borderColor, 47 | 48 | "&.Mui-checked": { 49 | color: info.main, 50 | 51 | "& .MuiSvgIcon-root": { 52 | borderColor: info.main, 53 | }, 54 | 55 | "&:after": { 56 | opacity: 1, 57 | }, 58 | }, 59 | }, 60 | 61 | colorSecondary: { 62 | color: borderColor, 63 | 64 | "&.Mui-checked": { 65 | color: info.main, 66 | 67 | "& .MuiSvgIcon-root": { 68 | borderColor: info.main, 69 | }, 70 | 71 | "&:after": { 72 | opacity: 1, 73 | }, 74 | }, 75 | }, 76 | }, 77 | }; 78 | 79 | export default radio; 80 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/select.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const { transparent } = colors; 5 | 6 | const select = { 7 | styleOverrides: { 8 | select: { 9 | display: "grid", 10 | alignItems: "center", 11 | padding: `0 ${pxToRem(12)} !important`, 12 | 13 | "& .Mui-selected": { 14 | backgroundColor: transparent.main, 15 | }, 16 | }, 17 | 18 | selectMenu: { 19 | background: "none", 20 | height: "none", 21 | minHeight: "none", 22 | overflow: "unset", 23 | }, 24 | 25 | icon: { 26 | display: "none", 27 | }, 28 | }, 29 | }; 30 | 31 | export default select; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/switchButton.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import borders from "assets/theme/base/borders"; 3 | import boxShadows from "assets/theme/base/boxShadows"; 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | import linearGradient from "assets/theme/functions/linearGradient"; 6 | 7 | const { white, gradients, grey, transparent } = colors; 8 | const { borderWidth } = borders; 9 | const { md } = boxShadows; 10 | 11 | const switchButton = { 12 | defaultProps: { 13 | disableRipple: false, 14 | }, 15 | 16 | styleOverrides: { 17 | switchBase: { 18 | color: gradients.dark.main, 19 | 20 | "&:hover": { 21 | backgroundColor: transparent.main, 22 | }, 23 | 24 | "&.Mui-checked": { 25 | color: gradients.dark.main, 26 | 27 | "&:hover": { 28 | backgroundColor: transparent.main, 29 | }, 30 | 31 | "& .MuiSwitch-thumb": { 32 | borderColor: `${gradients.dark.main} !important`, 33 | }, 34 | 35 | "& + .MuiSwitch-track": { 36 | backgroundColor: `${gradients.dark.main} !important`, 37 | borderColor: `${gradients.dark.main} !important`, 38 | opacity: 1, 39 | }, 40 | }, 41 | 42 | "&.Mui-disabled + .MuiSwitch-track": { 43 | opacity: "0.3 !important", 44 | }, 45 | 46 | "&.Mui-focusVisible .MuiSwitch-thumb": { 47 | backgroundImage: linearGradient(gradients.info.main, gradients.info.state), 48 | }, 49 | }, 50 | 51 | thumb: { 52 | backgroundColor: white.main, 53 | boxShadow: md, 54 | border: `${borderWidth[1]} solid ${grey[400]}`, 55 | }, 56 | 57 | track: { 58 | width: pxToRem(32), 59 | height: pxToRem(15), 60 | backgroundColor: grey[400], 61 | border: `${borderWidth[1]} solid ${grey[400]}`, 62 | opacity: 1, 63 | }, 64 | 65 | checked: {}, 66 | }, 67 | }; 68 | 69 | export default switchButton; 70 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/textField.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | 3 | const { transparent } = colors; 4 | 5 | const textField = { 6 | styleOverrides: { 7 | root: { 8 | backgroundColor: transparent.main, 9 | }, 10 | }, 11 | }; 12 | 13 | export default textField; 14 | -------------------------------------------------------------------------------- /src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const icon = { 5 | defaultProps: { 6 | baseClassName: "material-icons-round", 7 | fontSize: "inherit", 8 | }, 9 | 10 | styleOverrides: { 11 | fontSizeInherit: { 12 | fontSize: "inherit !important", 13 | }, 14 | 15 | fontSizeSmall: { 16 | fontSize: `${pxToRem(20)} !important`, 17 | }, 18 | 19 | fontSizeLarge: { 20 | fontSize: `${pxToRem(36)} !important`, 21 | }, 22 | }, 23 | }; 24 | 25 | export default icon; 26 | -------------------------------------------------------------------------------- /src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | const { transparent } = colors; 5 | 6 | const iconButton = { 7 | styleOverrides: { 8 | root: { 9 | "&:hover": { 10 | backgroundColor: transparent.main, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export default iconButton; 17 | -------------------------------------------------------------------------------- /src/assets/theme/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme/base/borders"; 3 | import colors from "assets/theme/base/colors"; 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | const { borderRadius } = borders; 7 | const { light } = colors; 8 | 9 | const linearProgress = { 10 | styleOverrides: { 11 | root: { 12 | height: pxToRem(6), 13 | borderRadius: borderRadius.md, 14 | overflow: "visible", 15 | position: "relative", 16 | }, 17 | 18 | colorPrimary: { 19 | backgroundColor: light.main, 20 | }, 21 | 22 | colorSecondary: { 23 | backgroundColor: light.main, 24 | }, 25 | 26 | bar: { 27 | height: pxToRem(6), 28 | borderRadius: borderRadius.sm, 29 | position: "absolute", 30 | transform: `translate(0, 0) !important`, 31 | transition: "width 0.6s ease !important", 32 | }, 33 | }, 34 | }; 35 | 36 | export default linearProgress; 37 | -------------------------------------------------------------------------------- /src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const link = { 4 | defaultProps: { 5 | underline: "none", 6 | color: "inherit", 7 | }, 8 | }; 9 | 10 | export default link; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | const list = { 2 | styleOverrides: { 3 | padding: { 4 | paddingTop: 0, 5 | paddingBottom: 0, 6 | }, 7 | }, 8 | }; 9 | 10 | export default list; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | 2 | const listItem = { 3 | defaultProps: { 4 | disableGutters: true, 5 | }, 6 | 7 | styleOverrides: { 8 | root: { 9 | paddingTop: 0, 10 | paddingBottom: 0, 11 | }, 12 | }, 13 | }; 14 | 15 | export default listItem; 16 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | const listItemText = { 2 | styleOverrides: { 3 | root: { 4 | marginTop: 0, 5 | marginBottom: 0, 6 | }, 7 | }, 8 | }; 9 | 10 | export default listItemText; 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | 2 | import boxShadows from "assets/theme/base/boxShadows"; 3 | import typography from "assets/theme/base/typography"; 4 | import colors from "assets/theme/base/colors"; 5 | import borders from "assets/theme/base/borders"; 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { lg } = boxShadows; 9 | const { size } = typography; 10 | const { text, white } = colors; 11 | const { borderRadius } = borders; 12 | 13 | const menu = { 14 | defaultProps: { 15 | disableAutoFocusItem: true, 16 | }, 17 | 18 | styleOverrides: { 19 | paper: { 20 | minWidth: pxToRem(160), 21 | boxShadow: lg, 22 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 23 | fontSize: size.sm, 24 | color: text.main, 25 | textAlign: "left", 26 | backgroundColor: `${white.main} !important`, 27 | borderRadius: borderRadius.md, 28 | }, 29 | }, 30 | }; 31 | 32 | export default menu; 33 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | import typography from "assets/theme/base/typography"; 5 | 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { light, text, dark } = colors; 9 | const { borderRadius } = borders; 10 | const { size } = typography; 11 | 12 | const menuItem = { 13 | styleOverrides: { 14 | root: { 15 | minWidth: pxToRem(160), 16 | minHeight: "unset", 17 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 18 | borderRadius: borderRadius.md, 19 | fontSize: size.sm, 20 | color: text.main, 21 | transition: "background-color 300ms ease, color 300ms ease", 22 | 23 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 24 | backgroundColor: light.main, 25 | color: dark.main, 26 | }, 27 | }, 28 | }, 29 | }; 30 | 31 | export default menuItem; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/popover.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import boxShadows from "assets/theme/base/boxShadows"; 6 | import borders from "assets/theme/base/borders"; 7 | 8 | const { transparent } = colors; 9 | const { lg } = boxShadows; 10 | const { borderRadius } = borders; 11 | 12 | const popover = { 13 | styleOverrides: { 14 | paper: { 15 | backgroundColor: transparent.main, 16 | boxShadow: lg, 17 | padding: pxToRem(8), 18 | borderRadius: borderRadius.md, 19 | }, 20 | }, 21 | }; 22 | 23 | export default popover; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/sidenav.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { white } = colors; 8 | const { borderRadius } = borders; 9 | 10 | const sidenav = { 11 | styleOverrides: { 12 | root: { 13 | width: pxToRem(250), 14 | whiteSpace: "nowrap", 15 | border: "none", 16 | }, 17 | 18 | paper: { 19 | width: pxToRem(250), 20 | backgroundColor: white.main, 21 | height: `calc(100vh - ${pxToRem(32)})`, 22 | margin: pxToRem(16), 23 | borderRadius: borderRadius.xl, 24 | border: "none", 25 | }, 26 | 27 | paperAnchorDockedLeft: { 28 | borderRight: "none", 29 | }, 30 | }, 31 | }; 32 | 33 | export default sidenav; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/slider.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | import boxShadow from "assets/theme/functions/boxShadow"; 8 | 9 | const { grey, white, black, info } = colors; 10 | const { borderRadius, borderWidth } = borders; 11 | const { sliderBoxShadow } = boxShadows; 12 | 13 | const slider = { 14 | styleOverrides: { 15 | root: { 16 | width: "100%", 17 | 18 | "& .MuiSlider-active, & .Mui-focusVisible": { 19 | boxShadow: "none !important", 20 | }, 21 | 22 | "& .MuiSlider-valueLabel": { 23 | color: black.main, 24 | }, 25 | }, 26 | 27 | rail: { 28 | height: pxToRem(2), 29 | background: grey[200], 30 | borderRadius: borderRadius.sm, 31 | opacity: 1, 32 | }, 33 | 34 | track: { 35 | background: info.main, 36 | height: pxToRem(2), 37 | position: "relative", 38 | border: "none", 39 | borderRadius: borderRadius.lg, 40 | zIndex: 1, 41 | }, 42 | 43 | thumb: { 44 | width: pxToRem(14), 45 | height: pxToRem(14), 46 | backgroundColor: white.main, 47 | zIndex: 10, 48 | boxShadow: sliderBoxShadow.thumb, 49 | border: `${borderWidth[1]} solid ${info.main}`, 50 | transition: "all 200ms linear", 51 | 52 | "&:hover": { 53 | boxShadow: "none", 54 | }, 55 | 56 | "&:active": { 57 | transform: "translate(-50%, -50%) scale(1.4)", 58 | }, 59 | 60 | "&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) }, 61 | }, 62 | }, 63 | }; 64 | 65 | export default slider; 66 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | import colors from "assets/theme/base/colors"; 2 | import borders from "assets/theme/base/borders"; 3 | import boxShadows from "assets/theme/base/boxShadows"; 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | import linearGradient from "assets/theme/functions/linearGradient"; 6 | 7 | const { transparent, gradients } = colors; 8 | const { borderRadius } = borders; 9 | const { colored } = boxShadows; 10 | 11 | const stepper = { 12 | styleOverrides: { 13 | root: { 14 | background: linearGradient(gradients.info.main, gradients.info.state), 15 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 16 | borderRadius: borderRadius.lg, 17 | boxShadow: colored.info, 18 | 19 | "&.MuiPaper-root": { 20 | backgroundColor: transparent.main, 21 | }, 22 | }, 23 | }, 24 | }; 25 | 26 | export default stepper; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const step = { 5 | styleOverrides: { 6 | root: { 7 | padding: `0 ${pxToRem(6)}`, 8 | }, 9 | }, 10 | }; 11 | 12 | export default step; 13 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme/base/borders"; 3 | import colors from "assets/theme/base/colors"; 4 | 5 | const { white } = colors; 6 | const { borderWidth } = borders; 7 | 8 | const stepConnector = { 9 | styleOverrides: { 10 | root: { 11 | color: "#9fc9ff", 12 | transition: "all 200ms linear", 13 | 14 | "&.Mui-active": { 15 | color: white.main, 16 | }, 17 | 18 | "&.Mui-completed": { 19 | color: white.main, 20 | }, 21 | }, 22 | 23 | alternativeLabel: { 24 | top: "14%", 25 | left: "-50%", 26 | right: "50%", 27 | }, 28 | 29 | line: { 30 | borderWidth: `${borderWidth[2]} !important`, 31 | borderColor: "currentColor", 32 | opacity: 0.5, 33 | }, 34 | }, 35 | }; 36 | 37 | export default stepConnector; 38 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | import boxShadow from "assets/theme/functions/boxShadow"; 6 | 7 | const { white } = colors; 8 | 9 | const stepIcon = { 10 | styleOverrides: { 11 | root: { 12 | background: "#9fc9ff", 13 | fill: "#9fc9ff", 14 | stroke: "#9fc9ff", 15 | strokeWidth: pxToRem(10), 16 | width: pxToRem(13), 17 | height: pxToRem(13), 18 | borderRadius: "50%", 19 | zIndex: 99, 20 | transition: "all 200ms linear", 21 | 22 | "&.Mui-active": { 23 | background: white.main, 24 | fill: white.main, 25 | stroke: white.main, 26 | borderColor: white.main, 27 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 28 | }, 29 | 30 | "&.Mui-completed": { 31 | background: white.main, 32 | fill: white.main, 33 | stroke: white.main, 34 | borderColor: white.main, 35 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 36 | }, 37 | }, 38 | }, 39 | }; 40 | 41 | export default stepIcon; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme/base/typography"; 3 | import colors from "assets/theme/base/colors"; 4 | 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | import rgba from "assets/theme/functions/rgba"; 7 | 8 | const { size, fontWeightRegular } = typography; 9 | const { white } = colors; 10 | 11 | const stepLabel = { 12 | styleOverrides: { 13 | label: { 14 | marginTop: `${pxToRem(8)} !important`, 15 | fontWeight: fontWeightRegular, 16 | fontSize: size.xs, 17 | color: "#9fc9ff", 18 | textTransform: "uppercase", 19 | 20 | "&.Mui-active": { 21 | fontWeight: `${fontWeightRegular} !important`, 22 | color: `${rgba(white.main, 0.8)} !important`, 23 | }, 24 | 25 | "&.Mui-completed": { 26 | fontWeight: `${fontWeightRegular} !important`, 27 | color: `${rgba(white.main, 0.8)} !important`, 28 | }, 29 | }, 30 | }, 31 | }; 32 | 33 | export default stepLabel; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | const svgIcon = { 5 | defaultProps: { 6 | fontSize: "inherit", 7 | }, 8 | 9 | styleOverrides: { 10 | fontSizeInherit: { 11 | fontSize: "inherit !important", 12 | }, 13 | 14 | fontSizeSmall: { 15 | fontSize: `${pxToRem(20)} !important`, 16 | }, 17 | 18 | fontSizeLarge: { 19 | fontSize: `${pxToRem(36)} !important`, 20 | }, 21 | }, 22 | }; 23 | 24 | export default svgIcon; 25 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme/base/borders"; 3 | import colors from "assets/theme/base/colors"; 4 | 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { borderWidth } = borders; 8 | const { light } = colors; 9 | 10 | const tableCell = { 11 | styleOverrides: { 12 | root: { 13 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 14 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 15 | }, 16 | }, 17 | }; 18 | 19 | export default tableCell; 20 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import boxShadows from "assets/theme/base/boxShadows"; 4 | import borders from "assets/theme/base/borders"; 5 | 6 | const { white } = colors; 7 | const { md } = boxShadows; 8 | const { borderRadius } = borders; 9 | 10 | const tableContainer = { 11 | styleOverrides: { 12 | root: { 13 | backgroundColor: white.main, 14 | boxShadow: md, 15 | borderRadius: borderRadius.xl, 16 | }, 17 | }, 18 | }; 19 | 20 | export default tableContainer; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | 2 | import borders from "assets/theme/base/borders"; 3 | 4 | import pxToRem from "assets/theme/functions/pxToRem"; 5 | 6 | const { borderRadius } = borders; 7 | 8 | const tableHead = { 9 | styleOverrides: { 10 | root: { 11 | display: "block", 12 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 13 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 14 | }, 15 | }, 16 | }; 17 | 18 | export default tableHead; 19 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | 2 | import colors from "assets/theme/base/colors"; 3 | import borders from "assets/theme/base/borders"; 4 | import boxShadows from "assets/theme/base/boxShadows"; 5 | 6 | import pxToRem from "assets/theme/functions/pxToRem"; 7 | 8 | const { grey, white } = colors; 9 | const { borderRadius } = borders; 10 | const { tabsBoxShadow } = boxShadows; 11 | 12 | const tabs = { 13 | styleOverrides: { 14 | root: { 15 | position: "relative", 16 | backgroundColor: grey[100], 17 | borderRadius: borderRadius.xl, 18 | minHeight: "unset", 19 | padding: pxToRem(4), 20 | }, 21 | 22 | flexContainer: { 23 | height: "100%", 24 | position: "relative", 25 | zIndex: 10, 26 | }, 27 | 28 | fixed: { 29 | overflow: "unset !important", 30 | overflowX: "unset !important", 31 | }, 32 | 33 | vertical: { 34 | "& .MuiTabs-indicator": { 35 | width: "100%", 36 | }, 37 | }, 38 | 39 | indicator: { 40 | height: "100%", 41 | borderRadius: borderRadius.lg, 42 | backgroundColor: white.main, 43 | boxShadow: tabsBoxShadow.indicator, 44 | transition: "all 500ms ease", 45 | }, 46 | }, 47 | }; 48 | 49 | export default tabs; 50 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | 2 | import typography from "assets/theme/base/typography"; 3 | import borders from "assets/theme/base/borders"; 4 | import colors from "assets/theme/base/colors"; 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { size, fontWeightRegular } = typography; 8 | const { borderRadius } = borders; 9 | const { dark } = colors; 10 | 11 | const tab = { 12 | styleOverrides: { 13 | root: { 14 | display: "flex", 15 | alignItems: "center", 16 | flexDirection: "row", 17 | flex: "1 1 auto", 18 | textAlign: "center", 19 | maxWidth: "unset !important", 20 | minWidth: "unset !important", 21 | minHeight: "unset !important", 22 | fontSize: size.md, 23 | fontWeight: fontWeightRegular, 24 | textTransform: "none", 25 | lineHeight: "inherit", 26 | padding: pxToRem(4), 27 | borderRadius: borderRadius.lg, 28 | color: `${dark.main} !important`, 29 | opacity: "1 !important", 30 | 31 | "& .material-icons, .material-icons-round": { 32 | marginBottom: "0 !important", 33 | marginRight: pxToRem(6), 34 | }, 35 | 36 | "& svg": { 37 | marginBottom: "0 !important", 38 | marginRight: pxToRem(6), 39 | }, 40 | }, 41 | 42 | labelIcon: { 43 | paddingTop: pxToRem(4), 44 | }, 45 | }, 46 | }; 47 | 48 | export default tab; 49 | -------------------------------------------------------------------------------- /src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | 2 | import Fade from "@mui/material/Fade"; 3 | 4 | import colors from "assets/theme/base/colors"; 5 | import typography from "assets/theme/base/typography"; 6 | import borders from "assets/theme/base/borders"; 7 | 8 | import pxToRem from "assets/theme/functions/pxToRem"; 9 | 10 | const { black, light } = colors; 11 | const { size, fontWeightRegular } = typography; 12 | const { borderRadius } = borders; 13 | 14 | const tooltip = { 15 | defaultProps: { 16 | arrow: true, 17 | TransitionComponent: Fade, 18 | }, 19 | 20 | styleOverrides: { 21 | tooltip: { 22 | maxWidth: pxToRem(200), 23 | backgroundColor: black.main, 24 | color: light.main, 25 | fontSize: size.sm, 26 | fontWeight: fontWeightRegular, 27 | textAlign: "center", 28 | borderRadius: borderRadius.md, 29 | opacity: 0.7, 30 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 31 | }, 32 | 33 | arrow: { 34 | color: black.main, 35 | }, 36 | }, 37 | }; 38 | 39 | export default tooltip; 40 | -------------------------------------------------------------------------------- /src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | import rgba from "assets/theme/functions/rgba"; 2 | import pxToRem from "assets/theme/functions/pxToRem"; 3 | 4 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 5 | const [x, y] = offset; 6 | const [blur, spread] = radius; 7 | 8 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 9 | color, 10 | opacity 11 | )}`; 12 | } 13 | 14 | export default boxShadow; 15 | -------------------------------------------------------------------------------- /src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | 2 | import rgba from "assets/theme/functions/rgba"; 3 | 4 | function gradientChartLine(chart, color, opacity = 0.2) { 5 | const ctx = chart.getContext("2d"); 6 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 7 | const primaryColor = rgba(color, opacity).toString(); 8 | 9 | gradientStroke.addColorStop(1, primaryColor); 10 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 11 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 12 | 13 | return gradientStroke; 14 | } 15 | 16 | export default gradientChartLine; 17 | -------------------------------------------------------------------------------- /src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | 2 | import chroma from "chroma-js"; 3 | 4 | function hexToRgb(color) { 5 | return chroma(color).rgb().join(", "); 6 | } 7 | 8 | export default hexToRgb; 9 | -------------------------------------------------------------------------------- /src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | 2 | function linearGradient(color, colorState, angle = 195) { 3 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 4 | } 5 | 6 | export default linearGradient; 7 | -------------------------------------------------------------------------------- /src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | 2 | function pxToRem(number, baseNumber = 16) { 3 | return `${number / baseNumber}rem`; 4 | } 5 | 6 | export default pxToRem; 7 | -------------------------------------------------------------------------------- /src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | 2 | import hexToRgb from "assets/theme/functions/hexToRgb"; 3 | 4 | function rgba(color, opacity) { 5 | return `rgba(${hexToRgb(color)}, ${opacity})`; 6 | } 7 | 8 | export default rgba; 9 | -------------------------------------------------------------------------------- /src/components/MDAlert/MDAlertCloseIcon.js: -------------------------------------------------------------------------------- 1 | 2 | import { styled } from "@mui/material/styles"; 3 | 4 | export default styled("span")(({ theme }) => { 5 | const { palette, typography, functions } = theme; 6 | 7 | const { white } = palette; 8 | const { size, fontWeightMedium } = typography; 9 | const { pxToRem } = functions; 10 | 11 | return { 12 | color: white.main, 13 | fontSize: size.xl, 14 | padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, 15 | marginLeft: pxToRem(40), 16 | fontWeight: fontWeightMedium, 17 | cursor: "pointer", 18 | lineHeight: 0, 19 | }; 20 | }); 21 | -------------------------------------------------------------------------------- /src/components/MDAlert/MDAlertRoot.js: -------------------------------------------------------------------------------- 1 | 2 | import Box from "@mui/material/Box"; 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled(Box)(({ theme, ownerState }) => { 6 | const { palette, typography, borders, functions } = theme; 7 | const { color } = ownerState; 8 | 9 | const { white, gradients } = palette; 10 | const { fontSizeRegular, fontWeightMedium } = typography; 11 | const { borderRadius } = borders; 12 | const { pxToRem, linearGradient } = functions; 13 | 14 | // backgroundImage value 15 | const backgroundImageValue = gradients[color] 16 | ? linearGradient(gradients[color].main, gradients[color].state) 17 | : linearGradient(gradients.info.main, gradients.info.state); 18 | 19 | return { 20 | display: "flex", 21 | justifyContent: "space-between", 22 | alignItems: "center", 23 | minHeight: pxToRem(60), 24 | backgroundImage: backgroundImageValue, 25 | color: white.main, 26 | position: "relative", 27 | padding: pxToRem(16), 28 | marginBottom: pxToRem(16), 29 | borderRadius: borderRadius.md, 30 | fontSize: fontSizeRegular, 31 | fontWeight: fontWeightMedium, 32 | }; 33 | }); 34 | -------------------------------------------------------------------------------- /src/components/MDAlert/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // @mui material components 8 | import Fade from "@mui/material/Fade"; 9 | 10 | // Amdin panel React components 11 | import MDBox from "components/MDBox"; 12 | 13 | // Custom styles for the MDAlert 14 | import MDAlertRoot from "components/MDAlert/MDAlertRoot"; 15 | import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon"; 16 | 17 | function MDAlert({ color, dismissible, children, ...rest }) { 18 | const [alertStatus, setAlertStatus] = useState("mount"); 19 | 20 | const handleAlertStatus = () => setAlertStatus("fadeOut"); 21 | 22 | // The base template for the alert 23 | const alertTemplate = (mount = true) => ( 24 | 25 | 26 | 27 | {children} 28 | 29 | {dismissible ? ( 30 | × 31 | ) : null} 32 | 33 | 34 | ); 35 | 36 | switch (true) { 37 | case alertStatus === "mount": 38 | return alertTemplate(); 39 | case alertStatus === "fadeOut": 40 | setTimeout(() => setAlertStatus("unmount"), 400); 41 | return alertTemplate(false); 42 | default: 43 | alertTemplate(); 44 | break; 45 | } 46 | 47 | return null; 48 | } 49 | 50 | // Setting default values for the props of MDAlert 51 | MDAlert.defaultProps = { 52 | color: "info", 53 | dismissible: false, 54 | }; 55 | 56 | // Typechecking props of the MDAlert 57 | MDAlert.propTypes = { 58 | color: PropTypes.oneOf([ 59 | "primary", 60 | "secondary", 61 | "info", 62 | "success", 63 | "warning", 64 | "error", 65 | "light", 66 | "dark", 67 | ]), 68 | dismissible: PropTypes.bool, 69 | children: PropTypes.node.isRequired, 70 | }; 71 | 72 | export default MDAlert; 73 | -------------------------------------------------------------------------------- /src/components/MDAvatar/MDAvatarRoot.js: -------------------------------------------------------------------------------- 1 | 2 | import Avatar from "@mui/material/Avatar"; 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled(Avatar)(({ theme, ownerState }) => { 6 | const { palette, functions, typography, boxShadows } = theme; 7 | const { shadow, bgColor, size } = ownerState; 8 | 9 | const { gradients, transparent, white } = palette; 10 | const { pxToRem, linearGradient } = functions; 11 | const { size: fontSize, fontWeightRegular } = typography; 12 | 13 | // backgroundImage value 14 | const backgroundValue = 15 | bgColor === "transparent" 16 | ? transparent.main 17 | : linearGradient(gradients[bgColor].main, gradients[bgColor].state); 18 | 19 | // size value 20 | let sizeValue; 21 | 22 | switch (size) { 23 | case "xs": 24 | sizeValue = { 25 | width: pxToRem(24), 26 | height: pxToRem(24), 27 | fontSize: fontSize.xs, 28 | }; 29 | break; 30 | case "sm": 31 | sizeValue = { 32 | width: pxToRem(36), 33 | height: pxToRem(36), 34 | fontSize: fontSize.sm, 35 | }; 36 | break; 37 | case "lg": 38 | sizeValue = { 39 | width: pxToRem(58), 40 | height: pxToRem(58), 41 | fontSize: fontSize.sm, 42 | }; 43 | break; 44 | case "xl": 45 | sizeValue = { 46 | width: pxToRem(74), 47 | height: pxToRem(74), 48 | fontSize: fontSize.md, 49 | }; 50 | break; 51 | case "xxl": 52 | sizeValue = { 53 | width: pxToRem(110), 54 | height: pxToRem(110), 55 | fontSize: fontSize.md, 56 | }; 57 | break; 58 | default: { 59 | sizeValue = { 60 | width: pxToRem(48), 61 | height: pxToRem(48), 62 | fontSize: fontSize.md, 63 | }; 64 | } 65 | } 66 | 67 | return { 68 | background: backgroundValue, 69 | color: white.main, 70 | fontWeight: fontWeightRegular, 71 | boxShadow: boxShadows[shadow], 72 | ...sizeValue, 73 | }; 74 | }); 75 | -------------------------------------------------------------------------------- /src/components/MDAvatar/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { forwardRef } from "react"; 4 | 5 | // prop-types is a library for typechecking of props 6 | import PropTypes from "prop-types"; 7 | 8 | // Custom styles for MDAvatar 9 | import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot"; 10 | 11 | const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( 12 | 13 | )); 14 | 15 | // Setting default values for the props of MDAvatar 16 | MDAvatar.defaultProps = { 17 | bgColor: "transparent", 18 | size: "md", 19 | shadow: "none", 20 | }; 21 | 22 | // Typechecking props for the MDAvatar 23 | MDAvatar.propTypes = { 24 | bgColor: PropTypes.oneOf([ 25 | "transparent", 26 | "primary", 27 | "secondary", 28 | "info", 29 | "success", 30 | "warning", 31 | "error", 32 | "light", 33 | "dark", 34 | ]), 35 | size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), 36 | shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), 37 | }; 38 | 39 | export default MDAvatar; 40 | -------------------------------------------------------------------------------- /src/components/MDBadge/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Custom styles for the MDBadge 8 | import MDBadgeRoot from "components/MDBadge/MDBadgeRoot"; 9 | 10 | const MDBadge = forwardRef( 11 | ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( 12 | 18 | {children} 19 | 20 | ) 21 | ); 22 | 23 | // Setting default values for the props of MDBadge 24 | MDBadge.defaultProps = { 25 | color: "info", 26 | variant: "gradient", 27 | size: "sm", 28 | circular: false, 29 | indicator: false, 30 | border: false, 31 | children: false, 32 | container: false, 33 | }; 34 | 35 | // Typechecking props of the MDBadge 36 | MDBadge.propTypes = { 37 | color: PropTypes.oneOf([ 38 | "primary", 39 | "secondary", 40 | "info", 41 | "success", 42 | "warning", 43 | "error", 44 | "light", 45 | "dark", 46 | ]), 47 | variant: PropTypes.oneOf(["gradient", "contained"]), 48 | size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), 49 | circular: PropTypes.bool, 50 | indicator: PropTypes.bool, 51 | border: PropTypes.bool, 52 | children: PropTypes.node, 53 | container: PropTypes.bool, 54 | }; 55 | 56 | export default MDBadge; 57 | -------------------------------------------------------------------------------- /src/components/MDBox/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Custom styles for MDBox 8 | import MDBoxRoot from "components/MDBox/MDBoxRoot"; 9 | 10 | const MDBox = forwardRef( 11 | ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( 12 | 17 | ) 18 | ); 19 | 20 | // Setting default values for the props of MDBox 21 | MDBox.defaultProps = { 22 | variant: "contained", 23 | bgColor: "transparent", 24 | color: "dark", 25 | opacity: 1, 26 | borderRadius: "none", 27 | shadow: "none", 28 | coloredShadow: "none", 29 | }; 30 | 31 | // Typechecking props for the MDBox 32 | MDBox.propTypes = { 33 | variant: PropTypes.oneOf(["contained", "gradient"]), 34 | bgColor: PropTypes.string, 35 | color: PropTypes.string, 36 | opacity: PropTypes.number, 37 | borderRadius: PropTypes.string, 38 | shadow: PropTypes.string, 39 | coloredShadow: PropTypes.oneOf([ 40 | "primary", 41 | "secondary", 42 | "info", 43 | "success", 44 | "warning", 45 | "error", 46 | "light", 47 | "dark", 48 | "none", 49 | ]), 50 | }; 51 | 52 | export default MDBox; 53 | -------------------------------------------------------------------------------- /src/components/MDButton/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { forwardRef } from "react"; 4 | 5 | // prop-types is a library for typechecking of props 6 | import PropTypes from "prop-types"; 7 | 8 | // Custom styles for MDButton 9 | import MDButtonRoot from "components/MDButton/MDButtonRoot"; 10 | 11 | // Amdin panel React contexts 12 | import { useMaterialUIController } from "context"; 13 | 14 | const MDButton = forwardRef( 15 | ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { 16 | const [controller] = useMaterialUIController(); 17 | const { darkMode } = controller; 18 | 19 | return ( 20 | 28 | {children} 29 | 30 | ); 31 | } 32 | ); 33 | 34 | // Setting default values for the props of MDButton 35 | MDButton.defaultProps = { 36 | size: "medium", 37 | variant: "contained", 38 | color: "white", 39 | circular: false, 40 | iconOnly: false, 41 | }; 42 | 43 | // Typechecking props for the MDButton 44 | MDButton.propTypes = { 45 | size: PropTypes.oneOf(["small", "medium", "large"]), 46 | variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), 47 | color: PropTypes.oneOf([ 48 | "white", 49 | "primary", 50 | "secondary", 51 | "info", 52 | "success", 53 | "warning", 54 | "error", 55 | "light", 56 | "dark", 57 | ]), 58 | circular: PropTypes.bool, 59 | iconOnly: PropTypes.bool, 60 | children: PropTypes.node.isRequired, 61 | }; 62 | 63 | export default MDButton; 64 | -------------------------------------------------------------------------------- /src/components/MDInput/MDInputRoot.js: -------------------------------------------------------------------------------- 1 | 2 | // @mui material components 3 | import TextField from "@mui/material/TextField"; 4 | import { styled } from "@mui/material/styles"; 5 | 6 | export default styled(TextField)(({ theme, ownerState }) => { 7 | const { palette, functions } = theme; 8 | const { error, success, disabled } = ownerState; 9 | 10 | const { grey, transparent, error: colorError, success: colorSuccess } = palette; 11 | const { pxToRem } = functions; 12 | 13 | // styles for the input with error={true} 14 | const errorStyles = () => ({ 15 | backgroundImage: 16 | "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", 17 | backgroundRepeat: "no-repeat", 18 | backgroundPosition: `right ${pxToRem(12)} center`, 19 | backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, 20 | 21 | "& .Mui-focused": { 22 | "& .MuiOutlinedInput-notchedOutline, &:after": { 23 | borderColor: colorError.main, 24 | }, 25 | }, 26 | 27 | "& .MuiInputLabel-root.Mui-focused": { 28 | color: colorError.main, 29 | }, 30 | }); 31 | 32 | // styles for the input with success={true} 33 | const successStyles = () => ({ 34 | backgroundImage: 35 | "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", 36 | backgroundRepeat: "no-repeat", 37 | backgroundPosition: `right ${pxToRem(12)} center`, 38 | backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, 39 | 40 | "& .Mui-focused": { 41 | "& .MuiOutlinedInput-notchedOutline, &:after": { 42 | borderColor: colorSuccess.main, 43 | }, 44 | }, 45 | 46 | "& .MuiInputLabel-root.Mui-focused": { 47 | color: colorSuccess.main, 48 | }, 49 | }); 50 | 51 | return { 52 | backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, 53 | pointerEvents: disabled ? "none" : "auto", 54 | ...(error && errorStyles()), 55 | ...(success && successStyles()), 56 | }; 57 | }); 58 | -------------------------------------------------------------------------------- /src/components/MDInput/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Custom styles for MDInput 8 | import MDInputRoot from "components/MDInput/MDInputRoot"; 9 | 10 | const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => ( 11 | 12 | )); 13 | 14 | // Setting default values for the props of MDInput 15 | MDInput.defaultProps = { 16 | error: false, 17 | success: false, 18 | disabled: false, 19 | }; 20 | 21 | // Typechecking props for the MDInput 22 | MDInput.propTypes = { 23 | error: PropTypes.bool, 24 | success: PropTypes.bool, 25 | disabled: PropTypes.bool, 26 | }; 27 | 28 | export default MDInput; 29 | -------------------------------------------------------------------------------- /src/components/MDPagination/MDPaginationItemRoot.js: -------------------------------------------------------------------------------- 1 | 2 | // @mui material components 3 | import { styled } from "@mui/material/styles"; 4 | 5 | // Amdin panel React components 6 | import MDButton from "components/MDButton"; 7 | 8 | export default styled(MDButton)(({ theme, ownerState }) => { 9 | const { borders, functions, typography, palette } = theme; 10 | const { variant, paginationSize, active } = ownerState; 11 | 12 | const { borderColor } = borders; 13 | const { pxToRem } = functions; 14 | const { fontWeightRegular, size: fontSize } = typography; 15 | const { light } = palette; 16 | 17 | // width, height, minWidth and minHeight values 18 | let sizeValue = pxToRem(36); 19 | 20 | if (paginationSize === "small") { 21 | sizeValue = pxToRem(30); 22 | } else if (paginationSize === "large") { 23 | sizeValue = pxToRem(46); 24 | } 25 | 26 | return { 27 | borderColor, 28 | margin: `0 ${pxToRem(2)}`, 29 | pointerEvents: active ? "none" : "auto", 30 | fontWeight: fontWeightRegular, 31 | fontSize: fontSize.sm, 32 | width: sizeValue, 33 | minWidth: sizeValue, 34 | height: sizeValue, 35 | minHeight: sizeValue, 36 | 37 | "&:hover, &:focus, &:active": { 38 | transform: "none", 39 | boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", 40 | opacity: "1 !important", 41 | }, 42 | 43 | "&:hover": { 44 | backgroundColor: light.main, 45 | borderColor, 46 | }, 47 | }; 48 | }); 49 | -------------------------------------------------------------------------------- /src/components/MDPagination/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef, createContext, useContext, useMemo } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Amdin panel React components 8 | import MDBox from "components/MDBox"; 9 | 10 | // Custom styles for MDPagination 11 | import MDPaginationItemRoot from "components/MDPagination/MDPaginationItemRoot"; 12 | 13 | // The Pagination main context 14 | const Context = createContext(); 15 | 16 | const MDPagination = forwardRef( 17 | ({ item, variant, color, size, active, children, ...rest }, ref) => { 18 | const context = useContext(Context); 19 | const paginationSize = context ? context.size : null; 20 | 21 | const value = useMemo(() => ({ variant, color, size }), [variant, color, size]); 22 | 23 | return ( 24 | 25 | {item ? ( 26 | 35 | {children} 36 | 37 | ) : ( 38 | 44 | {children} 45 | 46 | )} 47 | 48 | ); 49 | } 50 | ); 51 | 52 | // Setting default values for the props of MDPagination 53 | MDPagination.defaultProps = { 54 | item: false, 55 | variant: "gradient", 56 | color: "info", 57 | size: "medium", 58 | active: false, 59 | }; 60 | 61 | // Typechecking props for the MDPagination 62 | MDPagination.propTypes = { 63 | item: PropTypes.bool, 64 | variant: PropTypes.oneOf(["gradient", "contained"]), 65 | color: PropTypes.oneOf([ 66 | "white", 67 | "primary", 68 | "secondary", 69 | "info", 70 | "success", 71 | "warning", 72 | "error", 73 | "light", 74 | "dark", 75 | ]), 76 | size: PropTypes.oneOf(["small", "medium", "large"]), 77 | active: PropTypes.bool, 78 | children: PropTypes.node.isRequired, 79 | }; 80 | 81 | export default MDPagination; 82 | -------------------------------------------------------------------------------- /src/components/MDProgress/MDProgressRoot.js: -------------------------------------------------------------------------------- 1 | 2 | // @mui material components 3 | import { styled } from "@mui/material/styles"; 4 | import LinearProgress from "@mui/material/LinearProgress"; 5 | 6 | export default styled(LinearProgress)(({ theme, ownerState }) => { 7 | const { palette, functions } = theme; 8 | const { color, value, variant } = ownerState; 9 | 10 | const { text, gradients } = palette; 11 | const { linearGradient } = functions; 12 | 13 | // background value 14 | let backgroundValue; 15 | 16 | if (variant === "gradient") { 17 | backgroundValue = gradients[color] 18 | ? linearGradient(gradients[color].main, gradients[color].state) 19 | : linearGradient(gradients.info.main, gradients.info.state); 20 | } else { 21 | backgroundValue = palette[color] ? palette[color].main : palette.info.main; 22 | } 23 | 24 | return { 25 | "& .MuiLinearProgress-bar": { 26 | background: backgroundValue, 27 | width: `${value}%`, 28 | color: text.main, 29 | }, 30 | }; 31 | }); 32 | -------------------------------------------------------------------------------- /src/components/MDProgress/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Amdin panel React components 8 | import MDTypography from "components/MDTypography"; 9 | 10 | // Custom styles for MDProgress 11 | import MDProgressRoot from "components/MDProgress/MDProgressRoot"; 12 | 13 | const MDProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( 14 | <> 15 | {label && ( 16 | 17 | {value}% 18 | 19 | )} 20 | 27 | 28 | )); 29 | 30 | // Setting default values for the props of MDProgress 31 | MDProgress.defaultProps = { 32 | variant: "contained", 33 | color: "info", 34 | value: 0, 35 | label: false, 36 | }; 37 | 38 | // Typechecking props for the MDProgress 39 | MDProgress.propTypes = { 40 | variant: PropTypes.oneOf(["contained", "gradient"]), 41 | color: PropTypes.oneOf([ 42 | "primary", 43 | "secondary", 44 | "info", 45 | "success", 46 | "warning", 47 | "error", 48 | "light", 49 | "dark", 50 | ]), 51 | value: PropTypes.number, 52 | label: PropTypes.bool, 53 | }; 54 | 55 | export default MDProgress; 56 | -------------------------------------------------------------------------------- /src/components/MDSnackbar/MDSnackbarIconRoot.js: -------------------------------------------------------------------------------- 1 | 2 | // @mui material components 3 | import Icon from "@mui/material/Icon"; 4 | import { styled } from "@mui/material/styles"; 5 | 6 | export default styled(Icon)(({ theme, ownerState }) => { 7 | const { palette, functions, typography } = theme; 8 | const { color, bgWhite } = ownerState; 9 | 10 | const { white, transparent, gradients } = palette; 11 | const { pxToRem, linearGradient } = functions; 12 | const { size } = typography; 13 | 14 | // backgroundImage value 15 | let backgroundImageValue; 16 | 17 | if (bgWhite) { 18 | backgroundImageValue = gradients[color] 19 | ? linearGradient(gradients[color].main, gradients[color].state) 20 | : linearGradient(gradients.info.main, gradients.info.state); 21 | } else if (color === "light") { 22 | backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state); 23 | } 24 | 25 | return { 26 | backgroundImage: backgroundImageValue, 27 | WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main, 28 | WebkitBackgroundClip: "text", 29 | marginRight: pxToRem(8), 30 | fontSize: size.lg, 31 | transform: `translateY(${pxToRem(-2)})`, 32 | }; 33 | }); 34 | -------------------------------------------------------------------------------- /src/components/MDTypography/MDTypographyRoot.js: -------------------------------------------------------------------------------- 1 | 2 | // @mui material components 3 | import Typography from "@mui/material/Typography"; 4 | import { styled } from "@mui/material/styles"; 5 | 6 | export default styled(Typography)(({ theme, ownerState }) => { 7 | const { palette, typography, functions } = theme; 8 | const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = 9 | ownerState; 10 | 11 | const { gradients, transparent, white } = palette; 12 | const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; 13 | const { linearGradient } = functions; 14 | 15 | // fontWeight styles 16 | const fontWeights = { 17 | light: fontWeightLight, 18 | regular: fontWeightRegular, 19 | medium: fontWeightMedium, 20 | bold: fontWeightBold, 21 | }; 22 | 23 | // styles for the typography with textGradient={true} 24 | const gradientStyles = () => ({ 25 | backgroundImage: 26 | color !== "inherit" && color !== "text" && color !== "white" && gradients[color] 27 | ? linearGradient(gradients[color].main, gradients[color].state) 28 | : linearGradient(gradients.dark.main, gradients.dark.state), 29 | display: "inline-block", 30 | WebkitBackgroundClip: "text", 31 | WebkitTextFillColor: transparent.main, 32 | position: "relative", 33 | zIndex: 1, 34 | }); 35 | 36 | // color value 37 | let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; 38 | 39 | if (darkMode && (color === "inherit" || !palette[color])) { 40 | colorValue = "inherit"; 41 | } else if (darkMode && color === "dark") colorValue = white.main; 42 | 43 | return { 44 | opacity, 45 | textTransform, 46 | verticalAlign, 47 | textDecoration: "none", 48 | color: colorValue, 49 | fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], 50 | ...(textGradient && gradientStyles()), 51 | }; 52 | }); 53 | -------------------------------------------------------------------------------- /src/components/MDTypography/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props 5 | import PropTypes from "prop-types"; 6 | 7 | // Custom styles for MDTypography 8 | import MDTypographyRoot from "components/MDTypography/MDTypographyRoot"; 9 | 10 | // Amdin panel React contexts 11 | import { useMaterialUIController } from "context"; 12 | 13 | const MDTypography = forwardRef( 14 | ( 15 | { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, 16 | ref 17 | ) => { 18 | const [controller] = useMaterialUIController(); 19 | const { darkMode } = controller; 20 | 21 | return ( 22 | 35 | {children} 36 | 37 | ); 38 | } 39 | ); 40 | 41 | // Setting default values for the props of MDTypography 42 | MDTypography.defaultProps = { 43 | color: "dark", 44 | fontWeight: false, 45 | textTransform: "none", 46 | verticalAlign: "unset", 47 | textGradient: false, 48 | opacity: 1, 49 | }; 50 | 51 | // Typechecking props for the MDTypography 52 | MDTypography.propTypes = { 53 | color: PropTypes.oneOf([ 54 | "inherit", 55 | "primary", 56 | "secondary", 57 | "info", 58 | "success", 59 | "warning", 60 | "error", 61 | "light", 62 | "dark", 63 | "text", 64 | "white", 65 | ]), 66 | fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]), 67 | textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]), 68 | verticalAlign: PropTypes.oneOf([ 69 | "unset", 70 | "baseline", 71 | "sub", 72 | "super", 73 | "text-top", 74 | "text-bottom", 75 | "middle", 76 | "top", 77 | "bottom", 78 | ]), 79 | textGradient: PropTypes.bool, 80 | children: PropTypes.node.isRequired, 81 | opacity: PropTypes.number, 82 | }; 83 | 84 | export default MDTypography; 85 | -------------------------------------------------------------------------------- /src/context/AuthContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useReducer, useEffect } from "react"; 2 | 3 | const initialState = { 4 | currentUser: JSON.parse(localStorage.getItem("user")) || null, 5 | role: JSON.parse(localStorage.getItem("role")) || null, 6 | } 7 | //reducer 8 | function AuthReducer(state, action) { 9 | switch (action.type) { 10 | case "LOGIN": { 11 | return { 12 | currentUser: action.payload 13 | }; 14 | } 15 | case "LOGOUT": { 16 | return { 17 | currentUser: localStorage.removeItem("user") || null 18 | }; 19 | } 20 | case "LOGIN_ROLE": { 21 | return { 22 | role: action.payload 23 | }; 24 | } 25 | case "LOGOUT_ROLE": { 26 | return { 27 | role: localStorage.removeItem("role") || null 28 | }; 29 | } 30 | default: { 31 | return state 32 | } 33 | } 34 | } 35 | 36 | export const AuthContext = createContext(initialState) 37 | // console.log('AuthContext == ', AuthContext) 38 | 39 | export const AuthContextProvider = ({ children }) => { 40 | const [state, dispatchAuth] = useReducer(AuthReducer, initialState); 41 | const [roleState, dispatchAuthRole] = useReducer(AuthReducer, initialState); 42 | useEffect(() => { 43 | localStorage.setItem("user", JSON.stringify(state.currentUser)) 44 | }, [state.currentUser]) 45 | 46 | useEffect(() => { 47 | localStorage.setItem("role", JSON.stringify(roleState.role)) 48 | }, [roleState.role]) 49 | 50 | return ( 51 | 52 | {children} 53 | 54 | ) 55 | } 56 | -------------------------------------------------------------------------------- /src/examples/Cards/InfoCards/DefaultInfoCard/index.js: -------------------------------------------------------------------------------- 1 | // prop-types is library for typechecking of props 2 | import PropTypes from "prop-types"; 3 | 4 | // @mui material components 5 | import Card from "@mui/material/Card"; 6 | import Divider from "@mui/material/Divider"; 7 | import Icon from "@mui/material/Icon"; 8 | 9 | // Amdin panel React components 10 | import MDBox from "components/MDBox"; 11 | import MDTypography from "components/MDTypography"; 12 | 13 | function DefaultInfoCard({ color, icon, title, description, value }) { 14 | return ( 15 | 16 | 17 | 29 | {icon} 30 | 31 | 32 | 33 | 34 | {title} 35 | 36 | {description && ( 37 | 38 | {description} 39 | 40 | )} 41 | {description && !value ? null : } 42 | {value && ( 43 | 44 | {value} 45 | 46 | )} 47 | 48 | 49 | ); 50 | } 51 | 52 | // Setting default values for the props of DefaultInfoCard 53 | DefaultInfoCard.defaultProps = { 54 | color: "info", 55 | value: "", 56 | description: "", 57 | }; 58 | 59 | // Typechecking props for the DefaultInfoCard 60 | DefaultInfoCard.propTypes = { 61 | color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), 62 | icon: PropTypes.node.isRequired, 63 | title: PropTypes.string.isRequired, 64 | description: PropTypes.string, 65 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 66 | }; 67 | 68 | export default DefaultInfoCard; 69 | -------------------------------------------------------------------------------- /src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.js: -------------------------------------------------------------------------------- 1 | 2 | function configs(labels, datasets) { 3 | return { 4 | data: { 5 | labels, 6 | datasets: [...datasets], 7 | }, 8 | options: { 9 | indexAxis: "y", 10 | responsive: true, 11 | maintainAspectRatio: false, 12 | plugins: { 13 | legend: { 14 | display: false, 15 | }, 16 | }, 17 | scales: { 18 | y: { 19 | grid: { 20 | drawBorder: false, 21 | display: true, 22 | drawOnChartArea: true, 23 | drawTicks: false, 24 | borderDash: [5, 5], 25 | color: "#c1c4ce5c", 26 | }, 27 | ticks: { 28 | display: true, 29 | padding: 10, 30 | color: "#9ca2b7", 31 | font: { 32 | size: 14, 33 | weight: 300, 34 | family: "Roboto", 35 | style: "normal", 36 | lineHeight: 2, 37 | }, 38 | }, 39 | }, 40 | x: { 41 | grid: { 42 | drawBorder: false, 43 | display: false, 44 | drawOnChartArea: true, 45 | drawTicks: true, 46 | color: "#c1c4ce5c", 47 | }, 48 | ticks: { 49 | display: true, 50 | color: "#9ca2b7", 51 | padding: 10, 52 | font: { 53 | size: 14, 54 | weight: 300, 55 | family: "Roboto", 56 | style: "normal", 57 | lineHeight: 2, 58 | }, 59 | }, 60 | }, 61 | }, 62 | }, 63 | }; 64 | } 65 | 66 | export default configs; 67 | -------------------------------------------------------------------------------- /src/examples/Charts/BarCharts/ReportsBarChart/configs/index.js: -------------------------------------------------------------------------------- 1 | function configs(labels, datasets) { 2 | return { 3 | data: { 4 | labels, 5 | datasets: [ 6 | { 7 | label: datasets.label, 8 | tension: 0.4, 9 | borderWidth: 0, 10 | borderRadius: 4, 11 | borderSkipped: false, 12 | backgroundColor: "rgba(255, 255, 255, 0.8)", 13 | data: datasets.data, 14 | maxBarThickness: 6, 15 | }, 16 | ], 17 | }, 18 | options: { 19 | responsive: true, 20 | maintainAspectRatio: false, 21 | plugins: { 22 | legend: { 23 | display: false, 24 | }, 25 | }, 26 | interaction: { 27 | intersect: false, 28 | mode: "index", 29 | }, 30 | scales: { 31 | y: { 32 | grid: { 33 | drawBorder: false, 34 | display: true, 35 | drawOnChartArea: true, 36 | drawTicks: false, 37 | borderDash: [5, 5], 38 | color: "rgba(255, 255, 255, .2)", 39 | }, 40 | ticks: { 41 | suggestedMin: 0, 42 | suggestedMax: 500, 43 | beginAtZero: true, 44 | padding: 10, 45 | font: { 46 | size: 14, 47 | weight: 300, 48 | family: "Roboto", 49 | style: "normal", 50 | lineHeight: 2, 51 | }, 52 | color: "#fff", 53 | }, 54 | }, 55 | x: { 56 | grid: { 57 | drawBorder: false, 58 | display: true, 59 | drawOnChartArea: true, 60 | drawTicks: false, 61 | borderDash: [5, 5], 62 | color: "rgba(255, 255, 255, .2)", 63 | }, 64 | ticks: { 65 | display: true, 66 | color: "#f8f9fa", 67 | padding: 10, 68 | font: { 69 | size: 14, 70 | weight: 300, 71 | family: "Roboto", 72 | style: "normal", 73 | lineHeight: 2, 74 | }, 75 | }, 76 | }, 77 | }, 78 | }, 79 | }; 80 | } 81 | 82 | export default configs; 83 | -------------------------------------------------------------------------------- /src/examples/Charts/BarCharts/VerticalBarChart/configs/index.js: -------------------------------------------------------------------------------- 1 | import typography from "assets/theme/base/typography"; 2 | 3 | function configs(labels, datasets) { 4 | return { 5 | data: { 6 | labels, 7 | datasets: [...datasets], 8 | }, 9 | options: { 10 | responsive: true, 11 | maintainAspectRatio: false, 12 | plugins: { 13 | legend: { 14 | display: false, 15 | }, 16 | }, 17 | scales: { 18 | y: { 19 | grid: { 20 | drawBorder: false, 21 | display: true, 22 | drawOnChartArea: true, 23 | drawTicks: false, 24 | borderDash: [5, 5], 25 | }, 26 | ticks: { 27 | display: true, 28 | padding: 10, 29 | color: "#9ca2b7", 30 | font: { 31 | size: 11, 32 | family: typography.fontFamily, 33 | style: "normal", 34 | lineHeight: 2, 35 | }, 36 | }, 37 | }, 38 | x: { 39 | grid: { 40 | drawBorder: false, 41 | display: false, 42 | drawOnChartArea: true, 43 | drawTicks: true, 44 | }, 45 | ticks: { 46 | display: true, 47 | color: "#9ca2b7", 48 | padding: 10, 49 | font: { 50 | size: 11, 51 | family: typography.fontFamily, 52 | style: "normal", 53 | lineHeight: 2, 54 | }, 55 | }, 56 | }, 57 | }, 58 | }, 59 | }; 60 | } 61 | 62 | export default configs; 63 | -------------------------------------------------------------------------------- /src/examples/Charts/LineCharts/ReportsLineChart/configs/index.js: -------------------------------------------------------------------------------- 1 | 2 | function configs(labels, datasets) { 3 | return { 4 | data: { 5 | labels, 6 | datasets: [ 7 | { 8 | label: datasets.label, 9 | tension: 0, 10 | pointRadius: 5, 11 | pointBorderColor: "transparent", 12 | pointBackgroundColor: "rgba(255, 255, 255, .8)", 13 | borderColor: "rgba(255, 255, 255, .8)", 14 | borderWidth: 4, 15 | backgroundColor: "transparent", 16 | fill: true, 17 | data: datasets.data, 18 | maxBarThickness: 6, 19 | }, 20 | ], 21 | }, 22 | options: { 23 | responsive: true, 24 | maintainAspectRatio: false, 25 | plugins: { 26 | legend: { 27 | display: false, 28 | }, 29 | }, 30 | interaction: { 31 | intersect: false, 32 | mode: "index", 33 | }, 34 | scales: { 35 | y: { 36 | grid: { 37 | drawBorder: false, 38 | display: true, 39 | drawOnChartArea: true, 40 | drawTicks: false, 41 | borderDash: [5, 5], 42 | color: "rgba(255, 255, 255, .2)", 43 | }, 44 | ticks: { 45 | display: true, 46 | color: "#f8f9fa", 47 | padding: 10, 48 | font: { 49 | size: 14, 50 | weight: 300, 51 | family: "Roboto", 52 | style: "normal", 53 | lineHeight: 2, 54 | }, 55 | }, 56 | }, 57 | x: { 58 | grid: { 59 | drawBorder: false, 60 | display: false, 61 | drawOnChartArea: false, 62 | drawTicks: false, 63 | borderDash: [5, 5], 64 | }, 65 | ticks: { 66 | display: true, 67 | color: "#f8f9fa", 68 | padding: 10, 69 | font: { 70 | size: 14, 71 | weight: 300, 72 | family: "Roboto", 73 | style: "normal", 74 | lineHeight: 2, 75 | }, 76 | }, 77 | }, 78 | }, 79 | }, 80 | }; 81 | } 82 | 83 | export default configs; 84 | -------------------------------------------------------------------------------- /src/examples/Configurator/ConfiguratorRoot.js: -------------------------------------------------------------------------------- 1 | // @mui material components 2 | import Drawer from "@mui/material/Drawer"; 3 | import { styled } from "@mui/material/styles"; 4 | 5 | export default styled(Drawer)(({ theme, ownerState }) => { 6 | const { boxShadows, functions, transitions } = theme; 7 | const { openConfigurator } = ownerState; 8 | 9 | const configuratorWidth = 360; 10 | const { lg } = boxShadows; 11 | const { pxToRem } = functions; 12 | 13 | // drawer styles when openConfigurator={true} 14 | const drawerOpenStyles = () => ({ 15 | width: configuratorWidth, 16 | left: "initial", 17 | right: 0, 18 | transition: transitions.create("right", { 19 | easing: transitions.easing.sharp, 20 | duration: transitions.duration.short, 21 | }), 22 | }); 23 | 24 | // drawer styles when openConfigurator={false} 25 | const drawerCloseStyles = () => ({ 26 | left: "initial", 27 | right: pxToRem(-350), 28 | transition: transitions.create("all", { 29 | easing: transitions.easing.sharp, 30 | duration: transitions.duration.short, 31 | }), 32 | }); 33 | 34 | return { 35 | "& .MuiDrawer-paper": { 36 | height: "100vh", 37 | margin: 0, 38 | padding: `0 ${pxToRem(10)}`, 39 | borderRadius: 0, 40 | boxShadow: lg, 41 | overflowY: "auto", 42 | ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), 43 | }, 44 | }; 45 | }); 46 | -------------------------------------------------------------------------------- /src/examples/Items/NotificationItem/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { forwardRef } from "react"; 3 | 4 | // prop-types is a library for typechecking of props. 5 | import PropTypes from "prop-types"; 6 | 7 | // @mui material components 8 | import MenuItem from "@mui/material/MenuItem"; 9 | import Link from "@mui/material/Link"; 10 | 11 | // Amdin panel React components 12 | import MDBox from "components/MDBox"; 13 | import MDTypography from "components/MDTypography"; 14 | 15 | // custom styles for the NotificationItem 16 | import menuItem from "examples/Items/NotificationItem/styles"; 17 | 18 | const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => ( 19 | menuItem(theme)}> 20 | 21 | 22 | {icon} 23 | 24 | 25 | {title} 26 | 27 | 28 | 29 | )); 30 | 31 | // Typechecking props for the NotificationItem 32 | NotificationItem.propTypes = { 33 | icon: PropTypes.node.isRequired, 34 | title: PropTypes.string.isRequired, 35 | }; 36 | 37 | export default NotificationItem; 38 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/examples/LayoutContainers/DashboardLayout/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | // react-router-dom components 4 | import { useLocation } from "react-router-dom"; 5 | 6 | // prop-types is a library for typechecking of props. 7 | import PropTypes from "prop-types"; 8 | 9 | // Amdin panel React components 10 | import MDBox from "components/MDBox"; 11 | 12 | // Amdin panel React context 13 | import { useMaterialUIController, setLayout } from "context"; 14 | 15 | function DashboardLayout({ children }) { 16 | const [controller, dispatch] = useMaterialUIController(); 17 | const { miniSidenav } = controller; 18 | const { pathname } = useLocation(); 19 | 20 | useEffect(() => { 21 | setLayout(dispatch, "/admin/dashboard"); 22 | // eslint-disable-next-line react-hooks/exhaustive-deps 23 | }, [pathname]); 24 | 25 | return ( 26 | ({ 28 | p: 3, 29 | position: "relative", 30 | 31 | [breakpoints.up("xl")]: { 32 | marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), 33 | transition: transitions.create(["margin-left", "margin-right"], { 34 | easing: transitions.easing.easeInOut, 35 | duration: transitions.duration.standard, 36 | }), 37 | }, 38 | })} 39 | > 40 | {children} 41 | 42 | ); 43 | } 44 | 45 | // Typechecking props for the DashboardLayout 46 | DashboardLayout.propTypes = { 47 | children: PropTypes.node.isRequired, 48 | }; 49 | 50 | export default DashboardLayout; 51 | -------------------------------------------------------------------------------- /src/examples/LayoutContainers/PageLayout/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | 3 | // react-router-dom components 4 | import { useLocation } from "react-router-dom"; 5 | 6 | // prop-types is a library for typechecking of props. 7 | import PropTypes from "prop-types"; 8 | 9 | // Amdin panel React components 10 | import MDBox from "components/MDBox"; 11 | 12 | // Amdin panel React context 13 | import { useMaterialUIController, setLayout } from "context"; 14 | 15 | function PageLayout({ background, children }) { 16 | const [, dispatch] = useMaterialUIController(); 17 | const { pathname } = useLocation(); 18 | 19 | useEffect(() => { 20 | setLayout(dispatch, "page"); 21 | // eslint-disable-next-line react-hooks/exhaustive-deps 22 | }, [pathname]); 23 | 24 | return ( 25 | 32 | {children} 33 | 34 | ); 35 | } 36 | 37 | // Setting default values for the props for PageLayout 38 | PageLayout.defaultProps = { 39 | background: "default", 40 | }; 41 | 42 | // Typechecking props for the PageLayout 43 | PageLayout.propTypes = { 44 | background: PropTypes.oneOf(["white", "light", "default"]), 45 | children: PropTypes.node.isRequired, 46 | }; 47 | 48 | export default PageLayout; 49 | -------------------------------------------------------------------------------- /src/examples/Navbars/DefaultNavbar/DefaultNavbarLink.js: -------------------------------------------------------------------------------- 1 | // prop-types is a library for typechecking of props 2 | import PropTypes from "prop-types"; 3 | 4 | // react-router-dom components 5 | import { Link } from "react-router-dom"; 6 | 7 | // @mui material components 8 | import Icon from "@mui/material/Icon"; 9 | 10 | // Amdin panel React components 11 | import MDBox from "components/MDBox"; 12 | import MDTypography from "components/MDTypography"; 13 | 14 | function DefaultNavbarLink({ icon, name, route, light }) { 15 | return ( 16 | 25 | (light ? white.main : secondary.main), 28 | verticalAlign: "middle", 29 | }} 30 | > 31 | {icon} 32 | 33 | 40 |  {name} 41 | 42 | 43 | ); 44 | } 45 | 46 | // Typechecking props for the DefaultNavbarLink 47 | DefaultNavbarLink.propTypes = { 48 | icon: PropTypes.string.isRequired, 49 | name: PropTypes.string.isRequired, 50 | route: PropTypes.string.isRequired, 51 | light: PropTypes.bool.isRequired, 52 | }; 53 | 54 | export default DefaultNavbarLink; 55 | -------------------------------------------------------------------------------- /src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js: -------------------------------------------------------------------------------- 1 | // prop-types is a library for typechecking of props. 2 | import PropTypes from "prop-types"; 3 | 4 | // @mui material components 5 | import Menu from "@mui/material/Menu"; 6 | 7 | // Amdin panel React components 8 | import MDBox from "components/MDBox"; 9 | 10 | // Amdin panel React example components 11 | import DefaultNavbarLink from "examples/Navbars/DefaultNavbar/DefaultNavbarLink"; 12 | 13 | function DefaultNavbarMobile({ open, close }) { 14 | const { width } = open && open.getBoundingClientRect(); 15 | 16 | return ( 17 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | 39 | // Typechecking props for the DefaultNavbarMenu 40 | DefaultNavbarMobile.propTypes = { 41 | open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired, 42 | close: PropTypes.oneOfType([PropTypes.func, PropTypes.bool, PropTypes.object]).isRequired, 43 | }; 44 | 45 | export default DefaultNavbarMobile; 46 | -------------------------------------------------------------------------------- /src/examples/Sidenav/SidenavCollapse.js: -------------------------------------------------------------------------------- 1 | // prop-types is a library for typechecking of props. 2 | import PropTypes from "prop-types"; 3 | 4 | // @mui material components 5 | import ListItem from "@mui/material/ListItem"; 6 | import ListItemIcon from "@mui/material/ListItemIcon"; 7 | import ListItemText from "@mui/material/ListItemText"; 8 | import Icon from "@mui/material/Icon"; 9 | 10 | // Amdin panel React components 11 | import MDBox from "components/MDBox"; 12 | 13 | // Custom styles for the SidenavCollapse 14 | import { 15 | collapseItem, 16 | collapseIconBox, 17 | collapseIcon, 18 | collapseText, 19 | } from "examples/Sidenav/styles/sidenavCollapse"; 20 | 21 | // Amdin panel React context 22 | import { useMaterialUIController } from "context"; 23 | 24 | function SidenavCollapse({ icon, name, active, ...rest }) { 25 | const [controller] = useMaterialUIController(); 26 | const { miniSidenav, transparentSidenav, whiteSidenav, darkMode, sidenavColor } = controller; 27 | 28 | return ( 29 | 30 | 33 | collapseItem(theme, { 34 | active, 35 | transparentSidenav, 36 | whiteSidenav, 37 | darkMode, 38 | sidenavColor, 39 | }) 40 | } 41 | > 42 | 44 | collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode, active }) 45 | } 46 | > 47 | {typeof icon === "string" ? ( 48 | collapseIcon(theme, { active })}>{icon} 49 | ) : ( 50 | icon 51 | )} 52 | 53 | 54 | 57 | collapseText(theme, { 58 | miniSidenav, 59 | transparentSidenav, 60 | whiteSidenav, 61 | active, 62 | }) 63 | } 64 | /> 65 | 66 | 67 | ); 68 | } 69 | 70 | // Setting default values for the props of SidenavCollapse 71 | SidenavCollapse.defaultProps = { 72 | active: false, 73 | }; 74 | 75 | // Typechecking props for the SidenavCollapse 76 | SidenavCollapse.propTypes = { 77 | icon: PropTypes.node.isRequired, 78 | name: PropTypes.string.isRequired, 79 | active: PropTypes.bool, 80 | }; 81 | 82 | export default SidenavCollapse; 83 | -------------------------------------------------------------------------------- /src/examples/Sidenav/styles/sidenav.js: -------------------------------------------------------------------------------- 1 | 2 | export default function sidenavLogoLabel(theme, ownerState) { 3 | const { functions, transitions, typography, breakpoints } = theme; 4 | const { miniSidenav } = ownerState; 5 | 6 | const { pxToRem } = functions; 7 | const { fontWeightMedium } = typography; 8 | 9 | return { 10 | ml: 0.5, 11 | fontWeight: fontWeightMedium, 12 | wordSpacing: pxToRem(-1), 13 | transition: transitions.create("opacity", { 14 | easing: transitions.easing.easeInOut, 15 | duration: transitions.duration.standard, 16 | }), 17 | 18 | [breakpoints.up("xl")]: { 19 | opacity: miniSidenav ? 0 : 1, 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/examples/Tables/DataTable/DataTableBodyCell.js: -------------------------------------------------------------------------------- 1 | 2 | // prop-types is a library for typechecking of props 3 | import PropTypes from "prop-types"; 4 | 5 | // Amdin panel React components 6 | import MDBox from "components/MDBox"; 7 | 8 | function DataTableBodyCell({ noBorder, align, children }) { 9 | return ( 10 | ({ 16 | fontSize: size.sm, 17 | borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, 18 | })} 19 | > 20 | 26 | {children} 27 | 28 | 29 | ); 30 | } 31 | 32 | // Setting default values for the props of DataTableBodyCell 33 | DataTableBodyCell.defaultProps = { 34 | noBorder: false, 35 | align: "left", 36 | }; 37 | 38 | // Typechecking props for the DataTableBodyCell 39 | DataTableBodyCell.propTypes = { 40 | children: PropTypes.node.isRequired, 41 | noBorder: PropTypes.bool, 42 | align: PropTypes.oneOf(["left", "right", "center"]), 43 | }; 44 | 45 | export default DataTableBodyCell; 46 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/examples/Timeline/TimelineList/index.js: -------------------------------------------------------------------------------- 1 | 2 | // prop-types is a library for typechecking of props 3 | import PropTypes from "prop-types"; 4 | 5 | // @mui material components 6 | import Card from "@mui/material/Card"; 7 | 8 | // Amdin panel React components 9 | import MDBox from "components/MDBox"; 10 | import MDTypography from "components/MDTypography"; 11 | 12 | // Amdin panel React components 13 | import { useMaterialUIController } from "context"; 14 | 15 | // Timeline context 16 | import { TimelineProvider } from "examples/Timeline/context"; 17 | 18 | function TimelineList({ title, dark, children }) { 19 | const [controller] = useMaterialUIController(); 20 | const { darkMode } = controller; 21 | 22 | return ( 23 | 24 | 25 | darkMode && background.card }} 30 | > 31 | 32 | 33 | {title} 34 | 35 | 36 | {children} 37 | 38 | 39 | 40 | ); 41 | } 42 | 43 | // Setting default values for the props of TimelineList 44 | TimelineList.defaultProps = { 45 | dark: false, 46 | }; 47 | 48 | // Typechecking props for the TimelineList 49 | TimelineList.propTypes = { 50 | title: PropTypes.string.isRequired, 51 | dark: PropTypes.bool, 52 | children: PropTypes.node.isRequired, 53 | }; 54 | 55 | export default TimelineList; 56 | -------------------------------------------------------------------------------- /src/examples/Timeline/context/index.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | // The Timeline main context 4 | const Timeline = createContext(); 5 | 6 | // Timeline context provider 7 | function TimelineProvider({ children, value }) { 8 | return {children}; 9 | } 10 | 11 | // Timeline custom hook for using context 12 | function useTimeline() { 13 | return useContext(Timeline); 14 | } 15 | 16 | export { TimelineProvider, useTimeline }; 17 | /* eslint-enable react/prop-types */ 18 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import { getAuth } from "firebase/auth"; 3 | import { getFirestore } from "firebase/firestore"; 4 | import { getStorage } from "firebase/storage"; 5 | import { getMessaging } from "firebase/messaging"; 6 | 7 | // Initialize Firebase 8 | const app = initializeApp( 9 | { 10 | apiKey: "AIzaSyABF4m8puuckAImYCAF5HRFsZ_03J609LQ", 11 | authDomain: "admin-panel-76a17.firebaseapp.com", 12 | databaseURL: "https://admin-panel-76a17-default-rtdb.firebaseio.com", 13 | projectId: "admin-panel-76a17", 14 | storageBucket: "admin-panel-76a17.appspot.com", 15 | messagingSenderId: "215078169100", 16 | appId: "1:215078169100:web:61f5a720a5ff127b645c29", 17 | measurementId: "G-7CXT51EQ6T" 18 | } 19 | ) 20 | export const auth = getAuth(app) 21 | export const db = getFirestore(app) 22 | export const storage = getStorage(app) 23 | export const messaging = getMessaging(app); -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "App"; 5 | 6 | // Material Dashboard 2 React Context Provider 7 | import { MaterialUIControllerProvider } from "context"; 8 | import { AuthContextProvider } from "context/AuthContext" 9 | 10 | ReactDOM.render( 11 | 12 | 13 | 14 | 15 | 16 | 17 | , 18 | document.getElementById("root") 19 | ); 20 | -------------------------------------------------------------------------------- /src/layouts/authentication/BasicLayout.js: -------------------------------------------------------------------------------- 1 | // prop-types is a library for typechecking of props 2 | import PropTypes from "prop-types"; 3 | 4 | // @mui material components 5 | import Grid from "@mui/material/Grid"; 6 | 7 | // Amdin panel React components 8 | import MDBox from "components/MDBox"; 9 | 10 | // // Amdin panel React example components 11 | import DefaultNavbar from "examples/Navbars/DefaultNavbar"; 12 | import PageLayout from "examples/LayoutContainers/PageLayout"; 13 | 14 | // // Authentication pages components 15 | // import Footer from "layouts/authentication/components/Footer"; 16 | 17 | function BasicLayout({ image, children }) { 18 | return ( 19 | 20 | 21 | 27 | image && 28 | `${linearGradient( 29 | rgba(gradients.dark.main, 0.6), 30 | rgba(gradients.dark.state, 0.6) 31 | )}, url(${image})`, 32 | backgroundSize: "cover", 33 | backgroundPosition: "center", 34 | backgroundRepeat: "no-repeat", 35 | }} 36 | /> 37 | 38 | 39 | 40 | {children} 41 | 42 | 43 | 44 | {/*