fix: fix templates styles to match snapshot expectations (tailwind is…

… not yet fixed)
swiiny · Jan 9, 2025 · 2fa0f0d · 2fa0f0d
1 parent 7f2d740
commit 2fa0f0d
Show file tree

Hide file tree

Showing 34 changed files with 103 additions and 50 deletions.
diff --git a/packages/base/components/default/Button/Button.module.scss b/packages/base/components/default/Button/Button.module.scss
@@ -5,6 +5,8 @@
 	border: none;
 	background-color: transparent;
 
+	padding: 0;
+
 	cursor: pointer;
 
 	font-size: calc(1.5rem * 0.6);

diff --git a/packages/base/components/default/Text/Text.module.scss b/packages/base/components/default/Text/Text.module.scss
@@ -27,7 +27,7 @@
 		}
 	}
 
-	@include unify-parent('h1') {
+	@include unify-parent('.h1') {
 		&.small {
 			font-size: calc(0.75 * 3rem * 0.7);
 
@@ -71,7 +71,7 @@
 		}
 	}
 
-	@include unify-parent('h2') {
+	@include unify-parent('.h2') {
 		&.small {
 			font-size: calc(0.75 * 2.5rem * 0.7);
 
@@ -115,7 +115,7 @@
 		}
 	}
 
-	@include unify-parent('h3') {
+	@include unify-parent('.h3') {
 		&.small {
 			font-size: calc(0.75 * 2rem * 0.7);
 
@@ -158,7 +158,7 @@
 			}
 		}
 	}
-	@include unify-parent('h4') {
+	@include unify-parent('.h4') {
 		&.small {
 			font-size: calc(0.75 * 1.5rem * 0.7);
 
@@ -201,7 +201,7 @@
 			}
 		}
 	}
-	@include unify-parent('h5') {
+	@include unify-parent('.h5') {
 		&.small {
 			font-size: calc(0.75 * 1.25rem * 0.7);
 			@include md() {
@@ -243,7 +243,7 @@
 			}
 		}
 	}
-	@include unify-parents(('h6', 'p')) {
+	@include unify-parents(('.h6', 'p')) {
 		&.small {
 			font-size: calc(0.75 * 1rem * 0.7);
 

diff --git a/packages/base/components/default/Text/Text.tsx b/packages/base/components/default/Text/Text.tsx
@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
-import { IText } from './Text.type';
-import styles from './Text.module.scss';
-import { ETextType } from './Text.enum';
 import { ESize } from '@theme/theme.enum';
 import classNames from 'classnames';
+import { FC } from 'react';
+import { ETextType } from './Text.enum';
+import styles from './Text.module.scss';
+import { IText } from './Text.type';
 
 const Text: FC<IText> = ({
 	children,
@@ -25,7 +25,8 @@ const Text: FC<IText> = ({
 				[styles[`align`]]: !!align,
 				[styles[`${align}`]]: !!align,
 				[styles[`${size}`]]: !!size,
-				[styles[`${color}`]]: !!color
+				[styles[`${color}`]]: !!color,
+				[styles[`${type}`]]: !!type
 			})}
 			{...otherProps}
 		>

diff --git a/packages/base/components/pages/home/HomePage/HomePage.module.scss b/packages/base/components/pages/home/HomePage/HomePage.module.scss
@@ -15,7 +15,7 @@
 	@include md() {
 		padding-left: 32px;
 		padding-right: 32px;
-		padding-top: 30px;
+		padding-top: 32px;
 	}
 
 	@include lg() {

diff --git a/packages/mui/components/default/Button/Button.styles.ts b/packages/mui/components/default/Button/Button.styles.ts
@@ -12,6 +12,8 @@ const sharedStyle = (p: ISharedButtonProps) => {
 		border: none;
 		background-color: transparent;
 
+		padding: 0;
+
 		cursor: pointer;
 
 		font-size: calc(1.5rem * 0.6);
@@ -33,7 +35,7 @@ const sharedStyle = (p: ISharedButtonProps) => {
 						background: ${p.color};
 						-webkit-background-clip: text;
 						-webkit-text-fill-color: transparent;
-				  `
+					`
 				: `color: ${p.color || p.theme.colors.white};`}
 
 			&:hover {
@@ -103,7 +105,7 @@ export const StyledIconsContainer = styled.div<{ isActive: boolean }>`
 							opacity: 1;
 							transform: translateX(0) rotateX(0);
 						}
-				  `
+					`
 				: css`
 						&:nth-child(1) {
 							opacity: 1;
@@ -113,6 +115,6 @@ export const StyledIconsContainer = styled.div<{ isActive: boolean }>`
 							opacity: 0;
 							transform: translateX(50%) rotateX(-90deg);
 						}
-				  `}
+					`}
 	}
 `;
diff --git a/packages/mui/components/default/Button/Button.tsx b/packages/mui/components/default/Button/Button.tsx
@@ -48,8 +48,12 @@ const Button: FC<IButton> = ({
 				paddingY={noPaddingResponsive ? '12px' : { xs: '6px', sm: '9px', md: '12px' }}
 				paddingX={noPaddingResponsive ? '36px' : { xs: '18px', sm: '27px', md: '36px' }}
 				display='flex'
-				sx={{ justifyContent: 'center', alignItems: 'center' }}
 				{...gradientContainerProps}
+				sx={
+					gradientContainerProps?.sx
+						? { justifyContent: 'center', alignItems: 'center', ...gradientContainerProps?.sx }
+						: { justifyContent: 'center', alignItems: 'center' }
+				}
 			>
 				{children}
 

diff --git a/packages/mui/components/default/GradientContainer/GradientContainer.styles.ts b/packages/mui/components/default/GradientContainer/GradientContainer.styles.ts
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
 import { Box } from '@mui/system';
+import styled, { css } from 'styled-components';
 
 export const StyledGradientContainer = styled(Box)`
 	${(p) => css`
@@ -8,6 +8,6 @@ export const StyledGradientContainer = styled(Box)`
 		border-radius: 13px;
 		background: ${p.theme.colors.darkGradient};
 		border: 1px solid ${p.theme.colors.darkGray};
-		box-shadow: 0px 5px 20px 10px ${p.theme.colors.black + '50'};
+		box-shadow: 0px 5px 20px 10px ${p.theme.colors.darkGray + '50'};
 	`}
 `;
diff --git a/packages/mui/components/default/Navbar/Navbar.tsx b/packages/mui/components/default/Navbar/Navbar.tsx
@@ -14,11 +14,10 @@ const boxStyles = {
 	position: 'fixed',
 	left: '0',
 	right: '0',
-	marginY: '16px',
-	paddingX: '16px'
+	padding: { xs: '0', md: '32px' }
 };
 
-const titleStyles = { display: { xs: 'none', sm: 'flex' }, alignItems: 'center' };
+const titleStyles = { display: { xs: 'none', sm: 'flex' }, alignItems: 'flex-start' };
 
 const gradientContainerProps = { sx: { display: { xs: 'none', md: 'flex' } } };
 

diff --git a/packages/mui/components/default/Tagline/Tagline.tsx b/packages/mui/components/default/Tagline/Tagline.tsx
@@ -5,6 +5,10 @@ import { useTheme } from 'styled-components';
 import { ESize } from 'theme/theme.enum';
 import { ITagline } from './Tagline.type';
 
+const textStyles = {
+	marginTop: '12px'
+};
+
 const Tagline: FC<ITagline> = () => {
 	const theme = useTheme();
 
@@ -35,6 +39,7 @@ const Tagline: FC<ITagline> = () => {
 				color={theme.colors.gray}
 				weight={EFontWeight.regular}
 				align={ETextAlign.center}
+				style={textStyles}
 			>
 				No longer waste valuable time building your project structure
 			</Text>

diff --git a/packages/mui/components/default/Text/Text.tsx b/packages/mui/components/default/Text/Text.tsx
@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
-import { IText } from './Text.type';
-import { StyledText } from './Text.styles';
+import { FC } from 'react';
 import { ETextType } from './Text.enum';
+import { StyledText } from './Text.styles';
+import { IText } from './Text.type';
 
 const Text: FC<IText> = ({ children, type = ETextType.p, component, size, weight, align, color, ...otherProps }) => {
 	return (

diff --git a/packages/mui/components/default/Text/Text.type.ts b/packages/mui/components/default/Text/Text.type.ts
@@ -1,5 +1,5 @@
-import { ESize } from 'theme/theme.enum';
 import { ReactNode } from 'react';
+import { ESize } from 'theme/theme.enum';
 import { EFontWeight, ETextAlign, ETextType } from './Text.enum';
 
 interface IText {
@@ -10,6 +10,7 @@ interface IText {
 	align?: ETextAlign;
 	size?: ESize.s | ESize.m | ESize.l;
 	color?: string;
+	style?: React.CSSProperties;
 }
 
 export type { IText };
diff --git a/packages/mui/components/pages/home/HomePage/HomePage.tsx b/packages/mui/components/pages/home/HomePage/HomePage.tsx
@@ -11,7 +11,7 @@ const boxStyles = {
 	flexDirection: 'column',
 	justifyContent: 'space-evenly',
 	paddingX: { xs: '15px', md: '32px', lg: '64px' },
-	paddingTop: '30px',
+	paddingTop: '32px',
 	height: '100dvh'
 };
 

diff --git a/packages/styled-components/components/default/Button/Button.styles.ts b/packages/styled-components/components/default/Button/Button.styles.ts
@@ -22,6 +22,8 @@ const sharedStyle = (p: ISharedButtonProps) => {
 
 		font-size: calc(1.5rem * 0.6);
 
+		padding: 0;
+
 		${mq(EMediaQuery.sm, `font-size: calc(1.5rem * 0.7);`)}
 		${mq(EMediaQuery.md, `font-size: calc(1.5rem * 0.8);`)}
 		${mq(EMediaQuery.lg, `font-size: calc(1.5rem * 0.9);`)}
@@ -39,7 +41,7 @@ const sharedStyle = (p: ISharedButtonProps) => {
 						background: ${p.color};
 						-webkit-background-clip: text;
 						-webkit-text-fill-color: transparent;
-				  `
+					`
 				: `color: ${p.color || p.theme.colors.white};`}
 
 			&:hover {
@@ -122,7 +124,7 @@ export const StyledIconsContainer = styled.div<{ isActive: boolean }>`
 							opacity: 1;
 							transform: translateX(0) rotateX(0);
 						}
-				  `
+					`
 				: css`
 						&:nth-child(1) {
 							opacity: 1;
@@ -132,6 +134,6 @@ export const StyledIconsContainer = styled.div<{ isActive: boolean }>`
 							opacity: 0;
 							transform: translateX(50%) rotateX(-90deg);
 						}
-				  `}
+					`}
 	}
 `;
diff --git a/packages/styled-components/components/default/GradientContainer/GradientContainer.styles.ts b/packages/styled-components/components/default/GradientContainer/GradientContainer.styles.ts
@@ -8,6 +8,6 @@ export const StyledGradientContainer = styled(Flex)`
 		border-radius: 13px;
 		background: ${p.theme.colors.darkGradient};
 		border: 1px solid ${p.theme.colors.darkGray};
-		box-shadow: 0px 5px 20px 10px ${p.theme.colors.black + '50'};
+		box-shadow: 0px 5px 20px 10px ${p.theme.colors.darkGray + '50'};
 	`}
 `;
diff --git a/packages/styled-components/components/default/Navbar/Navbar.tsx b/packages/styled-components/components/default/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import Button from '@components/default/Button';
 import Text from '@components/default/Text';
 import { ETextType } from '@components/default/Text/Text.enum';
 import Flex from '@components/layout/Flex';
+import { EFlex } from '@components/layout/Flex/Flex.enum';
 import { FaStar } from 'react-icons/fa';
 import { EMediaQuery, ESize } from 'theme/theme.enum';
 import WalletButton from '../WalletButton';
@@ -16,7 +17,7 @@ const Navbar = () => {
 				Create Nextjs Dapp
 			</Text>
 
-			<Flex>
+			<Flex vertical={EFlex.center}>
 				<Button
 					href={repoUrl}
 					icon={<FaStar size={28} />}

diff --git a/packages/styled-components/components/default/Tagline/Tagline.tsx b/packages/styled-components/components/default/Tagline/Tagline.tsx
@@ -35,8 +35,7 @@ const Tagline: FC<ITagline> = () => {
 				color={theme.colors.gray}
 				weight={EFontWeight.regular}
 				align={ETextAlign.center}
-				marginTop={ESize.xs}
-				mdMarginTop={ESize.unset}
+				marginTop={ESize['3xs']}
 			>
 				No longer waste valuable time building your project structure
 			</Text>

diff --git a/packages/styled-components/components/default/Text/Text.styles.ts b/packages/styled-components/components/default/Text/Text.styles.ts
@@ -13,7 +13,7 @@ export const StyledText = styled.p<IText>`
 					background: ${p.color};
 					-webkit-background-clip: text;
 					-webkit-text-fill-color: transparent;
-			  `
+				`
 			: `color: ${p.color || p.theme.colors.white};`}
 
 		${p.weight ? `font-weight: ${p.weight};` : ''}
@@ -49,7 +49,7 @@ export const StyledText = styled.p<IText>`
 					fontSize = 1;
 					break;
 				case ETextType.span:
-					// the span herit the font-size from the parent
+					// the span inherit the font-size from the parent
 					return '';
 				default:
 					fontSize = 1;

diff --git a/packages/styled-components/components/default/Text/Text.tsx b/packages/styled-components/components/default/Text/Text.tsx
@@ -1,9 +1,19 @@
+import { ESize } from '@theme/theme.enum';
 import { FC } from 'react';
 import { ETextType } from './Text.enum';
 import { StyledText } from './Text.styles';
 import { IText } from './Text.type';
 
-const Text: FC<IText> = ({ children, type = ETextType.p, component, size, weight, align, color, ...otherProps }) => {
+const Text: FC<IText> = ({
+	children,
+	type = ETextType.p,
+	component,
+	size = ESize.m,
+	weight,
+	align,
+	color,
+	...otherProps
+}) => {
 	return (
 		<StyledText
 			as={component || type}

diff --git a/packages/stylex/app/_components/home/Technologies/Technologies.tsx b/packages/stylex/app/_components/home/Technologies/Technologies.tsx
@@ -77,7 +77,7 @@ const styles = stylex.create({
 		height: {
 			default: '30px',
 			[MD]: '45px',
-			[LG]: '60px'
+			[LG]: '45px'
 		}
 	},
 	link: {

diff --git a/packages/stylex/app/_components/navbar/Navbar/Navbar.tsx b/packages/stylex/app/_components/navbar/Navbar/Navbar.tsx
@@ -10,6 +10,9 @@ const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp';
 
 const SM = '@media (max-width: 899px)';
 const MD = '@media (min-width: 900px)';
+const MAX_MD = '@media (max-width: 900px)';
+const MD_TO_XL = '@media (min-width: 900px) and (max-width: 1536px)';
+const XL = '@media (min-width: 1536px)';
 
 const styles = stylex.create({
 	navbar: {
@@ -46,7 +49,12 @@ const styles = stylex.create({
 		}
 	},
 	icon: {
-		color: '#e3b341'
+		color: '#e3b341',
+		transform: {
+			[MAX_MD]: 'scale(0.7)',
+			[MD_TO_XL]: 'scale(0.8)',
+			[XL]: 'scale(1)'
+		}
 	}
 });