Skip to content

Commit

Permalink
more mobile responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eeshau
Eeshau committed Aug 18, 2024
1 parent ab18856 commit 3b73cb1
Show file tree
Hide file tree
Showing 7 changed files with 272 additions and 285 deletions.
96 changes: 8 additions & 88 deletions packages/app/src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,3 @@
// import styled from "styled-components";

// export const Button = styled.button`
// padding: 0 14px;
// border-radius: 4px;
// background: #8272e4;
// border: none;
// display: flex;
// align-items: center;
// justify-content: center;
// font-weight: 600;
// font-size: 0.9rem;
// letter-spacing: -0.02em;
// color: #fff;
// cursor: pointer;
// height: 48px;
// width: 100%;
// min-width: 32px;
// transition: all 0.2s ease-in-out;
// &:hover {
// background: #9b8df2;
// }
// &:disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// `;

// export const OutlinedButton = styled.button`
// padding: 0 14px;
// border-radius: 4px;
// border: none;
// display: flex;
// align-items: center;
// justify-content: center;
// font-weight: 500;
// font-size: 0.9rem;
// letter-spacing: -0.02em;
// color: #8272e4;
// cursor: pointer;
// height: 48px;
// width: 100%;
// min-width: 32px;
// transition: all 0.2s ease-in-out;
// background: transparent;
// border: 1px solid #8272e4;
// &:hover {
// background: #9b8df2;
// color: white;
// }
// &:disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// `;


// export const TextButton = styled.button`
// width: fit-content;
// background: transparent;
// border: none;
// color: white;
// font-weight: 500;
// padding: 4px 16px;
// border-radius: 4px;
// &:hover {
// background: #00000020;
// color: white;
// }
// &:disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// `;




import React from 'react';
import styled from "styled-components";
import { useTheme, Button as MuiButton } from "@mui/material";
Expand All @@ -91,7 +13,6 @@ interface ButtonProps {
}

const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
padding: 0 14px;
text-transform: none;
border-radius: 9px;
display: flex;
Expand Down Expand Up @@ -126,13 +47,13 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
@media (max-width: 400px) {
font-size: 0.6rem;
padding: 0 5px;
height: 42px;
padding: 0 4px;
height: 40px;
}
`;

const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
padding: 0 14px;
padding: 0 5px;
border-radius: 9px;
display: flex;
align-items: center;
Expand All @@ -144,7 +65,7 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
cursor: pointer;
height: 48px;
width: 100%;
min-width: 32px;
min-width: 30px;
transition: all 0.2s ease-in-out;
background: '#ffffff';
border: 1px solid ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
Expand All @@ -167,8 +88,8 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
@media (max-width: 400px) {
font-size: 0.6rem;
padding: 0 5px;
height: 42px;
padding: 0 2px;
height: 40px;
}
`;

