From e204aae8746ca88e1b089fb000a6b0771b9001ec Mon Sep 17 00:00:00 2001 From: mihir_dml Date: Thu, 3 Apr 2025 20:09:38 +0530 Subject: [PATCH] Login,Dashboard,Fonts responsiveness done --- pnpm-lock.yaml | 158 ++++++++- public/Login.svg | 27 ++ public/index.html | 5 + src/components/CustomTable/customTable.tsx | 5 +- src/components/Header/index.tsx | 5 +- .../LineChartCard/lineChartCard.tsx | 323 ++++++++++-------- src/components/MainGrid/mainGrid.tsx | 87 ++--- src/components/MenuContent/index.tsx | 10 + .../ResourcePieChart/resourcePieChart.tsx | 249 ++++++++------ src/components/SessionsChart/sessionChart.tsx | 282 ++++++++------- src/components/StatCard/statCard.tsx | 149 +++++--- src/components/barChartCard/barChartCard.tsx | 148 +++++--- src/global.d.ts | 8 + src/index.css | 18 +- src/layouts/DashboardLayout/index.tsx | 7 +- src/pages/Auth/Login/index.tsx | 200 ++++++----- src/pages/Auth/SignUp/index.tsx | 2 +- src/shared-theme/AppTheme.tsx | 25 +- tsconfig.json | 20 +- 19 files changed, 1064 insertions(+), 664 deletions(-) create mode 100644 public/Login.svg create mode 100644 src/global.d.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5bd6fd..1284d47 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^6.4.5 version: 6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-charts': - specifier: ^7.27.0 - version: 7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^7.27.1 + version: 7.28.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-data-grid': specifier: ^7.27.0 version: 7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -80,6 +80,9 @@ importers: react-hook-form: specifier: ^7.54.2 version: 7.54.2(react@18.3.1) + react-minimal-pie-chart: + specifier: ^9.1.0 + version: 9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-redux: specifier: ^9.2.0 version: 9.2.0(@types/react@19.0.10)(react@18.3.1)(redux@5.0.1) @@ -89,6 +92,9 @@ importers: react-scripts: specifier: 5.0.1 version: 5.0.1(@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.9))(@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.9))(@types/babel__core@7.20.5)(eslint@8.57.1)(react@18.3.1)(type-fest@0.21.3)(typescript@5.7.3) + recharts: + specifier: ^2.15.1 + version: 2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) sonner: specifier: ^1.7.4 version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1203,14 +1209,14 @@ packages: '@mui/x-charts-vendor@7.20.0': resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==} - '@mui/x-charts@7.27.0': - resolution: {integrity: sha512-EIT5zbClc8n14qBvCD7jYSVI4jWAWajY7g8gznf5rggCJuv08IHfmi23q6afax73q6yTAi30qeUmcqttqXV4DQ==} + '@mui/x-charts@7.28.0': + resolution: {integrity: sha512-TNfq/rQfGKnjTaEITkY6l09NpMxwMwRTgLiDw+JQsS/7gwBBJUmMhEOj67BaFeYTsroFLUYeggiAj+RTSryd4A==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.9.0 '@emotion/styled': ^11.8.1 - '@mui/material': ^5.15.14 || ^6.0.0 - '@mui/system': ^5.15.14 || ^6.0.0 + '@mui/material': ^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta + '@mui/system': ^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta react: ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: @@ -1278,6 +1284,12 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 || ^19.0.0 + '@mui/x-internals@7.28.0': + resolution: {integrity: sha512-p4GEp/09bLDumktdIMiw+OF4p+pJOOjTG0VUvzNxjbHB9GxbBKoMcHrmyrURqoBnQpWIeFnN/QAoLMFSpfwQbw==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} @@ -1501,12 +1513,18 @@ packages: '@types/cookie@0.6.0': resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/d3-array@3.2.1': + resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==} + '@types/d3-color@3.1.3': resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==} '@types/d3-delaunay@6.0.4': resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==} + '@types/d3-ease@3.0.2': + resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==} + '@types/d3-interpolate@3.0.4': resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==} @@ -1522,6 +1540,9 @@ packages: '@types/d3-time@3.0.4': resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==} + '@types/d3-timer@3.0.2': + resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==} + '@types/eslint-scope@3.7.7': resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} @@ -2483,6 +2504,10 @@ packages: resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} engines: {node: '>=12'} + d3-ease@3.0.1: + resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} + engines: {node: '>=12'} + d3-format@3.1.0: resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==} engines: {node: '>=12'} @@ -2511,6 +2536,10 @@ packages: resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==} engines: {node: '>=12'} + d3-timer@3.0.1: + resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} + engines: {node: '>=12'} + damerau-levenshtein@1.0.8: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} @@ -2558,6 +2587,9 @@ packages: supports-color: optional: true + decimal.js-light@2.5.1: + resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==} + decimal.js@10.5.0: resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==} @@ -2999,6 +3031,10 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-equals@5.2.2: + resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==} + engines: {node: '>=6.0.0'} + fast-glob@3.3.3: resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==} engines: {node: '>=8.6.0'} @@ -4934,6 +4970,12 @@ packages: react-is@19.0.0: resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==} + react-minimal-pie-chart@9.1.0: + resolution: {integrity: sha512-JziZXZT0aw+9X+rGSpQwbSG7t3ypsyhzJNpiTUGfVeCqr70YIPbHE5Us3RsCsNRlVHbeLGrp/ibVuzUJT6Gcvw==} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 || ^19 + react-dom: ^16.8.0 || ^17 || ^18 || ^19 + react-redux@9.2.0: resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==} peerDependencies: @@ -4979,6 +5021,12 @@ packages: typescript: optional: true + react-smooth@4.0.4: + resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-transition-group@4.4.5: resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -5003,6 +5051,16 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + recharts-scale@0.4.5: + resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==} + + recharts@2.15.1: + resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==} + engines: {node: '>=14'} + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + recursive-readdir@2.2.3: resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==} engines: {node: '>=6.0.0'} @@ -5511,6 +5569,10 @@ packages: svg-parser@2.0.4: resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + svg-partial-circle@1.0.0: + resolution: {integrity: sha512-jDWgNzrlpsGo9A7/tdjCy6+1RzeeANYV1a3JtNYC/0ZXI3U+3VMucuNv7JuKti9VVBdyNxNO1CZs/k0xS1lUFA==} + engines: {node: '>=6'} + svgo@1.3.2: resolution: {integrity: sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==} engines: {node: '>=4.0.0'} @@ -5591,6 +5653,9 @@ packages: thunky@1.1.0: resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==} + tiny-invariant@1.3.3: + resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} @@ -5783,6 +5848,9 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + victory-vendor@36.9.2: + resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==} + w3c-hr-time@1.0.2: resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==} deprecated: Use your platform's native performance.now() and performance.timeOrigin. @@ -7461,14 +7529,14 @@ snapshots: delaunator: 5.0.1 robust-predicates: 3.0.2 - '@mui/x-charts@7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/x-charts@7.28.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.9 '@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1) '@mui/utils': 6.4.3(@types/react@19.0.10)(react@18.3.1) '@mui/x-charts-vendor': 7.20.0 - '@mui/x-internals': 7.26.0(@types/react@19.0.10)(react@18.3.1) + '@mui/x-internals': 7.28.0(@types/react@19.0.10)(react@18.3.1) '@react-spring/rafz': 9.7.5 '@react-spring/web': 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: 2.1.1 @@ -7528,6 +7596,14 @@ snapshots: transitivePeerDependencies: - '@types/react' + '@mui/x-internals@7.28.0(@types/react@19.0.10)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.9 + '@mui/utils': 6.4.3(@types/react@19.0.10)(react@18.3.1) + react: 18.3.1 + transitivePeerDependencies: + - '@types/react' + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': dependencies: eslint-scope: 5.1.1 @@ -7773,10 +7849,14 @@ snapshots: '@types/cookie@0.6.0': {} + '@types/d3-array@3.2.1': {} + '@types/d3-color@3.1.3': {} '@types/d3-delaunay@6.0.4': {} + '@types/d3-ease@3.0.2': {} + '@types/d3-interpolate@3.0.4': dependencies: '@types/d3-color': 3.1.3 @@ -7793,6 +7873,8 @@ snapshots: '@types/d3-time@3.0.4': {} + '@types/d3-timer@3.0.2': {} + '@types/eslint-scope@3.7.7': dependencies: '@types/eslint': 9.6.1 @@ -8899,6 +8981,8 @@ snapshots: dependencies: delaunator: 5.0.1 + d3-ease@3.0.1: {} + d3-format@3.1.0: {} d3-interpolate@3.0.1: @@ -8927,6 +9011,8 @@ snapshots: dependencies: d3-array: 3.2.4 + d3-timer@3.0.1: {} + damerau-levenshtein@1.0.8: {} data-urls@2.0.0: @@ -8967,6 +9053,8 @@ snapshots: dependencies: ms: 2.1.3 + decimal.js-light@2.5.1: {} + decimal.js@10.5.0: {} dedent@0.7.0: {} @@ -9570,6 +9658,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-equals@5.2.2: {} + fast-glob@3.3.3: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -11779,6 +11869,12 @@ snapshots: react-is@19.0.0: {} + react-minimal-pie-chart@9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + svg-partial-circle: 1.0.0 + react-redux@9.2.0(@types/react@19.0.10)(react@18.3.1)(redux@5.0.1): dependencies: '@types/use-sync-external-store': 0.0.6 @@ -11893,6 +11989,14 @@ snapshots: - webpack-hot-middleware - webpack-plugin-serve + react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + fast-equals: 5.2.2 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.26.9 @@ -11930,6 +12034,23 @@ snapshots: dependencies: picomatch: 2.3.1 + recharts-scale@0.4.5: + dependencies: + decimal.js-light: 2.5.1 + + recharts@2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + clsx: 2.1.1 + eventemitter3: 4.0.7 + lodash: 4.17.21 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-is: 18.3.1 + react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + recharts-scale: 0.4.5 + tiny-invariant: 1.3.3 + victory-vendor: 36.9.2 + recursive-readdir@2.2.3: dependencies: minimatch: 3.1.2 @@ -12492,6 +12613,8 @@ snapshots: svg-parser@2.0.4: {} + svg-partial-circle@1.0.0: {} + svgo@1.3.2: dependencies: chalk: 2.4.2 @@ -12601,6 +12724,8 @@ snapshots: thunky@1.1.0: {} + tiny-invariant@1.3.3: {} + tmpl@1.0.5: {} to-regex-range@5.0.1: @@ -12789,6 +12914,23 @@ snapshots: vary@1.1.2: {} + victory-vendor@36.9.2: + dependencies: + '@types/d3-array': 3.2.1 + '@types/d3-ease': 3.0.2 + '@types/d3-interpolate': 3.0.4 + '@types/d3-scale': 4.0.9 + '@types/d3-shape': 3.1.7 + '@types/d3-time': 3.0.4 + '@types/d3-timer': 3.0.2 + d3-array: 3.2.4 + d3-ease: 3.0.1 + d3-interpolate: 3.0.1 + d3-scale: 4.0.2 + d3-shape: 3.2.0 + d3-time: 3.1.0 + d3-timer: 3.0.1 + w3c-hr-time@1.0.2: dependencies: browser-process-hrtime: 1.0.0 diff --git a/public/Login.svg b/public/Login.svg new file mode 100644 index 0000000..3a484c3 --- /dev/null +++ b/public/Login.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index 720d1f0..1eaac1a 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,11 @@ + + + + + = ({ color: "#FFFFFF", fontWeight: 500, fontSize: "18px", - fontFamily: "Gilroy", }} > {/* Dynamic title based on the page type */} @@ -401,7 +400,7 @@ const CustomTable: React.FC = ({ key={column.id} sx={{ color: "#FFFFFF", - fontWeight: "bold", + fontWeight: "600", }} > {column.label} @@ -422,7 +421,7 @@ const CustomTable: React.FC = ({ diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 62dda98..d6910f0 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -28,14 +28,13 @@ export default function Header() { - - - - - - ); + return ( + + + + + + + ); } function getDaysInMonth(month: number, year: number) { - const date = new Date(year, month, 0); - const monthName = date.toLocaleDateString("en-US", { - month: "short", - }); - const daysInMonth = date.getDate(); - const days = []; - let i = 1; - while (days.length < daysInMonth) { - days.push(`${monthName} ${i}`); - i += 1; - } - return days; + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString("en-US", { + month: "short", + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; } export default function LineChartCard() { - const theme = useTheme(); - const data = getDaysInMonth(4, 2024); + const theme = useTheme(); + const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); + const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); + + const data = getDaysInMonth(4, 2024); + const colorPalette = [theme.palette.primary.main]; + const [selectedOption, setSelectedOption] = React.useState("Weekly"); - const colorPalette = [theme.palette.primary.light]; - const [selectedOption, setSelectedOption] = React.useState("Weekly"); - - const handleChange = (event: { target: { value: React.SetStateAction; }; }) => { - setSelectedOption(event.target.value); - }; - + const handleChange = (event: { target: { value: React.SetStateAction } }) => { + setSelectedOption(event.target.value); + }; - return ( - - -
- - Sales Stats - - - - -
+ // Calculate responsive dimensions + const getChartHeight = () => { + if (isXsScreen) return 200; + if (isSmScreen) return 220; + return 250; + }; - (i + 1) % 5 === 0, - }, - ]} - series={[ - { - id: "direct", - label: "Direct", - showMark: false, - curve: "linear", - stack: "total", - area: true, - stackOrder: "ascending", - data: [ - 300, 900, 500, 1200, 1500, 1800, 2400, 2100, - 2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500, - 3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300, - 6600, 6900, 7200, 7500, 7800, 8100, - ], - color: "#FFFFFF", - }, - ]} - height={250} - margin={{ left: 50, right: 20, top: 20, bottom: 20 }} - grid={{ horizontal: true }} - sx={{ - "& .MuiAreaElement-series-direct": { - fill: "url('#direct')", - }, - }} - slotProps={{ - legend: { - hidden: true, - }, - }} - > - - - - - ); -} + const getChartMargin = () => { + if (isXsScreen) return { left: 35, right: 10, top: 15, bottom: 15 }; + if (isSmScreen) return { left: 40, right: 15, top: 18, bottom: 18 }; + return { left: 50, right: 20, top: 20, bottom: 20 }; + }; + + return ( + + +
+ + Sales Stats + + + + +
+ + isXsScreen + ? (i + 1) % 10 === 0 + : isSmScreen + ? (i + 1) % 7 === 0 + : (i + 1) % 5 === 0, + }, + ]} + series={[ + { + id: "direct", + label: "Direct", + showMark: false, + curve: "linear", + stack: "total", + area: true, + stackOrder: "ascending", + data: [ + 300, 900, 500, 1200, 1500, 1800, 2400, 2100, + 2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500, + 3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300, + 6600, 6900, 7200, 7500, 7800, 8100, + ], + color: "#28ACFF", + }, + ]} + height={getChartHeight()} + margin={getChartMargin()} + grid={{ horizontal: true }} + sx={{ + "& .MuiAreaElement-series-direct": { + fill: "url('#direct')", + }, + }} + slotProps={{ + legend: { + hidden: true, + }, + }} + > + + + + + ); +} \ No newline at end of file diff --git a/src/components/MainGrid/mainGrid.tsx b/src/components/MainGrid/mainGrid.tsx index 38643b1..b0036e4 100644 --- a/src/components/MainGrid/mainGrid.tsx +++ b/src/components/MainGrid/mainGrid.tsx @@ -1,5 +1,4 @@ - -import Grid from "@mui/material/Grid2"; +import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import SessionsChart from "../SessionsChart/sessionChart"; @@ -9,57 +8,43 @@ import RoundedBarChart from "../barChartCard/barChartCard"; import LineChartCard from "../LineChartCard/lineChartCard"; const data: StatCardProps[] = [ - { - title: "Total Charge Stations", - value: "86", - }, - { - title: "Charging Completed", - value: "12", - }, - { - title: "Active Users", - value: "24", - }, - { - title: "Total Energy Consumed", - value: "08", - }, + { title: "Total Charge Stations", value: "86" }, + { title: "Charging Completed", value: "12" }, + { title: "Active Users", value: "24" }, + { title: "Total Energy Consumed", value: "08" }, ]; export default function MainGrid() { - return ( - - {/* cards */} - - Dashboard - - theme.spacing(2) }} - > - {data.map((card, index) => ( - - - - ))} + return ( + + {/* Dashboard Header */} + + Dashboard + - - - - - - - - - - - - - - - ); + {/* Grid Layout */} + + {/* Statistic Cards */} + {data.map((card, index) => ( + + + + ))} + + {/* Charts */} + + + + + + + + + + + + + + + ); } diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 4706451..0075ffb 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -35,6 +35,16 @@ export default function MenuContent({ hidden }: PropType) { icon: , url: "/panel/admin-list", }, + userRole === "superadmin" && { + text: "Managers", + icon: , + url: "/panel/manager-list", + }, + userRole === "superadmin" && { + text: "User", + icon: , + url: "/panel/user-list", + }, userRole === "superadmin" && { text: "Roles", icon: , diff --git a/src/components/ResourcePieChart/resourcePieChart.tsx b/src/components/ResourcePieChart/resourcePieChart.tsx index 74ed88e..49ae19a 100644 --- a/src/components/ResourcePieChart/resourcePieChart.tsx +++ b/src/components/ResourcePieChart/resourcePieChart.tsx @@ -4,111 +4,160 @@ import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; const colorPalette = [ - "hsla(202, 69%, 60%, 1)", - "hsl(204, 48.60%, 72.50%)", - "hsl(214, 56.40%, 30.60%)", - "hsl(222, 6.80%, 50.80%)", + "hsla(202, 69%, 60%, 1)", + "hsl(204, 48.60%, 72.50%)", + "hsl(214, 56.40%, 30.60%)", + "hsl(222, 6.80%, 50.80%)", ]; + const data = [ - { title: "Total Resources", value: 50, color: colorPalette[0] }, - { title: "Total Stations", value: 20, color: colorPalette[1] }, - { title: "Station Manager", value: 15, color: colorPalette[2] }, - { title: "Total Booth", value: 15, color: colorPalette[3] }, + { title: "Total Resources", value: 50, color: colorPalette[0] }, + { title: "Total Stations", value: 20, color: colorPalette[1] }, + { title: "Station Manager", value: 15, color: colorPalette[2] }, + { title: "Total Booth", value: 15, color: colorPalette[3] }, ]; export default function ResourcePieChart() { - return ( - - - - Resources - - - + const theme = useTheme(); + const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); + const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); + - - {data.map((entry, index) => ( - - - - {entry.title} - - - ))} - - - - - ); -} + const getChartDimensions = () => { + if (isXsScreen) { + return { + height: 240, + width: 240, + innerRadius: 40, + outerRadius: 80, + margin: { left: 20, right: 20, top: 40, bottom: 40 } + }; + } else if (isSmScreen) { + return { + height: 260, + width: 260, + innerRadius: 50, + outerRadius: 90, + margin: { left: 40, right: 40, top: 60, bottom: 60 } + }; + } else { + return { + height: 350, + width: 350, + innerRadius: 55, + outerRadius: 110, + margin: { left: 60, right: 80, top: 80, bottom: 80 } + }; + } + }; + + const dimensions = getChartDimensions(); + + return ( + + + + Resources + + + + + + {data.map((entry, index) => ( + + + + {entry.title} + + + ))} + + + + + ); +} \ No newline at end of file diff --git a/src/components/SessionsChart/sessionChart.tsx b/src/components/SessionsChart/sessionChart.tsx index 55d275a..8e78a0a 100644 --- a/src/components/SessionsChart/sessionChart.tsx +++ b/src/components/SessionsChart/sessionChart.tsx @@ -6,156 +6,146 @@ import Box from "@mui/material/Box"; import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; -import InputLabel from "@mui/material/InputLabel"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { useTheme } from "@mui/material/styles"; + export default function SessionsChart() { - const [selectedStation, setSelectedStation] = React.useState( - "Delhi NCR EV Station" - ); + const theme = useTheme(); + const [selectedStation, setSelectedStation] = React.useState( + "Delhi NCR EV Station" + ); - const handleChange = (event: { target: { value: React.SetStateAction; }; }) => { - setSelectedStation(event.target.value); - }; + const handleChange = (event: { target: { value: React.SetStateAction } }) => { + setSelectedStation(event.target.value); + }; - return ( - - - - Charging prices - + return ( + + + + Charging prices + - {/* Dropdown button */} - - - - + {/* Dropdown button */} + + + - {/* Grid container for the four boxes */} - - {[1, 2, 3, 4].map((item) => ( - - - Basic Charging - - - - 16.83 - - - - cents/kWh - - - - ))} - - - - ); + {/* Grid container for the four boxes */} + + {[1, 2, 3, 4].map((item) => ( + + + Basic Charging + + + + 16.83 + + + cents/kWh + + + + ))} + + + + ); } diff --git a/src/components/StatCard/statCard.tsx b/src/components/StatCard/statCard.tsx index f86389b..a52b553 100644 --- a/src/components/StatCard/statCard.tsx +++ b/src/components/StatCard/statCard.tsx @@ -1,59 +1,106 @@ - import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import Typography from "@mui/material/Typography"; - +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; export type StatCardProps = { - title: string; - value: string; + title: string; + value: string; }; export default function StatCard({ title, value }: StatCardProps) { - return ( - - - - {title} - - - {value} - - - - ); -} + const theme = useTheme(); + const isXsScreen = useMediaQuery(theme.breakpoints.only("xs")); + const isSmScreen = useMediaQuery(theme.breakpoints.only("sm")); + const isMdScreen = useMediaQuery(theme.breakpoints.only("md")); + + return ( + + + + {title} + + + {value} + + + + ); +} \ No newline at end of file diff --git a/src/components/barChartCard/barChartCard.tsx b/src/components/barChartCard/barChartCard.tsx index 2513329..fbd2046 100644 --- a/src/components/barChartCard/barChartCard.tsx +++ b/src/components/barChartCard/barChartCard.tsx @@ -13,6 +13,7 @@ import { import { BarChart } from "@mui/x-charts/BarChart"; import { axisClasses } from "@mui/x-charts/ChartsAxis"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import useMediaQuery from "@mui/material/useMediaQuery"; // Sample Data const data = [ @@ -24,59 +25,100 @@ const data = [ { name: "Jun", v1: 30 }, ]; -// Chart Configuration -const chartSetting = { - yAxis: [ - { - label: "Value", - tickFormatter: (value: number) => `${value}`, // Formatting Y-axis ticks - }, - ], - xAxis: [ - { - dataKey: "name", - scaleType: "band" as const, - }, - ], - width: 500, - height: 300, - sx: { - [`.${axisClasses.left} .${axisClasses.label}`]: { - transform: "translate(-20px, 0)", - }, - }, -}; - export default function RoundedBarChart() { const theme = useTheme(); + const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); + const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); const [selectedOption, setSelectedOption] = React.useState("Monthly"); - const handleChange = (event: SelectChangeEvent) => { - setSelectedOption(event.target.value); + const handleChange = (event: SelectChangeEvent) => { + setSelectedOption(event.target.value); + }; + + // Responsive chart settings + const getChartSettings = () => { + const baseSettings = { + + yAxis: [ + { + label: isXsScreen ? "" : "Value", + tickFormatter: (value: number) => `${value}`, + }, + ], + xAxis: [ + { + dataKey: "name", + scaleType: "band" as const, + }, + ], + sx: { + [`.${axisClasses.left} .${axisClasses.label}`]: { + transform: "translate(-10px, 0)", + }, + }, }; + // Screen-specific settings + if (isXsScreen) { + return { + ...baseSettings, + width: 280, + height: 220, + }; + } else if (isSmScreen) { + return { + ...baseSettings, + width: 380, + height: 260, + }; + } else { + return { + ...baseSettings, + width: 500, + height: 280, + }; + } + }; + + const chartSetting = getChartSettings(); + return ( - - + + Charge Stats @@ -84,13 +126,13 @@ export default function RoundedBarChart() { @@ -98,6 +140,7 @@ export default function RoundedBarChart() { value={selectedOption} onChange={handleChange} sx={{ + fontSize: { xs: "14px", md: "16px" }, color: "#D9D8D8", ".MuiSelect-icon": { color: "#F2F2F2", @@ -113,17 +156,28 @@ export default function RoundedBarChart() { - + + + ); diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..f23d289 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,8 @@ +declare module "*.css"; + +declare module "@mui/styles/defaultTheme" { + interface DefaultTheme extends Theme { + vars: object; + } +} + diff --git a/src/index.css b/src/index.css index f6a5045..fdb534b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,24 @@ body { margin: 0; - /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; */ - font-family: "Gliroy"; + font-family: "Gilroy"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.mui-typography { + font-family: "Gilroy", sans-serif !important; + background-color: rgb(7, 127, 233); +} + +.css-1w8ddxu-MuiBarElement-root { + width: 19px !important; + border-radius: 50px !important; + rx: 8; + ry: 8 +} diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx index a11f3b5..1e36d48 100644 --- a/src/layouts/DashboardLayout/index.tsx +++ b/src/layouts/DashboardLayout/index.tsx @@ -43,9 +43,10 @@ const DashboardLayout: React.FC = ({ customStyles }) => { flexDirection: "column", height: "100vh", flexGrow: 1, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` - : theme.palette.background.default, + // backgroundColor: theme.vars + // ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` + // : theme.palette.background.default, + backgroundColor: theme.palette.background.default, overflow: "auto", ...customStyles, mt: { xs: 8, md: 0 }, diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index c82645f..81a547e 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -9,7 +9,6 @@ import { TextField, Typography, Grid, - Link, InputAdornment, } from "@mui/material"; @@ -23,6 +22,7 @@ import { Visibility, VisibilityOff } from "@mui/icons-material"; import { Card, SignInContainer } from "./styled.css.tsx"; import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx"; import { AppDispatch } from "../../../redux/store/store.ts"; + interface ILoginForm { email: string; password: string; @@ -35,7 +35,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) { const { control, handleSubmit, - formState: { errors, isValid },trigger + formState: { errors, isValid }, + trigger, } = useForm({ mode: "onChange" }); const dispatch = useDispatch(); const router = useNavigate(); @@ -47,17 +48,17 @@ export default function Login(props: { disableCustomTheme?: boolean }) { const handleClose = () => { setOpen(false); }; - - const togglePasswordVisibility = (e: React.MouseEvent) => { - e.preventDefault(); // Prevent focus loss - setShowPassword((prev) => !prev); - }; - + + const togglePasswordVisibility = (e: React.MouseEvent) => { + e.preventDefault(); + setShowPassword((prev) => !prev); + }; + const onSubmit: SubmitHandler = async (data: ILoginForm) => { - const isValid = await trigger(); // This triggers validation for all fields - if (!isValid) { - return; // Stop submission if there are errors - } + const isValid = await trigger(); + if (!isValid) { + return; + } try { const response = await dispatch(loginUser(data)).unwrap(); if (response?.data?.token) { @@ -71,66 +72,90 @@ export default function Login(props: { disableCustomTheme?: boolean }) { return ( - - {/* Image Section */} + + - - {/* Form Section */} - + Logo + + + {/* Form Section */} + + + + Logo + + Welcome Back! @@ -139,11 +164,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) { Login @@ -177,24 +202,24 @@ export default function Login(props: { disableCustomTheme?: boolean }) { sx={{ textAlign: "center", color: "white", - fontFamily: "Gilroy", - fontSize: "16px", + fontSize: { xs: "14px", md: "16px" }, + mb: 1, }} > Log in with your email and password - {/* -------------------------------- Email Field ----------------- */} + {/* Email Field */} Email @@ -233,12 +258,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) { } InputProps={{ sx: { - height: "50px", + height: { xs: "45px", md: "50px" }, alignItems: "center", backgroundColor: "#1E1F1F", - fontFamily: - "Gilroy, sans-serif", }, }} sx={{ @@ -266,7 +289,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) { "& input": { color: "white", fontSize: { - xs: "0.9rem", + xs: "0.875rem", sm: "1rem", }, fontFamily: @@ -285,17 +308,18 @@ export default function Login(props: { disableCustomTheme?: boolean }) { /> - {/* -------------------------------- Password Field ----------------- */} + {/* Password Field */} Password @@ -342,6 +366,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) { : "primary" } InputProps={{ + sx: { + height: { xs: "45px", md: "50px" }, + }, endAdornment: ( @@ -403,13 +426,16 @@ export default function Login(props: { disableCustomTheme?: boolean }) { /> + {/* Remember me and Forgot Password */} } - label="Remember me" + label={ + + Remember me + + } /> Forgot password? @@ -463,18 +503,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) { open={open} handleClose={handleClose} /> + + {/* Login Button */}