chore: Attempt to make UI more consistent with OneConfig V1 Designs

apps/frontend/src/ui/App.tsx

@@ -18,7 +18,7 @@ function App(props: ParentProps) {
 
 	return (
 		<GlobalContexts>
-			<main class="h-screen max-h-screen min-h-screen w-full flex flex-col overflow-hidden bg-primary text-fg-primary">
+			<main class="h-screen max-h-screen min-h-screen w-full flex flex-col overflow-hidden bg-page text-fg-primary">
 				<WindowFrame />
 				<div class="flex flex-col px-8">
 					<Navbar />

apps/frontend/src/ui/components/ScrollableContainer.tsx

@@ -5,7 +5,7 @@ function ScrollableContainer(props: ParentProps) {
 	return (
 		<div class="w-[calc(100%+14px)] flex flex-1 flex-col overflow-hidden">
 			<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
-				<div class="absolute h-full w-[calc(100%-14px)] flex flex-col gap-1">
+				<div class="absolute h-full w-[calc(100%-14px)] flex flex-col gap-2">
 					{props.children}
 				</div>
 			</OverlayScrollbarsComponent>

apps/frontend/src/ui/components/SettingsRow.tsx

@@ -10,7 +10,7 @@ export type SettingsRowProps = ParentProps & {
 function SettingsRow(props: SettingsRowProps) {
 	return (
 		<div
-			class="flex flex-row items-center gap-3.5 rounded-xl bg-component-bg p-4"
+			class="bg-page-elevated flex flex-row items-center gap-3.5 rounded-xl p-4"
 			classList={{
 				'bg-component-bg-disabled': props.disabled,
 				'text-fg-primary-disabled': props.disabled,

apps/frontend/src/ui/components/Sidebar.tsx

@@ -33,7 +33,7 @@ function Sidebar(props: SidebarProps) {
 	}
 
 	return (
-		<div class="w-52 flex flex-col">
+		<div class="w-56 flex flex-col pr-2">
 			<For each={Object.keys(props.links)}>
 				{section => (
 					<div class="flex flex-col gap-y-2">
@@ -49,7 +49,7 @@ function Sidebar(props: SidebarProps) {
 											<a
 												onClick={() => goto(link[2], link[3])}
 												class={
-                                                    `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg' : ''}`
+                                                    `px-3 py-1 rounded-md text-md border hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2], link[3]) ? 'bg-component-bg border-gray-05' : 'border-transparent'}`
 												}
 											>
 												<span class="flex flex-row items-center gap-x-3 *:w-5">

apps/frontend/src/ui/components/WindowFrame.tsx

@@ -15,7 +15,7 @@ interface TitlebarButtonProps {
 function TitlebarButton(props: TitlebarButtonProps) {
 	return (
 		<button class="group h-8 w-8 flex items-center justify-center" onClick={e => props.onClick(e)}>
-			<div class="rounded-lg p-1 group-hover:bg-primary">
+			<div class="rounded-lg p-1 group-hover:bg-page">
 				<props.icon class={`w-[18px] h-[18px] stroke-slate ${props.danger ? 'group-hover:stroke-danger' : 'group-hover:stroke-white'}`} />
 			</div>
 		</button>
@@ -51,7 +51,7 @@ function WindowFrame() {
 	});
 
 	return (
-		<div data-tauri-drag-region class="z-[99999] h-8 w-screen flex flex-row items-center justify-between gap-0.5 bg-secondary pr-0.5">
+		<div data-tauri-drag-region class="z-[99999] h-8 w-screen flex flex-row items-center justify-between gap-0.5 bg-page-elevated pr-0.5">
 			<div class="flex flex-row items-center">
 				<TitlebarButton icon={ChevronLeftIcon} onClick={() => history.back()} />
 			</div>

apps/frontend/src/ui/components/base/Dropdown.module.scss

@@ -10,7 +10,7 @@
     }
 
     .dropdown_element {
-        @apply bg-secondary rounded-lg border border-gray-05 p-1 shadow-md shadow-black/30 h-full;
+        @apply bg-page-elevated rounded-lg border border-gray-05 p-1 shadow-md shadow-black/30 h-full;
     }
 
     .list {

apps/frontend/src/ui/components/content/FormattedLog.tsx

@@ -40,7 +40,7 @@ function FormattedLog(props: FormattedLogProps) {
 	return (
 		<div class="relative h-full flex flex-1 flex-col rounded-md bg-component-bg p-2">
 			<Show when={props.enableAutoScroll === true}>
-				<div class="absolute right-0 top-0 z-1 h-6 w-full flex flex-row justify-end border border-gray-05 rounded-t-md bg-primary p-px">
+				<div class="absolute right-0 top-0 z-1 h-6 w-full flex flex-row justify-end border border-gray-05 rounded-t-md bg-page p-px">
 					<Button.Toggle
 						buttonStyle="icon"
 						children={<AlignBottom01Icon />}

apps/frontend/src/ui/components/overlay/ContextMenu.tsx

@@ -36,7 +36,7 @@ function ContextMenu(props: ContextMenuProps) {
 			visible={props.visible}
 			setVisible={props.setVisible}
 		>
-			<div ref={setRef} class="border border-gray-05 rounded-xl bg-secondary p-1 shadow-black/30 shadow-md">
+			<div ref={setRef} class="border border-gray-05 rounded-xl bg-page-elevated p-1 shadow-black/30 shadow-md">
 				<div class="flex flex-col gap-y-1 text-fg-primary">
 					{props.children}
 				</div>

apps/frontend/src/ui/components/overlay/Modal.tsx

@@ -127,7 +127,7 @@ export type ModalProps = {
 
 function Modal(props: ModalProps) {
 	return (
-		<div ref={mergeRefs(props.ref)} class="min-w-xs flex flex-col gap-y-2 border border-white/5 rounded-lg bg-primary p-4 text-center">
+		<div ref={mergeRefs(props.ref)} class="min-w-xs flex flex-col gap-y-2 border border-white/5 rounded-lg bg-page p-4 text-center">
 			{props.children}
 		</div>
 	);

apps/frontend/src/ui/components/overlay/account/AccountsPopup.tsx

@@ -60,7 +60,7 @@ function AccountPopup(props: Popup.PopupProps) {
 
 	return (
 		<Popup {...props}>
-			<div class="w-72 border border-gray-10 rounded-xl bg-secondary p-2 shadow-black/30 shadow-md">
+			<div class="w-72 border border-gray-10 rounded-xl bg-page-elevated p-2 shadow-black/30 shadow-md">
 				<div class="flex flex-col gap-y-2 text-fg-primary">
 					<Show when={controller.defaultAccount() !== null || controller.defaultAccount() !== undefined}>
 						<AccountComponent

apps/frontend/src/ui/components/overlay/cluster/ClusterCreationModal.tsx

@@ -180,7 +180,7 @@ export function createClusterStep(props: CreateClusterStepType): () => JSX.Eleme
 		}
 
 		return (
-			<div class="min-w-sm flex flex-col rounded-lg bg-primary text-center">
+			<div class="min-w-sm flex flex-col rounded-lg bg-page text-center">
 				<div class="relative h-25 flex">
 					<div class="absolute left-0 top-0 h-full w-full">
 						<img class="h-full w-full rounded-t-lg" src={HeaderImage} alt="Header Image" />

apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx

@@ -35,7 +35,7 @@ function NotificationPopup(props: Popup.PopupProps) {
 
 	return (
 		<Popup {...props}>
-			<div class="w-96 border border-gray-10 rounded-xl bg-secondary p-2 shadow-black/30 shadow-md">
+			<div class="w-96 border border-gray-10 rounded-xl bg-page-elevated p-2 shadow-black/30 shadow-md">
 				<div class="overflow-hidden transition-height" ref={parent}>
 					<div class="flex flex-col items-stretch justify-start gap-2 text-start" ref={inner}>
 						<p class="px-2 pt-1 text-2lg">Notifications</p>

apps/frontend/src/ui/pages/browser/BrowserMain.tsx

@@ -66,7 +66,7 @@ function BrowserMain() {
 
 	return (
 		<div class="relative h-full flex flex-1 flex-col gap-2">
-			<div class="sticky top-0 z-10 flex flex-row justify-between bg-primary">
+			<div class="sticky top-0 z-10 flex flex-row justify-between bg-page">
 				<div class="h-8 flex flex-row gap-2">
 
 					<TextField

apps/frontend/src/ui/pages/cluster/ClusterGame.tsx

@@ -32,10 +32,12 @@ function ClusterGame() {
 
 	onMount(async () => {
 		const unlisten = await bridge.events.processPayload.listen((event) => {
-			if (event.payload.event === 'logging' && event.payload.uuid === params.process_uuid)
+			if (event.payload.uuid !== params.process_uuid)
-				render(() => <Line line={event.payload.message} />, codeRef);
+				return;
 
-			if (event.payload.event === 'finished' && event.payload.uuid === params.process_uuid && cluster() !== undefined)
+			if (event.payload.event === 'logging')
+				render(() => <Line line={event.payload.message} />, codeRef);
+			else if (event.payload.event === 'finished')
 				setIsRunning(false);
 		});
 

apps/frontend/src/ui/pages/cluster/ClusterOverview.tsx

@@ -258,7 +258,7 @@ function Banner(props: BannerProps) {
 	}
 
 	return (
-		<div class="h-37 flex flex-row gap-x-2.5 rounded-xl bg-component-bg p-2.5">
+		<div class="bg-page-elevated h-37 flex flex-row gap-x-2.5 rounded-xl p-2.5">
 			<div class="relative aspect-ratio-video h-full min-w-57 w-57 overflow-hidden border border-gray-10 rounded-lg">
 				<Show when={props.editMode()}>
 					<div

apps/frontend/uno.config.ts

@@ -24,6 +24,10 @@ export default defineConfig({
 			sans: 'Poppins',
 		},
 
+		borderRadius: {
+			md: '0.438rem', // 7px
+		},
+
 		fontSize: {
 			// Based off 16px
 			'xs': '0.688rem',
@@ -107,7 +111,12 @@ export default defineConfig({
 				trace: '#FDFDFD',
 			},
 
-			primary: '#11171C',
+			page: {
+				DEFAULT: '#11171c',
+				elevated: '#151c22',
+				pressed: '#0e1317',
+			},
+
 			secondary: '#192026',
 		},
 		extend: {
@@ -123,10 +132,6 @@ export default defineConfig({
 				transparent: 'transparent',
 			},
 
-			borderRadius: {
-				mdlg: '0.438rem',
-			},
-
 			// animation: {
 			// 	'fade-in': 'fadeIn 150ms easeOutExpo forwards',
 			// 	'fade-out': 'fadeOut 150ms easeOutExpo forwards',

packages/core/src/store/discord.rs

@@ -2,7 +2,7 @@
 use std::sync::atomic::AtomicBool;
 use std::sync::Arc;
 
-use discord_rich_presence::activity::{Activity, Assets};
+use discord_rich_presence::activity::{Activity, Assets, Button};
 use discord_rich_presence::{DiscordIpc, DiscordIpcClient};
 use tokio::sync::RwLock;
 
@@ -59,11 +59,16 @@ impl DiscordRPC {
 			return Ok(());
 		}
 
-		let activity = Activity::new().state(msg).assets(
+		let activity = Activity::new()
-			Assets::new()
+			.state(msg)
-				.large_image("polyfrost")
+			.buttons(vec![
-				.large_text("Polyfrost Logo"),
+				Button::new("Download", "https://polyfrost.org/"),
-		);
+			])
+			.assets(
+				Assets::new()
+					.large_image("polyfrost_logo_512")
+					.large_text("Polyfrost Logo"),
+			);
 
 		let mut client: tokio::sync::RwLockWriteGuard<'_, DiscordIpcClient> =
 			self.client.write().await;