Expand All @@ -178,7 +99,6 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
border: none;
color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : theme.palette.secondary.main)};
font-weight: 500;
padding: 4px 16px;
border-radius: 9px;
&:hover {
Expand All @@ -197,8 +117,8 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
@media (max-width: 400px) {
font-size: 0.6rem;
padding: 2px 10px;
height: 42px;
padding: 0 2px;
height: 40px;
}
`;

Expand Down
119 changes: 17 additions & 102 deletions packages/app/src/components/LabeledTextArea.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,3 @@
// import _ from "lodash";
// import React, { CSSProperties } from "react";
// import styled from "styled-components";
// import { Col } from "./Layout";

// export const LabeledTextArea: React.FC<{
// style?: CSSProperties;
// className?: string;
// label: string;
// value: string;
// warning?: string;
// warningColor?: string;
// disabled?: boolean;
// disabledReason?: string;
// secret?: boolean;
// onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
// }> = ({
// style,
// warning,
// warningColor,
// disabled,
// disabledReason,
// label,
// value,
// onChange,
// className,
// secret,
// }) => {
// return (
// <LabeledTextAreaContainer
// className={_.compact(["labeledTextAreaContainer", className]).join(" ")}
// >
// <Label>{label}</Label>
// {warning && (
// <span className="warning" style={{ color: warningColor }}>
// {warning}
// </span>
// )}
// <TextArea
// style={style}
// aria-label={label}
// title={disabled ? disabledReason : ""}
// disabled={disabled}
// value={value}
// onChange={onChange}
// />

// {secret && (
// <div className="secret">Hover to reveal public info sent to chain</div>
// )}
// </LabeledTextAreaContainer>
// );
// };

// const Label = styled.label`
// color: rgba(255, 255, 255, 0.8);
// `;

// const LabeledTextAreaContainer = styled(Col)`
// height: 15vh;
// border-radius: 4px;
// position: relative;
// gap: 8px;
// & .warning {
// color: #bd3333;
// font-size: 80%;
// }
// .secret {
// position: absolute;
// width: 100%;
// height: 100%;
// background: #171717;
// border: 1px dashed rgba(255, 255, 255, 0.5);
// color: rgba(255, 255, 255, 0.8);
// user-select: none;
// pointer-events: none;
// opacity: 0.95;
// justify-content: center;
// display: flex;
// align-items: center;
// transition: opacity 0.3s ease-in-out;
// }
// &:hover .secret,
// & :focus + .secret {
// opacity: 0;
// }
// `;

// const TextArea = styled.textarea`
// border: 1px solid rgba(255, 255, 255, 0.3);
// background: rgba(0, 0, 0, 0.3);
// border-radius: 4px;
// height: 480px;
// padding: 16px;
// transition: all 0.2s ease-in-out;
// resize: none;
// &:hover {
// border: 1px solid rgba(255, 255, 255, 0.8);
// `;



import _ from "lodash";
import React, { CSSProperties } from "react";
import styled, { ThemeProvider, css } from "styled-components";
Expand Down Expand Up @@ -206,6 +104,23 @@ const TextArea = styled.textarea<{ highlighted: boolean }>`
resize: none;
outline: none;
/* Apply different font sizes based on breakpoints */
${({ theme }) => css`
font-size: 0.5rem; /* Default font size */
${theme.breakpoints.up('sm')} {
font-size: 0.8rem; /* Font size for small screens and up */
}
${theme.breakpoints.up('md')} {
font-size: 0.9rem; /* Font size for medium screens and up */
}
${theme.breakpoints.up('lg')} {
font-size: 1rem; /* Font size for large screens and up */
}
`}
${({ highlighted, theme }) =>
highlighted
? css`
Expand Down
26 changes: 13 additions & 13 deletions packages/app/src/pages/AboutPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,14 @@ const AboutPage: React.FC = () => {
<Box component="span" sx={{ display: { xs: 'none', sm: 'inline', md: 'inline' } }}>
<br />
</Box>
you received some email and mask out any private data,
&nbsp; you received some email and mask out any private data,
<Box component="span" sx={{ display: { xs: 'none', sm: 'inline', md: 'inline' } }}>
<br />
</Box>
without trusting our server to keep your privacy.
</Typography>

<Box sx={{ display: 'flex', gap: { xs: '3px', sm: '10px' }, width: { xs: '240px', sm: '300px' }, marginX: 'auto' }}>
<Box sx={{ display: 'flex', gap: { xs: '5px', sm: '10px' }, width: { xs: '230px', sm: '300px' }, marginX: 'auto' }}>
<Button endIcon={<ArrowOutwardIcon />} href='/' highlighted={true}>
Try it out
</Button>
Expand All @@ -113,24 +113,24 @@ const AboutPage: React.FC = () => {
{/* STEPS ROW */}
<Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', height:'fit-content', gap: {xs:'12px', sm:'15px', md:'50px', }, marginX: 'auto', marginY: '80px', alignItems:'center'}}>
<Box sx={{textAlign:'center'}}>
<MailOutlineIcon sx={{fontSize:{xs:'12px', md:'40px',}}}/>
<Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>SEND RESET EMAIL</Typography>
<MailOutlineIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px',}}}/>
<Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>SEND RESET EMAIL</Typography>
</Box>
<Box sx={{textAlign:'center'}}>
<ContentPasteIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>COPY/PASTE DKIM SIG</Typography>
<ContentPasteIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>COPY/PASTE DKIM SIG</Typography>
</Box>
<Box sx={{textAlign:'center'}}>
<FingerprintIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>ADD ADDRESS</Typography>
<FingerprintIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>ADD ADDRESS</Typography>
</Box>
<Box sx={{textAlign:'center'}}>
<RefreshIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>GENERATE PROOF</Typography>
<RefreshIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>GENERATE PROOF</Typography>
</Box>
<Box sx={{textAlign:'center'}}>
<CheckCircleOutlineIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>VERIFY & MINT</Typography>
<CheckCircleOutlineIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px' }}}/>
<Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>VERIFY & MINT</Typography>
</Box>
</Box>

Expand Down Expand Up @@ -164,7 +164,7 @@ const AboutPage: React.FC = () => {
<Typography variant='h5' paddingTop="10px" sx={{ fontSize: { xs: '12px', md: '15px' } }}>
Have a Question that isn’t answered?
</Typography>
<Stack spacing={2} direction="row" sx={{ paddingTop: "16px", width: '150px' }}>
<Stack spacing={2} direction="row" sx={{ paddingTop: "16px", width: {xs:'120px',sm:'150px'} }}>
<Button href='https://t.me/zkemail' target='_blank'> Drop Us a Line</Button>
</Stack>
</Grid>
Expand Down
Loading

0 comments on commit 3b73cb1

Please sign in to comment.