Make compact form controls the default
- tighten the shared button and select primitives to the compact modal style - remove issues-page select overrides that no longer need to exist - drop the issue modal button sizing overrides so shared defaults handle the density
This commit is contained in:
Antti Kettunen
parent
32bf52cc18
commit
b34cea3388
4 changed files with 8 additions and 210 deletions
|
|
@ -74,7 +74,7 @@
|
|||
width: auto;
|
||||
min-width: 130px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)),
|
||||
rgba(255, 255, 255, 0.05);
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
10px 6px;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
padding: 12px 34px 12px 14px;
|
||||
padding: 8px 32px 8px 12px;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
background 0.18s ease,
|
||||
|
|
@ -244,16 +244,16 @@
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
min-height: 42px;
|
||||
padding: 10px 16px;
|
||||
min-height: 36px;
|
||||
padding: 8px 12px;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
|
|
@ -289,6 +289,6 @@
|
|||
.formActions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,37 +44,6 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.issuesFilterSelect {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
padding: 7px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
color-scheme: dark;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23888'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
padding-right: 28px;
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.issuesFilterSelect:focus {
|
||||
border-color: rgba(var(--accent-light-rgb), 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12);
|
||||
}
|
||||
|
||||
.issuesFilterSelect option,
|
||||
.issuesFilterSelect optgroup {
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.issuesStats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
|
@ -648,24 +617,6 @@
|
|||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.issueActionDownload,
|
||||
.issueActionWishlist,
|
||||
.modalButtonSecondary,
|
||||
.modalButtonPrimary,
|
||||
.modalButtonProgress,
|
||||
.modalButtonResolve,
|
||||
.modalButtonDismiss,
|
||||
.modalButtonReopen,
|
||||
.modalButtonDelete {
|
||||
min-height: auto;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.issueActionDownload {
|
||||
background: rgba(var(--accent-light-rgb), 0.12);
|
||||
color: rgb(var(--accent-light-rgb));
|
||||
|
|
@ -944,7 +895,6 @@
|
|||
);
|
||||
color: #08110b;
|
||||
border-color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modalButtonProgress {
|
||||
|
|
@ -1011,11 +961,6 @@
|
|||
padding: 18px;
|
||||
}
|
||||
|
||||
.issuesFilterSelect {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issuesStats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
|
|
|
|||
|
|
@ -44,10 +44,6 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.issuesFilterSelect {
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.issuesStats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
|
@ -664,117 +660,6 @@
|
|||
border-color: rgba(255, 165, 0, 0.35);
|
||||
}
|
||||
|
||||
.issueDetailResponseTextarea {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 70px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.issueDetailResponseTextarea:focus {
|
||||
border-color: rgba(var(--accent-light-rgb), 0.5);
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 0 22px 22px;
|
||||
}
|
||||
|
||||
.modalButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.modalButton:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.modalButtonSecondary {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.modalButtonPrimary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(var(--accent-rgb), 0.95),
|
||||
rgba(var(--accent-light-rgb), 0.85)
|
||||
);
|
||||
color: #08110b;
|
||||
border-color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modalButtonDanger {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
color: #ffd0d0;
|
||||
}
|
||||
|
||||
.modalButtonGhost {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.modalButtonProgress {
|
||||
background: rgba(77, 166, 255, 0.15);
|
||||
color: #4da6ff;
|
||||
border-color: rgba(77, 166, 255, 0.25);
|
||||
}
|
||||
|
||||
.modalButtonResolve {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: #4ade80;
|
||||
border-color: rgba(74, 222, 128, 0.25);
|
||||
}
|
||||
|
||||
.modalButtonDismiss {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
color: #ffd0d0;
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
}
|
||||
|
||||
.modalButtonReopen {
|
||||
background: rgba(var(--accent-light-rgb), 0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(var(--accent-light-rgb), 0.3);
|
||||
}
|
||||
|
||||
.modalButtonDelete {
|
||||
background: rgba(239, 68, 68, 0.14);
|
||||
color: #ffd0d0;
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
}
|
||||
|
||||
.modalButtonDelete:hover:not(:disabled),
|
||||
.modalButtonDanger:hover:not(:disabled),
|
||||
.modalButtonProgress:hover:not(:disabled),
|
||||
.modalButtonResolve:hover:not(:disabled),
|
||||
.modalButtonDismiss:hover:not(:disabled),
|
||||
.modalButtonReopen:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.issuesStats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
|
@ -809,11 +694,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.issuesFilterSelect {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issuesStats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
|
|
@ -842,29 +722,4 @@
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal {
|
||||
max-height: calc(100vh - 24px);
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
padding: 0 18px 18px;
|
||||
}
|
||||
|
||||
.issueDetailMetaGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.issueMetaValue {
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.issueActionButtons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,7 +180,6 @@ function IssueBoard({
|
|||
<div className={styles.issuesFilters} id="issues-filters">
|
||||
<Select
|
||||
id="issues-filter-status"
|
||||
className={styles.issuesFilterSelect}
|
||||
aria-label="Status"
|
||||
value={statusFilter}
|
||||
onChange={(event) => onStatusChange(event.target.value as IssueStatus | 'all')}
|
||||
|
|
@ -193,7 +192,6 @@ function IssueBoard({
|
|||
</Select>
|
||||
<Select
|
||||
id="issues-filter-category"
|
||||
className={styles.issuesFilterSelect}
|
||||
aria-label="Category"
|
||||
value={categoryFilter}
|
||||
onChange={(event) => onCategoryChange(event.target.value)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue