From 61de5b7a66c1ba44f1014126b77077e0f20b8b79 Mon Sep 17 00:00:00 2001 From: darkido Date: Tue, 23 Aug 2022 23:39:29 +0430 Subject: [PATCH 1/5] [fix]: add zooming area to LoginRegisterPage --- package-lock.json | 91 ++++++++++++++++++++------ package.json | 1 + src/components/Layout/style.scss | 5 +- src/components/Navbar/style.scss | 1 - src/pages/LoginRegisterPage/index.jsx | 52 ++++++++------- src/pages/LoginRegisterPage/style.scss | 1 + 6 files changed, 106 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 811e949..663b284 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-query": "^4.0.0", "react-router-dom": "^6.2.2", "react-tsparticles": "^2.2.2", + "react-zoomable-ui": "^0.9.1", "sass": "^1.49.9", "styled-components": "^5.3.5", "tsparticles": "^2.2.3", @@ -4983,6 +4984,14 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" }, + "node_modules/hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -8269,6 +8278,18 @@ "react": ">=16" } }, + "node_modules/react-zoomable-ui": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/react-zoomable-ui/-/react-zoomable-ui-0.9.1.tgz", + "integrity": "sha512-C6itso3Cx26b0Mh2lAJDv5u9Pzc9fjiagUSrbpW+hXVM3+bOfbOyd8y7Ve0P1akPgfCseRgOE+b7o/Fw1GYCIg==", + "dependencies": { + "hammerjs": "^2.0.8", + "ts-invariant": "^0.4.4" + }, + "peerDependencies": { + "react": "^16.3" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -9060,6 +9081,19 @@ "punycode": "^2.1.0" } }, + "node_modules/ts-invariant": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz", + "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==", + "dependencies": { + "tslib": "^1.9.3" + } + }, + "node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/tsparticles": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-2.2.3.tgz", @@ -11374,8 +11408,7 @@ "@hookform/resolvers": { "version": "2.9.7", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.7.tgz", - "integrity": "sha512-BloehX3MOLwuFEwT4yZnmolPjVmqyn8VsSuodLfazbCIqxBHsQ4qUZsi+bvNNCduRli1AGWFrkDLGD5QoNzsoA==", - "requires": {} + "integrity": "sha512-BloehX3MOLwuFEwT4yZnmolPjVmqyn8VsSuodLfazbCIqxBHsQ4qUZsi+bvNNCduRli1AGWFrkDLGD5QoNzsoA==" }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", @@ -11968,8 +12001,7 @@ "@mui/types": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.2.tgz", - "integrity": "sha512-SD7O1nVzqG+ckQpFjDhXPZjRceB8HQFHEvdLLrPhlJy4lLbwEBbxK74Tj4t6Jgk0fTvLJisuwOutrtYe9P/xBQ==", - "requires": {} + "integrity": "sha512-SD7O1nVzqG+ckQpFjDhXPZjRceB8HQFHEvdLLrPhlJy4lLbwEBbxK74Tj4t6Jgk0fTvLJisuwOutrtYe9P/xBQ==" }, "@mui/utils": { "version": "5.4.4", @@ -13579,14 +13611,18 @@ "goober": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.10.tgz", - "integrity": "sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA==", - "requires": {} + "integrity": "sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA==" }, "graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==" + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -14698,8 +14734,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "27.5.1", @@ -15851,8 +15886,7 @@ "react-hook-form": { "version": "7.34.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.34.0.tgz", - "integrity": "sha512-s0/TJ09NVlEk2JPp3yit1WnMuPNBXFmUKEQPulgDi9pYBw/ZmmAFHe6AXWq73Y+kp8ye4OcMf0Jv+i/qLPektg==", - "requires": {} + "integrity": "sha512-s0/TJ09NVlEk2JPp3yit1WnMuPNBXFmUKEQPulgDi9pYBw/ZmmAFHe6AXWq73Y+kp8ye4OcMf0Jv+i/qLPektg==" }, "react-hot-toast": { "version": "2.3.0", @@ -15865,8 +15899,7 @@ "react-icons": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", - "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", - "requires": {} + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==" }, "react-image-annotation": { "version": "git+ssh://git@github.com/darkido/react-image-annotation.git#55fe8421a64004f5c979b44ccc5110beedf3343f", @@ -15883,8 +15916,7 @@ "react-numeric-input2": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-numeric-input2/-/react-numeric-input2-3.1.0.tgz", - "integrity": "sha512-6O1Ylup9Jtpx8tDEp8Dnx/NliiLNEZOJSGycrXz62Lj3mDPwRACIOdcfMMgRBTsl2S4nh7pygHJFGGNhjvlJAQ==", - "requires": {} + "integrity": "sha512-6O1Ylup9Jtpx8tDEp8Dnx/NliiLNEZOJSGycrXz62Lj3mDPwRACIOdcfMMgRBTsl2S4nh7pygHJFGGNhjvlJAQ==" }, "react-query": { "version": "4.0.0", @@ -15922,8 +15954,7 @@ "react-side-effect": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", - "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", - "requires": {} + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==" }, "react-transition-group": { "version": "4.4.2", @@ -15945,6 +15976,15 @@ "tsparticles-engine": "^2.0.6" } }, + "react-zoomable-ui": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/react-zoomable-ui/-/react-zoomable-ui-0.9.1.tgz", + "integrity": "sha512-C6itso3Cx26b0Mh2lAJDv5u9Pzc9fjiagUSrbpW+hXVM3+bOfbOyd8y7Ve0P1akPgfCseRgOE+b7o/Fw1GYCIg==", + "requires": { + "hammerjs": "^2.0.8", + "ts-invariant": "^0.4.4" + } + }, "readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -16528,6 +16568,19 @@ "punycode": "^2.1.0" } }, + "ts-invariant": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz", + "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==", + "requires": { + "tslib": "^1.9.3" + } + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "tsparticles": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-2.2.3.tgz", @@ -16983,8 +17036,7 @@ "use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "requires": {} + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==" }, "v8-to-istanbul": { "version": "8.1.1", @@ -17354,8 +17406,7 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", - "requires": {} + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" }, "xml-name-validator": { "version": "3.0.0", diff --git a/package.json b/package.json index cd081f2..c33bde1 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-query": "^4.0.0", "react-router-dom": "^6.2.2", "react-tsparticles": "^2.2.2", + "react-zoomable-ui": "^0.9.1", "sass": "^1.49.9", "styled-components": "^5.3.5", "tsparticles": "^2.2.3", diff --git a/src/components/Layout/style.scss b/src/components/Layout/style.scss index 5ab6f64..1f9d979 100644 --- a/src/components/Layout/style.scss +++ b/src/components/Layout/style.scss @@ -3,11 +3,12 @@ background-color: $c-layout-bg; &__container { - min-height: calc(100vh - 164px); + position: relative; + min-height: calc(100vh - 160px); width: 100%; max-width: 1200px; margin: auto; padding-bottom: 150px; - + padding-top: 40px; } } diff --git a/src/components/Navbar/style.scss b/src/components/Navbar/style.scss index 0f38a4d..0ef3d26 100644 --- a/src/components/Navbar/style.scss +++ b/src/components/Navbar/style.scss @@ -5,7 +5,6 @@ z-index: 99; background-color: $c-white; box-shadow: 0 2px 8px $c-grey1a; - margin-bottom: 40px; &__container { display: flex; justify-content: space-between; diff --git a/src/pages/LoginRegisterPage/index.jsx b/src/pages/LoginRegisterPage/index.jsx index 5023df0..a284869 100644 --- a/src/pages/LoginRegisterPage/index.jsx +++ b/src/pages/LoginRegisterPage/index.jsx @@ -1,44 +1,52 @@ import React, { useState, useEffect } from 'react'; -import { LoginForm,RegisterForm } from 'src/components/Forms'; +import { Space } from 'react-zoomable-ui'; +import { LoginForm, RegisterForm } from 'src/components/Forms'; import Layout from 'src/components/Layout'; -import { useLogin } from 'src/api/auth'; import BeastImg from 'src/assets/beast.jpg'; import './style.scss'; import { useLocation } from 'react-router-dom'; - const LoginRegisterPage = () => { const location = useLocation(); const [bookPage, setBookPage] = useState(''); - const login = useLogin(); useEffect(() => { if (location.pathname == '/register') setBookPage('next-page'); else if (location.pathname == '/login') setBookPage(''); }, [location]); - return ( -
-
- + { + viewPort.setBounds({ + x: [0, window.innerWidth], + y: [0, window.innerHeight], + }); + }} + > +
+
+ - + -
-
-
- +
+
+
+ +
+
+
+
page 3
+
-
-
page 3
-
-
-
+ ); }; diff --git a/src/pages/LoginRegisterPage/style.scss b/src/pages/LoginRegisterPage/style.scss index daf16d3..41c872e 100644 --- a/src/pages/LoginRegisterPage/style.scss +++ b/src/pages/LoginRegisterPage/style.scss @@ -17,6 +17,7 @@ $login-btn-color: rgb(41, 9, 129); height: calc($baseline * 42.6); box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); margin: auto; + margin-top: 40px; @media (max-width: 500px) { $scale: 0.5; width: calc($baseline * 60); From 30a62db0b31c88c68e9311112acce28640ba2c85 Mon Sep 17 00:00:00 2001 From: darkido Date: Wed, 24 Aug 2022 03:18:21 +0430 Subject: [PATCH 2/5] [refactor]: Add layouts Folder, change Routers to useRoutes, rename pages folders --- src/components/Layout/index.jsx | 20 ---- src/components/Page.jsx | 27 +++++ src/layouts/Main/index.jsx | 20 ++++ .../Layout => layouts/Main}/style.scss | 2 +- src/main.jsx | 5 +- .../{AddContentPage => AddContent}/index.jsx | 6 +- .../mockData.js | 0 .../{AddContentPage => AddContent}/style.scss | 0 .../{LoginRegisterPage => Book}/index.jsx | 12 +- .../{LoginRegisterPage => Book}/style.scss | 0 src/pages/{ContentPage => Content}/index.jsx | 8 +- .../{ContentPage => Content}/mockData.js | 0 src/pages/{ContentPage => Content}/style.scss | 0 .../{DashboardPage => Dashboard}/index.jsx | 0 .../{DashboardPage => Dashboard}/style.scss | 0 .../index.jsx | 8 +- src/pages/Home/index.jsx | 26 +++++ src/pages/{HomePage => Home}/style.scss | 9 ++ src/pages/HomePage/index.jsx | 33 ------ .../{NotFoundPage => NotFound}/index.jsx | 0 src/routes/AppRouter.jsx | 109 +++++++----------- 21 files changed, 147 insertions(+), 138 deletions(-) delete mode 100644 src/components/Layout/index.jsx create mode 100644 src/components/Page.jsx create mode 100644 src/layouts/Main/index.jsx rename src/{components/Layout => layouts/Main}/style.scss (94%) rename src/pages/{AddContentPage => AddContent}/index.jsx (98%) rename src/pages/{AddContentPage => AddContent}/mockData.js (100%) rename src/pages/{AddContentPage => AddContent}/style.scss (100%) rename src/pages/{LoginRegisterPage => Book}/index.jsx (93%) rename src/pages/{LoginRegisterPage => Book}/style.scss (100%) rename src/pages/{ContentPage => Content}/index.jsx (98%) rename src/pages/{ContentPage => Content}/mockData.js (100%) rename src/pages/{ContentPage => Content}/style.scss (100%) rename src/pages/{DashboardPage => Dashboard}/index.jsx (100%) rename src/pages/{DashboardPage => Dashboard}/style.scss (100%) rename src/pages/{EmailVerifiedPage => EmailVerified}/index.jsx (61%) create mode 100644 src/pages/Home/index.jsx rename src/pages/{HomePage => Home}/style.scss (66%) delete mode 100644 src/pages/HomePage/index.jsx rename src/pages/{NotFoundPage => NotFound}/index.jsx (100%) diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx deleted file mode 100644 index 84129a3..0000000 --- a/src/components/Layout/index.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import Helmet from 'react-helmet'; -import Navbar from '../Navbar'; -import Footer from '../Footer'; -import './style.scss'; - -const Layout = ({ title = 'AOV', styles = {}, children }) => { - return ( -
- - {title} | The Archive of Vanitas - - -
{children}
-
-
- ); -}; - -export default Layout; diff --git a/src/components/Page.jsx b/src/components/Page.jsx new file mode 100644 index 0000000..b2e8469 --- /dev/null +++ b/src/components/Page.jsx @@ -0,0 +1,27 @@ +import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import { forwardRef } from 'react'; + + +// ---------------------------------------------------------------------- + +const Page = forwardRef(({ children, title = '', meta, ...other }, ref) => ( + <> + + {`${title} | The Archive of Vanitas`} + {meta} + + +
+ {children} +
+ +)); + +Page.propTypes = { + children: PropTypes.node.isRequired, + title: PropTypes.string, + meta: PropTypes.node, +}; + +export default Page; diff --git a/src/layouts/Main/index.jsx b/src/layouts/Main/index.jsx new file mode 100644 index 0000000..e94a4f6 --- /dev/null +++ b/src/layouts/Main/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; +import Navbar from 'src/components/Navbar'; +import Footer from 'src/components/Footer'; + +import './style.scss'; + +const MainLayout = () => { + return ( +
+ +
+ +
+
+
+ ); +}; + +export default MainLayout; diff --git a/src/components/Layout/style.scss b/src/layouts/Main/style.scss similarity index 94% rename from src/components/Layout/style.scss rename to src/layouts/Main/style.scss index 1f9d979..7e8746d 100644 --- a/src/components/Layout/style.scss +++ b/src/layouts/Main/style.scss @@ -1,5 +1,5 @@ @import 'src/theme/main.scss'; -.layout { +.main-layout { background-color: $c-layout-bg; &__container { diff --git a/src/main.jsx b/src/main.jsx index 8a8734b..4cc142c 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider } from '@emotion/react'; +import { BrowserRouter } from 'react-router-dom'; import { QueryClient, QueryClientProvider } from 'react-query'; import { Toaster } from 'react-hot-toast'; import AppRouter from './routes/AppRouter'; @@ -16,7 +17,9 @@ ReactDOM.render( - + + + diff --git a/src/pages/AddContentPage/index.jsx b/src/pages/AddContent/index.jsx similarity index 98% rename from src/pages/AddContentPage/index.jsx rename to src/pages/AddContent/index.jsx index b81b65e..c33a180 100644 --- a/src/pages/AddContentPage/index.jsx +++ b/src/pages/AddContent/index.jsx @@ -5,7 +5,7 @@ import NumericInput from 'react-numeric-input2'; import TextField from '@mui/material/TextField'; import { Tooltip, Pagination, Select, MenuItem, useMediaQuery } from '@mui/material'; import VaniImg from 'src/assets/demo/loveismission1.jpg' -import Layout from 'src/components/Layout'; +import Page from 'src/components/Page'; import { mockAnnotations } from './mockData' import './style.scss'; @@ -278,7 +278,7 @@ const AddContentPage = ({ clear = false }) => { }; return (
- +
@@ -333,7 +333,7 @@ const AddContentPage = ({ clear = false }) => {
- +
) }; diff --git a/src/pages/AddContentPage/mockData.js b/src/pages/AddContent/mockData.js similarity index 100% rename from src/pages/AddContentPage/mockData.js rename to src/pages/AddContent/mockData.js diff --git a/src/pages/AddContentPage/style.scss b/src/pages/AddContent/style.scss similarity index 100% rename from src/pages/AddContentPage/style.scss rename to src/pages/AddContent/style.scss diff --git a/src/pages/LoginRegisterPage/index.jsx b/src/pages/Book/index.jsx similarity index 93% rename from src/pages/LoginRegisterPage/index.jsx rename to src/pages/Book/index.jsx index a284869..39e3ee6 100644 --- a/src/pages/LoginRegisterPage/index.jsx +++ b/src/pages/Book/index.jsx @@ -1,11 +1,11 @@ import React, { useState, useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; import { Space } from 'react-zoomable-ui'; import { LoginForm, RegisterForm } from 'src/components/Forms'; -import Layout from 'src/components/Layout'; +import Page from 'src/components/Page'; import BeastImg from 'src/assets/beast.jpg'; import './style.scss'; -import { useLocation } from 'react-router-dom'; -const LoginRegisterPage = () => { +const BookPage = () => { const location = useLocation(); const [bookPage, setBookPage] = useState(''); useEffect(() => { @@ -13,7 +13,7 @@ const LoginRegisterPage = () => { else if (location.pathname == '/login') setBookPage(''); }, [location]); return ( - + { viewPort.setBounds({ @@ -47,11 +47,11 @@ const LoginRegisterPage = () => {
- + ); }; -export default LoginRegisterPage; +export default BookPage; const DidYouKnowBox = () => { return ( diff --git a/src/pages/LoginRegisterPage/style.scss b/src/pages/Book/style.scss similarity index 100% rename from src/pages/LoginRegisterPage/style.scss rename to src/pages/Book/style.scss diff --git a/src/pages/ContentPage/index.jsx b/src/pages/Content/index.jsx similarity index 98% rename from src/pages/ContentPage/index.jsx rename to src/pages/Content/index.jsx index 4d8f3a8..5a38403 100644 --- a/src/pages/ContentPage/index.jsx +++ b/src/pages/Content/index.jsx @@ -4,7 +4,7 @@ import Tab from '@mui/material/Tab'; import { Divider, Avatar } from '@mui/material'; import { FaTwitter } from 'react-icons/fa'; import Annotation from 'react-image-annotation' -import Layout from 'src/components/Layout'; +import Page from 'src/components/Page'; import { mockAnnotations } from './mockData' import VaniImg from 'src/assets/demo/vaniiveRepo5.jpg' import { InkPenIcon, HourglassIcon } from 'src/components/VanitasIcons'; @@ -63,8 +63,7 @@ const ContentPage = () => { }; return ( -
- +
@@ -179,8 +178,7 @@ const ContentPage = () => {
- -
) + ) }; export default ContentPage; diff --git a/src/pages/ContentPage/mockData.js b/src/pages/Content/mockData.js similarity index 100% rename from src/pages/ContentPage/mockData.js rename to src/pages/Content/mockData.js diff --git a/src/pages/ContentPage/style.scss b/src/pages/Content/style.scss similarity index 100% rename from src/pages/ContentPage/style.scss rename to src/pages/Content/style.scss diff --git a/src/pages/DashboardPage/index.jsx b/src/pages/Dashboard/index.jsx similarity index 100% rename from src/pages/DashboardPage/index.jsx rename to src/pages/Dashboard/index.jsx diff --git a/src/pages/DashboardPage/style.scss b/src/pages/Dashboard/style.scss similarity index 100% rename from src/pages/DashboardPage/style.scss rename to src/pages/Dashboard/style.scss diff --git a/src/pages/EmailVerifiedPage/index.jsx b/src/pages/EmailVerified/index.jsx similarity index 61% rename from src/pages/EmailVerifiedPage/index.jsx rename to src/pages/EmailVerified/index.jsx index e98c75d..b4bebb7 100644 --- a/src/pages/EmailVerifiedPage/index.jsx +++ b/src/pages/EmailVerified/index.jsx @@ -1,17 +1,17 @@ import axios from 'axios'; import React, { useEffect } from 'react'; -import Layout from 'src/components/Layout'; +import Page from 'src/components/Page'; import { baseUrl } from '../../utils/constants'; -const Page = () => { +const EmailVerifiedPage = () => { useEffect(() => { axios.get(baseUrl + window.location.pathname.replaceAll(':','.')); }, []); return (
- your Email verified + your Email verified
); }; -export default Page; +export default EmailVerifiedPage; diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx new file mode 100644 index 0000000..625a2bd --- /dev/null +++ b/src/pages/Home/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Page from 'src/components/Page'; +import AnimatedLogo from 'src/components/AnimatedLogo'; +import { LinksParticles } from 'src/components/ParticlesEffects'; + +import './style.scss'; + +const HomePage = () => { + return ( + +
+
+ +
+
+
+ {' '} + +
+
+
+
+ + ); +}; +export default HomePage; diff --git a/src/pages/HomePage/style.scss b/src/pages/Home/style.scss similarity index 66% rename from src/pages/HomePage/style.scss rename to src/pages/Home/style.scss index 6fe1950..896f937 100644 --- a/src/pages/HomePage/style.scss +++ b/src/pages/Home/style.scss @@ -9,6 +9,15 @@ justify-content: center; align-items: center; } + &__bg{ + position: fixed; + top:0; + left: 0; + background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 25, 78, 1) 43%, rgba(0, 54, 139, 1) 100%); + width: 100%; + height: 100%; + z-index: 0; + } } .animated-logo-container { diff --git a/src/pages/HomePage/index.jsx b/src/pages/HomePage/index.jsx deleted file mode 100644 index c613e3c..0000000 --- a/src/pages/HomePage/index.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useCallback } from 'react'; -import { Link } from 'react-router-dom'; -import Layout from 'src/components/Layout'; -import AnimatedLogo from 'src/components/AnimatedLogo'; -import { LinksParticles } from 'src/components/ParticlesEffects'; - -import './style.scss'; - -const HomePage = () => { - return ( -
- -
- -
-
-
- {' '} - -
-
-
-
- -
- ); -}; -export default HomePage; diff --git a/src/pages/NotFoundPage/index.jsx b/src/pages/NotFound/index.jsx similarity index 100% rename from src/pages/NotFoundPage/index.jsx rename to src/pages/NotFound/index.jsx diff --git a/src/routes/AppRouter.jsx b/src/routes/AppRouter.jsx index 73e3926..5023774 100644 --- a/src/routes/AppRouter.jsx +++ b/src/routes/AppRouter.jsx @@ -1,78 +1,57 @@ -import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; +import { Navigate, useRoutes, Outlet } from 'react-router-dom'; import useAuth from '../context/AuthContext'; -import HomePage from 'src/pages/HomePage'; -import NotFoundPage from 'src/pages/NotFoundPage'; -import ContentPage from 'src/pages/ContentPage'; -import AddContentPage from 'src/pages/AddContentPage'; - -import LoginRegisterPage from 'src/pages/LoginRegisterPage'; -import EmailVerifiedPage from 'src/pages/EmailVerifiedPage'; - -import DashboardPage from 'src/pages/DashboardPage'; - -const AppRouter = () => { - return ( - - - } /> - } /> - } /> - } /> - - - - } - /> - - - - } - /> - - - - } - /> - - {' '} - - - } - /> - - } /> - - - ); -}; - -const AnonymousRoute = ({ children }) => { +// layouts +import MainLayout from 'src/layouts/Main'; + +import HomePage from 'src/pages/Home'; +import NotFoundPage from 'src/pages/NotFound'; + +import ContentPage from 'src/pages/Content'; +import AddContentPage from 'src/pages/AddContent'; + +import BookPage from 'src/pages/Book'; +import EmailVerifiedPage from 'src/pages/EmailVerified'; + + +export default function AppRouter() { + return useRoutes([ + { + path: '/', + element: , + children: [ + { path: '/', element: }, + { path: 'contents/demo', element: }, + { path: 'contents/new', element: }, + { path: 'contents/mock', element: }, + { path: '404', element: }, + { + path: '/', + element: , + children: [ + { path: 'login', element: }, + { path: 'register', element: }, + { path: '/accounts/confirm-email/:token', element: }, + ], + }, + ], + }, + { path: '*', element: }, + ]); +} + +const AnonymousRoute = () => { const { isLoggedIn } = useAuth(); if (isLoggedIn) { return ; } - return children; + return ; }; -const UserRoute = ({ children }) => { +const UserRoute = () => { const { isLoggedIn } = useAuth(); if (!isLoggedIn) { return ; } - return children; + return ; }; - -export default AppRouter; From 4b243b6432e67139bcd3c32a6819df8d0eeed4c2 Mon Sep 17 00:00:00 2001 From: darkido Date: Tue, 30 Aug 2022 12:35:57 +0430 Subject: [PATCH 3/5] [fix]: override mui theme --- src/main.jsx | 5 +- src/theme/index.jsx | 41 +++++++++ src/theme/main.scss | 7 +- src/theme/overrides/Autocomplete.jsx | 13 +++ src/theme/overrides/Backdrop.jsx | 26 ++++++ src/theme/overrides/Button.jsx | 42 +++++++++ src/theme/overrides/Card.jsx | 34 +++++++ src/theme/overrides/CssBaseline.jsx | 23 +++++ src/theme/overrides/IconButton.jsx | 22 +++++ src/theme/overrides/Input.jsx | 65 +++++++++++++ src/theme/overrides/Lists.jsx | 35 +++++++ src/theme/overrides/Paper.jsx | 17 ++++ src/theme/overrides/Tooltip.jsx | 16 ++++ src/theme/overrides/Typography.jsx | 16 ++++ src/theme/overrides/index.jsx | 27 ++++++ src/theme/palette.jsx | 127 ++++++++++++++++++++++++++ src/theme/settings.scss | 1 - src/theme/shadows.jsx | 65 +++++++++++++ src/theme/{ => styles}/colors.scss | 0 src/theme/{ => styles}/css_colors.css | 0 src/theme/{ => styles}/fonts.scss | 0 src/theme/theme.js | 11 --- src/theme/typography.jsx | 101 ++++++++++++++++++++ 23 files changed, 675 insertions(+), 19 deletions(-) create mode 100644 src/theme/index.jsx create mode 100644 src/theme/overrides/Autocomplete.jsx create mode 100644 src/theme/overrides/Backdrop.jsx create mode 100644 src/theme/overrides/Button.jsx create mode 100644 src/theme/overrides/Card.jsx create mode 100644 src/theme/overrides/CssBaseline.jsx create mode 100644 src/theme/overrides/IconButton.jsx create mode 100644 src/theme/overrides/Input.jsx create mode 100644 src/theme/overrides/Lists.jsx create mode 100644 src/theme/overrides/Paper.jsx create mode 100644 src/theme/overrides/Tooltip.jsx create mode 100644 src/theme/overrides/Typography.jsx create mode 100644 src/theme/overrides/index.jsx create mode 100644 src/theme/palette.jsx delete mode 100644 src/theme/settings.scss create mode 100644 src/theme/shadows.jsx rename src/theme/{ => styles}/colors.scss (100%) rename src/theme/{ => styles}/css_colors.css (100%) rename src/theme/{ => styles}/fonts.scss (100%) delete mode 100644 src/theme/theme.js create mode 100644 src/theme/typography.jsx diff --git a/src/main.jsx b/src/main.jsx index 4cc142c..b5c55a2 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,11 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { ThemeProvider } from '@emotion/react'; +import ThemeProvider from './theme'; import { BrowserRouter } from 'react-router-dom'; import { QueryClient, QueryClientProvider } from 'react-query'; import { Toaster } from 'react-hot-toast'; import AppRouter from './routes/AppRouter'; -import theme from './theme/theme'; import { AuthProvider } from './context/AuthContext'; import './theme/main.scss'; @@ -16,7 +15,7 @@ ReactDOM.render( - + diff --git a/src/theme/index.jsx b/src/theme/index.jsx new file mode 100644 index 0000000..54084d0 --- /dev/null +++ b/src/theme/index.jsx @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import { useMemo } from 'react'; +// material +import { CssBaseline } from '@mui/material'; +import { ThemeProvider as MUIThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles'; +// +import palette from './palette'; +import typography from './typography'; +import componentsOverride from './overrides'; +import shadows, { customShadows } from './shadows'; + +// ---------------------------------------------------------------------- + +ThemeProvider.propTypes = { + children: PropTypes.node, +}; + +export default function ThemeProvider({ children }) { + const themeOptions = useMemo( + () => ({ + palette, + shape: { borderRadius: 8 }, + typography, + shadows, + customShadows, + }), + [] + ); + + const theme = createTheme(themeOptions); + theme.components = componentsOverride(theme); + + return ( + + + + {children} + + + ); +} diff --git a/src/theme/main.scss b/src/theme/main.scss index 594f5e6..3c63db3 100644 --- a/src/theme/main.scss +++ b/src/theme/main.scss @@ -1,7 +1,6 @@ -@import './colors.scss'; -@import './css_colors'; -@import './settings.scss'; -@import './fonts.scss'; +@import './styles/colors.scss'; +@import './styles/css_colors'; +@import './styles/fonts.scss'; // reset common styles * { diff --git a/src/theme/overrides/Autocomplete.jsx b/src/theme/overrides/Autocomplete.jsx new file mode 100644 index 0000000..0a2db49 --- /dev/null +++ b/src/theme/overrides/Autocomplete.jsx @@ -0,0 +1,13 @@ +// ---------------------------------------------------------------------- + +export default function Autocomplete(theme) { + return { + MuiAutocomplete: { + styleOverrides: { + paper: { + boxShadow: theme.customShadows.z20, + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Backdrop.jsx b/src/theme/overrides/Backdrop.jsx new file mode 100644 index 0000000..4ce3278 --- /dev/null +++ b/src/theme/overrides/Backdrop.jsx @@ -0,0 +1,26 @@ +import { alpha } from '@mui/material/styles'; + +// ---------------------------------------------------------------------- + +export default function Backdrop(theme) { + const varLow = alpha(theme.palette.grey[900], 0.48); + const varHigh = alpha(theme.palette.grey[900], 1); + + return { + MuiBackdrop: { + styleOverrides: { + root: { + background: [ + `rgb(22,28,36)`, + `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`, + `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`, + `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`, + ], + '&.MuiBackdrop-invisible': { + background: 'transparent', + }, + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Button.jsx b/src/theme/overrides/Button.jsx new file mode 100644 index 0000000..0f72b7a --- /dev/null +++ b/src/theme/overrides/Button.jsx @@ -0,0 +1,42 @@ +// ---------------------------------------------------------------------- + +export default function Button(theme) { + return { + MuiButton: { + styleOverrides: { + root: { + '&:hover': { + boxShadow: 'none', + }, + }, + sizeLarge: { + height: 48, + }, + containedInherit: { + color: theme.palette.grey[800], + boxShadow: theme.customShadows.z8, + '&:hover': { + backgroundColor: theme.palette.grey[400], + }, + }, + containedPrimary: { + boxShadow: theme.customShadows.primary, + }, + containedSecondary: { + boxShadow: theme.customShadows.secondary, + }, + outlinedInherit: { + border: `1px solid ${theme.palette.grey[500_32]}`, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + }, + textInherit: { + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Card.jsx b/src/theme/overrides/Card.jsx new file mode 100644 index 0000000..12b2465 --- /dev/null +++ b/src/theme/overrides/Card.jsx @@ -0,0 +1,34 @@ +// ---------------------------------------------------------------------- + +export default function Card(theme) { + return { + MuiCard: { + styleOverrides: { + root: { + boxShadow: theme.shadows[2], + borderRadius: Number(theme.shape.borderRadius) * 2, + position: 'relative', + zIndex: 0, // Fix Safari overflow: hidden with border radius + }, + }, + }, + MuiCardHeader: { + defaultProps: { + titleTypographyProps: { variant: 'h6' }, + subheaderTypographyProps: { variant: 'body2' }, + }, + styleOverrides: { + root: { + padding: theme.spacing(3, 3, 0), + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: theme.spacing(3), + }, + }, + }, + }; +} diff --git a/src/theme/overrides/CssBaseline.jsx b/src/theme/overrides/CssBaseline.jsx new file mode 100644 index 0000000..2840f9c --- /dev/null +++ b/src/theme/overrides/CssBaseline.jsx @@ -0,0 +1,23 @@ +// ---------------------------------------------------------------------- + +export default function CssBaseline() { + return { + MuiCssBaseline: { + styleOverrides: { + input: { + '&[type=number]': { + MozAppearance: 'textfield', + '&::-webkit-outer-spin-button': { + margin: 0, + WebkitAppearance: 'none', + }, + '&::-webkit-inner-spin-button': { + margin: 0, + WebkitAppearance: 'none', + }, + }, + } + }, + }, + }; +} diff --git a/src/theme/overrides/IconButton.jsx b/src/theme/overrides/IconButton.jsx new file mode 100644 index 0000000..2a78cc2 --- /dev/null +++ b/src/theme/overrides/IconButton.jsx @@ -0,0 +1,22 @@ +// ---------------------------------------------------------------------- + +export default function IconButton(theme) { + return { + MuiIconButton: { + variants: [ + { + props: { color: 'default' }, + style: { + '&:hover': { backgroundColor: theme.palette.action.hover }, + }, + }, + { + props: { color: 'inherit' }, + style: { + '&:hover': { backgroundColor: theme.palette.action.hover }, + }, + }, + ], + }, + }; +} diff --git a/src/theme/overrides/Input.jsx b/src/theme/overrides/Input.jsx new file mode 100644 index 0000000..b407608 --- /dev/null +++ b/src/theme/overrides/Input.jsx @@ -0,0 +1,65 @@ +// ---------------------------------------------------------------------- + +export default function Input(theme) { + return { + MuiInputBase: { + styleOverrides: { + root: { + '&.Mui-disabled': { + '& svg': { color: theme.palette.text.disabled }, + }, + }, + input: { + '&::placeholder': { + opacity: 1, + color: theme.palette.text.disabled, + }, + }, + }, + }, + MuiInput: { + styleOverrides: { + underline: { + '&:before': { + borderBottomColor: theme.palette.grey[500_56], + }, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + backgroundColor: theme.palette.grey[500_12], + '&:hover': { + backgroundColor: theme.palette.grey[500_16], + }, + '&.Mui-focused': { + backgroundColor: theme.palette.action.focus, + }, + '&.Mui-disabled': { + backgroundColor: theme.palette.action.disabledBackground, + }, + }, + underline: { + '&:before': { + borderBottomColor: theme.palette.grey[500_56], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + '& .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.grey[500_32], + }, + '&.Mui-disabled': { + '& .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.action.disabledBackground, + }, + }, + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Lists.jsx b/src/theme/overrides/Lists.jsx new file mode 100644 index 0000000..2ef1abc --- /dev/null +++ b/src/theme/overrides/Lists.jsx @@ -0,0 +1,35 @@ +// ---------------------------------------------------------------------- + +export default function Lists(theme) { + return { + MuiListItemIcon: { + styleOverrides: { + root: { + color: 'inherit', + minWidth: 'auto', + marginRight: theme.spacing(2), + }, + }, + }, + MuiListItemAvatar: { + styleOverrides: { + root: { + minWidth: 'auto', + marginRight: theme.spacing(2), + }, + }, + }, + MuiListItemText: { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + multiline: { + marginTop: 0, + marginBottom: 0, + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Paper.jsx b/src/theme/overrides/Paper.jsx new file mode 100644 index 0000000..333d837 --- /dev/null +++ b/src/theme/overrides/Paper.jsx @@ -0,0 +1,17 @@ +// ---------------------------------------------------------------------- + +export default function Paper() { + return { + MuiPaper: { + defaultProps: { + elevation: 0, + }, + + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Tooltip.jsx b/src/theme/overrides/Tooltip.jsx new file mode 100644 index 0000000..c93a93c --- /dev/null +++ b/src/theme/overrides/Tooltip.jsx @@ -0,0 +1,16 @@ +// ---------------------------------------------------------------------- + +export default function Tooltip(theme) { + return { + MuiTooltip: { + styleOverrides: { + tooltip: { + backgroundColor: theme.palette.grey[800], + }, + arrow: { + color: theme.palette.grey[800], + }, + }, + }, + }; +} diff --git a/src/theme/overrides/Typography.jsx b/src/theme/overrides/Typography.jsx new file mode 100644 index 0000000..9ed4205 --- /dev/null +++ b/src/theme/overrides/Typography.jsx @@ -0,0 +1,16 @@ +// ---------------------------------------------------------------------- + +export default function Typography(theme) { + return { + MuiTypography: { + styleOverrides: { + paragraph: { + marginBottom: theme.spacing(2), + }, + gutterBottom: { + marginBottom: theme.spacing(1), + }, + }, + }, + }; +} diff --git a/src/theme/overrides/index.jsx b/src/theme/overrides/index.jsx new file mode 100644 index 0000000..16f3b03 --- /dev/null +++ b/src/theme/overrides/index.jsx @@ -0,0 +1,27 @@ +// + +import Card from './Card'; +import Paper from './Paper'; +import Input from './Input'; +import Button from './Button'; +import Tooltip from './Tooltip'; +import Backdrop from './Backdrop'; +import Typography from './Typography'; +import CssBaseline from './CssBaseline'; +import Autocomplete from './Autocomplete'; + +// ---------------------------------------------------------------------- + +export default function ComponentsOverrides(theme) { + return Object.assign( + Card(theme), + Input(theme), + Paper(theme), + Button(theme), + Tooltip(theme), + Backdrop(theme), + Typography(theme), + CssBaseline(theme), + Autocomplete(theme) + ); +} diff --git a/src/theme/palette.jsx b/src/theme/palette.jsx new file mode 100644 index 0000000..d13158a --- /dev/null +++ b/src/theme/palette.jsx @@ -0,0 +1,127 @@ +import { alpha } from '@mui/material/styles'; + +// ---------------------------------------------------------------------- + +function createGradient(color1, color2) { + return `linear-gradient(to bottom, ${color1}, ${color2})`; +} + +// SETUP COLORS +const GREY = { + 0: '#FFFFFF', + 100: '#F9FAFB', + 200: '#F4F6F8', + 300: '#DFE3E8', + 400: '#C4CDD5', + 500: '#919EAB', + 600: '#637381', + 700: '#454F5B', + 800: '#212B36', + 900: '#161C24', + 500_8: alpha('#919EAB', 0.08), + 500_12: alpha('#919EAB', 0.12), + 500_16: alpha('#919EAB', 0.16), + 500_24: alpha('#919EAB', 0.24), + 500_32: alpha('#919EAB', 0.32), + 500_48: alpha('#919EAB', 0.48), + 500_56: alpha('#919EAB', 0.56), + 500_80: alpha('#919EAB', 0.8), +}; + +const PRIMARY = { + lighter: '#D1E9FC', + light: '#76B0F1', + main: '#2065D1', + dark: '#103996', + darker: '#061B64', + contrastText: '#fff', +}; + +const SECONDARY = { + lighter: '#D6E4FF', + light: '#84A9FF', + main: '#3366FF', + dark: '#1939B7', + darker: '#091A7A', + contrastText: '#fff', +}; + +const INFO = { + lighter: '#D0F2FF', + light: '#74CAFF', + main: '#1890FF', + dark: '#0C53B7', + darker: '#04297A', + contrastText: '#fff', +}; + +const SUCCESS = { + lighter: '#E9FCD4', + light: '#AAF27F', + main: '#54D62C', + dark: '#229A16', + darker: '#08660D', + contrastText: GREY[800], +}; + +const WARNING = { + lighter: '#FFF7CD', + light: '#FFE16A', + main: '#FFC107', + dark: '#B78103', + darker: '#7A4F01', + contrastText: GREY[800], +}; + +const ERROR = { + lighter: '#FFE7D9', + light: '#FFA48D', + main: '#FF4842', + dark: '#B72136', + darker: '#7A0C2E', + contrastText: '#fff', +}; + +const GRADIENTS = { + primary: createGradient(PRIMARY.light, PRIMARY.main), + info: createGradient(INFO.light, INFO.main), + success: createGradient(SUCCESS.light, SUCCESS.main), + warning: createGradient(WARNING.light, WARNING.main), + error: createGradient(ERROR.light, ERROR.main), +}; + +const CHART_COLORS = { + violet: ['#826AF9', '#9E86FF', '#D0AEFF', '#F7D2FF'], + blue: ['#2D99FF', '#83CFFF', '#A5F3FF', '#CCFAFF'], + green: ['#2CD9C5', '#60F1C8', '#A4F7CC', '#C0F2DC'], + yellow: ['#FFE700', '#FFEF5A', '#FFF7AE', '#FFF3D6'], + red: ['#FF6C40', '#FF8F6D', '#FFBD98', '#FFF2D4'], +}; + +const palette = { + common: { black: '#000', white: '#fff' }, + primary: { ...PRIMARY }, + secondary: { ...SECONDARY }, + info: { ...INFO }, + success: { ...SUCCESS }, + warning: { ...WARNING }, + error: { ...ERROR }, + grey: GREY, + gradients: GRADIENTS, + chart: CHART_COLORS, + divider: GREY[500_24], + text: { primary: GREY[800], secondary: GREY[600], disabled: GREY[500] }, + background: { paper: '#fff', default: GREY[100], neutral: GREY[200] }, + action: { + active: GREY[600], + hover: GREY[500_8], + selected: GREY[500_16], + disabled: GREY[500_80], + disabledBackground: GREY[500_24], + focus: GREY[500_24], + hoverOpacity: 0.08, + disabledOpacity: 0.48, + }, +}; + +export default palette; diff --git a/src/theme/settings.scss b/src/theme/settings.scss deleted file mode 100644 index b366eee..0000000 --- a/src/theme/settings.scss +++ /dev/null @@ -1 +0,0 @@ -$mobile-breakpoint: 768px; diff --git a/src/theme/shadows.jsx b/src/theme/shadows.jsx new file mode 100644 index 0000000..24686a7 --- /dev/null +++ b/src/theme/shadows.jsx @@ -0,0 +1,65 @@ +// material +import { alpha } from '@mui/material/styles'; +import palette from './palette'; + +// ---------------------------------------------------------------------- + +const LIGHT_MODE = palette.grey[500]; + +const createShadow = (color) => { + const transparent1 = alpha(color, 0.2); + const transparent2 = alpha(color, 0.14); + const transparent3 = alpha(color, 0.12); + return [ + 'none', + `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`, + `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`, + `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`, + `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`, + `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`, + `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`, + `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`, + `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`, + `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`, + `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`, + `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`, + `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`, + `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`, + `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`, + `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`, + `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`, + `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`, + `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`, + `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`, + `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`, + `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`, + `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`, + `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`, + `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`, + ]; +}; + +const createCustomShadow = (color) => { + const transparent = alpha(color, 0.24); + + return { + z1: `0 1px 2px 0 ${transparent}`, + z8: `0 8px 16px 0 ${transparent}`, + z12: `0 0 2px 0 ${transparent}, 0 12px 24px 0 ${transparent}`, + z16: `0 0 2px 0 ${transparent}, 0 16px 32px -4px ${transparent}`, + z20: `0 0 2px 0 ${transparent}, 0 20px 40px -4px ${transparent}`, + z24: `0 0 4px 0 ${transparent}, 0 24px 48px 0 ${transparent}`, + primary: `0 8px 16px 0 ${alpha(palette.primary.main, 0.24)}`, + secondary: `0 8px 16px 0 ${alpha(palette.secondary.main, 0.24)}`, + info: `0 8px 16px 0 ${alpha(palette.info.main, 0.24)}`, + success: `0 8px 16px 0 ${alpha(palette.success.main, 0.24)}`, + warning: `0 8px 16px 0 ${alpha(palette.warning.main, 0.24)}`, + error: `0 8px 16px 0 ${alpha(palette.error.main, 0.24)}`, + }; +}; + +export const customShadows = createCustomShadow(LIGHT_MODE); + +const shadows = createShadow(LIGHT_MODE); + +export default shadows; diff --git a/src/theme/colors.scss b/src/theme/styles/colors.scss similarity index 100% rename from src/theme/colors.scss rename to src/theme/styles/colors.scss diff --git a/src/theme/css_colors.css b/src/theme/styles/css_colors.css similarity index 100% rename from src/theme/css_colors.css rename to src/theme/styles/css_colors.css diff --git a/src/theme/fonts.scss b/src/theme/styles/fonts.scss similarity index 100% rename from src/theme/fonts.scss rename to src/theme/styles/fonts.scss diff --git a/src/theme/theme.js b/src/theme/theme.js deleted file mode 100644 index eac0f70..0000000 --- a/src/theme/theme.js +++ /dev/null @@ -1,11 +0,0 @@ -import { createTheme, responsiveFontSizes } from '@mui/material/styles'; - -export default responsiveFontSizes( - createTheme({ - typography: { - button: { - textTransform: 'none' - } - } - }) -); diff --git a/src/theme/typography.jsx b/src/theme/typography.jsx new file mode 100644 index 0000000..4abab97 --- /dev/null +++ b/src/theme/typography.jsx @@ -0,0 +1,101 @@ +// ---------------------------------------------------------------------- + +function pxToRem(value) { + return `${value / 16}rem`; +} + +function responsiveFontSizes({ sm, md, lg }) { + return { + '@media (min-width:600px)': { + fontSize: pxToRem(sm), + }, + '@media (min-width:900px)': { + fontSize: pxToRem(md), + }, + '@media (min-width:1200px)': { + fontSize: pxToRem(lg), + }, + }; +} + +const FONT_PRIMARY = 'Public Sans, sans-serif'; + +const typography = { + fontFamily: FONT_PRIMARY, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + h1: { + fontWeight: 700, + lineHeight: 80 / 64, + fontSize: pxToRem(40), + ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }), + }, + h2: { + fontWeight: 700, + lineHeight: 64 / 48, + fontSize: pxToRem(32), + ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }), + }, + h3: { + fontWeight: 700, + lineHeight: 1.5, + fontSize: pxToRem(24), + ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }), + }, + h4: { + fontWeight: 700, + lineHeight: 1.5, + fontSize: pxToRem(20), + ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }), + }, + h5: { + fontWeight: 700, + lineHeight: 1.5, + fontSize: pxToRem(18), + ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }), + }, + h6: { + fontWeight: 700, + lineHeight: 28 / 18, + fontSize: pxToRem(17), + ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }), + }, + subtitle1: { + fontWeight: 600, + lineHeight: 1.5, + fontSize: pxToRem(16), + }, + subtitle2: { + fontWeight: 600, + lineHeight: 22 / 14, + fontSize: pxToRem(14), + }, + body1: { + lineHeight: 1.5, + fontSize: pxToRem(16), + }, + body2: { + lineHeight: 22 / 14, + fontSize: pxToRem(14), + }, + caption: { + lineHeight: 1.5, + fontSize: pxToRem(12), + }, + overline: { + fontWeight: 700, + lineHeight: 1.5, + fontSize: pxToRem(12), + letterSpacing: 1.1, + textTransform: 'uppercase', + }, + button: { + fontWeight: 700, + lineHeight: 24 / 14, + fontSize: pxToRem(14), + textTransform: 'capitalize', + }, +}; + +export default typography; From 4ed31d82b28430912e04d9ce84324ab0c8df1e2f Mon Sep 17 00:00:00 2001 From: darkido Date: Tue, 30 Aug 2022 13:13:04 +0430 Subject: [PATCH 4/5] [fix]: make book zoomable only in sm display --- src/hooks/useResponsive.js | 34 ++++++++++++++++++++++ src/pages/Book/index.jsx | 59 ++++++++++++++++++++++---------------- 2 files changed, 69 insertions(+), 24 deletions(-) create mode 100644 src/hooks/useResponsive.js diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.js new file mode 100644 index 0000000..7da041b --- /dev/null +++ b/src/hooks/useResponsive.js @@ -0,0 +1,34 @@ +// @mui +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; + +// ---------------------------------------------------------------------- + +export default function useResponsive(query, key, start, end) { + const theme = useTheme(); + + const mediaUp = useMediaQuery(theme.breakpoints.up(key)); + + const mediaDown = useMediaQuery(theme.breakpoints.down(key)); + + const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end)); + + const mediaOnly = useMediaQuery(theme.breakpoints.only(key)); + + if (query === 'up') { + return mediaUp; + } + + if (query === 'down') { + return mediaDown; + } + + if (query === 'between') { + return mediaBetween; + } + + if (query === 'only') { + return mediaOnly; + } + return null; +} diff --git a/src/pages/Book/index.jsx b/src/pages/Book/index.jsx index 39e3ee6..738e757 100644 --- a/src/pages/Book/index.jsx +++ b/src/pages/Book/index.jsx @@ -5,15 +5,46 @@ import { LoginForm, RegisterForm } from 'src/components/Forms'; import Page from 'src/components/Page'; import BeastImg from 'src/assets/beast.jpg'; import './style.scss'; +import useResponsive from 'src/hooks/useResponsive'; + const BookPage = () => { const location = useLocation(); const [bookPage, setBookPage] = useState(''); + const isMobile = useResponsive('down', 'sm'); useEffect(() => { if (location.pathname == '/register') setBookPage('next-page'); else if (location.pathname == '/login') setBookPage(''); }, [location]); + + const renderContent = ( +
+
+ + + + +
+
+
+ +
+
+
+
page 3
+
+
+
+
+ ); return ( + {isMobile ? ( { viewPort.setBounds({ @@ -22,31 +53,11 @@ const BookPage = () => { }); }} > -
-
- - - - -
-
-
- -
-
-
-
page 3
-
-
-
-
+ {renderContent} + ) : ( + <>{renderContent} + )} ); }; From e0cd2c01946366ca59cf38b98fae40a0e444774c Mon Sep 17 00:00:00 2001 From: darkido Date: Sat, 22 Oct 2022 23:35:31 +0330 Subject: [PATCH 5/5] [chore]: setup cd --- .github/workflows/cd.yml | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .github/workflows/cd.yml diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml new file mode 100644 index 0000000..3ba32c4 --- /dev/null +++ b/.github/workflows/cd.yml @@ -0,0 +1,27 @@ +name: Build Project + +on: + push: + branches: [ develop ] +jobs: + build: + runs-on: ubuntu-latest + name: Build and Push + steps: + - name: git-checkout + uses: actions/checkout@v2 + + - name: Install all dependencies + run: npm install --force + + - name: Build + run: npm run build + + - name: Push + uses: s0/git-publish-subdir-action@develop + env: + REPO: self + BRANCH: deploy + FOLDER: dist + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + MESSAGE: "Build: ({sha}) {msg}" \ No newline at end of file