chore: button icon scaling down

zkemail · Nov 11, 2024 · e130c9c · e130c9c
1 parent 345809b
commit e130c9c
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 25 deletions.
diff --git a/packages/app/src/components/Button.tsx b/packages/app/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from "styled-components";
-import { useTheme, Button as MuiButton } from "@mui/material";
+import { useTheme, Button as MuiButton, Box } from "@mui/material";
 
 interface ButtonProps {
   highlighted?: boolean;
@@ -14,11 +14,11 @@ interface ButtonProps {
 
 const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
   text-transform: none;
-  border-radius: 12px;
+  border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 900;
+  font-weight: 600;
   font-size: 0.9rem;
   letter-spacing: -0.02em;
   color: #fff;
@@ -27,10 +27,12 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
   width: 100%;
   min-width: 32px;
   transition: all 0.2s ease-in-out;
-  background: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
+  background: ${({ highlighted, theme }) =>
+    highlighted ? theme.palette.accent.main : '#1C1C1C'};
 
   &:hover {
-    background: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
+    background: ${({ highlighted, theme }) =>
+      highlighted ? theme.palette.accent.main : '#1C1C1C'};
     opacity: 0.5;
   }
 
@@ -50,15 +52,34 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
     padding: 0 4px;
     height: 40px;
   }
+
+  & .MuiButton-endIcon {
+    margin-left: 8px;
+    font-size: 1.2rem;
+  }
+
+  @media (max-width: 600px) {
+    & .MuiButton-endIcon {
+      font-size: 1rem;
+      margin-left: 6px;
+    }
+  }
+
+  @media (max-width: 400px) {
+    & .MuiButton-endIcon {
+      font-size: 0.8rem;
+      margin-left: 4px;
+    }
+  }
 `;
 
 const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
   padding: 0 5px;
-  border-radius: 12px;
+  border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 900;
+  font-weight: 500;
   font-size: 0.9rem;
   letter-spacing: -0.02em;
   text-transform: none;
@@ -68,11 +89,15 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
   min-width: 30px;
   transition: all 0.2s ease-in-out;
   background: '#ffffff';
-  border: 1px solid ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
-  color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
+  border: 1px solid
+    ${({ highlighted, theme }) =>
+      highlighted ? theme.palette.accent.main : '#1C1C1C'};
+  color: ${({ highlighted, theme }) =>
+    highlighted ? theme.palette.accent.main : '#1C1C1C'};
 
   &:hover {
-    background: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
+    background: ${({ highlighted, theme }) =>
+      highlighted ? theme.palette.accent.main : '#1C1C1C'};
     color: white;
   }
 
@@ -91,18 +116,38 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
     padding: 0 2px;
     height: 40px;
   }
+
+  & .MuiButton-endIcon {
+    margin-left: 8px;
+    font-size: 1.2rem;
+  }
+
+  @media (max-width: 600px) {
+    & .MuiButton-endIcon {
+      font-size: 1rem;
+      margin-left: 6px;
+    }
+  }
+
+  @media (max-width: 400px) {
+    & .MuiButton-endIcon {
+      font-size: 0.8rem;
+      margin-left: 4px;
+    }
+  }
 `;
 
 const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
   width: fit-content;
   background: '#ffffff';
   border: none;
-  color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : theme.palette.secondary.main)};
-  font-weight: 900;
-  border-radius: 12px;
+  color: ${({ highlighted, theme }) =>
+    highlighted ? theme.palette.accent.main : theme.palette.secondary.main};
+  font-weight: 500;
+  border-radius: 9px;
 
   &:hover {
-    color: theme.palette.secondary.main;
+    color: ${({ theme }) => theme.palette.secondary.main};
   }
 
   &:disabled {
@@ -120,12 +165,41 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
     padding: 0 2px;
     height: 40px;
   }
