feat: nft view page cta module and responsive style updates

src/App.module.scss

@@ -1,3 +1,4 @@
 .Container {
+	margin: 0 1rem;
 	overflow-x: hidden;
 }

src/features/buy-now/BuyNowButton.tsx

@@ -1,5 +1,12 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { BuyNowModal } from './BuyNowModal';
 
-export const BuyNowButton: FC = () => <BuyNowModal trigger={'Buy'} />;
+type BuyNowButtonProps = {
+	zna: string;
+	trigger: ReactNode;
+};
+
+export const BuyNowButton: FC<BuyNowButtonProps> = ({ zna, trigger }) => (
+	<BuyNowModal trigger={trigger} />
+);

src/features/cancel-bid/CancelBidButton/CancelBidButton.module.scss

@@ -1,19 +1,11 @@
 @import '../../../../node_modules/@zero-tech/zui/styles/_colors.scss';
 
-.Container {
-	display: flex;
-	align-items: center;
-	gap: 0.35rem;
+.TextButton {
+	display: contents;
+	color: $blue;
+	line-height: 1.5rem;
+	padding: 0;
+	margin: 0;
 	cursor: pointer;
-
-	.TextButton {
-		color: $blue;
-		line-height: 1.5rem;
-		padding: 0;
-		margin: 0;
-	}
-
-	.Icon {
-		color: $blue;
-	}
+	text-align: left;
 }

src/features/cancel-bid/CancelBidButton/CancelBidButton.tsx

@@ -1,32 +1,26 @@
 import { FC } from 'react';
 
-import { CancelBidModal, CancelBidModalProps } from '..';
-import { IconLinkExternal1 } from '@zero-tech/zui/components/Icons';
+import { CancelBidModal } from '..';
 
 import styles from './CancelBidButton.module.scss';
 
 interface CancelBidButtonProps {
 	zna: string;
+	trigger: string;
 	variant?: 'primary' | 'text';
 }
 
 export const CancelBidButton: FC<CancelBidButtonProps> = ({
 	zna,
+	trigger,
 	variant = 'primary',
 }) => {
-	const triggerVariant: CancelBidModalProps['trigger'] =
-		variant === 'text' ? textButton : 'Cancel Bid';
+	const triggerVariant =
+		variant === 'text' ? (
+			<p className={styles.TextButton}>{trigger}</p>
+		) : (
+			trigger
+		);
 
 	return <CancelBidModal zna={zna} trigger={triggerVariant} />;
 };
-
-/**************
- * textButton
- **************/
-
-const textButton = (
-	<div className={styles.Container}>
-		<p className={styles.TextButton}>{'Cancel Bid'}</p>
-		<IconLinkExternal1 className={styles.Icon} size={'1.15rem'} isFilled />
-	</div>
-);

src/features/domain-settings/DomainSettingsButton/DomainSettingsButton.module.scss

@@ -0,0 +1,10 @@
+@import '../../../../node_modules/@zero-tech/zui/styles/_colors.scss';
+
+.TextButton {
+	color: $blue;
+	line-height: 1.5rem;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	text-align: center;
+}

src/features/domain-settings/DomainSettingsButton/DomainSettingsButton.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+
+import { DomainSettingsModal } from '../DomainSettingsModal';
+
+import styles from './DomainSettingsButton.module.scss';
+
+type DomainSettingsButtonProps = {
+	zna: string;
+	trigger: ReactNode;
+	variant?: 'primary' | 'text';
+};
+
+export const DomainSettingsButton: FC<DomainSettingsButtonProps> = ({
+	zna,
+	trigger,
+	variant,
+}) => {
+	const triggerVariant =
+		variant === 'text' ? (
+			<p className={styles.TextButton}>{trigger}</p>
+		) : (
+			trigger
+		);
+
+	return <DomainSettingsModal trigger={triggerVariant} zna={zna} />;
+};

src/features/domain-settings/DomainSettingsButton/index.ts

@@ -0,0 +1 @@
+export * from './DomainSettingsButton';

src/features/domain-settings/DomainSettingsModal/DomainSettingsModal.module.scss

@@ -0,0 +1,4 @@
+.Container {
+	width: 35.625rem;
+	padding: 3rem;
+}

src/features/domain-settings/DomainSettingsModal/DomainSettingsModal.tsx

@@ -0,0 +1,43 @@
+import { FC, useState } from 'react';
+
+import { useWeb3 } from '../../../lib/hooks/useWeb3';
+import { BasicModalProps } from '../../../lib/types/ui';
+
+import { ConnectWallet } from '../../ui/ConnectWallet';
+import { Modal } from '@zero-tech/zui/components';
+
+import styles from './DomainSettingsModal.module.scss';
+
+export interface DomainSettingsModalProps extends BasicModalProps {
+	zna: string;
+}
+
+export const DomainSettingsModal: FC<DomainSettingsModalProps> = ({
+	zna,
+	...modalProps
+}) => {
+	const { account } = useWeb3();
+
+	const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+	const onClose = () => {
+		setIsModalOpen(false);
+	};
+
+	const content = account ? (
+		<>Domain Settings</>
+	) : (
+		<ConnectWallet message={'Connect your wallet to view domain settings.'} />
+	);
+
+	return (
+		<Modal
+			className={styles.Container}
+			open={isModalOpen}
+			onOpenChange={(isOpen: boolean) => setIsModalOpen(isOpen)}
+			{...modalProps}
+		>
+			{content}
+		</Modal>
+	);
+};

src/features/domain-settings/DomainSettingsModal/index.ts

@@ -0,0 +1 @@
+export * from './DomainSettingsModal';

src/features/domain-settings/index.ts

@@ -0,0 +1,2 @@
+export * from './DomainSettingsButton';
+export * from './DomainSettingsModal';

src/features/place-bid/PlaceBidButton/PlaceBidButton.module.scss

@@ -0,0 +1,10 @@
+@import '../../../../node_modules/@zero-tech/zui/styles/_colors.scss';
+
+.TextButton {
+	color: $blue;
+	line-height: 1.5rem;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	text-align: center;
+}

src/features/place-bid/PlaceBidButton/PlaceBidButton.tsx

@@ -2,11 +2,25 @@ import { FC, ReactNode } from 'react';
 
 import { PlaceBidModal } from '..';
 
+import styles from './PlaceBidButton.module.scss';
+
 type PlaceBidButtonProps = {
 	zna: string;
 	trigger: ReactNode;
+	variant?: 'primary' | 'text';
 };
 
-export const PlaceBidButton: FC<PlaceBidButtonProps> = ({ zna, trigger }) => {
-	return <PlaceBidModal trigger={trigger} zna={zna} />;
+export const PlaceBidButton: FC<PlaceBidButtonProps> = ({
+	zna,
+	trigger,
+	variant,
+}) => {
+	const triggerVariant =
+		variant === 'text' ? (
+			<p className={styles.TextButton}>{trigger}</p>
+		) : (
+			trigger
+		);
+
+	return <PlaceBidModal trigger={triggerVariant} zna={zna} />;
 };

src/features/set-buy-now/SetBuyNow.tsx

@@ -10,7 +10,7 @@ export const SetBuyNow: FC = () => {
 	const content = account ? (
 		<>Set Buy Now</>
 	) : (
-		<ConnectWallet message={'Connect your wallet.'} />
+		<ConnectWallet message={'Connect your wallet to set buy now price.'} />
 	);
 
 	return content;

src/features/set-buy-now/SetBuyNowButton.tsx

@@ -1,7 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { SetBuyNowModal } from './SetBuyNowModal';
 
-export const SetBuyNowButton: FC = () => (
-	<SetBuyNowModal trigger={'Set Buy Now'} />
+type SetBuyNowButtonProps = {
+	trigger: ReactNode;
+};
+
+export const SetBuyNowButton: FC<SetBuyNowButtonProps> = ({ trigger }) => (
+	<SetBuyNowModal trigger={trigger} />
 );

src/features/ui/StatsList/StatsList.module.scss

@@ -1,11 +1,19 @@
 .Stats {
 	display: flex;
-	margin: 0.5rem 0 1rem 0;
+	flex-direction: column;
+	margin: 1rem 0;
 	padding: 0;
-	gap: 1rem;
 	list-style: none;
 
+	gap: 0.5rem;
+
 	> * {
 		flex: 1;
 	}
+
+	@media only screen and (min-width: 878px) {
+		flex-direction: row;
+
+		gap: 1rem;
+	}
 }

src/features/view-bids/ViewBidsButton/ViewBidsButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { ViewBidsModal } from '../ViewBidsModal';
 import { IconLinkExternal1 } from '@zero-tech/zui/components/Icons';
@@ -7,14 +7,16 @@ import styles from './ViewBidsButton.module.scss';
 
 interface ViewBidsButtonProps {
 	zna: string;
+	trigger: ReactNode;
 	variant?: 'primary' | 'text';
 }
 
 export const ViewBidsButton: FC<ViewBidsButtonProps> = ({
 	zna,
+	trigger,
 	variant = 'primary',
 }) => {
-	const triggerVariant = variant === 'text' ? textButton : 'View Bids';
+	const triggerVariant = variant === 'text' ? textButton : trigger;
 
 	return <ViewBidsModal zna={zna} trigger={triggerVariant} />;
 };