From efe28bac9e68c1741896c324ce86937448b6bad4 Mon Sep 17 00:00:00 2001 From: simmmpleweb <90040741+simmmpleweb@users.noreply.github.com> Date: Tue, 26 Jul 2022 19:15:03 +0300 Subject: [PATCH] Removed deprecatedd --- CHANGELOG.md | 4 + package.json | 137 +++-- .../components/ReferralTracking/index.js | 322 ++++++----- .../components/SatisfactionRate/index.js | 173 +++--- .../components/CarInformations/index.js | 523 ++++++++---------- .../rtl/components/ReferralTracking/index.js | 292 +++++----- .../rtl/components/SatisfactionRate/index.js | 173 +++--- 7 files changed, 790 insertions(+), 834 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2d3a37..eef54c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# Changelog +## [1.0.1] 2022-07-26 + +- 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! ## [1.0.0] 2022-01-03 ### Original Release diff --git a/package.json b/package.json index c2426bf..e8a2e80 100644 --- a/package.json +++ b/package.json @@ -1,71 +1,70 @@ { - "name": "vision-ui-dashboard-react", - "version": "3.0.0", - "private": true, - "author": "Creative Tim", - "license": "See license in https://www.creative-tim.com/license", - "description": "Material UI version of Vision UI Dashboard by Creative Tim", - "homepage": "https://demos.creative-tim.com/vision-ui-dashboard-react/#/dashboard", - "bugs": { - "url": "https://github.com/creativetimofficial/vision-ui-dashboard-react/issues" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/creativetimofficial/vision-ui-dashboard-react.git" - }, - "dependencies": { - "@delowar/react-circle-progressbar": "^1.0.0", - "@emotion/cache": "11.4.0", - "@emotion/react": "11.4.1", - "@emotion/styled": "11.3.0", - "@mui/icons-material": "5.1.1", - "@mui/material": "5.1.1", - "@mui/styled-engine": "5.1.1", - "@mui/styles": "^5.2.0", - "@testing-library/jest-dom": "5.11.4", - "@testing-library/react": "11.1.0", - "@testing-library/user-event": "12.1.10", - "apexcharts": "^3.30.0", - "chroma-js": "2.1.2", - "eslint": "^7.11.0", - "prop-types": "15.7.2", - "react": "17.0.2", - "react-apexcharts": "^1.3.9", - "react-countup": "5.2.0", - "react-dom": "17.0.2", - "react-flatpickr": "3.10.7", - "react-github-btn": "1.2.1", - "react-icons": "^4.3.1", - "react-router-dom": "5.2.0", - "react-scripts": "4.0.3", - "stylis": "4.0.10", - "stylis-plugin-rtl": "2.1.0", - "uuid": "8.3.2", - "web-vitals": "1.0.1" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "name": "vision-ui-dashboard-react", + "version": "3.0.0", + "private": true, + "author": "Creative Tim", + "license": "See license in https://www.creative-tim.com/license", + "description": "Material UI version of Vision UI Dashboard by Creative Tim", + "homepage": "https://demos.creative-tim.com/vision-ui-dashboard-react/#/dashboard", + "bugs": { + "url": "https://github.com/creativetimofficial/vision-ui-dashboard-react/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/creativetimofficial/vision-ui-dashboard-react.git" + }, + "dependencies": { + "@emotion/cache": "11.4.0", + "@emotion/react": "^11.9.3", + "@emotion/styled": "^11.9.3", + "@mui/icons-material": "5.1.1", + "@mui/material": "^5.9.2", + "@mui/styled-engine": "5.1.1", + "@mui/styles": "^5.2.0", + "@testing-library/jest-dom": "5.11.4", + "@testing-library/react": "11.1.0", + "@testing-library/user-event": "12.1.10", + "apexcharts": "^3.30.0", + "chroma-js": "2.1.2", + "eslint": "^7.11.0", + "prop-types": "15.7.2", + "react": "17.0.2", + "react-apexcharts": "^1.3.9", + "react-countup": "5.2.0", + "react-dom": "17.0.2", + "react-flatpickr": "3.10.7", + "react-github-btn": "1.2.1", + "react-icons": "^4.3.1", + "react-router-dom": "5.2.0", + "react-scripts": "4.0.3", + "stylis": "4.0.10", + "stylis-plugin-rtl": "2.1.0", + "uuid": "8.3.2", + "web-vitals": "1.0.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } } diff --git a/src/layouts/dashboard/components/ReferralTracking/index.js b/src/layouts/dashboard/components/ReferralTracking/index.js index 155acf5..c477997 100644 --- a/src/layouts/dashboard/components/ReferralTracking/index.js +++ b/src/layouts/dashboard/components/ReferralTracking/index.js @@ -1,172 +1,162 @@ -import React from "react"; -import { Card, Stack } from "@mui/material"; -import VuiBox from "components/VuiBox"; -import VuiTypography from "components/VuiTypography"; -import colors from "assets/theme/base/colors"; -import { FaEllipsisH } from "react-icons/fa"; -import linearGradient from "assets/theme/functions/linearGradient"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; +import React from 'react'; +import { Card, Stack } from '@mui/material'; +import VuiBox from 'components/VuiBox'; +import VuiTypography from 'components/VuiTypography'; +import colors from 'assets/theme/base/colors'; +import { FaEllipsisH } from 'react-icons/fa'; +import linearGradient from 'assets/theme/functions/linearGradient'; +import CircularProgress from '@mui/material/CircularProgress'; function ReferralTracking() { - const { info, gradients } = colors; - const { cardContent } = gradients; + const { info, gradients } = colors; + const { cardContent } = gradients; - return ( - - - - - Referral Tracking - - - - - - ({ - [breakpoints.up("xs")]: { - flexDirection: "column", - gap: "16px", - justifyContent: "center", - alignItems: "center", - }, - [breakpoints.up("md")]: { - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "center", - }, - })} - > - ({ - mr: "auto", - [breakpoints.only("md")]: { - mr: "75px", - }, - [breakpoints.only("xl")]: { - width: "500px", - maxWidth: "40%", - }, - })} - > - ({ - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - borderRadius: "20px", - [breakpoints.up("xl")]: { - maxWidth: "110px !important", - }, - [breakpoints.up("xxl")]: { - minWidth: "180px", - maxWidth: "100% !important", - }, - })} - > - - Invited - - - 145 people - - - ({ - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - borderRadius: "20px", - [breakpoints.up("xl")]: { - maxWidth: "110px !important", - }, - [breakpoints.up("xxl")]: { - minWidth: "180px", - maxWidth: "100% !important", - }, - })} - > - - Bonus - - - 1,465 - - - - = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} - isGradient - gradient={{ - angle: 90, - startColor: "rgba(5, 205, 153, 0)", - stopColor: "#05CD99", - }} - emptyColor="transparent" - > - - - Safety - - ({ - [breakpoints.only("xl")]: { - fontSize: "32px", - }, - })} - > - 9.3 - - - Total Score - - - - - - - ); + return ( + + + + + Referral Tracking + + + + + + ({ + [breakpoints.up('xs')]: { + flexDirection: 'column', + gap: '16px', + justifyContent: 'center', + alignItems: 'center' + }, + [breakpoints.up('md')]: { + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center' + } + })}> + ({ + mr: 'auto', + [breakpoints.only('md')]: { + mr: '75px' + }, + [breakpoints.only('xl')]: { + width: '500px', + maxWidth: '40%' + } + })}> + ({ + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + borderRadius: '20px', + [breakpoints.up('xl')]: { + maxWidth: '110px !important' + }, + [breakpoints.up('xxl')]: { + minWidth: '180px', + maxWidth: '100% !important' + } + })}> + + Invited + + + 145 people + + + ({ + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + borderRadius: '20px', + [breakpoints.up('xl')]: { + maxWidth: '110px !important' + }, + [breakpoints.up('xxl')]: { + minWidth: '180px', + maxWidth: '100% !important' + } + })}> + + Bonus + + + 1,465 + + + + + = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} + color='success' + /> + + + + Safety + + ({ + [breakpoints.only('xl')]: { + fontSize: '32px' + } + })}> + 9.3 + + + Total Score + + + + + + + + ); } export default ReferralTracking; diff --git a/src/layouts/dashboard/components/SatisfactionRate/index.js b/src/layouts/dashboard/components/SatisfactionRate/index.js index 33aeb61..3f7469b 100644 --- a/src/layouts/dashboard/components/SatisfactionRate/index.js +++ b/src/layouts/dashboard/components/SatisfactionRate/index.js @@ -1,94 +1,93 @@ -import React from "react"; +import React from 'react'; -import { Card } from "@mui/material"; -import VuiBox from "components/VuiBox"; -import VuiTypography from "components/VuiTypography"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; -import { IoHappy } from "react-icons/io5"; -import colors from "assets/theme/base/colors"; -import linearGradient from "assets/theme/functions/linearGradient"; +import { Card } from '@mui/material'; +import VuiBox from 'components/VuiBox'; +import VuiTypography from 'components/VuiTypography'; +import { IoHappy } from 'react-icons/io5'; +import colors from 'assets/theme/base/colors'; +import linearGradient from 'assets/theme/functions/linearGradient'; +import CircularProgress from '@mui/material/CircularProgress'; const SatisfactionRate = () => { - const { info, gradients } = colors; - const { cardContent } = gradients; + const { info, gradients } = colors; + const { cardContent } = gradients; - return ( - - - - Satisfaction Rate - - - From all projects - - - - - - - - - ({ - width: "90%", - padding: "18px 22px", - display: "flex", - justifyContent: "space-between", - flexDirection: "row", - height: "82px", - mx: "auto", - borderRadius: "20px", - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - transform: "translateY(-90%)", - zIndex: "1000", - })} - > - - 0% - - - - 95% - - - Based on likes - - - - 100% - - - - - ); + return ( + + + + Satisfaction Rate + + + From all projects + + + + + + + + + + + + ({ + width: '90%', + padding: '18px 22px', + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + height: '82px', + mx: 'auto', + borderRadius: '20px', + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + transform: 'translateY(-90%)', + zIndex: '1000' + })}> + + 0% + + + + 95% + + + Based on likes + + + + 100% + + + + + ); }; export default SatisfactionRate; diff --git a/src/layouts/profile/components/CarInformations/index.js b/src/layouts/profile/components/CarInformations/index.js index 5c8e07c..13dc16a 100644 --- a/src/layouts/profile/components/CarInformations/index.js +++ b/src/layouts/profile/components/CarInformations/index.js @@ -16,284 +16,253 @@ */ -import React from "react"; -import { Card, Stack, Grid } from "@mui/material"; -import VuiBox from "components/VuiBox"; -import VuiTypography from "components/VuiTypography"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; -import GreenLightning from "assets/images/shapes/green-lightning.svg"; -import WhiteLightning from "assets/images/shapes/white-lightning.svg"; -import linearGradient from "assets/theme/functions/linearGradient"; -import colors from "assets/theme/base/colors"; -import carProfile from "assets/images/shapes/car-profile.svg"; -import LineChart from "examples/Charts/LineCharts/LineChart"; -import { lineChartDataProfile1, lineChartDataProfile2 } from "variables/charts"; -import { lineChartOptionsProfile2, lineChartOptionsProfile1 } from "variables/charts"; +import React from 'react'; +import { Card, Stack, Grid } from '@mui/material'; +import VuiBox from 'components/VuiBox'; +import VuiTypography from 'components/VuiTypography'; +import GreenLightning from 'assets/images/shapes/green-lightning.svg'; +import WhiteLightning from 'assets/images/shapes/white-lightning.svg'; +import linearGradient from 'assets/theme/functions/linearGradient'; +import colors from 'assets/theme/base/colors'; +import carProfile from 'assets/images/shapes/car-profile.svg'; +import LineChart from 'examples/Charts/LineCharts/LineChart'; +import { lineChartDataProfile1, lineChartDataProfile2 } from 'variables/charts'; +import { lineChartOptionsProfile2, lineChartOptionsProfile1 } from 'variables/charts'; +import CircularProgress from '@mui/material/CircularProgress'; const CarInformations = () => { - const { gradients, info } = colors; - const { cardContent } = gradients; - return ( - ({ - [breakpoints.up("xxl")]: { - maxHeight: "400px", - }, - })} - > - - - Car Informations - - - Hello, Mark Johnson! Your Car is ready. - - ({ - [breakpoints.up("sm")]: { - flexDirection: "column", - }, - [breakpoints.up("md")]: { - flexDirection: "row", - }, - [breakpoints.only("xl")]: { - flexDirection: "column", - }, - })} - > - ({ - [breakpoints.only("sm")]: { - alignItems: "center", - }, - })} - alignItems="center" - > - - - - - 68% - - - Current Load - - - - - - 0h 58 min - - - Time to full charge - - - - ({ - spacing: "24px", - [breakpoints.only("sm")]: { - columnGap: "0px", - rowGap: "24px", - }, - [breakpoints.up("md")]: { - gap: "24px", - ml: "50px !important", - }, - [breakpoints.only("xl")]: { - gap: "12px", - mx: "auto !important", - }, - })} - > - - - - - Battery Health - - ({ - [breakpoints.only("xl")]: { - fontSize: "20px", - }, - })} - > - 76% - - - - - - - - - - - - Efficiency - - ({ - [breakpoints.only("xl")]: { - fontSize: "20px", - }, - })} - > - +20% - - - - - - - - - - - - Consumption - - ({ - [breakpoints.only("xl")]: { - fontSize: "20px", - }, - })} - > - 163W/km - - - - - - - - - - - - This Week - - ({ - [breakpoints.only("xl")]: { - fontSize: "20px", - }, - })} - > - 1.342km - - - - - - - - - - - - ); + const { gradients, info } = colors; + const { cardContent } = gradients; + return ( + ({ + [breakpoints.up('xxl')]: { + maxHeight: '400px' + } + })}> + + + Car Informations + + + Hello, Mark Johnson! Your Car is ready. + + ({ + [breakpoints.up('sm')]: { + flexDirection: 'column' + }, + [breakpoints.up('md')]: { + flexDirection: 'row' + }, + [breakpoints.only('xl')]: { + flexDirection: 'column' + } + })}> + ({ + [breakpoints.only('sm')]: { + alignItems: 'center' + } + })} + alignItems='center'> + + + + + + 68% + + + Current Load + + + + + + 0h 58 min + + + Time to full charge + + + + ({ + spacing: '24px', + [breakpoints.only('sm')]: { + columnGap: '0px', + rowGap: '24px' + }, + [breakpoints.up('md')]: { + gap: '24px', + ml: '50px !important' + }, + [breakpoints.only('xl')]: { + gap: '12px', + mx: 'auto !important' + } + })}> + + + + + Battery Health + + ({ + [breakpoints.only('xl')]: { + fontSize: '20px' + } + })}> + 76% + + + + + + + + + + + + Efficiency + + ({ + [breakpoints.only('xl')]: { + fontSize: '20px' + } + })}> + +20% + + + + + + + + + + + + Consumption + + ({ + [breakpoints.only('xl')]: { + fontSize: '20px' + } + })}> + 163W/km + + + + + + + + + + + + This Week + + ({ + [breakpoints.only('xl')]: { + fontSize: '20px' + } + })}> + 1.342km + + + + + + + + + + + + ); }; export default CarInformations; diff --git a/src/layouts/rtl/components/ReferralTracking/index.js b/src/layouts/rtl/components/ReferralTracking/index.js index 7b4b48c..19cf2ec 100644 --- a/src/layouts/rtl/components/ReferralTracking/index.js +++ b/src/layouts/rtl/components/ReferralTracking/index.js @@ -1,154 +1,150 @@ -import React from "react"; -import { Card } from "@mui/material"; -import VuiBox from "components/VuiBox"; -import VuiTypography from "components/VuiTypography"; -import colors from "assets/theme/base/colors"; -import { FaEllipsisH } from "react-icons/fa"; -import linearGradient from "assets/theme/functions/linearGradient"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; +import React from 'react'; +import { Card } from '@mui/material'; +import VuiBox from 'components/VuiBox'; +import VuiTypography from 'components/VuiTypography'; +import colors from 'assets/theme/base/colors'; +import { FaEllipsisH } from 'react-icons/fa'; +import linearGradient from 'assets/theme/functions/linearGradient'; +import CircularProgress from '@mui/material/CircularProgress'; function ReferralTracking() { - const { info, gradients } = colors; - const { cardContent } = gradients; + const { info, gradients } = colors; + const { cardContent } = gradients; - return ( - - - - - تتبع الإحالة - - - - - - ({ - [breakpoints.up("xs")]: { - flexDirection: "column", - gap: "16px", - justifyContent: "center", - alignItems: "center", - }, - [breakpoints.up("md")]: { - flexDirection: "row", - justifyContent: "flex-start", - alignItems: "center", - }, - })} - > - ({ - mr: "auto", - [breakpoints.only("md")]: { - mr: "75px", - }, - [breakpoints.only("xl")]: { - width: "500px", - maxWidth: "38%", - }, - })} - > - ({ - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - borderRadius: "20px", - [breakpoints.up("xl")]: { - maxWidth: "110px !important", - }, - [breakpoints.up("xxl")]: { - minWidth: "180px", - maxWidth: "100% !important", - }, - })} - > - - مدعو - - - 145 شخصا - - - ({ - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - borderRadius: "20px", - [breakpoints.up("xl")]: { - maxWidth: "110px !important", - }, - [breakpoints.up("xxl")]: { - minWidth: "180px", - maxWidth: "100% !important", - }, - })} - > - - علاوة - - - 1,465 - - - - = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} - isGradient - gradient={{ - angle: 90, - startColor: "rgba(5, 205, 153, 0)", - stopColor: "#05CD99", - }} - emptyColor="transparent" - > - - - أمان - - - 9.3 - - - مجموع النقاط - - - - - - - ); + return ( + + + + + تتبع الإحالة + + + + + + ({ + [breakpoints.up('xs')]: { + flexDirection: 'column', + gap: '16px', + justifyContent: 'center', + alignItems: 'center' + }, + [breakpoints.up('md')]: { + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center' + } + })}> + ({ + mr: 'auto', + [breakpoints.only('md')]: { + mr: '75px' + }, + [breakpoints.only('xl')]: { + width: '500px', + maxWidth: '38%' + } + })}> + ({ + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + borderRadius: '20px', + [breakpoints.up('xl')]: { + maxWidth: '110px !important' + }, + [breakpoints.up('xxl')]: { + minWidth: '180px', + maxWidth: '100% !important' + } + })}> + + مدعو + + + 145 شخصا + + + ({ + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + borderRadius: '20px', + [breakpoints.up('xl')]: { + maxWidth: '110px !important' + }, + [breakpoints.up('xxl')]: { + minWidth: '180px', + maxWidth: '100% !important' + } + })}> + + علاوة + + + 1,465 + + + + + = 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200} + color='success' + /> + + + + أمان + + + 9.3 + + + مجموع النقاط + + + + + + + + ); } export default ReferralTracking; diff --git a/src/layouts/rtl/components/SatisfactionRate/index.js b/src/layouts/rtl/components/SatisfactionRate/index.js index e499366..2fb493c 100644 --- a/src/layouts/rtl/components/SatisfactionRate/index.js +++ b/src/layouts/rtl/components/SatisfactionRate/index.js @@ -1,94 +1,93 @@ -import React from "react"; +import React from 'react'; -import { Card, Stack } from "@mui/material"; -import VuiBox from "components/VuiBox"; -import VuiTypography from "components/VuiTypography"; -import * as GradientProgress from "@delowar/react-circle-progressbar"; -import { IoHappy } from "react-icons/io5"; -import colors from "assets/theme/base/colors"; -import linearGradient from "assets/theme/functions/linearGradient"; +import { Card, Stack } from '@mui/material'; +import VuiBox from 'components/VuiBox'; +import VuiTypography from 'components/VuiTypography'; +import CircularProgress from '@mui/material/CircularProgress'; +import { IoHappy } from 'react-icons/io5'; +import colors from 'assets/theme/base/colors'; +import linearGradient from 'assets/theme/functions/linearGradient'; const SatisfactionRate = () => { - const { info, gradients } = colors; - const { cardContent } = gradients; + const { info, gradients } = colors; + const { cardContent } = gradients; - return ( - - - - معدل الرضا - - - من جميع المشاريع - - - - - - - - - ({ - width: "90%", - padding: "18px 22px", - display: "flex", - justifyContent: "space-between", - flexDirection: "row", - height: "82px", - mx: "auto", - borderRadius: "20px", - background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), - transform: "translateY(-90%)", - zIndex: "1000", - })} - > - - 0% - - - - 95% - - - بناء على الإعجابات - - - - 100% - - - - - ); + return ( + + + + معدل الرضا + + + من جميع المشاريع + + + + + + + + + + + + ({ + width: '90%', + padding: '18px 22px', + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + height: '82px', + mx: 'auto', + borderRadius: '20px', + background: linearGradient(cardContent.main, cardContent.state, cardContent.deg), + transform: 'translateY(-90%)', + zIndex: '1000' + })}> + + 0% + + + + 95% + + + بناء على الإعجابات + + + + 100% + + + + + ); }; export default SatisfactionRate;