fix: add scrollarea to codeblock

medama-io · Aug 10, 2024 · d060182 · d060182
1 parent f76170c
commit d060182
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 37 deletions.
diff --git a/dashboard/app/components/ScrollArea.module.css b/dashboard/app/components/ScrollArea.module.css
@@ -1,9 +1,6 @@
 .root {
 	width: 100%;
-	border-radius: 4px;
 	overflow: hidden;
-	box-shadow: 0 2px 10px var(--black-a7);
-	background-color: white;
 	--scrollbar-size: 10px;
 }
 
@@ -20,11 +17,11 @@
 	/* disable browser handling of all panning and zooming gestures on touch devices */
 	touch-action: none;
 	padding: 2px;
-	background: var(--black-a6);
+	background: var(--black-a1);
 	transition: background 160ms ease-out;
 
 	&:hover {
-		background: var(--black-a8);
+		background: var(--black-a3);
 	}
 
 	&[data-orientation="vertical"] {
@@ -39,7 +36,7 @@
 
 .thumb {
 	flex: 1;
-	background: var(--mauve-10);
+	background: var(--black-a3);
 	border-radius: var(--scrollbar-size);
 	position: relative;
 

diff --git a/dashboard/app/components/ScrollArea.tsx b/dashboard/app/components/ScrollArea.tsx
@@ -4,26 +4,32 @@ import classes from './ScrollArea.module.css';
 
 interface ScrollAreaProps {
 	children: React.ReactNode;
+	horizontal?: boolean;
+	vertical?: boolean;
 }
 
-const ScrollArea = ({ children }: ScrollAreaProps) => {
+const ScrollArea = ({ children, horizontal, vertical }: ScrollAreaProps) => {
 	return (
 		<ScrollAreaPrimitive.Root className={classes.root}>
 			<ScrollAreaPrimitive.Viewport className={classes.viewport}>
 				{children}
 			</ScrollAreaPrimitive.Viewport>
-			<ScrollAreaPrimitive.Scrollbar
-				className={classes.scrollbar}
-				orientation="vertical"
-			>
-				<ScrollAreaPrimitive.Thumb className={classes.thumb} />
-			</ScrollAreaPrimitive.Scrollbar>
-			<ScrollAreaPrimitive.Scrollbar
-				className={classes.scrollbar}
-				orientation="horizontal"
-			>
-				<ScrollAreaPrimitive.Thumb className={classes.thumb} />
-			</ScrollAreaPrimitive.Scrollbar>
+			{vertical && (
+				<ScrollAreaPrimitive.Scrollbar
+					className={classes.scrollbar}
+					orientation="vertical"
+				>
+					<ScrollAreaPrimitive.Thumb className={classes.thumb} />
+				</ScrollAreaPrimitive.Scrollbar>
+			)}
+			{horizontal && (
+				<ScrollAreaPrimitive.Scrollbar
+					className={classes.scrollbar}
+					orientation="horizontal"
+				>
+					<ScrollAreaPrimitive.Thumb className={classes.thumb} />
+				</ScrollAreaPrimitive.Scrollbar>
+			)}
 			<ScrollAreaPrimitive.Corner className={classes.corner} />
 		</ScrollAreaPrimitive.Root>
 	);

diff --git a/dashboard/app/components/settings/Code.module.css b/dashboard/app/components/settings/Code.module.css
@@ -22,11 +22,13 @@
 .copy {
 	composes: button button-icon from global;
 
-	border-radius: 4px;
 	height: 32px;
+	margin-left: 8px;
 
 	background-color: var(--me-color-bg-grey-disabled);
 
+	border-radius: 4px;
+
 	&:hover {
 		background-color: var(--me-color-selected-light);
 	}

diff --git a/dashboard/app/components/settings/Code.tsx b/dashboard/app/components/settings/Code.tsx
@@ -4,6 +4,7 @@ import { IconButton } from '@/components/Button';
 import { useClipboard } from '@/hooks/use-clipboard';
 
 import classes from './Code.module.css';
+import { ScrollArea } from '../ScrollArea';
 
 interface CodeBlockProps {
 	code: string;
@@ -14,16 +15,18 @@ const CodeBlock = ({ code }: CodeBlockProps) => {
 
 	return (
 		<div className={classes.root}>
-			<pre className="group">
-				<code>{code}</code>
-				<IconButton
-					className={classes.copy}
-					label="Copy tracking script code"
-					onClick={() => copy(code)}
-				>
-					{copied ? <CheckIcon /> : <CopyIcon />}
-				</IconButton>
-			</pre>
+			<ScrollArea horizontal>
+				<pre className="group">
+					<code>{code}</code>
+					<IconButton
+						className={classes.copy}
+						label="Copy tracking script code"
+						onClick={() => copy(code)}
+					>
+						{copied ? <CheckIcon /> : <CopyIcon />}
+					</IconButton>
+				</pre>
+			</ScrollArea>
 		</div>
 	);
 };

diff --git a/dashboard/app/routes/settings.tracker.tsx b/dashboard/app/routes/settings.tracker.tsx
@@ -148,11 +148,15 @@ export default function Index() {
 			<SectionWrapper>
 				<SectionTitle>
 					<h3>Copy Tracker Code</h3>
-					<p style={{ marginTop: 4, marginBottom: 8 }}>
+					<p style={{ marginTop: 4, marginBottom: 12 }}>
+						Paste the following code in the <code>&lt;head&gt;</code> component
+						on your website:
+					</p>
+					<CodeBlock code={code} />
+					<p style={{ marginTop: 12 }}>
 						Learn more about configuring the tracker in our documentation.
 					</p>
 				</SectionTitle>
-				<CodeBlock code={code} />
 			</SectionWrapper>
 		</>
 	);

diff --git a/dashboard/app/styles/global.css b/dashboard/app/styles/global.css
@@ -33,14 +33,14 @@
 	--me-color-badge-positive: #dfffb7;
 	--me-color-badge-negative: #ffd5b7;
 
-	/* --black-a1: color(display-p3 0 0 0 / 0.05); /* rgba(0, 0, 0, 0.05); */
+	--black-a1: color(display-p3 0 0 0 / 0.05); /* rgba(0, 0, 0, 0.05); */
 	/* --black-a2: color(display-p3 0 0 0 / 0.1); /* rgba(0, 0, 0, 0.1); */
 	--black-a3: color(display-p3 0 0 0 / 0.15); /* rgba(0, 0, 0, 0.15); */
-	/* --black-a4: color(display-p3 0 0 0 / 0.2); /* rgba(0, 0, 0, 0.2); */
-	/* --black-a5: color(display-p3 0 0 0 / 0.3); /* rgba(0, 0, 0, 0.3); */
-	/* --black-a6: color(display-p3 0 0 0 / 0.4); /* rgba(0, 0, 0, 0.4); */
+	--black-a4: color(display-p3 0 0 0 / 0.2); /* rgba(0, 0, 0, 0.2); */
+	--black-a5: color(display-p3 0 0 0 / 0.3); /* rgba(0, 0, 0, 0.3); */
+	--black-a6: color(display-p3 0 0 0 / 0.4); /* rgba(0, 0, 0, 0.4); */
 	--black-a7: color(display-p3 0 0 0 / 0.5); /* rgba(0, 0, 0, 0.5); */
-	/* --black-a8: color(display-p3 0 0 0 / 0.6); /* rgba(0, 0, 0, 0.6); */
+	--black-a8: color(display-p3 0 0 0 / 0.6); /* rgba(0, 0, 0, 0.6); */
 	/* --black-a9: color(display-p3 0 0 0 / 0.7); /* rgba(0, 0, 0, 0.7); */
 	--black-a10: color(display-p3 0 0 0 / 0.8); /* rgba(0, 0, 0, 0.8); */
 	--black-a11: color(display-p3 0 0 0 / 0.9); /* rgba(0, 0, 0, 0.9); */