aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/lib/components/SubmitPane.svelte
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-03-06 17:22:05 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-03-06 17:22:05 +0100
commit95b733ba4d7e3041adf4fb42c66e2b83ccce1df9 (patch)
tree1e2cb9cde16aae898fa1027515651a2d9ff8cdf8 /web/pw-server/src/lib/components/SubmitPane.svelte
parenta8c913f284ef2bc8f4d882682c398ba834159175 (diff)
downloadplanetwars.dev-95b733ba4d7e3041adf4fb42c66e2b83ccce1df9.tar.xz
planetwars.dev-95b733ba4d7e3041adf4fb42c66e2b83ccce1df9.zip
improve submitpane styling
Diffstat (limited to 'web/pw-server/src/lib/components/SubmitPane.svelte')
-rw-r--r--web/pw-server/src/lib/components/SubmitPane.svelte29
1 files changed, 12 insertions, 17 deletions
diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte
index 6a05e09..497f3ce 100644
--- a/web/pw-server/src/lib/components/SubmitPane.svelte
+++ b/web/pw-server/src/lib/components/SubmitPane.svelte
@@ -79,6 +79,7 @@
<div class="submit-pane">
<div class="match-form">
+ <h4>Play a match</h4>
<div class="play-text">Select an opponent to test your bot</div>
<div class="opponentSelect">
<Select
@@ -86,12 +87,14 @@
labelIdentifier="name"
items={availableBots}
bind:value={selectedOpponent}
+ isClearable={false}
/>
</div>
<button class="submit-button play-button" on:click={submitBot}>Play</button>
</div>
<div class="save-form">
<h4>Save your bot</h4>
+ <div>Add your bot to the opponents list</div>
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
{#if saveErrorText}
<div class="error-text">{saveErrorText}</div>
@@ -108,6 +111,10 @@
flex-direction: column;
}
+ .submit-pane h4 {
+ margin-bottom: 0.3em;
+ }
+
.opponentSelect {
margin: 20px 0;
}
@@ -131,25 +138,13 @@
cursor: pointer;
}
- .play-button {
- padding: 8px 16px;
- border-radius: 8px;
- border: 0;
- font-size: 18pt;
- display: block;
- margin: 10px auto;
- background-color: lightgreen;
- cursor: pointer;
- }
-
.bot-name-input {
width: 100%;
- }
-
- .save-button {
- background-color: lightgreen;
- cursor: pointer;
+ font-size: 16px;
padding: 8px 16px;
- border: 0;
+ box-sizing: border-box;
+ margin: 10px 0;
+ border: 1px solid rgb(216, 219, 223);
+ border-radius: 3px;
}
</style>