├── .eslintrc.json ├── .gitignore ├── .npmrc ├── .prettierrc.json ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── genezio.yaml ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.png ├── index.html ├── manifest.json └── robots.txt └── src ├── App.js ├── assets ├── images │ ├── BalanceCardBg.png │ ├── avatar-simmmple.png │ ├── avatar1.png │ ├── avatar10.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── avatar6.png │ ├── avatar7.png │ ├── avatar8.png │ ├── avatar9.png │ ├── background-card-reports.png │ ├── billing-background-balance.png │ ├── billing-background-card.png │ ├── body-background.png │ ├── bruce-mars.jpg │ ├── cardimgfree.png │ ├── curved-images │ │ └── white-curved.jpeg │ ├── ivana-square.jpg │ ├── ivana-squares.jpg │ ├── kal-visuals-square.jpg │ ├── logo-ct.png │ ├── logos │ │ ├── mastercard.png │ │ └── visa.png │ ├── marie.jpg │ ├── profile-1.png │ ├── profile-2.png │ ├── profile-3.png │ ├── shapes │ │ ├── car-profile.svg │ │ ├── graph-billing.svg │ │ ├── green-lightning.svg │ │ ├── waves-white.svg │ │ └── white-lightning.svg │ ├── sidenav │ │ └── sidenav-card-background.png │ ├── signInImage.png │ ├── signUpImage.png │ ├── small-logos │ │ ├── icon-sun-cloud.png │ │ ├── logo-apple.svg │ │ ├── logo-atlassian.svg │ │ ├── logo-facebook.svg │ │ ├── logo-google.svg │ │ ├── logo-invision.svg │ │ ├── logo-jira.svg │ │ ├── logo-slack.svg │ │ ├── logo-spotify.svg │ │ ├── logo-webdev.svg │ │ └── logo-xd.svg │ ├── team-1.jpg │ ├── team-2.jpg │ ├── team-3.jpg │ ├── team-4.jpg │ ├── team-5.jpg │ └── welcome-profile.png └── theme │ ├── base │ ├── borders.js │ ├── boxShadows.js │ ├── breakpoints.js │ ├── colors.js │ ├── globals.js │ ├── typography.css │ └── 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 │ │ ├── inputBase.js │ │ ├── radio.js │ │ ├── select.js │ │ └── switchButton.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 │ ├── radialGradient.js │ ├── rgba.js │ └── tripleLinearGradient.js │ ├── index.js │ └── theme-rtl.js ├── components ├── VuiAlert │ ├── VuiAlertCloseIcon.js │ ├── VuiAlertRoot.js │ └── index.js ├── VuiAvatar │ ├── VuiAvatarRoot.js │ └── index.js ├── VuiBadge │ ├── VuiBadgeRoot.js │ └── index.js ├── VuiBox │ ├── VuiBoxRoot.js │ └── index.js ├── VuiButton │ ├── VuiButtonRoot.js │ └── index.js ├── VuiInput │ ├── VuiInputIconBoxRoot.js │ ├── VuiInputIconRoot.js │ ├── VuiInputRoot.js │ ├── VuiInputWithIconRoot.js │ └── index.js ├── VuiPagination │ ├── VuiPaginationItemRoot.js │ └── index.js ├── VuiProgress │ ├── VuiProgressRoot.js │ └── index.js ├── VuiSwitch │ ├── VuiSwitchRoot.js │ └── index.js └── VuiTypography │ ├── VuiTypographyRoot.js │ └── index.js ├── context └── index.js ├── examples ├── Breadcrumbs │ └── index.js ├── Cards │ ├── InfoCards │ │ └── ProfileInfoCard │ │ │ └── index.js │ ├── MasterCard │ │ └── index.js │ ├── ProjectCards │ │ └── DefaultProjectCard │ │ │ └── index.js │ └── StatisticsCards │ │ └── MiniStatisticsCard │ │ └── index.js ├── Charts │ ├── BarCharts │ │ └── BarChart.js │ └── LineCharts │ │ └── LineChart.js ├── Configurator │ ├── ConfiguratorRoot.js │ └── index.js ├── Footer │ └── index.js ├── GradientBorder │ ├── GradientBorderRoot.js │ └── index.js ├── Icons │ ├── AdobeXD.js │ ├── Atlassian.js │ ├── Basket.js │ ├── Cart.js │ ├── Credit.js │ ├── CreditCard.js │ ├── Cube.js │ ├── CustomerSupport.js │ ├── Document.js │ ├── DocumentV.js │ ├── Invision.js │ ├── Jira.js │ ├── Mastercard.js │ ├── Office.js │ ├── Settings.js │ ├── Shop.js │ ├── SimmmpleLogo.js │ ├── Slack.js │ ├── SpaceShip.js │ ├── Spotify.js │ └── Visa.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 ├── Sidenav │ ├── SidenavCard.js │ ├── SidenavCollapse.js │ ├── SidenavRoot.js │ ├── index.js │ └── styles │ │ ├── sidenav.js │ │ ├── sidenavCard.js │ │ └── sidenavCollapse.js ├── Tables │ └── Table │ │ └── index.js └── Timeline │ ├── TimelineItem │ ├── index.js │ └── styles.js │ ├── TimelineList │ └── index.js │ └── context │ └── index.js ├── index.js ├── layouts ├── authentication │ ├── components │ │ ├── BasicLayout │ │ │ └── index.js │ │ ├── CoverLayout │ │ │ └── index.js │ │ ├── Footer │ │ │ └── index.js │ │ ├── IllustrationLayout │ │ │ └── index.js │ │ ├── Separator │ │ │ └── index.js │ │ └── Socials │ │ │ └── index.js │ ├── sign-in │ │ └── index.js │ └── sign-up │ │ └── index.js ├── billing │ ├── components │ │ ├── Bill │ │ │ └── index.js │ │ ├── BillingInformation │ │ │ └── index.js │ │ ├── CreditBalance │ │ │ └── index.js │ │ ├── Invoice │ │ │ └── index.js │ │ ├── Invoices │ │ │ └── index.js │ │ ├── PaymentMethod │ │ │ └── index.js │ │ ├── Transaction │ │ │ └── index.js │ │ └── Transactions │ │ │ └── index.js │ └── index.js ├── dashboard │ ├── components │ │ ├── OrderOverview │ │ │ └── index.js │ │ ├── Projects │ │ │ ├── data │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── ReferralTracking │ │ │ └── index.js │ │ ├── SatisfactionRate │ │ │ └── index.js │ │ └── WelcomeMark │ │ │ └── index.js │ ├── data │ │ ├── barChartData.js │ │ ├── barChartOptions.js │ │ ├── lineChartData.js │ │ └── lineChartOptions.js │ └── index.js ├── profile │ ├── components │ │ ├── CarInformations │ │ │ └── index.js │ │ ├── Header │ │ │ └── index.js │ │ ├── PlatformSettings │ │ │ └── index.js │ │ └── Welcome │ │ │ └── index.js │ ├── data │ │ ├── lineChartData1.js │ │ ├── lineChartData2.js │ │ ├── lineChartOptions1.js │ │ └── lineChartOptions2.js │ └── index.js ├── rtl │ ├── components │ │ ├── OrderOverview │ │ │ └── index.js │ │ ├── Projects │ │ │ ├── data │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── ReferralTracking │ │ │ └── index.js │ │ ├── SatisfactionRate │ │ │ └── index.js │ │ └── WelcomeMark │ │ │ └── index.js │ ├── data │ │ ├── barChartData.js │ │ ├── barChartOptions.js │ │ ├── lineChartData.js │ │ └── lineChartOptions.js │ └── index.js └── tables │ ├── data │ ├── authorsTableData.js │ └── projectsTableData.js │ └── index.js ├── routes.js └── variables └── charts.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "parserOptions": { 7 | "ecmaFeatures": { 8 | "jsx": true 9 | }, 10 | "ecmaVersion": 12, 11 | "sourceType": "module" 12 | }, 13 | "plugins": ["react"] 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | package-lock.json 24 | yarn.lock 25 | 26 | commit.sh 27 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=true 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": false, 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | ## [1.0.1] 2022-07-26 3 | 4 | - We used the Material UI Circular Progress instead of the plugins since they were deprecated. We also removed the tilt card for the same reason. The plugins are still used in previous versions! 5 | ## [1.0.0] 2022-01-03 6 | 7 | ### Original Release 8 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2013-2021 Creative Tim (https://www.creative-tim.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: vision-ui-dashboard-react 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 17 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vision-ui-dashboard-react", 3 | "version": "3.0.0", 4 | "private": true, 5 | "author": "Creative Tim", 6 | "license": "See license in https://www.creative-tim.com/license", 7 | "description": "Material UI version of Vision UI Dashboard by Creative Tim", 8 | "homepage": "https://demos.creative-tim.com/vision-ui-dashboard-react/#/dashboard", 9 | "bugs": { 10 | "url": "https://github.com/creativetimofficial/vision-ui-dashboard-react/issues" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/creativetimofficial/vision-ui-dashboard-react.git" 15 | }, 16 | "dependencies": { 17 | "@emotion/cache": "11.4.0", 18 | "@emotion/react": "^11.9.3", 19 | "@emotion/styled": "^11.9.3", 20 | "@mui/icons-material": "5.1.1", 21 | "@mui/material": "^5.9.2", 22 | "@mui/styled-engine": "5.1.1", 23 | "@mui/styles": "^5.2.0", 24 | "ajv": "^8.17.1", 25 | "apexcharts": "^3.30.0", 26 | "chroma-js": "2.1.2", 27 | "install": "^0.13.0", 28 | "prop-types": "15.7.2", 29 | "react": "^18.2.0", 30 | "react-apexcharts": "^1.3.9", 31 | "react-countup": "5.2.0", 32 | "react-dom": "^18.2.0", 33 | "react-flatpickr": "3.10.7", 34 | "react-github-btn": "1.2.1", 35 | "react-icons": "^4.3.1", 36 | "react-router-dom": "5.2.0", 37 | "stylis": "4.0.10", 38 | "stylis-plugin-rtl": "2.1.0", 39 | "uuid": "8.3.2", 40 | "web-vitals": "1.0.1" 41 | }, 42 | "devDependencies": { 43 | "@testing-library/jest-dom": "5.11.4", 44 | "@testing-library/react": "11.1.0", 45 | "@testing-library/user-event": "12.1.10", 46 | "cross-env": "^7.0.3", 47 | "eslint": "^7.11.0", 48 | "react-scripts": "5.0.1" 49 | }, 50 | "scripts": { 51 | "start": "react-scripts start", 52 | "build": "cross-env PUBLIC_URL=/ react-scripts build", 53 | "test": "react-scripts test", 54 | "eject": "react-scripts eject", 55 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 56 | }, 57 | "eslintConfig": { 58 | "extends": [ 59 | "react-app", 60 | "react-app/jest" 61 | ] 62 | }, 63 | "browserslist": { 64 | "production": [ 65 | ">0.2%", 66 | "not dead", 67 | "not op_mini all" 68 | ], 69 | "development": [ 70 | "last 1 chrome version", 71 | "last 1 firefox version", 72 | "last 1 safari version" 73 | ] 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Vision UI Dashboard Free React 30 | 34 | 40 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Vision UI Dashboard", 3 | "name": "Vision UI Dashboard 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": "#17c1e8", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/images/BalanceCardBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/BalanceCardBg.png -------------------------------------------------------------------------------- /src/assets/images/avatar-simmmple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar-simmmple.png -------------------------------------------------------------------------------- /src/assets/images/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar1.png -------------------------------------------------------------------------------- /src/assets/images/avatar10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar10.png -------------------------------------------------------------------------------- /src/assets/images/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar2.png -------------------------------------------------------------------------------- /src/assets/images/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar3.png -------------------------------------------------------------------------------- /src/assets/images/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar4.png -------------------------------------------------------------------------------- /src/assets/images/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar5.png -------------------------------------------------------------------------------- /src/assets/images/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar6.png -------------------------------------------------------------------------------- /src/assets/images/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar7.png -------------------------------------------------------------------------------- /src/assets/images/avatar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar8.png -------------------------------------------------------------------------------- /src/assets/images/avatar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/avatar9.png -------------------------------------------------------------------------------- /src/assets/images/background-card-reports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/background-card-reports.png -------------------------------------------------------------------------------- /src/assets/images/billing-background-balance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/billing-background-balance.png -------------------------------------------------------------------------------- /src/assets/images/billing-background-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/billing-background-card.png -------------------------------------------------------------------------------- /src/assets/images/body-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/body-background.png -------------------------------------------------------------------------------- /src/assets/images/bruce-mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/bruce-mars.jpg -------------------------------------------------------------------------------- /src/assets/images/cardimgfree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/cardimgfree.png -------------------------------------------------------------------------------- /src/assets/images/curved-images/white-curved.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/curved-images/white-curved.jpeg -------------------------------------------------------------------------------- /src/assets/images/ivana-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/ivana-square.jpg -------------------------------------------------------------------------------- /src/assets/images/ivana-squares.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/ivana-squares.jpg -------------------------------------------------------------------------------- /src/assets/images/kal-visuals-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/kal-visuals-square.jpg -------------------------------------------------------------------------------- /src/assets/images/logo-ct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/logo-ct.png -------------------------------------------------------------------------------- /src/assets/images/logos/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/logos/mastercard.png -------------------------------------------------------------------------------- /src/assets/images/logos/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/logos/visa.png -------------------------------------------------------------------------------- /src/assets/images/marie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/marie.jpg -------------------------------------------------------------------------------- /src/assets/images/profile-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/profile-1.png -------------------------------------------------------------------------------- /src/assets/images/profile-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/profile-2.png -------------------------------------------------------------------------------- /src/assets/images/profile-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/profile-3.png -------------------------------------------------------------------------------- /src/assets/images/shapes/car-profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/images/shapes/graph-billing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/shapes/green-lightning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/shapes/white-lightning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/sidenav/sidenav-card-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/sidenav/sidenav-card-background.png -------------------------------------------------------------------------------- /src/assets/images/signInImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/signInImage.png -------------------------------------------------------------------------------- /src/assets/images/signUpImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/signUpImage.png -------------------------------------------------------------------------------- /src/assets/images/small-logos/icon-sun-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/small-logos/icon-sun-cloud.png -------------------------------------------------------------------------------- /src/assets/images/small-logos/logo-apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Artboard 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /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-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Artboard 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/logo-google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Artboard 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/small-logos/logo-invision.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /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/small-logos/logo-webdev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/team-1.jpg -------------------------------------------------------------------------------- /src/assets/images/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/team-2.jpg -------------------------------------------------------------------------------- /src/assets/images/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/team-3.jpg -------------------------------------------------------------------------------- /src/assets/images/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/team-4.jpg -------------------------------------------------------------------------------- /src/assets/images/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/team-5.jpg -------------------------------------------------------------------------------- /src/assets/images/welcome-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vision-ui-dashboard-react/78762699ec3de2882dda9ee9ea3bec164fc94f88/src/assets/images/welcome-profile.png -------------------------------------------------------------------------------- /src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | * The base border styles for the Vision UI Dashboard Material. 21 | * You can add new border width, border color or border radius using this file. 22 | * You can customized the borders value for the entire Vision UI Dashboard Material using thie file. 23 | */ 24 | 25 | // Vision UI Dashboard React Base Styles 26 | import colors from "assets/theme/base/colors"; 27 | 28 | // Vision UI Dashboard React Helper Functions 29 | import pxToRem from "assets/theme/functions/pxToRem"; 30 | 31 | const { borderCol } = colors; 32 | 33 | export default { 34 | borderColor: { 35 | grey: { borderCol }, 36 | white: "rgba(226, 232, 240, 0.3)", 37 | }, 38 | 39 | borderWidth: { 40 | 0: 0, 41 | 1: pxToRem(1), 42 | 2: pxToRem(2), 43 | 3: pxToRem(3), 44 | 4: pxToRem(4), 45 | 5: pxToRem(5), 46 | }, 47 | 48 | borderRadius: { 49 | xs: pxToRem(2), 50 | sm: pxToRem(4), 51 | md: pxToRem(8), 52 | button: pxToRem(12), 53 | lg: pxToRem(15), 54 | xl: pxToRem(20), 55 | xxl: pxToRem(24), 56 | form: pxToRem(24), 57 | section: pxToRem(160), 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | * The base breakpoints for the Vision UI Dashboard Material. 21 | * You can add new breakpoints using this file. 22 | * You can customized the breakpoints for the entire Vision UI Dashboard Material using thie file. 23 | */ 24 | 25 | export default { 26 | values: { 27 | xs: 375, 28 | sm: 425, 29 | md: 768, 30 | lg: 1024, 31 | xl: 1440, 32 | xxl: 1680, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import colors from "assets/theme/base/colors"; 21 | import bgAdmin from "assets/images/body-background.png"; 22 | 23 | const { info, dark } = colors; 24 | export default { 25 | html: { 26 | scrollBehavior: "smooth", 27 | background: dark.body, 28 | }, 29 | body: { 30 | background: `url(${bgAdmin})`, 31 | backgroundSize: "cover", 32 | }, 33 | "*, *::before, *::after": { 34 | margin: 0, 35 | padding: 0, 36 | }, 37 | "a, a:link, a:visited": { 38 | textDecoration: "none !important", 39 | }, 40 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 41 | color: `${dark.main} !important`, 42 | transition: "color 150ms ease-in !important", 43 | }, 44 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 45 | color: `${info.main} !important`, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/base/typography.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | @import url(https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css); 20 | -------------------------------------------------------------------------------- /src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | defaultProps: { 21 | color: "transparent", 22 | }, 23 | 24 | styleOverrides: { 25 | root: { 26 | boxShadow: "none", 27 | }, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | transition: "all 200ms ease-in-out", 28 | }, 29 | 30 | rounded: { 31 | borderRadius: borderRadius.lg, 32 | }, 33 | 34 | img: { 35 | height: "auto", 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | 23 | const { grey, text, info } = colors; 24 | const { size } = typography; 25 | 26 | export default { 27 | styleOverrides: { 28 | li: { 29 | lineHeight: 0, 30 | }, 31 | 32 | separator: { 33 | fontSize: size.sm, 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Button Styles 20 | import root from "assets/theme/components/button/root"; 21 | import contained from "assets/theme/components/button/contained"; 22 | import outlined from "assets/theme/components/button/outlined"; 23 | import text from "assets/theme/components/button/text"; 24 | 25 | export default { 26 | defaultProps: { 27 | disableRipple: true, 28 | }, 29 | styleOverrides: { 30 | root: { ...root }, 31 | contained: { ...contained.base }, 32 | containedSizeSmall: { ...contained.small }, 33 | containedSizeLarge: { ...contained.large }, 34 | containedPrimary: { ...contained.primary }, 35 | containedSecondary: { ...contained.secondary }, 36 | outlined: { ...outlined.base }, 37 | outlinedSizeSmall: { ...outlined.small }, 38 | outlinedSizeLarge: { ...outlined.large }, 39 | outlinedPrimary: { ...outlined.primary }, 40 | outlinedSecondary: { ...outlined.secondary }, 41 | text: { ...text.base }, 42 | textSizeSmall: { ...text.small }, 43 | textSizeLarge: { ...text.large }, 44 | textPrimary: { ...text.primary }, 45 | textSecondary: { ...text.secondary }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import typography from "assets/theme/base/typography"; 21 | import borders from "assets/theme/base/borders"; 22 | 23 | // Vision UI Dashboard React Helper Functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { fontWeightBold, size } = typography; 27 | const { borderRadius } = borders; 28 | 29 | export default { 30 | display: "inline-flex", 31 | justifyContent: "center", 32 | alignItems: "center", 33 | fontSize: size.xs, 34 | fontWeight: fontWeightBold, 35 | borderRadius: borderRadius.button, 36 | padding: `${pxToRem(12)} ${pxToRem(24)}`, 37 | lineHeight: 1.4, 38 | textAlign: "center", 39 | textTransform: "unset", 40 | userSelect: "none", 41 | backgroundSize: "150% !important", 42 | backgroundPositionX: "25% !important", 43 | transition: `all 150ms ease-in`, 44 | 45 | "&:hover": { 46 | transform: "scale(1.02)", 47 | }, 48 | 49 | "&:disabled": { 50 | pointerEvent: "none", 51 | opacity: 0.65, 52 | }, 53 | 54 | "& .material-icons": { 55 | fontSize: pxToRem(15), 56 | marginTop: pxToRem(-2), 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | defaultProps: { 21 | disableRipple: true, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Helper Functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | export default { 23 | styleOverrides: { 24 | root: { 25 | marginTop: 0, 26 | marginBottom: 0, 27 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import borders from "assets/theme/base/borders"; 21 | 22 | // Vision UI Dashboard React Helper Functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { borderRadius } = borders; 26 | 27 | export default { 28 | styleOverrides: { 29 | root: { 30 | borderRadius: borderRadius.xl, 31 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 32 | }, 33 | 34 | media: { 35 | width: "auto", 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import colors from "assets/theme/base/colors"; 21 | import linearGradient from "assets/theme/functions/linearGradient"; 22 | import borders from "assets/theme/base/borders"; 23 | import boxShadows from "assets/theme/base/boxShadows"; 24 | 25 | // Vision UI Dashboard React Helper Function 26 | import rgba from "assets/theme/functions/rgba"; 27 | 28 | const { black, gradients } = colors; 29 | const { card } = gradients; 30 | const { borderWidth, borderRadius } = borders; 31 | const { xxl } = boxShadows; 32 | 33 | export default { 34 | styleOverrides: { 35 | root: { 36 | display: "flex", 37 | flexDirection: "column", 38 | background: linearGradient(card.main, card.state, card.deg), 39 | backdropFilter: "blur(120px)", 40 | position: "relative", 41 | minWidth: 0, 42 | padding: "22px", 43 | wordWrap: "break-word", 44 | backgroundClip: "border-box", 45 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 46 | borderRadius: borderRadius.xl, 47 | boxShadow: xxl, 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/container.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import breakpoints from "assets/theme/base/breakpoints"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { 26 | values: { sm, md, lg, xl, xxl }, 27 | } = breakpoints; 28 | 29 | const SM = `@media (min-width: ${sm}px)`; 30 | const MD = `@media (min-width: ${md}px)`; 31 | const LG = `@media (min-width: ${lg}px)`; 32 | const XL = `@media (min-width: ${xl}px)`; 33 | const XXL = `@media (min-width: ${xxl}px)`; 34 | 35 | const sharedClasses = { 36 | paddingRight: `${pxToRem(24)} !important`, 37 | paddingLeft: `${pxToRem(24)} !important`, 38 | marginRight: "auto !important", 39 | marginLeft: "auto !important", 40 | width: "100% !important", 41 | position: "relative", 42 | }; 43 | 44 | export default { 45 | [SM]: { 46 | ".MuiContainer-root": { 47 | ...sharedClasses, 48 | maxWidth: "540px !important", 49 | }, 50 | }, 51 | [MD]: { 52 | ".MuiContainer-root": { 53 | ...sharedClasses, 54 | maxWidth: "720px !important", 55 | }, 56 | }, 57 | [LG]: { 58 | ".MuiContainer-root": { 59 | ...sharedClasses, 60 | maxWidth: "960px !important", 61 | }, 62 | }, 63 | [XL]: { 64 | ".MuiContainer-root": { 65 | ...sharedClasses, 66 | maxWidth: "1140px !important", 67 | }, 68 | }, 69 | [XXL]: { 70 | ".MuiContainer-root": { 71 | ...sharedClasses, 72 | maxWidth: "1320px !important", 73 | }, 74 | }, 75 | }; 76 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | export default { 23 | styleOverrides: { 24 | root: { 25 | padding: pxToRem(16), 26 | }, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import typography from "assets/theme/base/typography"; 21 | import borders from "assets/theme/base/borders"; 22 | import colors from "assets/theme/base/colors"; 23 | 24 | // Vision UI Dashboard React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { size } = typography; 28 | const { text } = colors; 29 | const { borderWidth, borderColor } = borders; 30 | 31 | export default { 32 | styleOverrides: { 33 | root: { 34 | padding: pxToRem(16), 35 | fontSize: size.md, 36 | color: text.main, 37 | }, 38 | 39 | dividers: { 40 | borderTop: `${borderWidth[1]} solid ${borderColor}`, 41 | borderBottom: `${borderWidth[1]} solid ${borderColor}`, 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import typography from "assets/theme/base/typography"; 21 | import colors from "assets/theme/base/colors"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | // import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { size } = typography; 27 | const { text } = colors; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | fontSize: size.md, 33 | color: text.main, 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import typography from "assets/theme/base/typography"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { size } = typography; 26 | 27 | export default { 28 | styleOverrides: { 29 | root: { 30 | padding: pxToRem(16), 31 | fontSize: size.xl, 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | import boxShadows from "assets/theme/base/boxShadows"; 22 | 23 | const { borderRadius } = borders; 24 | const { xxl } = boxShadows; 25 | 26 | export default { 27 | styleOverrides: { 28 | paper: { 29 | borderRadius: borderRadius.lg, 30 | boxShadow: xxl, 31 | }, 32 | 33 | paperFullScreen: { 34 | borderRadius: 0, 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/assets/theme/components/divider.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import rgba from "assets/theme/functions/rgba"; 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { dark, transparent, white, info } = colors; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | backgroundColor: transparent.main, 32 | backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba( 33 | dark.main, 34 | 0.5 35 | )}, ${rgba(dark.main, 0)}) !important`, 36 | height: pxToRem(1), 37 | margin: `${pxToRem(16)} 0`, 38 | borderBottom: "none", 39 | opacity: 0.25, 40 | }, 41 | 42 | vertical: { 43 | backgroundColor: transparent.main, 44 | backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba( 45 | dark.main, 46 | 0.5 47 | )}, ${rgba(dark.main, 0)}) !important`, 48 | width: pxToRem(1), 49 | height: "100%", 50 | margin: `0 ${pxToRem(16)}`, 51 | borderRight: "none", 52 | }, 53 | 54 | light: { 55 | backgroundColor: transparent.main, 56 | backgroundImage: `linear-gradient(to right, ${rgba(info.main, 0)}, ${rgba( 57 | white.main, 58 | 1 59 | )}, ${rgba(white.main, 0)}) !important`, 60 | 61 | "&.MuiDivider-vertical": { 62 | backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${rgba( 63 | white.main, 64 | 0.5 65 | )}, ${rgba(white.main, 0)}) !important`, 66 | }, 67 | }, 68 | }, 69 | }; 70 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { dark } = colors; 27 | const { size, fontWeightBold } = typography; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | display: "block", 33 | minHeight: pxToRem(24), 34 | marginBottom: pxToRem(2), 35 | }, 36 | 37 | label: { 38 | display: "inline-block", 39 | fontSize: size.sm, 40 | fontWeight: fontWeightBold, 41 | color: dark.main, 42 | lineHeight: 1, 43 | transform: `translateY(${pxToRem(1)})`, 44 | marginLeft: pxToRem(4), 45 | 46 | "&.Mui-disabled": { 47 | color: dark.main, 48 | }, 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | 22 | const { dark } = colors; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | color: dark.main, 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | 23 | // Vision UI Dashboard helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { inputColors } = colors; 27 | const { borderWidth, borderRadius } = borders; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | display: "flex !important", 33 | padding: `${pxToRem(8)} ${pxToRem(28)} ${pxToRem(8)} ${pxToRem(12)} !important`, 34 | border: `${borderWidth[1]} solid ${inputColors.borderColor.main}`, 35 | borderRadius: `${borderRadius.md} !important`, 36 | 37 | "& fieldset": { 38 | border: "none", 39 | }, 40 | }, 41 | 42 | input: { 43 | height: pxToRem(22), 44 | width: "max-content !important", 45 | }, 46 | 47 | inputSizeSmall: { 48 | height: pxToRem(14), 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputBase.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | // Vision UI Dashboard helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { dark, white, grey, inputColors } = colors; 28 | const { size, fontWeightRegular } = typography; 29 | const { borderWidth, borderRadius } = borders; 30 | 31 | export default { 32 | styleOverrides: { 33 | root: { 34 | display: "grid !important", 35 | placeItems: "center !important", 36 | width: "100% !important", 37 | height: "auto !important", 38 | padding: `${pxToRem(8)} ${pxToRem(12)}`, 39 | fontSize: `${size.sm} !important`, 40 | fontWeight: `${fontWeightRegular} !important`, 41 | lineHeight: "1.4 !important", 42 | color: `${grey[700]} !important`, 43 | backgroundColor: `${white.main} !important`, 44 | backgroundClip: "padding-box !important", 45 | border: `${borderWidth[1]} solid ${inputColors.borderColor.main}`, 46 | appearance: "none !important", 47 | borderRadius: borderRadius.md, 48 | transition: "box-shadow 150ms ease, border-color 150ms ease, padding 150ms ease !important", 49 | }, 50 | 51 | input: { 52 | width: "100% !important", 53 | height: `${pxToRem(22)}`, 54 | padding: "0 !important", 55 | 56 | "&::-webkit-input-placeholder": { 57 | color: `${dark.main} !important`, 58 | }, 59 | }, 60 | }, 61 | }; 62 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/select.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { transparent } = colors; 26 | 27 | export default { 28 | styleOverrides: { 29 | select: { 30 | display: "grid", 31 | alignItems: "center", 32 | padding: `0 ${pxToRem(12)} !important`, 33 | 34 | "& .Mui-selected": { 35 | backgroundColor: transparent.main, 36 | }, 37 | }, 38 | 39 | selectMenu: { 40 | background: "none", 41 | height: "none", 42 | minHeight: "none", 43 | overflow: "unset", 44 | }, 45 | 46 | icon: { 47 | display: "none", 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | export default { 23 | defaultProps: { 24 | baseClassName: "material-icons-round", 25 | fontSize: "inherit", 26 | }, 27 | 28 | styleOverrides: { 29 | fontSizeInherit: { 30 | fontSize: "inherit !important", 31 | }, 32 | 33 | fontSizeSmall: { 34 | fontSize: `${pxToRem(20)} !important`, 35 | }, 36 | 37 | fontSizeLarge: { 38 | fontSize: `${pxToRem(36)} !important`, 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React Base Styles 20 | import colors from "assets/theme/base/colors"; 21 | 22 | const { transparent } = colors; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | "&:hover": { 28 | backgroundColor: transparent.main, 29 | }, 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/assets/theme/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | import colors from "assets/theme/base/colors"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { borderRadius } = borders; 27 | const { light } = colors; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | height: pxToRem(3), 33 | borderRadius: borderRadius.md, 34 | overflow: "visible", 35 | position: "relative", 36 | }, 37 | 38 | colorPrimary: { 39 | backgroundColor: light.main, 40 | }, 41 | 42 | colorSecondary: { 43 | backgroundColor: light.main, 44 | }, 45 | 46 | bar: { 47 | height: pxToRem(6), 48 | borderRadius: borderRadius.sm, 49 | position: "absolute", 50 | transform: `translate(0, ${pxToRem(-1.5)}) !important`, 51 | transition: "width 0.6s ease !important", 52 | }, 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | defaultProps: { 21 | underline: "none", 22 | color: "inherit", 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | styleOverrides: { 21 | padding: { 22 | paddingTop: 0, 23 | paddingBottom: 0, 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | defaultProps: { 21 | disableGutters: true, 22 | }, 23 | 24 | styleOverrides: { 25 | root: { 26 | paddingTop: 0, 27 | paddingBottom: 0, 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | marginTop: 0, 23 | marginBottom: 0, 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import boxShadows from "assets/theme/base/boxShadows"; 21 | import typography from "assets/theme/base/typography"; 22 | import colors from "assets/theme/base/colors"; 23 | import borders from "assets/theme/base/borders"; 24 | import linearGradient from "assets/theme/functions/linearGradient"; 25 | 26 | // Vision UI Dashboard React helper functions 27 | import pxToRem from "assets/theme/functions/pxToRem"; 28 | 29 | const { borderWidth } = borders; 30 | const { lg } = boxShadows; 31 | const { size } = typography; 32 | const { white, borderCol, gradients, transparent } = colors; 33 | const { borderRadius } = borders; 34 | 35 | export default { 36 | defaultProps: { 37 | disableAutoFocusItem: true, 38 | }, 39 | 40 | styleOverrides: { 41 | "& .MuiIcon-root": { 42 | stroke: white.main, 43 | }, 44 | paper: { 45 | minWidth: pxToRem(160), 46 | boxShadow: lg, 47 | padding: `0 !important`, 48 | fontSize: size.sm, 49 | color: white.main, 50 | textAlign: "left", 51 | border: `${borderWidth[1]} solid ${borderCol.navbar}`, 52 | borderRadius: borderRadius.md, 53 | }, 54 | list: { 55 | background: linearGradient(gradients.menu.main, gradients.menu.state, gradients.menu.deg), 56 | "& .MuiMenuItem-root": { 57 | "& .MuiBox-root .MuiTypography-root": { 58 | color: white.main, 59 | }, 60 | "&:hover": { 61 | background: transparent.main, 62 | }, 63 | }, 64 | }, 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | import typography from "assets/theme/base/typography"; 23 | 24 | // Vision UI Dashboard React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { light, text, dark } = colors; 28 | const { borderRadius } = borders; 29 | const { size } = typography; 30 | 31 | export default { 32 | styleOverrides: { 33 | root: { 34 | minWidth: pxToRem(160), 35 | minHeight: "unset", 36 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 37 | borderRadius: borderRadius.md, 38 | fontSize: size.sm, 39 | color: text.main, 40 | transition: "background-color 300ms ease, color 300ms ease", 41 | 42 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 43 | backgroundColor: light.main, 44 | color: dark.main, 45 | }, 46 | }, 47 | }, 48 | }; 49 | -------------------------------------------------------------------------------- /src/assets/theme/components/popover.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | // Vision UI Dashboard React base styles 23 | import colors from "assets/theme/base/colors"; 24 | import boxShadows from "assets/theme/base/boxShadows"; 25 | import borders from "assets/theme/base/borders"; 26 | 27 | const { transparent } = colors; 28 | const { lg } = boxShadows; 29 | const { borderRadius } = borders; 30 | 31 | export default { 32 | styleOverrides: { 33 | paper: { 34 | backgroundColor: transparent.main, 35 | boxShadow: lg, 36 | padding: pxToRem(8), 37 | borderRadius: borderRadius.lg, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /src/assets/theme/components/sidenav.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import rgba from "assets/theme/functions/rgba"; 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { white } = colors; 28 | const { borderRadius } = borders; 29 | 30 | export default { 31 | styleOverrides: { 32 | root: { 33 | width: pxToRem(250), 34 | whiteSpace: "nowrap", 35 | border: "none", 36 | }, 37 | 38 | paper: { 39 | width: pxToRem(250), 40 | backgroundColor: rgba(white.main, 0.8), 41 | backdropFilter: `saturate(200%) blur(${pxToRem(30)})`, 42 | height: `calc(100vh - ${pxToRem(32)})`, 43 | margin: pxToRem(16), 44 | borderRadius: borderRadius.xl, 45 | border: "none", 46 | }, 47 | 48 | paperAnchorDockedLeft: { 49 | borderRight: "none", 50 | }, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /src/assets/theme/components/slider.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | import boxShadows from "assets/theme/base/boxShadows"; 23 | 24 | // Vision UI Dashboard React helper functions 25 | import linearGradient from "assets/theme/functions/linearGradient"; 26 | import pxToRem from "assets/theme/functions/pxToRem"; 27 | 28 | const { light, white, sliderColors, black, gradients } = colors; 29 | const { borderRadius, borderWidth } = borders; 30 | const { sliderBoxShadow } = boxShadows; 31 | 32 | export default { 33 | styleOverrides: { 34 | root: { 35 | width: "100%", 36 | 37 | "& .MuiSlider-active, & .Mui-focusVisible": { 38 | boxShadow: "none !important", 39 | }, 40 | 41 | "& .MuiSlider-valueLabel": { 42 | color: black.main, 43 | }, 44 | }, 45 | 46 | rail: { 47 | height: pxToRem(3), 48 | backgroundColor: light.main, 49 | borderRadius: borderRadius.sm, 50 | }, 51 | 52 | track: { 53 | backgroundImage: linearGradient(gradients.info.main, gradients.info.state), 54 | height: pxToRem(6), 55 | position: "relative", 56 | top: pxToRem(2), 57 | border: "none", 58 | borderRadius: borderRadius.lg, 59 | zIndex: 1, 60 | }, 61 | 62 | thumb: { 63 | width: pxToRem(15), 64 | height: pxToRem(15), 65 | backgroundColor: white.main, 66 | zIndex: 10, 67 | boxShadow: sliderBoxShadow.thumb, 68 | border: `${borderWidth[1]} solid ${sliderColors.thumb.borderColor}`, 69 | 70 | "&:hover": { 71 | boxShadow: "none", 72 | }, 73 | }, 74 | }, 75 | }; 76 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { transparent } = colors; 26 | 27 | export default { 28 | styleOverrides: { 29 | root: { 30 | margin: `${pxToRem(48)} 0`, 31 | padding: `0 ${pxToRem(12)}`, 32 | 33 | "&.MuiPaper-root": { 34 | backgroundColor: transparent.main, 35 | }, 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | export default { 23 | styleOverrides: { 24 | root: { 25 | padding: `0 ${pxToRem(6)}`, 26 | }, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | import colors from "assets/theme/base/colors"; 22 | 23 | const { dark } = colors; 24 | const { borderWidth, borderColor } = borders; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | color: borderColor, 30 | transition: "all 200ms linear", 31 | 32 | "&.Mui-active": { 33 | color: dark.main, 34 | }, 35 | 36 | "&.Mui-completed": { 37 | color: dark.main, 38 | }, 39 | }, 40 | 41 | alternativeLabel: { 42 | top: "14%", 43 | left: "-50%", 44 | right: "50%", 45 | }, 46 | 47 | line: { 48 | borderWidth: `${borderWidth[2]} !important`, 49 | borderColor: "currentColor", 50 | }, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | import boxShadow from "assets/theme/functions/boxShadow"; 26 | 27 | const { dark, white } = colors; 28 | const { borderWidth, borderColor } = borders; 29 | 30 | export default { 31 | styleOverrides: { 32 | root: { 33 | background: white.main, 34 | fill: white.main, 35 | stroke: white.main, 36 | strokeWidth: pxToRem(10), 37 | width: pxToRem(13), 38 | height: pxToRem(13), 39 | border: `${borderWidth[2]} solid ${borderColor}`, 40 | borderRadius: "50%", 41 | zIndex: 99, 42 | transition: "all 200ms linear", 43 | 44 | "&.Mui-active": { 45 | background: dark.main, 46 | fill: dark.main, 47 | stroke: dark.main, 48 | borderColor: dark.main, 49 | boxShadow: boxShadow([0, 0], [0, 2], dark.main, 1), 50 | }, 51 | 52 | "&.Mui-completed": { 53 | background: dark.main, 54 | fill: dark.main, 55 | stroke: dark.main, 56 | borderColor: dark.main, 57 | boxShadow: boxShadow([0, 0], [0, 2], dark.main, 1), 58 | }, 59 | }, 60 | }, 61 | }; 62 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import typography from "assets/theme/base/typography"; 21 | import colors from "assets/theme/base/colors"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { size, fontWeightRegular } = typography; 27 | const { grey, dark, text } = colors; 28 | 29 | export default { 30 | styleOverrides: { 31 | label: { 32 | marginTop: `${pxToRem(8)} !important`, 33 | fontWeight: fontWeightRegular, 34 | fontSize: size.md, 35 | color: grey[300], 36 | 37 | "&.Mui-active": { 38 | fontWeight: `${fontWeightRegular} !important`, 39 | color: `${dark.main} !important`, 40 | }, 41 | 42 | "&.Mui-completed": { 43 | fontWeight: `${fontWeightRegular} !important`, 44 | color: `${text.main} !important`, 45 | }, 46 | }, 47 | }, 48 | }; 49 | -------------------------------------------------------------------------------- /src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | export default { 23 | defaultProps: { 24 | fontSize: "inherit", 25 | }, 26 | 27 | styleOverrides: { 28 | fontSizeInherit: { 29 | fontSize: "inherit !important", 30 | }, 31 | 32 | fontSizeSmall: { 33 | fontSize: `${pxToRem(20)} !important`, 34 | }, 35 | 36 | fontSizeLarge: { 37 | fontSize: `${pxToRem(36)} !important`, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | import colors from "assets/theme/base/colors"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { borderWidth } = borders; 27 | const { light } = colors; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | backgroundColor: `${light.main} !important`, 33 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 34 | "& .MuiBox-root": { 35 | pl: "0px !important", 36 | }, 37 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import boxShadows from "assets/theme/base/boxShadows"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | const { transparent } = colors; 25 | const { xxl } = boxShadows; 26 | const { borderRadius } = borders; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | backgroundColor: transparent.main, 32 | boxShadow: xxl, 33 | borderRadius: borderRadius.xl, 34 | "& thead": { 35 | "& tr": { 36 | "& th": { 37 | "&:first-of-type": { 38 | paddingLeft: "0px !important", 39 | }, 40 | }, 41 | }, 42 | }, 43 | "& .MuiTableBody-root": { 44 | "& tr": { 45 | "& td": { 46 | "&:first-of-type": { 47 | paddingLeft: "0px !important", 48 | "& .MuiBox-root": { 49 | paddingLeft: "0px !important", 50 | }, 51 | }, 52 | }, 53 | }, 54 | }, 55 | }, 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import borders from "assets/theme/base/borders"; 21 | 22 | // Vision UI Dashboard React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { borderRadius } = borders; 26 | 27 | export default { 28 | styleOverrides: { 29 | root: { 30 | display: "block", 31 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 0`, 32 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import borders from "assets/theme/base/borders"; 22 | 23 | // Vision UI Dashboard React helper functions 24 | import pxToRem from "assets/theme/functions/pxToRem"; 25 | 26 | const { grey, info } = colors; 27 | const { borderRadius } = borders; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | position: "relative", 33 | backgroundColor: grey[100], 34 | borderRadius: borderRadius.md, 35 | minHeight: "unset", 36 | padding: pxToRem(4), 37 | }, 38 | 39 | flexContainer: { 40 | height: "100%", 41 | position: "relative", 42 | zIndex: 10, 43 | }, 44 | 45 | fixed: { 46 | overflow: "unset !important", 47 | overflowX: "unset !important", 48 | }, 49 | 50 | vertical: { 51 | "& .MuiTabs-indicator": { 52 | width: "100%", 53 | }, 54 | }, 55 | 56 | indicator: { 57 | height: "100%", 58 | borderRadius: borderRadius.lg, 59 | backgroundColor: info.main, 60 | transition: "all 500ms ease", 61 | }, 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React base styles 20 | import typography from "assets/theme/base/typography"; 21 | import borders from "assets/theme/base/borders"; 22 | import colors from "assets/theme/base/colors"; 23 | 24 | // Vision UI Dashboard React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { size, fontWeightRegular } = typography; 28 | const { borderRadius } = borders; 29 | const { white } = colors; 30 | 31 | export default { 32 | styleOverrides: { 33 | root: { 34 | display: "flex", 35 | alignItems: "center", 36 | flexDirection: "row", 37 | textAlign: "center", 38 | maxWidth: "unset !important", 39 | minWidth: "150px", 40 | minHeight: "35px", 41 | fontSize: size.xs, 42 | fontWeight: fontWeightRegular, 43 | textTransform: "none", 44 | lineHeight: "inherit", 45 | padding: `${pxToRem(10)} !important`, 46 | borderRadius: borderRadius.md, 47 | color: `${white.main} !important`, 48 | opacity: "1 !important", 49 | 50 | "& .material-icons, .material-icons-round": { 51 | marginBottom: "0 !important", 52 | marginRight: pxToRem(4), 53 | }, 54 | 55 | "& svg": { 56 | marginBottom: "0 !important", 57 | color: `#fff !important`, 58 | marginRight: pxToRem(6), 59 | }, 60 | }, 61 | 62 | labelIcon: { 63 | paddingTop: pxToRem(4), 64 | }, 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Fade from "@mui/material/Fade"; 21 | 22 | // Vision UI Dashboard React base styles 23 | import colors from "assets/theme/base/colors"; 24 | import typography from "assets/theme/base/typography"; 25 | import borders from "assets/theme/base/borders"; 26 | 27 | // Vision UI Dashboard React helper functions 28 | import pxToRem from "assets/theme/functions/pxToRem"; 29 | 30 | const { black, light } = colors; 31 | const { size, fontWeightRegular } = typography; 32 | const { borderRadius } = borders; 33 | 34 | export default { 35 | defaultProps: { 36 | arrow: true, 37 | TransitionComponent: Fade, 38 | }, 39 | 40 | styleOverrides: { 41 | tooltip: { 42 | maxWidth: pxToRem(200), 43 | backgroundColor: black.main, 44 | color: light.main, 45 | fontSize: size.sm, 46 | fontWeight: fontWeightRegular, 47 | textAlign: "center", 48 | borderRadius: borderRadius.md, 49 | opacity: 0.7, 50 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 51 | }, 52 | 53 | arrow: { 54 | color: black.main, 55 | }, 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The boxShadow() function helps you to create a box shadow for an element 21 | */ 22 | 23 | // Vision UI Dashboard React helper functions 24 | import rgba from "assets/theme/functions/rgba"; 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 28 | const [x, y] = offset; 29 | const [blur, spread] = radius; 30 | 31 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 32 | color, 33 | opacity 34 | )}`; 35 | } 36 | 37 | export default boxShadow; 38 | -------------------------------------------------------------------------------- /src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The gradientChartLine() function helps you to create a gradient color for the chart line 21 | */ 22 | 23 | // Vision UI Dashboard React helper functions 24 | import rgba from "assets/theme/functions/rgba"; 25 | 26 | function gradientChartLine(chart, color, opacity = 0.2) { 27 | const ctx = chart.getContext("2d"); 28 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 29 | const primaryColor = rgba(color, opacity).toString(); 30 | 31 | gradientStroke.addColorStop(1, primaryColor); 32 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 33 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 34 | 35 | return gradientStroke; 36 | } 37 | 38 | export default gradientChartLine; 39 | -------------------------------------------------------------------------------- /src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The hexToRgb() function helps you to change the hex color code to rgb 21 | using chroma-js library. 22 | */ 23 | 24 | // chroma-js is a library for all kinds of color conversions and color scales. 25 | import chroma from "chroma-js"; 26 | 27 | function hexToRgb(color) { 28 | return chroma(color).rgb().join(", "); 29 | } 30 | 31 | export default hexToRgb; 32 | -------------------------------------------------------------------------------- /src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The linearGradient() function helps you to create a linear gradient color background 21 | */ 22 | 23 | function linearGradient(color, colorState, angle) { 24 | if (angle === undefined) { 25 | angle = 310; 26 | } 27 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 28 | } 29 | 30 | export default linearGradient; 31 | -------------------------------------------------------------------------------- /src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The pxToRem() function helps you to convert a px unit into a rem unit, 21 | */ 22 | 23 | function pxToRem(number, baseNumber = 16) { 24 | return `${number / baseNumber}rem`; 25 | } 26 | 27 | export default pxToRem; 28 | -------------------------------------------------------------------------------- /src/assets/theme/functions/radialGradient.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The radialGradient() function helps you to create a radial gradient color background 21 | */ 22 | 23 | function radialGradient(color, colorState, angle) { 24 | if (angle === undefined) { 25 | angle = "69.43% 69.43% at 50% 50%"; 26 | } 27 | return `radial-gradient(${angle}, ${color}, ${colorState})`; 28 | } 29 | 30 | export default radialGradient; 31 | -------------------------------------------------------------------------------- /src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 21 | to convert the hex code into rgb for using it inside the rgba color format. 22 | */ 23 | 24 | // Vision UI Dashboard React helper functions 25 | import hexToRgb from "assets/theme/functions/hexToRgb"; 26 | 27 | function rgba(color, opacity) { 28 | return `rgba(${hexToRgb(color)}, ${opacity})`; 29 | } 30 | 31 | export default rgba; 32 | -------------------------------------------------------------------------------- /src/assets/theme/functions/tripleLinearGradient.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /** 20 | The linearGradient() function helps you to create a linear gradient color background 21 | */ 22 | 23 | function tripleLinearGradient(color, colorState, colorStateSecondary, angle) { 24 | if (angle === undefined) { 25 | angle = 310; 26 | } 27 | return `linear-gradient(${angle}deg, ${color}, ${colorState}, ${colorStateSecondary})`; 28 | } 29 | 30 | export default tripleLinearGradient; 31 | -------------------------------------------------------------------------------- /src/components/VuiAlert/VuiAlertCloseIcon.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import { styled } from "@mui/material/styles"; 21 | 22 | export default styled("span")(({ theme }) => { 23 | const { palette, typography, functions, transitions } = theme; 24 | 25 | const { white } = palette; 26 | const { size, fontWeightMedium } = typography; 27 | const { pxToRem } = functions; 28 | 29 | return { 30 | color: white.main, 31 | fontSize: size.xl, 32 | padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, 33 | marginLeft: pxToRem(40), 34 | fontWeight: fontWeightMedium, 35 | opacity: 0.5, 36 | cursor: "pointer", 37 | lineHeight: 0, 38 | transition: transitions.create("opacity", { 39 | easing: transitions.easing.easeInOut, 40 | duration: transitions.duration.shorter, 41 | }), 42 | 43 | "&:hover": { 44 | opacity: 1, 45 | }, 46 | }; 47 | }); 48 | -------------------------------------------------------------------------------- /src/components/VuiAlert/VuiAlertRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Box from "@mui/material/Box"; 21 | import { styled } from "@mui/material/styles"; 22 | 23 | export default styled(Box)(({ theme, ownerState }) => { 24 | const { palette, typography, borders, functions } = theme; 25 | const { color } = ownerState; 26 | 27 | const { white, alertColors } = palette; 28 | const { fontSizeRegular, fontWeightMedium } = typography; 29 | const { borderWidth, borderRadius } = borders; 30 | const { pxToRem, linearGradient } = functions; 31 | 32 | // backgroundImage value 33 | const backgroundImageValue = alertColors[color] 34 | ? linearGradient(alertColors[color].main, alertColors[color].state) 35 | : linearGradient(alertColors.info.main, alertColors.info.state); 36 | 37 | // border value 38 | const borderValue = alertColors[color] 39 | ? `${borderWidth[1]} solid ${alertColors[color].border}` 40 | : `${borderWidth[1]} solid ${alertColors.info.border}`; 41 | 42 | return { 43 | display: "flex", 44 | justifyContent: "space-between", 45 | alignItems: "center", 46 | minHeight: pxToRem(60), 47 | backgroundImage: backgroundImageValue, 48 | color: white.main, 49 | position: "relative", 50 | padding: pxToRem(16), 51 | marginBottom: pxToRem(16), 52 | border: borderValue, 53 | borderRadius: borderRadius.md, 54 | fontSize: fontSizeRegular, 55 | fontWeight: fontWeightMedium, 56 | }; 57 | }); 58 | -------------------------------------------------------------------------------- /src/components/VuiAvatar/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Custom styles for VuiAvatar 25 | import VuiAvatarRoot from "components/VuiAvatar/VuiAvatarRoot"; 26 | 27 | const VuiAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( 28 | 29 | )); 30 | 31 | // Setting default values for the props of VuiAvatar 32 | VuiAvatar.defaultProps = { 33 | bgColor: "transparent", 34 | size: "md", 35 | shadow: "none", 36 | }; 37 | 38 | // Typechecking props for the VuiAvatar 39 | VuiAvatar.propTypes = { 40 | bgColor: PropTypes.oneOf([ 41 | "transparent", 42 | "primary", 43 | "secondary", 44 | "info", 45 | "success", 46 | "warning", 47 | "error", 48 | "light", 49 | "dark", 50 | ]), 51 | size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), 52 | shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), 53 | }; 54 | 55 | export default VuiAvatar; 56 | -------------------------------------------------------------------------------- /src/components/VuiBadge/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Custom styles for the VuiBadge 25 | import VuiBadgeRoot from "components/VuiBadge/VuiBadgeRoot"; 26 | 27 | const VuiBadge = forwardRef( 28 | ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( 29 | 35 | {children} 36 | 37 | ) 38 | ); 39 | 40 | // Setting default values for the props of VuiBadge 41 | VuiBadge.defaultProps = { 42 | color: "info", 43 | variant: "gradient", 44 | size: "sm", 45 | circular: false, 46 | indicator: false, 47 | border: false, 48 | children: false, 49 | container: false, 50 | }; 51 | 52 | // Typechecking props of the VuiBadge 53 | VuiBadge.propTypes = { 54 | color: PropTypes.oneOf([ 55 | "primary", 56 | "secondary", 57 | "info", 58 | "success", 59 | "warning", 60 | "error", 61 | "light", 62 | "dark", 63 | ]), 64 | variant: PropTypes.oneOf(["gradient", "contained", "standard"]), 65 | size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), 66 | circular: PropTypes.bool, 67 | indicator: PropTypes.bool, 68 | border: PropTypes.bool, 69 | children: PropTypes.node, 70 | container: PropTypes.bool, 71 | }; 72 | 73 | export default VuiBadge; 74 | -------------------------------------------------------------------------------- /src/components/VuiBox/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Custom styles for VuiBox 25 | import VuiBoxRoot from "components/VuiBox/VuiBoxRoot"; 26 | 27 | const VuiBox = forwardRef( 28 | ({ variant, bgColor, color, opacity, borderRadius, shadow, ...rest }, ref) => ( 29 | 34 | ) 35 | ); 36 | 37 | // Setting default values for the props of VuiBox 38 | VuiBox.defaultProps = { 39 | variant: "contained", 40 | bgColor: "transparent", 41 | color: "dark", 42 | opacity: 1, 43 | borderRadius: "none", 44 | shadow: "none", 45 | }; 46 | 47 | // Typechecking props for the VuiBox 48 | VuiBox.propTypes = { 49 | variant: PropTypes.oneOf(["contained", "gradient"]), 50 | bgColor: PropTypes.string, 51 | color: PropTypes.string, 52 | opacity: PropTypes.number, 53 | borderRadius: PropTypes.string, 54 | shadow: PropTypes.string, 55 | }; 56 | 57 | export default VuiBox; 58 | -------------------------------------------------------------------------------- /src/components/VuiButton/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Custom styles for VuiButton 25 | import VuiButtonRoot from "components/VuiButton/VuiButtonRoot"; 26 | 27 | const VuiButton = forwardRef( 28 | ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => ( 29 | 37 | {children} 38 | 39 | ) 40 | ); 41 | 42 | // Setting default values for the props of VuiButton 43 | VuiButton.defaultProps = { 44 | size: "medium", 45 | variant: "contained", 46 | color: "white", 47 | circular: false, 48 | iconOnly: false, 49 | }; 50 | 51 | // Typechecking props for the VuiButton 52 | VuiButton.propTypes = { 53 | size: PropTypes.oneOf(["small", "medium", "large"]), 54 | variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), 55 | color: PropTypes.oneOf([ 56 | "white", 57 | "primary", 58 | "secondary", 59 | "info", 60 | "success", 61 | "warning", 62 | "error", 63 | "light", 64 | "dark", 65 | "text", 66 | ]), 67 | circular: PropTypes.bool, 68 | iconOnly: PropTypes.bool, 69 | children: PropTypes.node.isRequired, 70 | }; 71 | 72 | export default VuiButton; 73 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputIconBoxRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { styled } from "@mui/material/styles"; 20 | 21 | export default styled("div")(({ theme, ownerState }) => { 22 | const { palette, functions } = theme; 23 | const { size } = ownerState; 24 | 25 | const { dark } = palette; 26 | const { pxToRem } = functions; 27 | 28 | return { 29 | lineHeight: 0, 30 | padding: size === "small" ? `${pxToRem(4)} ${pxToRem(10)}` : `${pxToRem(8)} ${pxToRem(10)}`, 31 | width: pxToRem(39), 32 | height: "100%", 33 | color: dark.main, 34 | }; 35 | }); 36 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputIconRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import Icon from "@mui/material/Icon"; 20 | import { styled } from "@mui/material/styles"; 21 | 22 | export default styled(Icon)(({ theme, ownerState }) => { 23 | const { typography } = theme; 24 | const { size } = ownerState; 25 | 26 | const { fontWeightBold, size: fontSize } = typography; 27 | 28 | return { 29 | fontWeight: fontWeightBold, 30 | fontSize: size === "small" && `${fontSize.md} !important`, 31 | }; 32 | }); 33 | -------------------------------------------------------------------------------- /src/components/VuiInput/VuiInputWithIconRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { styled } from "@mui/material/styles"; 20 | 21 | export default styled("div")(({ theme, ownerState }) => { 22 | const { palette, functions, borders } = theme; 23 | const { error, success, disabled } = ownerState; 24 | 25 | const { inputColors, grey, white } = palette; 26 | const { pxToRem } = functions; 27 | const { borderRadius, borderWidth } = borders; 28 | 29 | // border color value 30 | let borderColorValue = inputColors.borderColor.main; 31 | 32 | if (error) { 33 | borderColorValue = inputColors.error; 34 | } else if (success) { 35 | borderColorValue = inputColors.success; 36 | } 37 | 38 | return { 39 | display: "flex", 40 | alignItems: "center", 41 | backgroundColor: disabled ? grey[600] : inputColors.backgroundColor, 42 | border: `${borderWidth[1]} solid`, 43 | borderRadius: borderRadius.lg, 44 | borderColor: borderColorValue, 45 | "& .MuiIcon-root": { 46 | color: grey[500], 47 | }, 48 | 49 | "& .MuiInputBase-input": { 50 | color: white.main, 51 | height: "100%", 52 | paddingX: pxToRem(20), 53 | backgroundColor: disabled ? grey[600] : inputColors.backgroundColor, 54 | }, 55 | "& .MuiInputBase-root": { 56 | border: `unset`, 57 | borderRadius: borderRadius.lg, 58 | borderTopLeftRadius: "0px", 59 | borderBottomLeftRadius: "0px", 60 | backgroundColor: `${disabled ? grey[600] : inputColors.backgroundColor} !important`, 61 | "& ::placeholder": { 62 | color: `${white.main} !important`, 63 | }, 64 | }, 65 | }; 66 | }); 67 | -------------------------------------------------------------------------------- /src/components/VuiPagination/VuiPaginationItemRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import { styled } from "@mui/material/styles"; 21 | 22 | // Vision UI Dashboard React components 23 | import VuiButton from "components/VuiButton"; 24 | 25 | export default styled(VuiButton)(({ theme, ownerState }) => { 26 | const { borders, functions, typography, palette } = theme; 27 | const { variant, paginationSize, active } = ownerState; 28 | 29 | const { borderColor } = borders; 30 | const { pxToRem } = functions; 31 | const { fontWeightRegular, size: fontSize } = typography; 32 | const { light } = palette; 33 | 34 | // width, height, minWidth and minHeight values 35 | let sizeValue = pxToRem(36); 36 | 37 | if (paginationSize === "small") { 38 | sizeValue = pxToRem(30); 39 | } else if (paginationSize === "large") { 40 | sizeValue = pxToRem(46); 41 | } 42 | 43 | return { 44 | borderColor, 45 | margin: `0 ${pxToRem(2)}`, 46 | pointerEvents: active ? "none" : "auto", 47 | fontWeight: fontWeightRegular, 48 | fontSize: fontSize.sm, 49 | width: sizeValue, 50 | minWidth: sizeValue, 51 | height: sizeValue, 52 | minHeight: sizeValue, 53 | 54 | "&:hover, &:focus, &:active": { 55 | transform: "none", 56 | boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", 57 | opacity: "1 !important", 58 | }, 59 | 60 | "&:hover": { 61 | backgroundColor: light.main, 62 | borderColor, 63 | }, 64 | }; 65 | }); 66 | -------------------------------------------------------------------------------- /src/components/VuiProgress/VuiProgressRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import { styled } from "@mui/material/styles"; 21 | import LinearProgress from "@mui/material/LinearProgress"; 22 | 23 | export default styled(LinearProgress)(({ theme, ownerState }) => { 24 | const { palette, functions } = theme; 25 | const { color, value, variant } = ownerState; 26 | 27 | const { text, gradients } = palette; 28 | const { linearGradient } = functions; 29 | 30 | // background value 31 | let backgroundValue; 32 | 33 | if (variant === "gradient") { 34 | backgroundValue = gradients[color] 35 | ? linearGradient(gradients[color].main, gradients[color].state) 36 | : linearGradient(gradients.info.main, gradients.info.state); 37 | } else { 38 | backgroundValue = palette[color] ? palette[color].main : palette.info.main; 39 | } 40 | 41 | return { 42 | "& .MuiLinearProgress-bar": { 43 | background: backgroundValue, 44 | width: `${value}%`, 45 | color: text.main, 46 | }, 47 | }; 48 | }); 49 | -------------------------------------------------------------------------------- /src/components/VuiProgress/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Vision UI Dashboard React components 25 | import VuiTypography from "components/VuiTypography"; 26 | 27 | // Custom styles for VuiProgress 28 | import VuiProgressRoot from "components/VuiProgress/VuiProgressRoot"; 29 | 30 | const VuiProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( 31 | <> 32 | {label && ( 33 | 34 | {value}% 35 | 36 | )} 37 | 44 | 45 | )); 46 | 47 | // Setting default values for the props of VuiProgress 48 | VuiProgress.defaultProps = { 49 | variant: "contained", 50 | color: "info", 51 | value: 0, 52 | label: false, 53 | }; 54 | 55 | // Typechecking props for the VuiProgress 56 | VuiProgress.propTypes = { 57 | variant: PropTypes.oneOf(["contained", "gradient"]), 58 | color: PropTypes.oneOf([ 59 | "primary", 60 | "secondary", 61 | "info", 62 | "success", 63 | "warning", 64 | "error", 65 | "light", 66 | "dark", 67 | ]), 68 | value: PropTypes.number, 69 | label: PropTypes.bool, 70 | }; 71 | 72 | export default VuiProgress; 73 | -------------------------------------------------------------------------------- /src/components/VuiSwitch/VuiSwitchRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Switch from "@mui/material/Switch"; 21 | import { styled } from "@mui/material/styles"; 22 | 23 | export default styled(Switch)(({ theme, ownerState }) => { 24 | const { palette } = theme; 25 | const { color } = ownerState; 26 | const { white, secondary } = palette; 27 | 28 | // styles for the button with variant="contained" 29 | const containedStyles = () => { 30 | // background color value 31 | const backgroundValue = palette[color] ? palette[color].main : white.main; 32 | 33 | // color value when button is focused 34 | 35 | return { 36 | "&.MuiSwitch-root": { 37 | "& .MuiSwitch-thumb": { 38 | backgroundColor: white.main, 39 | }, 40 | "& .MuiSwitch-track": { 41 | backgroundColor: `${secondary.main} !important`, 42 | borderColor: "transparent", 43 | }, 44 | "& .Mui-checked+.MuiSwitch-track": { 45 | backgroundColor: `${backgroundValue} !important`, 46 | }, 47 | }, 48 | }; 49 | }; 50 | 51 | return { 52 | ...containedStyles(), 53 | }; 54 | }); 55 | -------------------------------------------------------------------------------- /src/components/VuiSwitch/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { forwardRef } from "react"; 20 | 21 | // prop-types is a library for typechecking of props 22 | import PropTypes from "prop-types"; 23 | 24 | // Custom styles for VuiSwitch 25 | import VuiSwitchRoot from "components/VuiSwitch/VuiSwitchRoot"; 26 | 27 | const VuiSwitch = forwardRef(({ color, size, ...rest }, ref) => ( 28 | 29 | )); 30 | 31 | // Setting default values for the props of VuiSwitch 32 | VuiSwitch.defaultProps = { 33 | size: "medium", 34 | color: "white", 35 | }; 36 | 37 | // Typechecking props for the VuiSwitch 38 | VuiSwitch.propTypes = { 39 | size: PropTypes.oneOf(["small", "medium", "large"]), 40 | color: PropTypes.oneOf([ 41 | "white", 42 | "primary", 43 | "secondary", 44 | "info", 45 | "success", 46 | "warning", 47 | "error", 48 | "light", 49 | "dark", 50 | ]), 51 | }; 52 | 53 | export default VuiSwitch; 54 | -------------------------------------------------------------------------------- /src/components/VuiTypography/VuiTypographyRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Typography from "@mui/material/Typography"; 21 | import { styled } from "@mui/material/styles"; 22 | 23 | export default styled(Typography)(({ theme, ownerState }) => { 24 | const { palette, typography, functions } = theme; 25 | const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient } = ownerState; 26 | 27 | const { gradients, transparent } = palette; 28 | const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; 29 | const { linearGradient } = functions; 30 | 31 | // fontWeight styles 32 | const fontWeights = { 33 | light: fontWeightLight, 34 | regular: fontWeightRegular, 35 | medium: fontWeightMedium, 36 | bold: fontWeightBold, 37 | }; 38 | 39 | // styles for the typography with textGradient={true} 40 | const gradientStyles = () => ({ 41 | backgroundImage: 42 | color !== "inherit" && color !== "text" && color !== "white" && gradients[color] 43 | ? linearGradient(gradients[color].main, gradients[color].state, gradients[color].deg) 44 | : linearGradient(gradients.primary.main, gradients.primary.state), 45 | display: "inline-block", 46 | WebkitBackgroundClip: "text", 47 | WebkitTextFillColor: transparent.main, 48 | position: "relative", 49 | zIndex: 1, 50 | }); 51 | 52 | return { 53 | opacity, 54 | textTransform, 55 | verticalAlign, 56 | textDecoration: "none", 57 | color: color === "inherit" || !palette[color] ? "inherit" : palette[color].main, 58 | fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], 59 | ...(textGradient && gradientStyles()), 60 | }; 61 | }); 62 | -------------------------------------------------------------------------------- /src/examples/Charts/BarCharts/BarChart.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import React, { Component } from "react"; 20 | import Chart from "react-apexcharts"; 21 | 22 | class BarChart extends Component { 23 | constructor(props) { 24 | super(props); 25 | this.state = { 26 | chartData: [], 27 | chartOptions: {}, 28 | }; 29 | } 30 | 31 | componentDidMount() { 32 | const { barChartData, barChartOptions } = this.props; 33 | 34 | this.setState({ 35 | chartData: barChartData, 36 | chartOptions: barChartOptions, 37 | }); 38 | } 39 | 40 | render() { 41 | return ( 42 | 49 | ); 50 | } 51 | } 52 | 53 | export default BarChart; 54 | -------------------------------------------------------------------------------- /src/examples/Charts/LineCharts/LineChart.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import React from "react"; 20 | import ReactApexChart from "react-apexcharts"; 21 | 22 | class LineChart extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | 26 | this.state = { 27 | chartData: [], 28 | chartOptions: {}, 29 | }; 30 | } 31 | 32 | componentDidMount() { 33 | const { lineChartData, lineChartOptions } = this.props; 34 | 35 | this.setState({ 36 | chartData: lineChartData, 37 | chartOptions: lineChartOptions, 38 | }); 39 | } 40 | 41 | render() { 42 | return ( 43 | 50 | ); 51 | } 52 | } 53 | 54 | export default LineChart; 55 | -------------------------------------------------------------------------------- /src/examples/Configurator/ConfiguratorRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Drawer from "@mui/material/Drawer"; 21 | import { styled } from "@mui/material/styles"; 22 | 23 | export default styled(Drawer)(({ theme, ownerState }) => { 24 | const { boxShadows, functions, transitions, palette } = theme; 25 | const { openConfigurator } = ownerState; 26 | 27 | const { gradients } = palette; 28 | const configuratorWidth = 360; 29 | const { lg } = boxShadows; 30 | const { pxToRem, linearGradient } = functions; 31 | 32 | // drawer styles when openConfigurator={true} 33 | const drawerOpenStyles = () => ({ 34 | width: configuratorWidth, 35 | left: "initial", 36 | right: 0, 37 | transition: transitions.create("right", { 38 | easing: transitions.easing.sharp, 39 | duration: transitions.duration.short, 40 | }), 41 | }); 42 | 43 | // drawer styles when openConfigurator={false} 44 | const drawerCloseStyles = () => ({ 45 | left: "initial", 46 | right: pxToRem(-350), 47 | transition: transitions.create("all", { 48 | easing: transitions.easing.sharp, 49 | duration: transitions.duration.short, 50 | }), 51 | }); 52 | 53 | return { 54 | "& .MuiDrawer-paper": { 55 | backdropFilter: `blur(${pxToRem(42)})`, 56 | background: linearGradient( 57 | gradients.sidenav.main, 58 | gradients.sidenav.state, 59 | gradients.sidenav.deg 60 | ), 61 | 62 | height: "100vh", 63 | margin: 0, 64 | padding: `0 ${pxToRem(10)}`, 65 | borderRadius: 0, 66 | boxShadow: lg, 67 | overflowY: "auto", 68 | ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), 69 | }, 70 | }; 71 | }); 72 | -------------------------------------------------------------------------------- /src/examples/GradientBorder/GradientBorderRoot.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Box from "@mui/material/Box"; 21 | import { styled } from "@mui/material/styles"; 22 | 23 | export default styled(Box)(() => { 24 | return { 25 | width: "fit-content", 26 | height: "fit-content", 27 | backgroundImage: 28 | "radial-gradient(69.43% 69.43% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) ", 29 | }; 30 | }); 31 | -------------------------------------------------------------------------------- /src/examples/GradientBorder/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // Vision UI Dashboard React components 20 | import VuiBox from "components/VuiBox"; 21 | 22 | // Vision UI Dashboard React context 23 | 24 | function GradientBorder(props) { 25 | const { backgroundImage, children, borderRadius, width, minWidth, ...rest } = props; 26 | return ( 27 | 41 | {children} 42 | 43 | ); 44 | } 45 | 46 | export default GradientBorder; 47 | -------------------------------------------------------------------------------- /src/examples/Icons/Cart.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | // Vision UI Dashboard React base styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | function Cart({ color, size }) { 26 | return ( 27 | 28 | 32 | 33 | ); 34 | } 35 | 36 | // Setting default values for the props of Cart 37 | Cart.defaultProps = { 38 | color: "dark", 39 | size: "16px", 40 | }; 41 | 42 | // Typechecking props for the Cart 43 | Cart.propTypes = { 44 | color: PropTypes.oneOf([ 45 | "primary", 46 | "secondary", 47 | "info", 48 | "success", 49 | "warning", 50 | "error", 51 | "dark", 52 | "light", 53 | "white", 54 | ]), 55 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 56 | }; 57 | 58 | export default Cart; 59 | -------------------------------------------------------------------------------- /src/examples/Icons/Credit.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | // Vision UI Dashboard React base styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | function Credit({ color, size }) { 26 | return ( 27 | 28 | 32 | 33 | ); 34 | } 35 | 36 | // Setting default values for the props of Credit 37 | Credit.defaultProps = { 38 | color: "dark", 39 | size: "16px", 40 | }; 41 | 42 | // Typechecking props for the Credit 43 | Credit.propTypes = { 44 | color: PropTypes.oneOf([ 45 | "primary", 46 | "secondary", 47 | "info", 48 | "success", 49 | "warning", 50 | "error", 51 | "dark", 52 | "light", 53 | "white", 54 | ]), 55 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 56 | }; 57 | 58 | export default Credit; 59 | -------------------------------------------------------------------------------- /src/examples/Icons/Document.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | // Vision UI Dashboard React base styles 23 | import colors from "assets/theme/base/colors"; 24 | function Document({ color, size }) { 25 | return ( 26 | 33 | 37 | 41 | 42 | ); 43 | } 44 | 45 | // Setting default values for the props of Document 46 | Document.defaultProps = { 47 | color: "dark", 48 | size: "16px", 49 | }; 50 | 51 | // Typechecking props for the Document 52 | Document.propTypes = { 53 | color: PropTypes.oneOf([ 54 | "primary", 55 | "secondary", 56 | "info", 57 | "success", 58 | "warning", 59 | "error", 60 | "dark", 61 | "light", 62 | "white", 63 | ]), 64 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 65 | }; 66 | 67 | export default Document; 68 | -------------------------------------------------------------------------------- /src/examples/Icons/DocumentV.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/examples/Icons/Mastercard.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | function Mastercard({ width, height }) { 23 | return ( 24 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | // Setting default values for the props of Mastercard 38 | Mastercard.defaultProps = { 39 | color: "dark", 40 | size: "16px", 41 | }; 42 | 43 | // Typechecking props for the Mastercard 44 | Mastercard.propTypes = { 45 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 46 | }; 47 | 48 | export default Mastercard; 49 | -------------------------------------------------------------------------------- /src/examples/Items/NotificationItem/styles.js: -------------------------------------------------------------------------------- 1 | function menuItem(theme) { 2 | const { palette, borders, transitions } = theme; 3 | 4 | const { text, light } = palette; 5 | const { borderRadius } = borders; 6 | 7 | return { 8 | display: "flex", 9 | alignItems: "center", 10 | width: "100%", 11 | color: text.main, 12 | py: 1, 13 | px: 2, 14 | borderRadius: borderRadius.md, 15 | transition: transitions.create("background-color", { 16 | easing: transitions.easing.easeInOut, 17 | duration: transitions.duration.standard, 18 | }), 19 | 20 | "&:not(:last-child)": { 21 | mb: 1.25, 22 | }, 23 | 24 | "&:hover": { 25 | backgroundColor: light.main, 26 | }, 27 | }; 28 | } 29 | 30 | function menuImage(theme, ownerState) { 31 | const { functions, palette, borders } = theme; 32 | const { color } = ownerState; 33 | 34 | const { linearGradient } = functions; 35 | const { gradients } = palette; 36 | const { borderRadius } = borders; 37 | 38 | return { 39 | display: "grid", 40 | placeItems: "center", 41 | backgroundImage: gradients[color] 42 | ? linearGradient(gradients[color].main, gradients[color].state) 43 | : linearGradient(gradients.dark.main, gradients.dark.state), 44 | 45 | "& img": { 46 | width: "100%", 47 | borderRadius: borderRadius.lg, 48 | }, 49 | }; 50 | } 51 | 52 | export { menuItem, menuImage }; 53 | -------------------------------------------------------------------------------- /src/examples/LayoutContainers/DashboardLayout/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { useEffect } from "react"; 20 | 21 | // react-router-dom components 22 | import { useLocation } from "react-router-dom"; 23 | 24 | // prop-types is a library for typechecking of props. 25 | import PropTypes from "prop-types"; 26 | 27 | // Vision UI Dashboard React components 28 | import VuiBox from "components/VuiBox"; 29 | 30 | // Vision UI Dashboard React context 31 | import { useVisionUIController, setLayout } from "context"; 32 | 33 | function DashboardLayout({ children }) { 34 | const [controller, dispatch] = useVisionUIController(); 35 | const { miniSidenav } = controller; 36 | const { pathname } = useLocation(); 37 | 38 | useEffect(() => { 39 | setLayout(dispatch, "dashboard"); 40 | }, [pathname]); 41 | 42 | return ( 43 | ({ 45 | p: 3, 46 | position: "relative", 47 | 48 | [breakpoints.up("xl")]: { 49 | marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), 50 | transition: transitions.create(["margin-left", "margin-right"], { 51 | easing: transitions.easing.easeInOut, 52 | duration: transitions.duration.standard, 53 | }), 54 | }, 55 | })} 56 | > 57 | {children} 58 | 59 | ); 60 | } 61 | 62 | // Typechecking props for the DashboardLayout 63 | DashboardLayout.propTypes = { 64 | children: PropTypes.node.isRequired, 65 | }; 66 | 67 | export default DashboardLayout; 68 | -------------------------------------------------------------------------------- /src/examples/LayoutContainers/PageLayout/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | import { useEffect } from "react"; 20 | 21 | // react-router-dom components 22 | import { useLocation } from "react-router-dom"; 23 | 24 | // prop-types is a library for typechecking of props. 25 | import PropTypes from "prop-types"; 26 | 27 | // Vision UI Dashboard React components 28 | import VuiBox from "components/VuiBox"; 29 | 30 | // Vision UI Dashboard React context 31 | import { useVisionUIController, setLayout } from "context"; 32 | 33 | function PageLayout({ children }) { 34 | const [, dispatch] = useVisionUIController(); 35 | const { pathname } = useLocation(); 36 | 37 | useEffect(() => { 38 | setLayout(dispatch, "page"); 39 | }, [pathname]); 40 | 41 | return ( 42 | ({ 48 | overflowX: "hidden", 49 | backgroundImage: tripleLinearGradient( 50 | gradients.cover.main, 51 | gradients.cover.state, 52 | gradients.cover.stateSecondary, 53 | gradients.cover.deg 54 | ), 55 | position: "relative", 56 | })} 57 | > 58 | {children} 59 | 60 | ); 61 | } 62 | 63 | // Setting default values for the props for PageLayout 64 | PageLayout.defaultProps = { 65 | background: "default", 66 | }; 67 | 68 | // Typechecking props for the PageLayout 69 | PageLayout.propTypes = { 70 | children: PropTypes.node.isRequired, 71 | }; 72 | 73 | export default PageLayout; 74 | -------------------------------------------------------------------------------- /src/examples/Navbars/DefaultNavbar/DefaultNavbarLink.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // react-router-dom components 20 | import { Link } from "react-router-dom"; 21 | 22 | // prop-types is a library for typechecking of props 23 | import PropTypes from "prop-types"; 24 | 25 | // @mui material components 26 | import Icon from "@mui/material/Icon"; 27 | 28 | // Vision UI Dashboard React components 29 | import VuiBox from "components/VuiBox"; 30 | import VuiTypography from "components/VuiTypography"; 31 | 32 | function DefaultNavbarLink({ icon, name, route }) { 33 | return ( 34 | <> 35 | 44 | white.main, 47 | verticalAlign: "middle", 48 | }} 49 | > 50 | {icon} 51 | 52 | 59 |  {name} 60 | 61 | 62 | 63 | ); 64 | } 65 | 66 | // Typechecking props for the DefaultNavbarLink 67 | DefaultNavbarLink.propTypes = { 68 | icon: PropTypes.string.isRequired, 69 | name: PropTypes.string.isRequired, 70 | route: PropTypes.string.isRequired, 71 | }; 72 | 73 | export default DefaultNavbarLink; 74 | -------------------------------------------------------------------------------- /src/examples/Sidenav/styles/sidenav.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export default function sidenavLogoLabel(theme, ownerState) { 20 | const { functions, transitions, typography, breakpoints } = theme; 21 | const { transparentSidenav } = ownerState; 22 | 23 | const { pxToRem } = functions; 24 | const { fontWeightMedium } = typography; 25 | 26 | return { 27 | ml: 0.5, 28 | fontWeight: fontWeightMedium, 29 | wordSpacing: pxToRem(-1), 30 | transition: transitions.create("opacity", { 31 | easing: transitions.easing.easeInOut, 32 | duration: transitions.duration.standard, 33 | }), 34 | 35 | [breakpoints.up("xl")]: { 36 | opacity: transparentSidenav ? 0 : 1, 37 | }, 38 | }; 39 | } 40 | -------------------------------------------------------------------------------- /src/examples/Sidenav/styles/sidenavCard.js: -------------------------------------------------------------------------------- 1 | // Images 2 | import backgroundImage from "assets/images/sidenav/sidenav-card-background.png"; 3 | 4 | function card(theme, ownerState) { 5 | const { borders, functions, transitions, breakpoints } = theme; 6 | const { miniSidenav } = ownerState; 7 | 8 | const { borderRadius } = borders; 9 | const { pxToRem } = functions; 10 | 11 | return { 12 | minWidth: "auto", 13 | backgroundImage: `url(${backgroundImage})`, 14 | backgroundPosition: "50%", 15 | backgroundSize: "cover", 16 | borderRadius: borderRadius.xl, 17 | boxShadow: "none", 18 | 19 | [breakpoints.up("xl")]: { 20 | maxHeight: miniSidenav ? pxToRem(64) : pxToRem(192), 21 | transition: transitions.create("max-height", { 22 | easing: transitions.easing.easeInOut, 23 | duration: transitions.duration.standard, 24 | }), 25 | }, 26 | padding: "0px", 27 | }; 28 | } 29 | 30 | function cardContent(theme) { 31 | const { palette, borders } = theme; 32 | 33 | const { white, dark } = palette; 34 | const { borderRadius } = borders; 35 | 36 | return { 37 | color: white, 38 | position: "relative", 39 | zIndex: 2, 40 | width: "100%", 41 | height: "100%", 42 | p: 2, 43 | 44 | "&::after": { 45 | content: '""', 46 | display: "block", 47 | height: "100%", 48 | width: "100%", 49 | borderRadius: borderRadius.xl, 50 | position: "absolute", 51 | top: 0, 52 | left: 0, 53 | opacity: 0.65, 54 | zIndex: -1, 55 | }, 56 | 57 | "& .MuiButton-root": { 58 | color: dark.main, 59 | }, 60 | 61 | "&:last-child": { 62 | pb: 2, 63 | }, 64 | }; 65 | } 66 | 67 | const cardIconBox = { 68 | display: "grid", 69 | placeItems: "center", 70 | transition: ({ transitions }) => 71 | transitions.create("margin", { 72 | easing: transitions.easing.easeInOut, 73 | duration: transitions.duration.standard, 74 | }), 75 | }; 76 | 77 | function cardIcon(theme, ownerState) { 78 | const { palette } = theme; 79 | const { color } = ownerState; 80 | 81 | return { 82 | WebkitTextFillColor: palette[color].main, 83 | }; 84 | } 85 | 86 | export { card, cardContent, cardIconBox, cardIcon }; 87 | -------------------------------------------------------------------------------- /src/examples/Timeline/TimelineItem/styles.js: -------------------------------------------------------------------------------- 1 | function timelineItem(theme, ownerState) { 2 | const { borders } = theme; 3 | const { lastItem } = ownerState; 4 | 5 | const { borderWidth, borderColor } = borders; 6 | 7 | return { 8 | "&:after": { 9 | content: "''", 10 | position: "absolute", 11 | top: "10%", 12 | left: "14px", 13 | height: lastItem ? "90%" : "100%", 14 | borderRight: `${borderWidth[2]} solid ${borderColor}`, 15 | }, 16 | }; 17 | } 18 | 19 | function timelineItemIcon(theme, ownerState) { 20 | const { palette, typography, functions } = theme; 21 | const { color } = ownerState; 22 | 23 | const { gradients, transparent } = palette; 24 | const { size, fontWeightMedium } = typography; 25 | const { linearGradient } = functions; 26 | 27 | return { 28 | position: "absolute", 29 | top: "50%", 30 | left: "50%", 31 | transform: "translate(-52%, -50%)", 32 | fontSize: size.xl, 33 | fontWeight: fontWeightMedium, 34 | zIndex: 1, 35 | backgroundImage: linearGradient(gradients[color].main, gradients[color].state), 36 | WebkitBackgroundClip: "text", 37 | WebkitTextFillColor: transparent.main, 38 | }; 39 | } 40 | 41 | export { timelineItem, timelineItemIcon }; 42 | -------------------------------------------------------------------------------- /src/examples/Timeline/TimelineList/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | // @mui material components 23 | import Card from "@mui/material/Card"; 24 | 25 | // Vision UI Dashboard React components 26 | import VuiBox from "components/VuiBox"; 27 | import VuiTypography from "components/VuiTypography"; 28 | 29 | // Timeline context 30 | import { TimelineProvider } from "examples/Timeline/context"; 31 | 32 | function TimelineList({ title, dark, children }) { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | {title} 40 | 41 | 42 | {children} 43 | 44 | 45 | 46 | ); 47 | } 48 | 49 | // Setting default values for the props of TimelineList 50 | TimelineList.defaultProps = { 51 | dark: false, 52 | }; 53 | 54 | // Typechecking props for the TimelineList 55 | TimelineList.propTypes = { 56 | title: PropTypes.string.isRequired, 57 | dark: PropTypes.bool, 58 | children: PropTypes.node.isRequired, 59 | }; 60 | 61 | export default TimelineList; 62 | -------------------------------------------------------------------------------- /src/examples/Timeline/context/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | /* eslint-disable react/prop-types */ 20 | /** 21 | This file is used for controlling the dark and light state of the TimelineList and TimelineItem. 22 | */ 23 | 24 | import { createContext, useContext } from "react"; 25 | 26 | // The Timeline main context 27 | const Timeline = createContext(); 28 | 29 | // Timeline context provider 30 | function TimelineProvider({ children, value }) { 31 | return {children}; 32 | } 33 | 34 | // Timeline custom hook for using context 35 | function useTimeline() { 36 | return useContext(Timeline); 37 | } 38 | 39 | export { TimelineProvider, useTimeline }; 40 | /* eslint-enable react/prop-types */ 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the software. 16 | 17 | */ 18 | 19 | import React from "react"; 20 | import { createRoot} from "react-dom/client"; 21 | import { BrowserRouter } from "react-router-dom"; 22 | import App from "App"; 23 | 24 | // Vision UI Dashboard React Context Provider 25 | import { VisionUIControllerProvider } from "context"; 26 | 27 | const rootElement = document.getElementById('root'); 28 | const root = createRoot(rootElement); 29 | 30 | 31 | root.render( 32 | 33 | 34 | 35 | ) 36 | 37 | -------------------------------------------------------------------------------- /src/layouts/authentication/components/Separator/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Divider from "@mui/material/Divider"; 21 | 22 | // Vision UI Dashboard React components 23 | import VuiBox from "components/VuiBox"; 24 | import VuiTypography from "components/VuiTypography"; 25 | 26 | function Separator() { 27 | return ( 28 | 29 | 30 | 39 | 40 | or 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Separator; 48 | -------------------------------------------------------------------------------- /src/layouts/billing/components/BillingInformation/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Card from "@mui/material/Card"; 21 | 22 | // Vision UI Dashboard React components 23 | import VuiBox from "components/VuiBox"; 24 | import VuiTypography from "components/VuiTypography"; 25 | 26 | // Billing page components 27 | import Bill from "layouts/billing/components/Bill"; 28 | 29 | function BillingInformation() { 30 | return ( 31 | 32 | 33 | 34 | Billing Information 35 | 36 | 37 | 38 | 39 | 45 | 51 | 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | export default BillingInformation; 65 | -------------------------------------------------------------------------------- /src/layouts/billing/components/Invoice/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // prop-types is a library for typechecking of props 20 | import PropTypes from "prop-types"; 21 | 22 | // Vision UI Dashboard React components 23 | import VuiBox from "components/VuiBox"; 24 | import VuiTypography from "components/VuiTypography"; 25 | import { IoDocumentText } from "react-icons/io5"; 26 | 27 | function Invoice({ date, id, price }) { 28 | return ( 29 | 36 | 37 | 38 | {date} 39 | 40 | 41 | {id} 42 | 43 | 44 | 45 | 46 | {price} 47 | 48 | 49 | 50 | 51 |  PDF 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | 59 | // Setting default values for the props of Invoice 60 | Invoice.defaultProps = { 61 | noGutter: false, 62 | }; 63 | 64 | // Typechecking props for the Invoice 65 | Invoice.propTypes = { 66 | date: PropTypes.string.isRequired, 67 | id: PropTypes.string.isRequired, 68 | price: PropTypes.string.isRequired, 69 | noGutter: PropTypes.bool, 70 | }; 71 | 72 | export default Invoice; 73 | -------------------------------------------------------------------------------- /src/layouts/billing/components/Invoices/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // @mui material components 20 | import Card from "@mui/material/Card"; 21 | 22 | // Vision UI Dashboard React components 23 | import VuiBox from "components/VuiBox"; 24 | import VuiTypography from "components/VuiTypography"; 25 | import VuiButton from "components/VuiButton"; 26 | 27 | // Billing page components 28 | import Invoice from "layouts/billing/components/Invoice"; 29 | 30 | function Invoices() { 31 | return ( 32 | 33 | 34 | 35 | Invoices 36 | 37 | 38 | VIEW ALL 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | } 53 | 54 | export default Invoices; 55 | -------------------------------------------------------------------------------- /src/layouts/dashboard/components/WelcomeMark/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Card, Icon } from "@mui/material"; 4 | import VuiBox from "components/VuiBox"; 5 | import VuiTypography from "components/VuiTypography"; 6 | 7 | import gif from "assets/images/cardimgfree.png"; 8 | 9 | const WelcomeMark = () => { 10 | return ( 11 | ({ 12 | height: "340px", 13 | py: "32px", 14 | backgroundImage: `url(${gif})`, 15 | backgroundSize: "cover", 16 | backgroundPosition: "50%" 17 | })}> 18 | 19 | 20 | 21 | Welcome back, 22 | 23 | 24 | Mark Johnson 25 | 26 | 27 | Glad to see you again! 28 |
Ask me anything. 29 | 30 | 31 | 54 | Tap to record 55 | arrow_forward 56 | 57 | 58 | 59 | ); 60 | }; 61 | 62 | export default WelcomeMark; 63 | -------------------------------------------------------------------------------- /src/layouts/dashboard/data/barChartData.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const barChartDataDashboard = [ 20 | { 21 | name: "Sales", 22 | data: [330, 250, 110, 300, 490, 350, 270, 130, 425], 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/layouts/dashboard/data/barChartOptions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const barChartOptionsDashboard = { 20 | chart: { 21 | toolbar: { 22 | show: false, 23 | }, 24 | }, 25 | tooltip: { 26 | style: { 27 | fontSize: "10px", 28 | fontFamily: "Plus Jakarta Display", 29 | }, 30 | onDatasetHover: { 31 | style: { 32 | fontSize: "10px", 33 | fontFamily: "Plus Jakarta Display", 34 | }, 35 | }, 36 | theme: "dark", 37 | }, 38 | xaxis: { 39 | categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 40 | show: false, 41 | labels: { 42 | show: false, 43 | style: { 44 | colors: "#fff", 45 | fontSize: "10px", 46 | }, 47 | }, 48 | axisBorder: { 49 | show: false, 50 | }, 51 | axisTicks: { 52 | show: false, 53 | }, 54 | }, 55 | yaxis: { 56 | show: true, 57 | color: "#fff", 58 | labels: { 59 | show: true, 60 | style: { 61 | colors: "#fff", 62 | fontSize: "10px", 63 | fontFamily: "Plus Jakarta Display", 64 | }, 65 | }, 66 | }, 67 | grid: { 68 | show: false, 69 | }, 70 | fill: { 71 | colors: "#fff", 72 | }, 73 | dataLabels: { 74 | enabled: false, 75 | }, 76 | plotOptions: { 77 | bar: { 78 | borderRadius: 8, 79 | columnWidth: "12px", 80 | }, 81 | }, 82 | responsive: [ 83 | { 84 | breakpoint: 768, 85 | options: { 86 | plotOptions: { 87 | bar: { 88 | borderRadius: 0, 89 | }, 90 | }, 91 | }, 92 | }, 93 | ], 94 | }; 95 | -------------------------------------------------------------------------------- /src/layouts/dashboard/data/lineChartData.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartDataDashboard = [ 20 | { 21 | name: "Mobile apps", 22 | data: [500, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400], 23 | }, 24 | { 25 | name: "Websites", 26 | data: [200, 230, 300, 350, 370, 420, 550, 350, 400, 500, 330, 550], 27 | }, 28 | ]; 29 | -------------------------------------------------------------------------------- /src/layouts/dashboard/data/lineChartOptions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartOptionsDashboard = { 20 | chart: { 21 | toolbar: { 22 | show: false, 23 | }, 24 | }, 25 | tooltip: { 26 | theme: "dark", 27 | }, 28 | dataLabels: { 29 | enabled: false, 30 | }, 31 | stroke: { 32 | curve: "smooth", 33 | }, 34 | xaxis: { 35 | type: "datetime", 36 | categories: [ 37 | "Jan", 38 | "Feb", 39 | "Mar", 40 | "Apr", 41 | "May", 42 | "Jun", 43 | "Jul", 44 | "Aug", 45 | "Sep", 46 | "Oct", 47 | "Nov", 48 | "Dec", 49 | ], 50 | labels: { 51 | style: { 52 | colors: "#c8cfca", 53 | fontSize: "10px", 54 | }, 55 | }, 56 | axisBorder: { 57 | show: false, 58 | }, 59 | axisTicks: { 60 | show: false, 61 | }, 62 | }, 63 | yaxis: { 64 | labels: { 65 | style: { 66 | colors: "#c8cfca", 67 | fontSize: "10px", 68 | }, 69 | }, 70 | }, 71 | legend: { 72 | show: false, 73 | }, 74 | grid: { 75 | strokeDashArray: 5, 76 | borderColor: "#56577A", 77 | }, 78 | fill: { 79 | type: "gradient", 80 | gradient: { 81 | shade: "dark", 82 | type: "vertical", 83 | shadeIntensity: 0, 84 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series 85 | inverseColors: true, 86 | opacityFrom: 0.8, 87 | opacityTo: 0, 88 | stops: [], 89 | }, 90 | colors: ["#0075FF", "#2CD9FF"], 91 | }, 92 | colors: ["#0075FF", "#2CD9FF"], 93 | }; 94 | -------------------------------------------------------------------------------- /src/layouts/profile/data/lineChartData1.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartDataProfile1 = [ 20 | { 21 | name: "Mobile apps", 22 | data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400], 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/layouts/profile/data/lineChartData2.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartDataProfile2 = [ 20 | { 21 | name: "Mobile apps", 22 | data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400], 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/layouts/profile/data/lineChartOptions1.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartOptionsProfile1 = { 20 | chart: { 21 | height: "50px", 22 | toolbar: { 23 | show: false, 24 | }, 25 | redrawOnParentResize: true, 26 | }, 27 | tooltip: { 28 | theme: "dark", 29 | }, 30 | dataLabels: { 31 | enabled: false, 32 | }, 33 | stroke: { 34 | curve: "smooth", 35 | }, 36 | xaxis: { 37 | type: "datetime", 38 | categories: [ 39 | "Jan", 40 | "Feb", 41 | "Mar", 42 | "Apr", 43 | "May", 44 | "Jun", 45 | "Jul", 46 | "Aug", 47 | "Sep", 48 | "Oct", 49 | "Nov", 50 | "Dec", 51 | ], 52 | labels: { 53 | show: false, 54 | style: { 55 | colors: "#c8cfca", 56 | fontSize: "12px", 57 | }, 58 | }, 59 | axisBorder: { 60 | show: false, 61 | }, 62 | axisTicks: { 63 | show: false, 64 | }, 65 | }, 66 | yaxis: { 67 | show: false, 68 | labels: { 69 | style: { 70 | colors: "#c8cfca", 71 | fontSize: "12px", 72 | }, 73 | }, 74 | }, 75 | legend: { 76 | show: false, 77 | }, 78 | grid: { 79 | show: false, 80 | strokeDashArray: 5, 81 | borderColor: "#56577A", 82 | }, 83 | fill: { 84 | type: "gradient", 85 | gradient: { 86 | shade: "dark", 87 | type: "vertical", 88 | shadeIntensity: 0, 89 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series 90 | inverseColors: true, 91 | opacityFrom: 0.8, 92 | opacityTo: 0, 93 | stops: [], 94 | }, 95 | colors: ["#01B574"], 96 | }, 97 | colors: ["#01B574"], 98 | }; 99 | -------------------------------------------------------------------------------- /src/layouts/profile/data/lineChartOptions2.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartOptionsProfile2 = { 20 | chart: { 21 | height: "50px", 22 | toolbar: { 23 | show: false, 24 | }, 25 | redrawOnParentResize: true, 26 | }, 27 | tooltip: { 28 | theme: "dark", 29 | }, 30 | dataLabels: { 31 | enabled: false, 32 | }, 33 | stroke: { 34 | curve: "smooth", 35 | }, 36 | xaxis: { 37 | type: "datetime", 38 | categories: [ 39 | "Jan", 40 | "Feb", 41 | "Mar", 42 | "Apr", 43 | "May", 44 | "Jun", 45 | "Jul", 46 | "Aug", 47 | "Sep", 48 | "Oct", 49 | "Nov", 50 | "Dec", 51 | ], 52 | labels: { 53 | show: false, 54 | style: { 55 | colors: "#c8cfca", 56 | fontSize: "12px", 57 | }, 58 | }, 59 | axisBorder: { 60 | show: false, 61 | }, 62 | axisTicks: { 63 | show: false, 64 | }, 65 | }, 66 | yaxis: { 67 | show: false, 68 | labels: { 69 | style: { 70 | colors: "#c8cfca", 71 | fontSize: "12px", 72 | }, 73 | }, 74 | }, 75 | legend: { 76 | show: false, 77 | }, 78 | grid: { 79 | show: false, 80 | strokeDashArray: 5, 81 | borderColor: "#56577A", 82 | }, 83 | fill: { 84 | type: "gradient", 85 | gradient: { 86 | shade: "dark", 87 | type: "vertical", 88 | shadeIntensity: 0, 89 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series 90 | inverseColors: true, 91 | opacityFrom: 0.8, 92 | opacityTo: 0, 93 | stops: [], 94 | }, 95 | colors: ["#582CFF"], 96 | }, 97 | colors: ["#582CFF"], 98 | }; 99 | -------------------------------------------------------------------------------- /src/layouts/rtl/components/WelcomeMark/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Card, Icon } from "@mui/material"; 4 | import VuiBox from "components/VuiBox"; 5 | import VuiTypography from "components/VuiTypography"; 6 | 7 | const WelcomeMark = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | مرحبا بعودتك، 14 | 15 | 16 | Mark Johnson 17 | 18 | 19 | سعيد لرؤيتك مرة أخرى! 20 |
اسألني اي شئ. 21 | 22 | 23 | 46 | اضغط للتسجيل 47 | arrow_backward 48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | export default WelcomeMark; 55 | -------------------------------------------------------------------------------- /src/layouts/rtl/data/barChartData.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const barChartDataDashboard = [ 20 | { 21 | name: "مبيعات", 22 | data: [330, 250, 110, 300, 490, 350, 270, 130, 425], 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/layouts/rtl/data/barChartOptions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const barChartOptionsDashboard = { 20 | chart: { 21 | toolbar: { 22 | show: false, 23 | }, 24 | }, 25 | tooltip: { 26 | style: { 27 | fontSize: "10px", 28 | fontFamily: "Plus Jakarta Display", 29 | }, 30 | onDatasetHover: { 31 | style: { 32 | fontSize: "10px", 33 | fontFamily: "Plus Jakarta Display", 34 | }, 35 | }, 36 | theme: "dark", 37 | }, 38 | xaxis: { 39 | categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 40 | show: false, 41 | labels: { 42 | show: false, 43 | style: { 44 | colors: "#fff", 45 | fontSize: "10px", 46 | }, 47 | }, 48 | axisBorder: { 49 | show: false, 50 | }, 51 | axisTicks: { 52 | show: false, 53 | }, 54 | }, 55 | yaxis: { 56 | show: true, 57 | color: "#fff", 58 | labels: { 59 | show: true, 60 | style: { 61 | colors: "#fff", 62 | fontSize: "10px", 63 | fontFamily: "Plus Jakarta Display", 64 | }, 65 | }, 66 | }, 67 | grid: { 68 | show: false, 69 | }, 70 | fill: { 71 | colors: "#fff", 72 | }, 73 | dataLabels: { 74 | enabled: false, 75 | }, 76 | plotOptions: { 77 | bar: { 78 | borderRadius: 8, 79 | columnWidth: "12px", 80 | }, 81 | }, 82 | responsive: [ 83 | { 84 | breakpoint: 768, 85 | options: { 86 | plotOptions: { 87 | bar: { 88 | borderRadius: 0, 89 | }, 90 | }, 91 | }, 92 | }, 93 | ], 94 | }; 95 | -------------------------------------------------------------------------------- /src/layouts/rtl/data/lineChartData.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartDataDashboard = [ 20 | { 21 | name: "تطبيقات الموبايل", 22 | data: [500, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400], 23 | }, 24 | { 25 | name: "مواقع الويب", 26 | data: [200, 230, 300, 350, 370, 420, 550, 350, 400, 500, 330, 550], 27 | }, 28 | ]; 29 | -------------------------------------------------------------------------------- /src/layouts/rtl/data/lineChartOptions.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Vision UI Free React - v1.0.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/vision-ui-free-react 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com/) 9 | * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-react/blob/master LICENSE.md) 10 | 11 | * Design and Coded by Simmmple & Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | export const lineChartOptionsDashboard = { 20 | chart: { 21 | toolbar: { 22 | show: false, 23 | }, 24 | }, 25 | tooltip: { 26 | theme: "dark", 27 | }, 28 | dataLabels: { 29 | enabled: false, 30 | }, 31 | stroke: { 32 | curve: "smooth", 33 | }, 34 | xaxis: { 35 | type: "datetime", 36 | categories: [ 37 | "Jan", 38 | "Feb", 39 | "Mar", 40 | "Apr", 41 | "May", 42 | "Jun", 43 | "Jul", 44 | "Aug", 45 | "Sep", 46 | "Oct", 47 | "Nov", 48 | "Dec", 49 | ], 50 | labels: { 51 | style: { 52 | colors: "#c8cfca", 53 | fontSize: "10px", 54 | }, 55 | }, 56 | axisBorder: { 57 | show: false, 58 | }, 59 | axisTicks: { 60 | show: false, 61 | }, 62 | }, 63 | yaxis: { 64 | labels: { 65 | style: { 66 | colors: "#c8cfca", 67 | fontSize: "10px", 68 | }, 69 | }, 70 | }, 71 | legend: { 72 | show: false, 73 | }, 74 | grid: { 75 | strokeDashArray: 5, 76 | borderColor: "#56577A", 77 | }, 78 | fill: { 79 | type: "gradient", 80 | gradient: { 81 | shade: "dark", 82 | type: "vertical", 83 | shadeIntensity: 0, 84 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series 85 | inverseColors: true, 86 | opacityFrom: 0.8, 87 | opacityTo: 0, 88 | stops: [], 89 | }, 90 | colors: ["#0075FF", "#2CD9FF"], 91 | }, 92 | colors: ["#0075FF", "#2CD9FF"], 93 | }; 94 | --------------------------------------------------------------------------------