+
+  & .MuiButton-endIcon {
+    margin-left: 8px;
+    font-size: 1.2rem;
+  }
+
+  @media (max-width: 600px) {
+    & .MuiButton-endIcon {
+      font-size: 1rem;
+      margin-left: 6px;
+    }
+  }
+
+  @media (max-width: 400px) {
+    & .MuiButton-endIcon {
+      font-size: 0.8rem;
+      margin-left: 4px;
+    }
+  }
 `;
 
-export const Button: React.FC<ButtonProps> = ({ highlighted = false, disabled, onClick, children, endIcon, href, target }) => {
+export const Button: React.FC<ButtonProps> = ({
+  highlighted = false,
+  disabled,
+  onClick,
+  children,
+  endIcon,
+  href,
+  target,
+}) => {
   const theme = useTheme();
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (disabled) return;
     if (href) {
       window.open(href, target);
@@ -147,10 +221,20 @@ export const Button: React.FC<ButtonProps> = ({ highlighted = false, disabled, o
   );
 };
 
-export const OutlinedButton: React.FC<ButtonProps> = ({ highlighted = false, disabled, onClick, children, endIcon, href, target }) => {
+export const OutlinedButton: React.FC<ButtonProps> = ({
+  highlighted = false,
+  disabled,
+  onClick,
+  children,
+  endIcon,
+  href,
+  target,
+}) => {
   const theme = useTheme();
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (disabled) return;
     if (href) {
       window.open(href, target);
@@ -172,10 +256,20 @@ export const OutlinedButton: React.FC<ButtonProps> = ({ highlighted = false, dis
   );
 };
 
-export const TextButton: React.FC<ButtonProps> = ({ highlighted = false, disabled, onClick, children, endIcon, href, target }) => {
+export const TextButton: React.FC<ButtonProps> = ({
+  highlighted = false,
+  disabled,
+  onClick,
+  children,
+  endIcon,
+  href,
+  target,
+}) => {
   const theme = useTheme();
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     if (disabled) return;
     if (href) {
       window.open(href, target);
@@ -193,8 +287,6 @@ export const TextButton: React.FC<ButtonProps> = ({ highlighted = false, disable
       endIcon={endIcon}
     >
       {children}
-      {endIcon && <span style={{ marginLeft: '8px' }}>{endIcon}</span>}
     </StyledTextButton>
   );
 };
-
diff --git a/packages/app/src/pages/AboutPage.tsx b/packages/app/src/pages/AboutPage.tsx
@@ -95,7 +95,7 @@ const AboutPage: React.FC = () => {
           </Typography>
 
           <Box sx={{ display: 'flex', gap: { xs: '5px', sm: '10px' }, width: { xs: '230px', sm: '300px' }, marginX: 'auto' }}>
-            <Button endIcon={<ArrowOutwardIcon />} href='/'  highlighted={true}>
+            <Button   endIcon={<ArrowOutwardIcon sx={{ transform: {xs:'scale(0.6)', sm:'scale(0.75)', md: 'scale(1)' }}}/>} href='/'  highlighted={true}>
               Try it out
             </Button>
             <OutlinedButton href='https://prove.email/blog/twitter' target='_blank'>
@@ -148,7 +148,7 @@ const AboutPage: React.FC = () => {
         {/* FAQ ACCORDION */}
         {/* <Box sx={{'padding-[10%] py-[100px] my-[100px] z-50 bg-white w-full'}}> */}
 
-        <Box sx={{paddingY:'100px', marginY: '20px', width:'100%', marginLeft:'20px'}}>
+        <Box sx={{paddingY:'100px', marginY: '20px', width:'100%',}}>
           <div className='min-h-[200px]'>
             <div className='relative '>
               <Typography paddingY='20px' variant='h1' sx={{ textAlign: 'left' }}>
@@ -166,7 +166,7 @@ const AboutPage: React.FC = () => {
                 </Stack>
               </Grid>
 
-              <Grid item xs={12} sm={10}  className="relative col-span-2 py-[30px] w-[100%]" style={{ width: '100%', margin: '0 auto', zIndex: '100', marginRight:'0px' }}>
+              <Grid item xs={12} sm={10}  className="relative col-span-2 py-[30px] w-[100%]" style={{ width: '100%', margin: '0 auto', zIndex: '100', marginRight:0}}>
                 {faqs.map((faq, index) => (
                   <Accordion key={index} title={faq.title} contents={faq.contents} />
                 ))}