From d47500c22c7bed347d84ce6dff047e8fba3fb4f8 Mon Sep 17 00:00:00 2001 From: Eesha Date: Sun, 10 Nov 2024 21:31:47 -0500 Subject: [PATCH] more minor design changes --- packages/app/public/assets/GithubLogo.svg | 5 + .../app/public/assets/GithubLogoFilled.svg | 3 + packages/app/public/assets/TelegramLogo.svg | 5 + .../app/public/assets/TelegramLogoFilled.svg | 3 + packages/app/public/assets/XLogo.svg | 3 + packages/app/public/assets/XLogoFilled.svg | 3 + packages/app/public/assets/YoutubeLogo.svg | 5 + .../app/public/assets/YoutubeLogoFilled.svg | 3 + packages/app/src/components/Button.tsx | 87 +---- packages/app/src/components/Footer.tsx | 88 +++++ packages/app/src/components/Nav.tsx | 2 +- packages/app/src/components/Stepper.tsx | 6 +- packages/app/src/pages/AboutPage.tsx | 4 +- packages/app/src/pages/MainPage.tsx | 314 +----------------- 14 files changed, 139 insertions(+), 392 deletions(-) create mode 100644 packages/app/public/assets/GithubLogo.svg create mode 100644 packages/app/public/assets/GithubLogoFilled.svg create mode 100644 packages/app/public/assets/TelegramLogo.svg create mode 100644 packages/app/public/assets/TelegramLogoFilled.svg create mode 100644 packages/app/public/assets/XLogo.svg create mode 100644 packages/app/public/assets/XLogoFilled.svg create mode 100644 packages/app/public/assets/YoutubeLogo.svg create mode 100644 packages/app/public/assets/YoutubeLogoFilled.svg create mode 100644 packages/app/src/components/Footer.tsx diff --git a/packages/app/public/assets/GithubLogo.svg b/packages/app/public/assets/GithubLogo.svg new file mode 100644 index 0000000..1d71606 --- /dev/null +++ b/packages/app/public/assets/GithubLogo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/app/public/assets/GithubLogoFilled.svg b/packages/app/public/assets/GithubLogoFilled.svg new file mode 100644 index 0000000..24f7a02 --- /dev/null +++ b/packages/app/public/assets/GithubLogoFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/assets/TelegramLogo.svg b/packages/app/public/assets/TelegramLogo.svg new file mode 100644 index 0000000..26ae1cf --- /dev/null +++ b/packages/app/public/assets/TelegramLogo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/app/public/assets/TelegramLogoFilled.svg b/packages/app/public/assets/TelegramLogoFilled.svg new file mode 100644 index 0000000..23f560c --- /dev/null +++ b/packages/app/public/assets/TelegramLogoFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/assets/XLogo.svg b/packages/app/public/assets/XLogo.svg new file mode 100644 index 0000000..78818f5 --- /dev/null +++ b/packages/app/public/assets/XLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/assets/XLogoFilled.svg b/packages/app/public/assets/XLogoFilled.svg new file mode 100644 index 0000000..b21b333 --- /dev/null +++ b/packages/app/public/assets/XLogoFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/assets/YoutubeLogo.svg b/packages/app/public/assets/YoutubeLogo.svg new file mode 100644 index 0000000..fc0ec80 --- /dev/null +++ b/packages/app/public/assets/YoutubeLogo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/app/public/assets/YoutubeLogoFilled.svg b/packages/app/public/assets/YoutubeLogoFilled.svg new file mode 100644 index 0000000..1feccf8 --- /dev/null +++ b/packages/app/public/assets/YoutubeLogoFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/src/components/Button.tsx b/packages/app/src/components/Button.tsx index 12c03a5..c83b6ca 100644 --- a/packages/app/src/components/Button.tsx +++ b/packages/app/src/components/Button.tsx @@ -1,78 +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"; @@ -89,11 +14,11 @@ interface ButtonProps { const StyledButton = styled(MuiButton)<{ highlighted: boolean }>` text-transform: none; - border-radius: 9px; + border-radius: 12px; display: flex; align-items: center; justify-content: center; - font-weight: 600; + font-weight: 900; font-size: 0.9rem; letter-spacing: -0.02em; color: #fff; @@ -129,11 +54,11 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>` const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>` padding: 0 5px; - border-radius: 9px; + border-radius: 12px; display: flex; align-items: center; justify-content: center; - font-weight: 500; + font-weight: 900; font-size: 0.9rem; letter-spacing: -0.02em; text-transform: none; @@ -173,8 +98,8 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>` background: '#ffffff'; border: none; color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : theme.palette.secondary.main)}; - font-weight: 500; - border-radius: 9px; + font-weight: 900; + border-radius: 12px; &:hover { color: theme.palette.secondary.main; diff --git a/packages/app/src/components/Footer.tsx b/packages/app/src/components/Footer.tsx new file mode 100644 index 0000000..7f4ff82 --- /dev/null +++ b/packages/app/src/components/Footer.tsx @@ -0,0 +1,88 @@ +'use client'; +import { useState } from 'react'; +import { Box, Typography, useTheme, Link } from "@mui/material"; + +const Footer = () => { + const [hoveredImgs, setHoveredImgs] = useState({ + XLogo: false, + YoutubeLogo: false, + TelegramLogo: false, + GithubLogo: false, + }); + + const handleMouseEnter = (img) => { + setHoveredImgs((prev) => ({ ...prev, [img]: true })); + }; + + const handleMouseLeave = (img) => { + setHoveredImgs((prev) => ({ ...prev, [img]: false })); + }; + + return ( + + + {/* Left Side - Links */} + + + Documentation + + • + + Privacy Policy + + + + {/* Right Side - Social Icons */} + + {[ + { name: 'XLogo', link: 'https://x.com/zkemail?lang=en', alt: 'twitter-logo', imgSrc: '/assets/XLogo.svg', hoveredImgSrc: '/assets/XLogoFilled.svg' }, + { name: 'YoutubeLogo', link: 'https://www.youtube.com/@sigsing', alt: 'youtube-logo', imgSrc: '/assets/YoutubeLogo.svg', hoveredImgSrc: '/assets/YoutubeLogoFilled.svg' }, + { name: 'TelegramLogo', link: 'https://t.me/zkemail', alt: 'telegram-logo', imgSrc: '/assets/TelegramLogo.svg', hoveredImgSrc: '/assets/TelegramLogoFilled.svg' }, + { name: 'GithubLogo', link: 'https://github.com/zkemail', alt: 'github-logo', imgSrc: '/assets/GithubLogo.svg', hoveredImgSrc: '/assets/GithubLogoFilled.svg' } + ].map((icon) => ( + + handleMouseEnter(icon.name)} + onMouseLeave={() => handleMouseLeave(icon.name)} + src={hoveredImgs[icon.name] ? icon.hoveredImgSrc : icon.imgSrc} + alt={icon.alt} + height={20} + width={20} + /> + + ))} + + + + ); +}; + +export default Footer; diff --git a/packages/app/src/components/Nav.tsx b/packages/app/src/components/Nav.tsx index a8902da..c134925 100644 --- a/packages/app/src/components/Nav.tsx +++ b/packages/app/src/components/Nav.tsx @@ -49,7 +49,7 @@ const CustomConnectButton: React.FC = ({ splitscreen = backgroundColor: !connected ? theme.palette.accent.main : '#1f1f1f', color: '#ffffff', padding: { xs: '7px 10px', sm: '10px 16px', md: splitscreen ? '8px 12px' : '10px 16px' }, - borderRadius: '10px', + borderRadius: '12px', cursor: 'pointer', '&:hover': { backgroundColor: !connected ? theme.palette.accent.main : '#333333', diff --git a/packages/app/src/components/Stepper.tsx b/packages/app/src/components/Stepper.tsx index 007fb24..c302836 100644 --- a/packages/app/src/components/Stepper.tsx +++ b/packages/app/src/components/Stepper.tsx @@ -95,8 +95,9 @@ const StepperComponent: React.FC = ({ variant="outlined" onClick={handleBack} sx={{ + borderRadius: '8px', textTransform: 'none', - fontWeight: 'regular', + fontWeight: 600, padding: '10px 35px', border: `1px solid ${theme.palette.text.primary}`, marginY: '9px', @@ -122,8 +123,9 @@ const StepperComponent: React.FC = ({ onClick={handleNext} disabled={!steps.slice(0, activeStep + 1).every(step => step[1] === 'completed')} sx={{ + borderRadius: '8px', textTransform: 'none', - fontWeight: 'regular', + fontWeight: 600, padding: '10px 35px', backgroundColor: theme.palette.text.primary, border: `1px solid ${theme.palette.text.primary}`, diff --git a/packages/app/src/pages/AboutPage.tsx b/packages/app/src/pages/AboutPage.tsx index 0717e71..98bb573 100644 --- a/packages/app/src/pages/AboutPage.tsx +++ b/packages/app/src/pages/AboutPage.tsx @@ -15,6 +15,7 @@ import RefreshIcon from '@mui/icons-material/Refresh'; import ContentPasteIcon from '@mui/icons-material/ContentPaste'; import DraftsOutlinedIcon from "@mui/icons-material/DraftsOutlined"; import Video from '../components/Video'; +import Footer from '../components/Footer'; const AboutPage: React.FC = () => { @@ -43,7 +44,7 @@ const AboutPage: React.FC = () => { ]; return ( - +