diff --git a/frontend/src/components/SwitchDashboard/CheckboxInput.jsx b/frontend/src/components/SwitchDashboard/CheckboxInput.jsx new file mode 100644 index 00000000..1965affb --- /dev/null +++ b/frontend/src/components/SwitchDashboard/CheckboxInput.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import './switch.css'; + +export default function CheckboxInput() { + return ( +
+ + + + + + +
+ ); +} diff --git a/frontend/src/components/SwitchDashboard/switch.css b/frontend/src/components/SwitchDashboard/switch.css new file mode 100644 index 00000000..2352ec44 --- /dev/null +++ b/frontend/src/components/SwitchDashboard/switch.css @@ -0,0 +1,109 @@ +.big-input { + width: 419px; + height: 66px; + background: #F3F4F5; + border: 1px solid #CFCFCF; + border-radius: 8px; + outline: none; + margin-left: 30px; +} + +.big-input::placeholder { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #4E4E4E; + text-indent: 10px; +} + +.switch { + position: relative; + left: -100px; + top: 18px; + z-index: 999; +} + +input { + -webkit-appearance: none; + position: relative; + width: 88px; + height: 43.17px; + border-radius: 25px; + background-color: #ccc; + transition: background .3s; + outline: none; + cursor: pointer; +} + +input::after { + content: ''; + position: absolute; + top: 50%; + left: 30%; + transform: translate(-50%, -50%); + border-radius: 50%; + width: 28.23px; + height: 29.89px; + background-color: rgb(255, 255, 255); + transition: left .3s; +} + +input:checked { + background-color: #1570EF; +} + +input:checked::after { + left: 75%; +} + +@media screen and (min-width: 375px) and (max-width: 412px) { + .big-input { + position: relative; + height: 45px; + width: 315px; + background: #F3F4F5; + border: 1px solid #CFCFCF; + border-radius: 8px; + outline: none; + margin-top: -20px; + margin-bottom: -30px; + } + + .return-notification h2 { + font-family: 'Lexend'; + font-style: normal; + font-weight: 900; + font-size: 20px; + line-height: 136.02%; + color: #101828; + } + + .return-notification span { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #4E4E4E; + } + + .big-input::placeholder { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #4E4E4E; + text-indent: 10px; + } + .switch { + position: relative; + left: 255px; + top: -26px; + z-index: 999; + width: 80px; + height: 35px; + } +} diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 9f196159..2629f87d 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -15,6 +15,7 @@ import Pricing from './pages/Pricing'; import PrivacyAndHelp from './pages/PrivacyAndHelp'; import Resources from './pages/Resources'; import UploadAccountsStatementReady from './pages/UploadAccountsStatementReady'; +import NotificationsPage from './pages/NotificationsPage/NotificationsPage'; import UploadData from './pages/UploadData'; import UploadedAccountStatementReady from './pages/UploadedAccountStatementReady'; import UpoadingSalesRecord from './pages/UpoadingSalesRecord'; @@ -118,13 +119,17 @@ const router = createBrowserRouter([ path: '/userupload', element: , }, + { + path: '/notification', + element: , + }, ]); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + + + ); // If you want to start measuring performance in your app, pass a function diff --git a/frontend/src/pages/NotificationsPage/NotificationsPage.jsx b/frontend/src/pages/NotificationsPage/NotificationsPage.jsx new file mode 100644 index 00000000..a2c16103 --- /dev/null +++ b/frontend/src/pages/NotificationsPage/NotificationsPage.jsx @@ -0,0 +1,33 @@ +import React from 'react' +import CheckboxInput from '../../components/SwitchDashboard/CheckboxInput' + +export default function NotificationsPage() { + return ( +
+ {/* Returns Notifications */} +
+
+

Return Notifications

+
+ Notify me when a return is: +
+
+ +

Get real time notification on every return transaction happening in your account by choosing your preferred settings here.

+
+
+ {/* Security Notifications */} +
+
+

Security Notifications

+
+ Notify me when there is a: +
+
+ +

Get real time notification on every return transaction happening in your account by choosing your preferred settings here.

+
+
+
+ ) +} diff --git a/frontend/src/pages/NotificationsPage/notification.css b/frontend/src/pages/NotificationsPage/notification.css new file mode 100644 index 00000000..c6296303 --- /dev/null +++ b/frontend/src/pages/NotificationsPage/notification.css @@ -0,0 +1,95 @@ +.notifications-container { + width: 970px; + height: 724px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.return-notification { + margin: 50px 25px; +} + +hr { + width: 860px; + margin: 10px 0 10px 30px; +} + +.notify { + display: flex; + gap: 10px; +} + +.heading { + margin-bottom: 20px; +} + +.heading h2 { + font-family: 'Lexend'; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 136.02%; + color: #101828; + margin-left: 30px; +} + +.heading span { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #4E4E4E; + margin-left: 30px; +} + +.notify p { + font-family: 'Lexend'; + font-style: normal; + font-weight: 500; + font-size: 20px; + line-height: 136.52%; + color: #667085; +} + +@media screen and (min-width: 375px) and (max-width: 412px) { + .notifications-container { + max-width: 376px; + margin: 20px -12px; + } + body { + overflow: hidden; + } + + hr { + width: 300px; + } + + .notify p { + display: none; + } + + .heading span { + margin-bottom: 15px; + } + + .return-notification h2 { + font-family: 'Lexend'; + font-style: normal; + font-weight: 900; + font-size: 20px; + line-height: 136.02%; + color: #101828; + } + + .return-notification span { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #4E4E4E; + } +} \ No newline at end of file