From e45174bfa1c5e60736736802b68aedcc9d1acb77 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 7 May 2024 16:52:33 -0700
Subject: [PATCH] feat: random protein first iter

---
 frontend/src/lib/EntryCard.svelte |  3 +-
 frontend/src/routes/Home.svelte   | 69 ++++++++++++++++---------------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontend/src/lib/EntryCard.svelte b/frontend/src/lib/EntryCard.svelte
index ffefbe73..11156bb6 100644
--- a/frontend/src/lib/EntryCard.svelte
+++ b/frontend/src/lib/EntryCard.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { Card } from "flowbite-svelte";
 	export let title = "";
+	export let style = "";
 </script>
 
 <Card
 	class="max-w-full mt-5"
-	style="padding-top: 15px; color: var(--color-text);"
+	style="padding-top: 15px; color: var(--color-text); {style}"
 >
 	<h2 class="text-primary-900 mb-2">{title}</h2>
 	<slot />
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index 6d3f0e24..38cbd085 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -5,6 +5,8 @@
 	import Molstar from "../lib/Molstar.svelte";
 	import ProteinLinkCard from "../lib/ProteinLinkCard.svelte";
 	import { colorScheme } from "../lib/venomeMolstarUtils";
+	import { Card } from "flowbite-svelte";
+	import EntryCard from "../lib/EntryCard.svelte";
 
 	const quickLinks = [
 		{
@@ -18,12 +20,12 @@
 			href: "/articles",
 		},
 		{
-			title: "Upload",
+			title: "Upload New Proteins",
 			desc: "Upload new proteins or create new articles for others to view.",
 			href: "/upload",
 		},
 		{
-			title: "Open Source Code",
+			title: "Completely Open Source",
 			desc: "This sites code is completely open source on GitHub.",
 			href: "https://github.com/xnought/venome",
 		},
@@ -59,43 +61,42 @@
 </div>
 
 <section class="p-5 flex gap-5 flex-col">
-	<div class="flex gap-5 flex-wrap">
-		{#each quickLinks as q}
-			<BigNavLink {...q} />
-		{/each}
+	<div class="flex justify-center">
+		<div class="flex gap-5 flex-wrap">
+			{#each quickLinks as q}
+				<BigNavLink {...q} />
+			{/each}
+		</div>
 	</div>
 
 	{#if randomProtein}
 		<div>
-			<div
-				style="color: var(--primary-700); font-size: 20px; font-weight: 300;"
-			>
-				Random Protein
-			</div>
-			<div class="flex gap-5">
-				<div>
-					<Molstar
-						format="pdb"
-						url="{BACKEND_URL}/protein/pdb/{randomProtein.name}"
-						width={600}
-						height={500}
-						zIndex={990}
-						hideCanvasControls={[
-							"animation",
-							"controlToggle",
-							"selection",
-							"expand",
-							"controlInfo",
-						]}
-					/>
-				</div>
-				<div>
-					<ProteinLinkCard
-						color={colorScheme[0]}
-						entry={randomProtein}
-					/>
+			<EntryCard title="Random Protein" style="margin-top: 0;">
+				<div class="flex gap-5">
+					<div>
+						<ProteinLinkCard
+							color={colorScheme[0]}
+							entry={randomProtein}
+						/>
+					</div>
+					<div>
+						<Molstar
+							format="pdb"
+							url="{BACKEND_URL}/protein/pdb/{randomProtein.name}"
+							width={600}
+							height={500}
+							zIndex={990}
+							hideCanvasControls={[
+								"animation",
+								"controlToggle",
+								"selection",
+								"expand",
+								"controlInfo",
+							]}
+						/>
+					</div>
 				</div>
-			</div>
+			</EntryCard>
 		</div>
 	{/if}
 	<div>About us here</div>