refactor: Touch up lang fallback message & style

Author: rschristian

src/components/edit-button/index.js

@@ -11,20 +11,23 @@ export default function EditThisPage({ isFallback }) {
 	const editUrl = `https://github.com/preactjs/preact-www/tree/master/content/${lang}${path}`;
 	return (
 		<div class={style.wrapper}>
-			<a
-				class={style.edit}
-				href={editUrl}
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				{!isFallback ? 'Edit this Page' : 'Add translation'}
-			</a>
-
-			{isFallback && (
+			{!isFallback ? (
+				<a
+					class={style.edit}
+					href={editUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Edit this Page
+				</a>
+			) : (
 				<div class={style.fallback}>
 					<div class={style.fallbackInner}>
 						Could not find a translation for this page. You can help us out by{' '}
-						<a href={editUrl}>adding one here</a>.
+						<a href={editUrl} target="_blank" rel="noopener noreferrer">
+							adding one here
+						</a>
+						.
 					</div>
 				</div>
 			)}

src/components/edit-button/style.module.css

@@ -38,7 +38,7 @@
 }
 
 .fallback {
-	padding-top: 4rem;
+	padding-top: 2rem;
 }
 
 .fallbackInner {
@@ -47,7 +47,9 @@
 	color: #444;
 
 	a {
-		color: var(--color-link);
+		font-weight: bold;
+		color: var(--color-brand);
+
 		text-decoration-skip-ink: auto;
 		text-decoration: underline;
 		text-decoration-color: var(--color-table-border);