CSS Switch to Postcss + Various Changes

src/lib/components/Button.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let text: string;
+	export let action: any = () => {};
+</script>
+
+<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>

src/lib/components/Modal.svelte

@@ -1,34 +0,0 @@
-<script>
-	export let showModal = false;
-	export let isPromo = false;
-</script>
-
-{#if showModal}
-	<div class="backdrop" class:promo={isPromo} on:click|self>
-		<div class="modal">
-			<slot />
-		</div>
-	</div>
-{/if}
-
-<style>
-	.backdrop {
-		z-index: 200;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		background-color: rgba(0, 0, 0, 0.8);
-	}
-	.modal {
-		padding: 10px;
-		border-radius: 10px;
-		max-width: 400px;
-		margin: 10% auto;
-		text-align: center;
-		background: #3f3f3f;
-	}
-	.promo .modal {
-		background: crimson;
-		color: white;
-	}
-</style>

src/lib/components/ModalExample.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-
-  export let showSettings: boolean;
-
-  const toggleSettings = () => {
-    showSettings = !showSettings;
-  }
-
-  const handleSubmit = () => {
-    console.log("submitted ", gameGroupSettings);
-  }
-
-  let gameGroupSettings: [] = [];
-
-</script>
-
-<Modal showModal={showSettings} on:click={toggleSettings}>
-  <h3>Settings</h3>
-  <div class="settings-modal">
-    
-    <form on:submit|preventDefault={handleSubmit}>
-      <b>Show Game Groups:</b><br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="a">Group A<br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
-      
-      <div class="settings-modal-save">
-        <button>Save</button>
-      </div>
-    </form>
-  </div>
-
-  
-</Modal>
-
-<style>
-  .settings-modal {
-    text-align: left;
-  }
-
-  .settings-modal input {
-    margin-left: 1rem;
-  }
-
-  .settings-modal-save {
-    text-align: center;
-  }
-</style>

src/lib/components/consts.ts

@@ -1,2 +1,2 @@
-export const apiBaseUrl = 'https://www.chellaris.net/api';
+export const apiBaseUrl = 'https://wip.chellaris.net/api';
 export const MACHINE_GROUP_ID = 12;

src/lib/stores/admin-page/GameStore.ts

@@ -1,5 +1,5 @@
 import { writable, type Writable } from "svelte/store";
 
-const AdminSelectedGameStore: Writable<number> = writable(1);
+const AdminSelectedGameStore: Writable<number> = writable(0);
 
 export default AdminSelectedGameStore;

src/routes/admin/+page.svelte

@@ -264,7 +264,8 @@
 	<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
 </svelte:head>
 
-<div class="frame">
+<div class="container p-12 max-h-full min-w-full">
+	<div class="max-h-full min-w-full grid grid-rows-2 grid-cols-[20%,40%,40%] frame border border-white">
 		{#if loaded}
 			<List area="games" listTitle="Games">
 				{#each Object.values(gameList) as game}
@@ -434,20 +435,14 @@
 			</List>
 		{/if}
 	</div>
+</div>
+
 
 <style>
 	.frame {
-		display: grid;
 		grid-template-areas:
 			'games empires details'
 			'groups empires details';
-		grid-template-columns: 20% 40% 40%;
-		grid-template-rows: 50% 50%;
-		max-height: calc(100%);
-		overflow: hidden;
-		margin: 3rem;
-		box-sizing: border-box;
-		border: 1px solid white;
 	}
 
 	/* General Classes */

src/routes/admin/EmpireDetails.svelte

@@ -182,6 +182,7 @@
 	}
 </script>
 
+<div>
 	{#if newEmpire && newEmpirePrepared}
 	<!-- <div>
 		ID: {empire.id}
@@ -378,6 +379,8 @@
 
 	<button on:click={updateEmpire}>Save</button>
 {/if}
+</div>
+
 
 <style>
 </style>

src/routes/admin/List.svelte

@@ -3,7 +3,7 @@
 	export let listTitle = 'List';
 </script>
 
-<div class="container" style={'--area:' + area}>
+<div class="container grid min-h-none max-h-full" style={'grid-area:' + area}>
 	<div class="header">
 		{listTitle}
 	</div>
@@ -14,15 +14,11 @@
 
 <style>
 	.container {
-		grid-area: var(--area);
-		display: grid;
 		grid-template-areas:
 			'list-header'
 			'list-content';
 		grid-template-rows: 2rem calc(100% - 2rem);
 		grid-template-columns: 100%;
-		min-height: none;
-		max-height: 100%;
 	}
 
 	.header {

src/routes/graphs/+layout.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import SubNav from './SubNav.svelte';
-	import '../styles.css';
+	import '../../app.postcss';
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
 	import GraphsTabStore from '$lib/stores/GraphsTab';
 
-  let graphsTab = "tab";
+  let graphsTab = "excel-style";
   // Tab Detection
   GraphsTabStore.subscribe(tab => {
     graphsTab = tab;