PhilReact
5 months ago
42 changed files with 735 additions and 226 deletions
@ -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); |
||||
|
||||
` |
||||
@ -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; |
||||
} |
||||
|
After Width: | Height: | Size: 561 KiB |
|
After Width: | Height: | Size: 561 KiB |
@ -0,0 +1,13 @@
|
||||
import { Box } from "@mui/material"; |
||||
|
||||
export const Spacer = ({ height }: any) => { |
||||
return ( |
||||
<Box |
||||
sx={{ |
||||
height: height, |
||||
display: 'flex', |
||||
flexShrink: 0 |
||||
}} |
||||
/> |
||||
); |
||||
}; |
||||
@ -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; |
||||
} |
||||
|
||||
a { |
||||
font-weight: 500; |
||||
color: #646cff; |
||||
text-decoration: inherit; |
||||
} |
||||
a:hover { |
||||
color: #535bf2; |
||||
@font-face { |
||||
font-family: 'Inter'; |
||||
src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype'); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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 } |
||||
Loading…
Reference in new issue