diff --git a/package-lock.json b/package-lock.json index f957433..80f8c35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,12 +17,14 @@ "buffer": "6.0.3", "jssha": "3.3.1", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-countdown-circle-timer": "^3.2.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3" }, "devDependencies": { "@types/react": "^18.2.64", + "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.21", "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", @@ -1697,6 +1699,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-copy-to-clipboard": { + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz", + "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-dom": { "version": "18.2.22", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz", @@ -2219,6 +2230,14 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/copy-to-clipboard": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -3522,6 +3541,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-copy-to-clipboard": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", + "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==", + "dependencies": { + "copy-to-clipboard": "^3.3.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^15.3.0 || 16 || 17 || 18" + } + }, "node_modules/react-countdown-circle-timer": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.2.1.tgz", @@ -3861,6 +3892,11 @@ "node": ">=8.0" } }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", diff --git a/package.json b/package.json index 9e621bd..267f046 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,14 @@ "buffer": "6.0.3", "jssha": "3.3.1", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-countdown-circle-timer": "^3.2.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3" }, "devDependencies": { "@types/react": "^18.2.64", + "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.21", "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", diff --git a/src/App-styles.ts b/src/App-styles.ts new file mode 100644 index 0000000..fa4a0eb --- /dev/null +++ b/src/App-styles.ts @@ -0,0 +1,178 @@ +import { + AppBar, + Button, + Toolbar, + Typography, + Box, + TextField, + InputLabel, +} from "@mui/material"; +import { styled } from "@mui/system"; + +export const AppContainer = styled(Box)(({ theme }) => ({ + display: "flex", + alignItems: "center", + flexDirection: 'column', + width: "100vw", + background: "rgba(39, 40, 44, 1)", + height: "100vh", + radius: "15px" +})); +export const AuthenticatedContainer = styled(Box)(({ theme }) => ({ + display: "flex", + width: "100%", + height: "100%", + justifyContent: "space-between" +})); +export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({ + display: "flex", + alignItems: "center", + flexDirection: 'column', + height: "100%", + width: "100%" +})); +export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({ + display: "flex", + alignItems: "center", + flexDirection: 'column', + width: "60px", + height: "100%", + background: "rgba(0, 0, 0, 0.1)" + +})); + +export const TextP = styled(Typography)(({ theme }) => ({ + fontSize: "13px", + fontWeight: 600, + fontFamily: "Inter", + color: "white" +})); + +export const TextItalic = styled("span")(({ theme }) => ({ + fontSize: "13px", + fontWeight: 600, + fontFamily: "Inter", + color: "white", + fontStyle: "italic" +})); + +export const TextSpan = styled("span")(({ theme }) => ({ + fontSize: "13px", + fontFamily: "Inter", + fontWeight: 800, + color: "white" +})); + +export const AddressBox = styled(Box)` +display: flex; +border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); +justify-content: space-between; +align-items: center; +width: 132px; +height: 25px; +padding: 5px 15px 5px 15px; +gap: 5px; +border-radius: 100px; +font-family: Inter; +font-size: 12px; +font-weight: 600; +line-height: 14.52px; +text-align: left; +color: var(--50-white, rgba(255, 255, 255, 0.5)); +cursor: pointer; +transition: all 0.2s; +&:hover { + background-color: rgba(41, 41, 43, 1); + color: white; + svg path { + fill: white; // Fill color changes to white on hover + } + } + +` + +export const CustomButton = styled(Box)` + +/* Authenticate */ + +box-sizing: border-box; + +padding: 15px 20px; +gap: 10px; + + +border: 0.5px solid rgba(255, 255, 255, 0.5); +filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3)); +border-radius: 5px; + + display: inline-flex; + + justify-content: center; + align-items: center; + + width: fit-content; + transition: all 0.2s; + color: black; + min-width: 160px; + cursor: pointer; + font-weight: 600; + font-family: Inter; + color: white; + text-align: center; + &:hover { + background-color: rgba(41, 41, 43, 1); + color: white; + svg path { + fill: white; // Fill color changes to white on hover + } + } +`; + + +export const CustomInput = styled(TextField)({ + width: "183px", // Adjust the width as needed + borderRadius: "5px", + // backgroundColor: "rgba(30, 30, 32, 1)", + outline: "none", + input: { + fontSize: 10, + fontFamily: "Inter", + fontWeight: 400, + color: "white", + "&::placeholder": { + fontSize: 16, + color: "rgba(255, 255, 255, 0.2)", + }, + outline: "none", + padding: "10px", + }, + "& .MuiOutlinedInput-root": { + "& fieldset": { + border: '0.5px solid rgba(255, 255, 255, 0.5)', + }, + "&:hover fieldset": { + border: '0.5px solid rgba(255, 255, 255, 0.5)', + }, + "&.Mui-focused fieldset": { + border: '0.5px solid rgba(255, 255, 255, 0.5)', + }, + }, + "& .MuiInput-underline:before": { + borderBottom: "none", + }, + "& .MuiInput-underline:hover:not(.Mui-disabled):before": { + borderBottom: "none", + }, + "& .MuiInput-underline:after": { + borderBottom: "none", + }, +}); + +export const CustomLabel = styled(InputLabel)` + font-weight: 400; + font-family: Inter; + font-size: 10px; + line-height: 12px; + color: rgba(255, 255, 255, 0.5); + +` \ No newline at end of file diff --git a/src/App.css b/src/App.css index b9d355d..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index cacf415..8c25c74 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,13 @@ import { useDropzone } from "react-dropzone"; import { Box, Input, InputLabel, Typography } from "@mui/material"; import { decryptStoredWallet } from "./utils/decryptWallet"; import { CountdownCircleTimer } from "react-countdown-circle-timer"; - +import Logo1 from "./assets/svgs/Logo1.svg"; +import Logo2 from "./assets/svgs/Logo2.svg"; +import Copy from "./assets/svgs/Copy.svg"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import Download from "./assets/svgs/Download.svg"; +import Logout from "./assets/svgs/Logout.svg"; +import Return from "./assets/svgs/Return.svg"; import { createAccount, generateRandomSentence, @@ -16,6 +22,20 @@ import { kdf } from "./deps/kdf"; import { generateSaveWalletData } from "./utils/generateWallet/storeWallet"; import { crypto, walletVersion } from "./constants/decryptWallet"; import PhraseWallet from "./utils/generateWallet/phrase-wallet"; +import { + AddressBox, + AppContainer, + AuthenticatedContainer, + AuthenticatedContainerInnerLeft, + AuthenticatedContainerInnerRight, + CustomButton, + CustomInput, + CustomLabel, + TextItalic, + TextP, + TextSpan, +} from "./App-styles"; +import { Spacer } from "./common/Spacer"; type extStates = | "not-authenticated" @@ -45,8 +65,10 @@ function App() { const [walletToBeDownloaded, setWalletToBeDownloaded] = useState(null); const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] = useState(""); - const [walletToBeDownloadedPasswordConfirm, setWalletToBeDownloadedPasswordConfirm] = - useState(""); + const [ + walletToBeDownloadedPasswordConfirm, + setWalletToBeDownloadedPasswordConfirm, + ] = useState(""); const [walletToBeDownloadedError, setWalletToBeDownloadedError] = useState(""); @@ -101,7 +123,6 @@ function App() { setRawWallet(pf); setExtstate("authenticated"); setdecryptedWallet(null); - } catch (e) { console.log(e); @@ -110,8 +131,6 @@ function App() { }, }); - - // const storeDecryptedWallet = async () => { // const res = await decryptStoredWallet("password", rawWallet); // const wallet2 = new PhraseWallet(res, walletVersion); @@ -153,17 +172,17 @@ function App() { const saveWalletFunc = async (password: string) => { console.log({ decryptedWallet }); let wallet = structuredClone(rawWallet); - - console.log("no", wallet); - const res = await decryptStoredWallet(password, wallet); - const wallet2 = new PhraseWallet(res, walletVersion); - console.log({ wallet2 }); - wallet = await wallet2.generateSaveWalletData( - password, - crypto.kdfThreads, - () => {} - ); - + + console.log("no", wallet); + const res = await decryptStoredWallet(password, wallet); + const wallet2 = new PhraseWallet(res, walletVersion); + console.log({ wallet2 }); + wallet = await wallet2.generateSaveWalletData( + password, + crypto.kdfThreads, + () => {} + ); + setWalletToBeDownloaded({ wallet, qortAddress: rawWallet.address0, @@ -294,7 +313,7 @@ function App() { setCountdown(message.payload); } }); - }, []); // Ensure this effect runs only once after component mount + }, []); console.log({ sendqortState }); //param = isDecline @@ -427,153 +446,261 @@ function App() { setWalletToBeDownloadedError("Please confirm your password"); return; } - if (walletToBeDownloadedPasswordConfirm !== walletToBeDownloadedPassword) { + if ( + walletToBeDownloadedPasswordConfirm !== walletToBeDownloadedPassword + ) { setWalletToBeDownloadedError("Password fields do not match!"); return; } - const res = await createAccount(); - console.log("new account", res); - const wallet = await res.generateSaveWalletData( - walletToBeDownloadedPassword, - crypto.kdfThreads, - () => {} - ); - setRawWallet(wallet); - storeWalletInfo(wallet); - setWalletToBeDownloaded({ - wallet, - qortAddress: wallet.address0, - }); - + const res = await createAccount(); + console.log("new account", res); + const wallet = await res.generateSaveWalletData( + walletToBeDownloadedPassword, + crypto.kdfThreads, + () => {} + ); + setRawWallet(wallet); + storeWalletInfo(wallet); + setWalletToBeDownloaded({ + wallet, + qortAddress: wallet.address0, + }); } catch (error: any) { setWalletToBeDownloadedError(error?.message); } }; - const logoutFunc = ()=> { + const logoutFunc = () => { try { chrome.runtime.sendMessage({ action: "logout" }, (response) => { if (response) { - window.close() + window.close(); } }); - } catch (error) { - - } + } catch (error) {} + }; + + const returnToMain = ()=> { + setPaymentTo(""); + setPaymentAmount(0); + setPaymentPassword(""); + setSendPaymentError(""); + setSendPaymentSuccess(""); + setCountdown(null); + setWalletToBeDownloaded(null); + setWalletToBeDownloadedPassword(""); + setExtstate("authenticated") } return ( - <> - {/* {requestConnection && ( - <> -

- the application {requestConnection?.hostname} is requesting a - connection -

- - - - )} */} - - {/* */} - {/* */} - {/* */} - {/* */} - + {extState === "not-authenticated" && ( <> - - - + Authenticate + + + { + setExtstate("create-wallet"); + }} + > + Create account + )} - {extState !== "not-authenticated" && ( + {/* {extState !== "not-authenticated" && ( - )} + )} */} {extState === "authenticated" && ( - <> -

{userInfo?.name}

-

balance: {balance}

-
- {rawWallet?.address0 &&

Welcome {rawWallet?.address0}

} -
- - - + */} + { + setExtstate("send-qort"); + }} + > + Transfer QORT + + + + + { + setExtstate("download-wallet"); + }} + src={Download} + style={{ + cursor: "pointer", + }} + /> + + + + )} {extState === "send-qort" && ( <> -

balance: {balance}

+ + + + + + + + Transfer QORT + + + + Balance: + + + {balance?.toFixed(2)} QORT + + + + - To - To + + setPaymentTo(e.target.value)} + autoComplete="off" /> - - Amount - + Amount + + setPaymentAmount(+e.target.value)} + autoComplete="off" /> - + + Confirm wallet password - - + + setPaymentPassword(e.target.value)} + autoComplete="off" /> {sendPaymentError} {sendPaymentSuccess} - + Send + )} {extState === "web-app-request-payment" && ( @@ -632,9 +759,13 @@ function App() { <>

the application {requestConnection?.hostname} you Authenticate

Either create a new account or import an existing one

- + - {walletToBeDownloadedError} + + {walletToBeDownloadedError} + )} @@ -675,7 +808,6 @@ function App() { )} {extState === "create-wallet" && ( <> - {!walletToBeDownloaded && ( <> @@ -689,7 +821,7 @@ function App() { setWalletToBeDownloadedPassword(e.target.value) } /> - + Confirm wallet password - - {walletToBeDownloadedError} + + + {walletToBeDownloadedError} + )} @@ -728,7 +860,7 @@ function App() { {({ remainingTime }) => remainingTime} )} - + ); } diff --git a/src/assets/svgs/Copy.svg b/src/assets/svgs/Copy.svg new file mode 100644 index 0000000..0348fc9 --- /dev/null +++ b/src/assets/svgs/Copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/Download.svg b/src/assets/svgs/Download.svg new file mode 100644 index 0000000..4fb9e52 --- /dev/null +++ b/src/assets/svgs/Download.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/Info.svg b/src/assets/svgs/Info.svg new file mode 100644 index 0000000..63f9bfc --- /dev/null +++ b/src/assets/svgs/Info.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/Level.svg b/src/assets/svgs/Level.svg new file mode 100644 index 0000000..93aa267 --- /dev/null +++ b/src/assets/svgs/Level.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/Logo1.svg b/src/assets/svgs/Logo1.svg new file mode 100644 index 0000000..fe5be5e --- /dev/null +++ b/src/assets/svgs/Logo1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/Logo2.svg b/src/assets/svgs/Logo2.svg new file mode 100644 index 0000000..2237fbe --- /dev/null +++ b/src/assets/svgs/Logo2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/Logout.svg b/src/assets/svgs/Logout.svg new file mode 100644 index 0000000..6ba462d --- /dev/null +++ b/src/assets/svgs/Logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/Return.svg b/src/assets/svgs/Return.svg new file mode 100644 index 0000000..e4ff9b3 --- /dev/null +++ b/src/assets/svgs/Return.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/Spacer.tsx b/src/common/Spacer.tsx new file mode 100644 index 0000000..3a387a7 --- /dev/null +++ b/src/common/Spacer.tsx @@ -0,0 +1,13 @@ +import { Box } from "@mui/material"; + +export const Spacer = ({ height }: any) => { + return ( + + ); + }; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 6119ad9..9eec189 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +1,32 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +@font-face { + font-family: 'Inter'; + src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype'); + font-weight: 600; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; +@font-face { + font-family: 'Inter'; + src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype'); + font-weight: 800; +} +@font-face { + font-family: 'Inter'; + src: url('./styles/fonts/Inter-Bold.ttf') format('truetype'); + font-weight: 700; +} +@font-face { + font-family: 'Inter'; + src: url('./styles/fonts/Inter-Regular.ttf') format('truetype'); + font-weight: 400; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; +:root { + padding: 0px; + margin: 0px; + box-sizing: border-box !important; } -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +body { + margin: 0px; +} \ No newline at end of file diff --git a/src/styles/fonts/Cairo.ttf b/src/styles/fonts/Cairo.ttf new file mode 100644 index 0000000..5bdb2a9 Binary files /dev/null and b/src/styles/fonts/Cairo.ttf differ diff --git a/src/styles/fonts/Cambon-Light.ttf b/src/styles/fonts/Cambon-Light.ttf new file mode 100644 index 0000000..e65b385 Binary files /dev/null and b/src/styles/fonts/Cambon-Light.ttf differ diff --git a/src/styles/fonts/Catamaran.ttf b/src/styles/fonts/Catamaran.ttf new file mode 100644 index 0000000..9053c6d Binary files /dev/null and b/src/styles/fonts/Catamaran.ttf differ diff --git a/src/styles/fonts/Inter-Black.ttf b/src/styles/fonts/Inter-Black.ttf new file mode 100644 index 0000000..b27822b Binary files /dev/null and b/src/styles/fonts/Inter-Black.ttf differ diff --git a/src/styles/fonts/Inter-Bold.ttf b/src/styles/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..fe23eeb Binary files /dev/null and b/src/styles/fonts/Inter-Bold.ttf differ diff --git a/src/styles/fonts/Inter-ExtraBold.ttf b/src/styles/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000..874b1b0 Binary files /dev/null and b/src/styles/fonts/Inter-ExtraBold.ttf differ diff --git a/src/styles/fonts/Inter-ExtraLight.ttf b/src/styles/fonts/Inter-ExtraLight.ttf new file mode 100644 index 0000000..c993e82 Binary files /dev/null and b/src/styles/fonts/Inter-ExtraLight.ttf differ diff --git a/src/styles/fonts/Inter-Light.ttf b/src/styles/fonts/Inter-Light.ttf new file mode 100644 index 0000000..71188f5 Binary files /dev/null and b/src/styles/fonts/Inter-Light.ttf differ diff --git a/src/styles/fonts/Inter-Medium.ttf b/src/styles/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..a01f377 Binary files /dev/null and b/src/styles/fonts/Inter-Medium.ttf differ diff --git a/src/styles/fonts/Inter-Regular.ttf b/src/styles/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..5e4851f Binary files /dev/null and b/src/styles/fonts/Inter-Regular.ttf differ diff --git a/src/styles/fonts/Inter-SemiBold.ttf b/src/styles/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..ecc7041 Binary files /dev/null and b/src/styles/fonts/Inter-SemiBold.ttf differ diff --git a/src/styles/fonts/Inter-Thin.ttf b/src/styles/fonts/Inter-Thin.ttf new file mode 100644 index 0000000..fe77243 Binary files /dev/null and b/src/styles/fonts/Inter-Thin.ttf differ diff --git a/src/styles/fonts/Oxygen.ttf b/src/styles/fonts/Oxygen.ttf new file mode 100644 index 0000000..d03f43a Binary files /dev/null and b/src/styles/fonts/Oxygen.ttf differ diff --git a/src/styles/fonts/Raleway.ttf b/src/styles/fonts/Raleway.ttf new file mode 100644 index 0000000..424fb0e Binary files /dev/null and b/src/styles/fonts/Raleway.ttf differ diff --git a/src/styles/fonts/Roboto-Black.ttf b/src/styles/fonts/Roboto-Black.ttf new file mode 100644 index 0000000..0112e7d Binary files /dev/null and b/src/styles/fonts/Roboto-Black.ttf differ diff --git a/src/styles/fonts/Roboto-BlackItalic.ttf b/src/styles/fonts/Roboto-BlackItalic.ttf new file mode 100644 index 0000000..b2c6aca Binary files /dev/null and b/src/styles/fonts/Roboto-BlackItalic.ttf differ diff --git a/src/styles/fonts/Roboto-Bold.ttf b/src/styles/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..43da14d Binary files /dev/null and b/src/styles/fonts/Roboto-Bold.ttf differ diff --git a/src/styles/fonts/Roboto-BoldItalic.ttf b/src/styles/fonts/Roboto-BoldItalic.ttf new file mode 100644 index 0000000..bcfdab4 Binary files /dev/null and b/src/styles/fonts/Roboto-BoldItalic.ttf differ diff --git a/src/styles/fonts/Roboto-Italic.ttf b/src/styles/fonts/Roboto-Italic.ttf new file mode 100644 index 0000000..1b5eaa3 Binary files /dev/null and b/src/styles/fonts/Roboto-Italic.ttf differ diff --git a/src/styles/fonts/Roboto-Light.ttf b/src/styles/fonts/Roboto-Light.ttf new file mode 100644 index 0000000..e7307e7 Binary files /dev/null and b/src/styles/fonts/Roboto-Light.ttf differ diff --git a/src/styles/fonts/Roboto-LightItalic.ttf b/src/styles/fonts/Roboto-LightItalic.ttf new file mode 100644 index 0000000..2d277af Binary files /dev/null and b/src/styles/fonts/Roboto-LightItalic.ttf differ diff --git a/src/styles/fonts/Roboto-Medium.ttf b/src/styles/fonts/Roboto-Medium.ttf new file mode 100644 index 0000000..ac0f908 Binary files /dev/null and b/src/styles/fonts/Roboto-Medium.ttf differ diff --git a/src/styles/fonts/Roboto-MediumItalic.ttf b/src/styles/fonts/Roboto-MediumItalic.ttf new file mode 100644 index 0000000..fc36a47 Binary files /dev/null and b/src/styles/fonts/Roboto-MediumItalic.ttf differ diff --git a/src/styles/fonts/Roboto-Regular.ttf b/src/styles/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..ddf4bfa Binary files /dev/null and b/src/styles/fonts/Roboto-Regular.ttf differ diff --git a/src/styles/fonts/Roboto-Thin.ttf b/src/styles/fonts/Roboto-Thin.ttf new file mode 100644 index 0000000..2e0dee6 Binary files /dev/null and b/src/styles/fonts/Roboto-Thin.ttf differ diff --git a/src/styles/fonts/Roboto-ThinItalic.ttf b/src/styles/fonts/Roboto-ThinItalic.ttf new file mode 100644 index 0000000..084f9c0 Binary files /dev/null and b/src/styles/fonts/Roboto-ThinItalic.ttf differ diff --git a/src/styles/theme.ts b/src/styles/theme.ts new file mode 100644 index 0000000..feb0367 --- /dev/null +++ b/src/styles/theme.ts @@ -0,0 +1,184 @@ +import { createTheme } from '@mui/material/styles' + + +// Extend the Theme interface + +const commonThemeOptions = { + typography: { + fontFamily: [ + 'Roboto' + ].join(','), + h1: { + fontSize: '2rem', + fontWeight: 600 + }, + h2: { + fontSize: '1.75rem', + fontWeight: 500 + }, + h3: { + fontSize: '1.5rem', + fontWeight: 500 + }, + h4: { + fontSize: '1.25rem', + fontWeight: 500 + }, + h5: { + fontSize: '1rem', + fontWeight: 500 + }, + h6: { + fontSize: '0.875rem', + fontWeight: 500 + }, + body1: { + fontSize: '23px', + fontWeight: 400, + lineHeight: 1.5, + letterSpacing: '0.5px' + }, + + body2: { + fontSize: '18px', + fontWeight: 400, + lineHeight: 1.4, + letterSpacing: '0.2px' + } + }, + spacing: 8, + shape: { + borderRadius: 4 + }, + breakpoints: { + values: { + xs: 0, + sm: 600, + md: 900, + lg: 1200, + xl: 1536 + } + }, + components: { + MuiButton: { + styleOverrides: { + root: { + backgroundColor: 'inherit', + transition: 'filter 0.3s ease-in-out', + '&:hover': { + filter: 'brightness(1.1)' + } + } + }, + defaultProps: { + disableElevation: true, + disableRipple: true + } + }, + MuiModal: { + styleOverrides: { + root: { + zIndex: 50000, + }, + } + + } + } +} + +const lightTheme = createTheme({ + ...commonThemeOptions, + palette: { + mode: 'light', + primary: { + main: '#f4f4fb', + dark: '#eaecf4', + light: '#f9f9fd' + }, + secondary: { + main: '#1EAAF1' + }, + background: { + default: '#fafafa', + paper: '#f0f0f0' + }, + text: { + primary: '#000000', + secondary: '#525252' + } + }, + + components: { + MuiCard: { + styleOverrides: { + root: { + boxShadow: + 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;', + borderRadius: '8px', + transition: 'all 0.3s ease-in-out', + '&:hover': { + cursor: 'pointer', + boxShadow: + 'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;' + } + } + } + }, + MuiIcon: { + defaultProps: { + style: { + color: '#000000' + } + } + } + }, +}) + +const darkTheme = createTheme({ + ...commonThemeOptions, + palette: { + mode: 'dark', + primary: { + main: '#2e3d60', + dark: "#1a2744", + light: "#3f4b66", + }, + secondary: { + main: '#45adff' + }, + + background: { + default: '#313338', + paper: "#1e1e20" + }, + text: { + primary: '#ffffff', + secondary: '#b3b3b3' + } + }, + components: { + MuiCard: { + styleOverrides: { + root: { + boxShadow: "none", + borderRadius: '8px', + transition: 'all 0.3s ease-in-out', + '&:hover': { + cursor: 'pointer', + boxShadow: + ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);' + } + } + } + }, + MuiIcon: { + defaultProps: { + style: { + color: '#ffffff' + } + } + } + }, +}) + +export { lightTheme, darkTheme }