Skip to content

Commit

Permalink
feat: update colorsceme
Browse files Browse the repository at this point in the history
  • Loading branch information
@awwpotato
awwpotato committed Nov 14, 2024
1 parent 8d43bf0 commit be983f5
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 43 deletions.
6 changes: 4 additions & 2 deletions src/lib/components/Action.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
}: { action_data: AutoActionData; deleteself: () => void } = $props();
//let actionBorderColor = $derived(action.success ? 'border-cresc_green' : 'border-fail_red');
let actionBackgroundColor = $derived(action_data.success ? 'bg-cresc_green' : 'bg-fail_red');
let actionBackgroundColor = $derived(
action_data.success ? 'bg-jungle_green' : 'bg-flaming_red'
);
</script>

<!-- <button -->
Expand All @@ -18,7 +20,7 @@
<!-- </button> -->

<button
class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-white"
onclick={deleteself}
>
{action_data.action}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/SuccessFail.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
</script>

<div
class="bg-zinc-800 text-zinc-50 text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-3 gap-4 p-4"
class="bg-eerie_black text-white text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-4 gap-4 p-4"
>
<button
class="rounded-lg row-span-2 shadow-lg shadow-green-600/50 bg-green-600"
class="rounded-lg row-span-3 shadow-lg shadow-jungle_green/50 bg-jungle_green"
onclick={() => complete(true)}>Success</button
>
<button
class="rounded-lg row-span-2 shadow-lg shadow-red-600/50 bg-red-600"
class="rounded-lg row-span-3 shadow-lg shadow-flaming_red/50 bg-flaming_red"
onclick={() => complete(false)}>Fail</button
>
<button
class="rounded-lg col-span-2 shadow-lg shadow-zinc-600/50 bg-zinc-600"
class="rounded-lg col-span-2 shadow-lg shadow-gunmetal/50 bg-gunmetal"
onclick={() => cancel()}>Cancel</button
>
</div>
2 changes: 1 addition & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@

<style lang="postcss">
:global(body) {
@apply bg-zinc-800;
@apply bg-eerie_black text-white;
}
</style>
7 changes: 5 additions & 2 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
<div class="flex flex-col items-center justify-evenly h-dvh">
<h1 class="text-center text-5xl font-bold">hiiii :3</h1>
<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/scout">
<a
class="text-center text-2xl text-yolk_yellow rounded bg-gunmetal px-4 py-2 font-bold"
href="/scout"
>
scout
</a>
</div>
6 changes: 3 additions & 3 deletions src/routes/scout/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@
});
</script>

<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
<div class="grid grid-row-10 p-2 h-dvh place-items-center">
<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
{#if timelineExtended}
<div class="row-span-8">
<Timeline bind:actions />
</div>
<button
class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
onclick={() => (timelineExtended = false)}>Hide Timeline</button
>
{:else}
Expand All @@ -42,7 +42,7 @@
</div>

<button
class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
class="row-span-1 bg-gunmetal h-10 w-80 p-1 rounded static"
onclick={() => (timelineExtended = true)}>Show Timeline</button
>
{/if}
Expand Down
42 changes: 21 additions & 21 deletions src/routes/scout/ActionInputs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,104 +57,104 @@
<div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
{#if is_none_state}
<div class="grid gap-2 grid-cols-2">
<button class="bg-zinc-500 p-2 rounded" onclick={intake_piece}>Intake</button>
<button class="bg-gunmetal p-2 rounded" onclick={intake_piece}>Intake</button>
{#if held_scorables > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={score_piece}>Score</button>
<button class="bg-gunmetal p-2 rounded" onclick={score_piece}>Score</button>
{/if}
{#if held_ejectables > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={eject_piece}>Eject</button>
<button class="bg-gunmetal p-2 rounded" onclick={eject_piece}>Eject</button>
{/if}
</div>
{:else if is_intake_state}
<div class="grid gap-3 grid-cols-2 grid-rows-2 flex-grow">
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
>Intake Bunny</button
>
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeTote')}
<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeTote')}
>Intake Tote</button
>
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBalloon')}
<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'IntakeBalloon')}
>Intake Balloon From Ground</button
>
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => (actionState = 'IntakeBalloonCoral')}
>Intake Ballon From Coral</button
>
<button
class="bg-zinc-500 col-span-2 p-2 rounded"
class="bg-gunmetal col-span-2 p-2 rounded"
onclick={() => (actionState = 'None')}>Cancel</button
>
</div>
{:else if is_score_state}
<div class="grid gap-2 grid-cols-2 grid-rows-4">
{#if held_bunnies > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('Low')}
<button class="bg-gunmetal p-2 rounded" onclick={() => score_bunny('Low')}
>Score Bunny in Low Zone</button
>
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => score_bunny('UncontrolledTote')}
>Score Bunny in Uncontrolled Tote</button
>
{#if held_totes > 0}
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => score_bunny('InternalTote')}
>Score Bunny in Internal Held Tote</button
>
{/if}
<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('ExternalTote')}
<button class="bg-gunmetal p-2 rounded" onclick={() => score_bunny('ExternalTote')}
>Score Bunny in External Held Tote</button
>
{/if}
{#if held_balloons > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={() => score_balloon('Low')}
<button class="bg-gunmetal p-2 rounded" onclick={() => score_balloon('Low')}
>Score Ballon in Low Zone</button
>
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => score_balloon('UncontrolledTote')}
>Score Bunny in Uncontrolled Tote</button
>
{#if held_totes > 0}
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => score_balloon('InternalTote')}
>Score Balloon in Internal Held Tote</button
>
{/if}
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => score_balloon('ExternalTote')}
>Score Balloon in External Held Tote
</button>
{/if}
<button
class="bg-zinc-500 col-span-2 p-2 rounded"
class="bg-gunmetal col-span-2 p-2 rounded"
onclick={() => (actionState = 'None')}>Cancel</button
>
</div>
{:else if is_eject_state}
<div class="grid gap-2 grid-cols-2 grid-rows-4">
{#if held_bunnies > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectBunny')}
<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'EjectBunny')}
>Eject Bunny</button
>
{/if}
{#if held_balloons > 0}
<button
class="bg-zinc-500 p-2 rounded"
class="bg-gunmetal p-2 rounded"
onclick={() => (actionState = 'EjectBalloon')}>Eject Ballon</button
>
{/if}
{#if held_totes > 0}
<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectTote')}
<button class="bg-gunmetal p-2 rounded" onclick={() => (actionState = 'EjectTote')}
>Eject Tote</button
>
{/if}
<button
class="bg-zinc-500 col-span-2 p-2 rounded"
class="bg-gunmetal col-span-2 p-2 rounded"
onclick={() => (actionState = 'None')}>Cancel</button
>
</div>
Expand Down
19 changes: 9 additions & 10 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ export default {
theme: {
extend: {
colors: {
navbar_black: '#1c1c1c',
outline_gray: '#c2c2c2',
cresc_green: '#00d586',
bg_gray: '#2c2c2c',
slack_purple: '#4A154B',
robot_blue: '#0083E6',
robot_red: '#ED1C24',
fail_red: '#EE3C42',
btn_grey: '#5C5C5C',
text_white: '#ffffff'
white: '#ffffff',
eerie_black: '#1C1C1C',
yolk_yellow: '#FFC145',
flaming_red: '#ED2C2C',
steel_blue: '#358188',
gunmetal: '#20282C',
chicken_orange: '#F7901E',
eminence: '#6C3082',
jungle_green: '#49A078'
}
}
},
Expand Down

0 comments on commit be983f5

Please sign in to comment.