Merge pull request #305 from permaweb/impr/featured-token

impr: featured token wrapper / docs update

Author: NickJ202

src/navigation/Header/styles.ts

@@ -7,7 +7,7 @@ export const Wrapper = styled.header`
 	height: ${STYLING.dimensions.nav.height};
 	width: 100%;
 	position: sticky;
-	z-index: 2;
+	z-index: 3;
 	top: 0;
 	background: ${(props) => props.theme.colors.view.background};
 `;

src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/AssetActionMarketOrders.tsx

@@ -125,7 +125,7 @@ export default function AssetActionMarketOrders(props: IProps) {
 	// Track hydration progress for each token (tokenId -> percentage)
 	const [hydrationProgress, setHydrationProgress] = React.useState<{ [key: string]: number }>({});
 
-	const CURRENT_AO_NODE = 'https://state.forward.computer';
+	const CURRENT_AO_NODE = 'https://state-a.forward.computer';
 	const CURRENT_TOKEN_NODE = 'https://state-1.forward.computer';
 	const SU_URL = 'https://su-router.ao-testnet.xyz';
 

src/views/Asset/AssetAction/AssetActionMarket/AssetActionMarketOrders/styles.ts

@@ -16,12 +16,14 @@ export const LearnMoreWrapper = styled.div`
 	a {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 7.5px;
 		text-decoration: none;
-		opacity: 0.6;
 		transition: opacity 0.2s ease;
-		font-size: ${(props) => props.theme.typography.size.small};
-		color: ${(props) => props.theme.colors.font.alt1};
+
+		span {
+			font-size: ${(props) => props.theme.typography.size.small};
+			color: ${(props) => props.theme.colors.font.primary};
+		}
 
 		&:hover {
 			opacity: 1;
@@ -30,12 +32,9 @@ export const LearnMoreWrapper = styled.div`
 		svg {
 			width: 14px;
 			height: 14px;
-			fill: ${(props) => props.theme.colors.font.alt1};
-		}
-
-		span {
-			font-size: ${(props) => props.theme.typography.size.small};
-			color: ${(props) => props.theme.colors.font.alt1};
+			margin: 6.5px 0 0 0;
+			color: ${(props) => props.theme.colors.font.primary};
+			fill: ${(props) => props.theme.colors.font.primary};
 		}
 	}
 `;

src/views/Docs/DocsDetail/DocTemplate/styles.ts

@@ -8,6 +8,9 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 	padding: ${(props) => (props.isView ? '0 40px 0 30px' : '0')};
 	animation: ${open} ${fadeIn2};
 	margin: 0 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 25px;
 
 	@media (max-width: ${STYLING.cutoffs.initial}) {
 		width: 100%;
@@ -25,15 +28,13 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 		font-weight: ${(props) => props.theme.typography.weight.bold} !important;
 		font-family: ${(props) => props.theme.typography.family.alt1} !important;
 		color: ${(props) => props.theme.colors.font.primary} !important;
-		margin: 0 0 5px 0;
 		padding: 0 0 2.5px 0;
 	}
 
 	h3,
 	h4,
 	h5,
 	h6 {
-		margin: 50px 0 10px 0;
 	}
 
 	h2 {
@@ -45,17 +46,19 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 		}
 	}
 
-	h3,
+	h3 {
+		font-size: clamp(18px, 2.5vw, 28px) !important;
+	}
+
 	h4,
 	h5 {
-		font-size: clamp(18px, 2.5vw, 28px) !important;
+		font-size: clamp(16px, 2vw, 24px) !important;
 	}
 
 	h6 {
 		font-size: clamp(16px, 1.95vw, 22px) !important;
 		color: ${(props) => props.theme.colors.font.alt1} !important;
 		border-bottom: 1px solid transparent;
-		margin: 35px 0 0 0;
 
 		a {
 			font-size: clamp(16px, 1.95vw, 22px) !important;
@@ -82,6 +85,7 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 		font-family: ${(props) => props.theme.typography.family.primary} !important;
 		color: ${(props) => props.theme.colors.font.alt1} !important;
 		line-height: 1.65 !important;
+		margin: -12.5px 0 0 0;
 	}
 
 	a {
@@ -94,7 +98,7 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 		display: flex;
 		flex-direction: column;
 		gap: 7.5px;
-		margin: 7.5px 0 0 0;
+		margin: -12.5px 0 0 0;
 
 		li {
 			list-style-type: none;
@@ -166,7 +170,6 @@ export const Wrapper = styled.div<{ isView: boolean }>`
 		background: ${(props) => props.theme.colors.container.primary.background};
 		border: 1px solid ${(props) => props.theme.colors.border.primary};
 		border-radius: ${STYLING.dimensions.radius.primary};
-		margin: 30px 0 0 0;
 	}
 `;