Merge pull request #320 from Eveeifyeve/redesign

Improvements to Release Notes.

src/components/ReleaseNoteItem.astro

@@ -1,13 +1,40 @@
 ---
-import { ReleaseNote } from "../release-notes"
+import type { ReleaseNote } from '../release-notes'
+export type Props = ReleaseNote
+const props = Astro.props
 
-export type Props = ReleaseNote;
-
-const props = Astro.props;
+const date = new Date(Date.parse(props.date));
 ---
 
+<section
+	class="relative mt-24 flex flex-col border-t pt-24 lg:flex-row"
+	id={props.version}
+	>
+	<div class="mb-0 hidden lg:block ml-5 md:ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground">
+		{date.toLocaleDateString('en-US', { dateStyle: 'long'})}
+		<div class="mt-2 flex items-center text-blue-500 opacity-60">
+			<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
+			<span class="mx-1 text-muted-foreground">•</span>
+			<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
+		</div>
+	</div>
+
+	<div class="px-5 md:px-10 md:pr-32">
+		<h1 class="text-3xl font-bold">Release notes for {props.version} 🎉</h1>
+		<p class="mt-8 text-lg text-muted-forground">
+			If you encounter any issues, please report them on <a rel="noopener noreferrer" target="_blank" href="https://github.com/zen-browser/desktop/issues/" class="text-underline text-blue-500">the issues page</a>. Thanks everyone for your feedback! ❤️ 
+		</p>
+
+		{props.extra ? (
+			<p class="text-md mt-8 text-muted-foreground">
+				{props.extra}
+			</p>
+			) : null
+		}
+		<div class="mt-8" data-orientation="vertical"></div>
+		<!--TODO: Fixes, Breaking changes, Features  -->
 
+	</div>
+</section>
 
-<section class="relative flex flex-col border-t lg:flex-row mt-24 pt-24" id={props.version}>
 
-</section> 

src/pages/release-notes.astro

@@ -0,0 +1,29 @@
+---
+import Layout from '../layouts/Layout.astro'
+import ReleaseNoteItem from '../components/ReleaseNoteItem.astro'
+import { releaseNotes } from '../release-notes'
+---
+
+<Layout title="Release Notes">
+	<main
+		class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
+	>
+		<div
+			class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
+		>
+			<h1 class="mt-48 text-4xl font-bold">Release Notes</h1>
+			<p class="text-muted-foreground mt-8 text-lg">
+				Stay up to date with the latest changes to Zen Browser! Since the <a
+					class="text-blue-500"
+					href="#1.0.0-a.1">first release</a
+				> till <a
+					class="text-blue-500"
+					href={`/release-notes#${releaseNotes[0].version}`}
+					>{releaseNotes[0].version}</a
+				>, we've been working hard to make Zen Browser the best it can be.
+				Thanks everyone for your feedback! ❤️
+			</p>
+			{releaseNotes.map((notes) => <ReleaseNoteItem {...notes} />)}
+		</div>
+	</main>
+</Layout>

src/release-notes.ts

@@ -16,6 +16,7 @@ export interface ReleaseNote {
 	workflowId?: number;
 }
 
+//TODO: Fix dates for Date.parse()
 export const releaseNotes: ReleaseNote[] = [
 	{
 		version: "1.0.0-a.1",