Finalize new design

Author: rick-nu

src/app/globals.scss

@@ -13,7 +13,7 @@ body {
 		220deg,
 		$color-yellow-50,
 		$color-purple-50,
-		$color-black,
+		$color-black
 	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 	font-family: var(--font-text), sans-serif;
 }

src/components/Content/Content.tsx

@@ -8,6 +8,7 @@ import Markdown from 'markdown-to-jsx';
 import { highlighter } from '@/components/Generator/GeneredTaskfile/Highlighter';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import SaveFile from '@/components/Generator/GeneredTaskfile/SaveFile';
 
 const links = [
 	{ href: '/docs', label: 'About Taskfile' },
@@ -41,7 +42,12 @@ const Content = ({ content }: WindowProps): ReactElement => {
 					className={styles.content}
 					options={{
 						overrides: {
-							pre: (original) => <pre>{highlighter(original.children.props.children)}</pre>,
+							pre: (original) => (
+								<pre>
+									<SaveFile content={original.children.props.children} className={styles.preSave} />
+									{highlighter(original.children.props.children)}
+								</pre>
+							),
 							img: ({ alt, src }) => <img className={styles.image} src={src.replace('public/', '/')} alt={alt} />,
 							a: ({ href, props, children }) => {
 								if (href.includes('.md')) {

src/components/Content/content.module.scss

@@ -74,10 +74,12 @@
 	}
 
 	pre {
+		position: relative;
 		padding: 1rem;
 		font-size: 0.8rem;
 		background: rgba(16, 0, 31, 0.87);
 		border-radius: 0.5rem;
+		overflow: hidden;
 	}
 
 	code {
@@ -86,12 +88,13 @@
 		padding: 0.2rem;
 		border-radius: 0.2rem;
 	}
+}
 
-	img {
-		border-radius: 0.5rem;
-	}
+.content .preSave {
+	top: 1rem;
 }
 
 .image {
 	max-width: 100%;
+	border-radius: 0.5rem;
 }

src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx

@@ -6,9 +6,10 @@ import styles from './save-file.module.scss';
 
 type SaveFileProps = {
 	content: string;
+	className?: string;
 };
 
-const SaveFile = ({ content }: SaveFileProps): ReactElement => {
+const SaveFile = ({ content, className = '' }: SaveFileProps): ReactElement => {
 	const [isCopied, setCopied] = useState(false);
 
 	const copyToClipboard = (): void => {
@@ -29,7 +30,7 @@ const SaveFile = ({ content }: SaveFileProps): ReactElement => {
 	};
 
 	return (
-		<div className={styles.container}>
+		<div className={`${styles.container} ${className}`}>
 			<button type="button" className={styles.download} onClick={download} title="Download Taskfile" />
 			<button
 				type="button"

src/style/variables/_color.scss

@@ -4,10 +4,10 @@ $color-white: #fff;
 
 $color-blue-50: #0068bc;
 
-$color-purple-50: #5D4CB6;
+$color-purple-50: #5d4cb6;
 $color-purple-10: color.adjust($color-purple-50, $lightness: 40%);
 
-$color-black: #221D3D;
+$color-black: #221d3d;
 
 $color-yellow-50: #f2a900;
 $color-yellow-80: color.adjust($color-yellow-50, $lightness: -30%);