feat(*): Restyle the estimation page buttons

This commit is contained in:
Josh Creek
2023-07-10 18:43:28 +01:00
parent 8eeadb2fee
commit 48c6c30985
+49 -3
View File
@@ -138,6 +138,7 @@
{#if showRestartButton}
<button
class="button button-red"
on:click={() => restartEstimation()}
on:keydown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
@@ -150,7 +151,7 @@
>
{/if}
<UsersList {users} {showEstimates} />
<UsersList {users} {showEstimates} {userId} />
<Estimates onEstimateClick={handleEstimateClick} />
@@ -160,6 +161,51 @@
{/if}
<style>
/* CSS styles */
/* ... */
.button {
appearance: none;
border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji';
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
.button:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}
.button:disabled {
border-color: rgba(27, 31, 35, 0.1);
color: rgba(255, 255, 255, 0.8);
cursor: default;
}
.button:focus {
outline: none;
}
.button-red {
background-color: #b60223;
}
.button-red:hover {
background-color: #a2021f;
}
</style>