Skip to content

Commit 79d8e79

Browse files
laurakwhitlaurakwhit
authored
Remove rounded borders (#2449)
* Change borders from 2px to 1px * Change ring from 4px to 2px * Remove rounded border in layout and components * Remove rounded border for input components * Remove rounded border for button component * Remove rounded border for other Holocene components * Remove more rounded borders * Remove unnecessary table data cells * Remove rounding on signin and login pages
1 parent 36de886 commit 79d8e79

File tree

83 files changed

+107
-328
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+107
-328
lines changed

Diff for: ‎src/lib/components/batch-operations/table.svelte

-3
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@
6262
<td class="max-sm:hidden" colspan="4">
6363
<EmptyState title={translate('batch.empty-state-title')}></EmptyState>
6464
</td>
65-
<td class="sm:hidden" colspan="2">
66-
<EmptyState title={translate('batch.empty-state-title')}></EmptyState>
67-
</td>
6865
</TableRow>
6966
{/each}
7067
</Table>

Diff for: ‎src/lib/components/bottom-nav-namespaces.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545

4646
<style lang="postcss">
4747
.namespace {
48-
@apply w-full cursor-pointer rounded border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
48+
@apply w-full cursor-pointer border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
4949
5050
&.selected {
5151
@apply text-brand;

Diff for: ‎src/lib/components/bottom-nav.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -159,10 +159,10 @@
159159

160160
<style lang="postcss">
161161
.namespace-wrapper {
162-
@apply surface-black flex h-10 w-full grow flex-row items-center rounded-lg border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
162+
@apply surface-black flex h-10 w-full grow flex-row items-center border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
163163
}
164164
165165
.nav-button {
166-
@apply relative select-none rounded-lg p-1 text-center align-middle text-xs font-medium uppercase transition-all;
166+
@apply relative select-none p-1 text-center align-middle text-xs font-medium uppercase transition-all;
167167
}
168168
</style>

Diff for: ‎src/lib/components/event/event-details-full.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
{#if showEventGroup}
2121
<div class="w-full p-2">
2222
<div
23-
class="flex flex-col gap-0 overflow-hidden rounded-xl border border-subtle xl:flex-row"
23+
class="flex flex-col gap-0 overflow-hidden border border-subtle xl:flex-row"
2424
>
2525
{#each group.eventList as groupEvent}
2626
{@const attributes = formatAttributes(groupEvent)}
@@ -76,7 +76,7 @@
7676
{@const attributes = formatAttributes(event)}
7777
{@const details = Object.entries(attributes)}
7878
<div class="w-full p-2">
79-
<div class="w-full overflow-hidden rounded-xl border border-subtle">
79+
<div class="w-full overflow-hidden border border-subtle">
8080
<EventLinksExpanded links={event?.links} />
8181
{#each details as [key, value] (key)}
8282
<EventDetailsRowExpanded {key} {value} {attributes} />

Diff for: ‎src/lib/components/event/event-details-row.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,6 @@
6161

6262
<style lang="postcss">
6363
.payload {
64-
@apply overflow-hidden rounded border border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
64+
@apply overflow-hidden border border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
6565
}
6666
</style>

Diff for: ‎src/lib/components/event/event-summary-row.svelte

+2-10
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@
181181
{#if pendingAttempt}
182182
<div
183183
class="flex items-center gap-1 {pendingAttempt > 1 &&
184-
'surface-retry rounded px-1 py-0.5'}"
184+
'surface-retry px-1 py-0.5'}"
185185
>
186186
<Icon class="mr-1.5 inline" name="retry" />
187187
{translate('workflows.attempt')}
@@ -227,7 +227,7 @@
227227
class:typedError
228228
class="row expanded"
229229
>
230-
<td class="expanded-cell w-full" colspan="4">
230+
<td class="expanded-cell w-full">
231231
<EventDetailsFull {group} event={currentEvent} />
232232
</td>
233233
</tr>
@@ -269,12 +269,4 @@
269269
.typedError .expanded-cell {
270270
@apply border-b-0;
271271
}
272-
273-
.row.typedError {
274-
@apply rounded-lg;
275-
276-
&.expanded {
277-
@apply rounded-b-none;
278-
}
279-
}
280272
</style>

Diff for: ‎src/lib/components/event/pending-activity-summary-row.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
</p>
5858
<div
5959
class="flex items-center gap-1 {event.attempt > 1 &&
60-
'surface-retry rounded px-1 py-0.5'}"
60+
'surface-retry px-1 py-0.5'}"
6161
>
6262
<Icon class="mr-1.5 inline" name="retry" />
6363
{translate('workflows.attempt')}
@@ -82,7 +82,7 @@
8282
</tr>
8383
{#if expanded}
8484
<tr class="row expanded">
85-
<td class="expanded-cell w-full" colspan="3">
85+
<td class="expanded-cell w-full">
8686
<EventDetailsFull {group} />
8787
</td>
8888
</tr>

Diff for: ‎src/lib/components/event/pending-nexus-summary-row.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
{#if event.attempt}
5959
<div
6060
class="flex items-center gap-1 {event.attempt > 1 &&
61-
'surface-retry rounded px-1 py-0.5'}"
61+
'surface-retry px-1 py-0.5'}"
6262
>
6363
<Icon class="mr-1.5 inline" name="retry" />
6464
{translate('workflows.attempt')}
@@ -79,7 +79,7 @@
7979
</tr>
8080
{#if expanded}
8181
<tr class="row expanded">
82-
<td class="expanded-cell w-full" colspan="3">
82+
<td class="expanded-cell w-full">
8383
<EventDetailsFull {group} />
8484
</td>
8585
</tr>

Diff for: ‎src/lib/components/feedback-button.svelte

+2-8
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,17 @@
1010

1111
<a {href} target="_blank" data-testid="give-feedback" rel="noreferrer">
1212
<div class="feedback-button">
13-
<div class="feedback-icon">
14-
<Icon class="text-purple-200" name="feedback" height={12} width={12} />
15-
</div>
13+
<Icon class="mr-2 text-purple-200" name="feedback" height={12} width={12} />
1614
Give Feedback
1715
</div>
1816
</a>
1917

2018
<style lang="postcss">
2119
.feedback-button {
22-
@apply flex cursor-pointer items-center justify-between rounded-full px-4 py-2 text-sm text-purple-200 shadow-md;
20+
@apply flex cursor-pointer items-center justify-between px-4 py-2 text-sm text-purple-200 shadow-md;
2321
}
2422
2523
.feedback-button:hover {
2624
@apply bg-slate-700;
2725
}
28-
29-
.feedback-icon {
30-
@apply mr-2 rounded-full border-purple-200;
31-
}
3226
</style>

Diff for: ‎src/lib/components/import/event-history-file-import.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
/>
6868
<input
6969
id="import-event-history-file-upload"
70-
class="import-input block rounded-md border border-slate-200 p-2"
70+
class="import-input block border border-slate-200 p-2"
7171
type="file"
7272
accept=".json"
7373
on:change={onFileSelect}

Diff for: ‎src/lib/components/lines-and-dots/workflow-error.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</p>
4747
{/if}
4848
<div
49-
class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border border-danger"
49+
class="mt-2 flex w-full flex-col gap-0 overflow-hidden border border-danger"
5050
>
5151
<div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
5252
<div class="flex items-center gap-2">

Diff for: ‎src/lib/components/login-button.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<style lang="postcss">
1515
.login-button {
16-
@apply flex items-center justify-center rounded-full px-4 py-2 text-sm text-white;
16+
@apply flex items-center justify-center px-4 py-2 text-sm text-white;
1717
}
1818
1919
.login-button:hover {

Diff for: ‎src/lib/components/panel.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<style lang="postcss">
1010
.panel {
11-
@apply rounded-xl border p-8 dark:border-subtle;
11+
@apply border p-8 dark:border-subtle;
1212
1313
&.error {
1414
@apply border-danger bg-danger;

Diff for: ‎src/lib/components/schedule/schedule-basic-frequency.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222

2323
<style lang="postcss">
2424
.frequency {
25-
@apply flex h-auto max-h-32 flex-col overflow-auto rounded-lg border border-subtle bg-primary px-2 py-2 font-mono text-sm;
25+
@apply flex h-auto max-h-32 flex-col overflow-auto border border-subtle bg-primary px-2 py-2 font-mono text-sm;
2626
}
2727
</style>

Diff for: ‎src/lib/components/search-attribute-filter/conditional-menu.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@
5959
<MenuButton
6060
class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
6161
? '!border-l-0'
62-
: ''} whitespace-nowrap {isNullFilter
63-
? 'rounded-l-none'
64-
: 'rounded-none'}"
62+
: ''} whitespace-nowrap"
6563
id="conditional-menu-button"
6664
controls="conditional-menu"
6765
{disabled}

Diff for: ‎src/lib/components/search-attribute-filter/duration-filter.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@
4343
$filter.attribute
4444
} (${translate('workflows.duration-filter-placeholder')})`}
4545
icon="search"
46-
class="w-full"
47-
unroundLeft
46+
class="w-full [&_*]:border-l-0"
4847
bind:value={_value}
4948
on:keydown={handleKeydown}
5049
on:input={validateDuration}

Diff for: ‎src/lib/components/search-attribute-filter/index.svelte

-9
Original file line numberDiff line numberDiff line change
@@ -228,13 +228,4 @@
228228
.filter {
229229
@apply grow;
230230
}
231-
232-
:global(.attribute-selected) {
233-
@apply rounded-r-none;
234-
}
235-
236-
:global(#time-range-filter),
237-
:global(#boolean-filter) {
238-
@apply rounded-l-none;
239-
}
240231
</style>

Diff for: ‎src/lib/components/search-attribute-filter/list-filter.svelte

+3-10
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,14 @@
4444
labelHidden
4545
id="list-filter"
4646
bind:chips
47-
class="w-full"
47+
class="w-full [&_*]:border-l-0 [&_*]:border-r-0"
4848
removeChipButtonLabel={(chip) =>
4949
translate('workflows.remove-keyword-label', { keyword: chip })}
5050
placeholder="{translate('common.enter')} {$filter.attribute}"
51-
unroundLeft
52-
unroundRight
5351
external
5452
/>
5553
<div class="flex h-fit items-center">
56-
<Button
57-
borderRadiusModifier="square-left"
58-
disabled={!chips.length}
59-
type="submit"
60-
>
54+
<Button disabled={!chips.length} type="submit">
6155
{translate('common.search')}
6256
</Button>
6357
<slot />
@@ -70,8 +64,7 @@
7064
type="search"
7165
placeholder={`${translate('common.enter')} ${$filter.attribute}`}
7266
icon="search"
73-
class="w-full"
74-
unroundLeft
67+
class="w-full [&_*]:border-l-0"
7568
bind:value={_value}
7669
on:keydown={handleKeydown}
7770
/>

Diff for: ‎src/lib/components/search-attribute-filter/number-filter.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@
3434
bind:value={_value}
3535
{min}
3636
on:keydown={handleKeydown}
37-
unroundLeft
3837
search
39-
class="-mr-2"
38+
class="-mr-2 [&_*]:border-l-0"
4039
/>
4140
</ConditionalMenu>

Diff for: ‎src/lib/components/search-attribute-filter/search-attribute-menu.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
disabled={$activeQueryIndex !== null}
5858
count={$filter.attribute ? 0 : filters.length}
5959
on:click={() => (searchAttributeValue = '')}
60-
class="text-nowrap {!!$filter.attribute && 'attribute-selected'}"
60+
class="text-nowrap"
6161
>
6262
<svelte:fragment slot="leading">
6363
{#if !$filter.attribute}

Diff for: ‎src/lib/components/search-attribute-filter/text-filter.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@
3939
type="search"
4040
placeholder={`${translate('common.enter')} ${$filter.attribute}`}
4141
icon="search"
42-
class="w-full"
43-
unroundLeft
42+
class="w-full [&_*]:border-l-0"
4443
bind:value={_value}
4544
on:keydown={handleKeydown}
4645
/>

Diff for: ‎src/lib/components/worker-compatibility.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,15 @@
7171
</TableRow>
7272
{:else}
7373
<tr class="w-full">
74-
<td colspan="6">
74+
<td colspan="2">
7575
<EmptyState title={translate('workers.no-version-sets-found')} />
7676
</td>
7777
</tr>
7878
{/each}
7979
</Table>
8080
<h2 class="flex items-center gap-2" data-testid="workers">
8181
{translate('workers.workers')}
82-
<Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
82+
<Badge type="count">{workers?.pollers?.length || 0}</Badge>
8383
</h2>
8484
<Table class="mb-6 w-full min-w-[600px] table-fixed">
8585
<caption class="sr-only" slot="caption"
@@ -161,7 +161,7 @@
161161
</TableRow>
162162
{:else}
163163
<tr class="w-full">
164-
<td colspan={reachability?.buildIdReachability?.length ? 8 : 6}>
164+
<td colspan={reachability?.buildIdReachability?.length ? 6 : 4}>
165165
<EmptyState title={translate('workflows.workers-empty-state')} />
166166
</td>
167167
</tr>

Diff for: ‎src/lib/components/worker-rules.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
</TableRow>
6161
{:else}
6262
<tr class="w-full">
63-
<td colspan="6">
63+
<td colspan="4">
6464
<EmptyState title={translate('workers.no-assignment-rules-found')} />
6565
</td>
6666
</tr>
@@ -104,7 +104,7 @@
104104
</TableRow>
105105
{:else}
106106
<tr class="w-full">
107-
<td colspan="6">
107+
<td colspan="3">
108108
<EmptyState title={translate('workers.no-redirect-rules-found')} />
109109
</td>
110110
</tr>

Diff for: ‎src/lib/components/worker-table.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<h2 class="flex items-center gap-2" data-testid="workers">
1818
{translate('workers.workers')}
19-
<Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
19+
<Badge type="count">{workers?.pollers?.length || 0}</Badge>
2020
</h2>
2121
<Table class="mb-6 w-full min-w-[600px] table-fixed">
2222
<caption class="sr-only" slot="caption"
@@ -65,7 +65,7 @@
6565
</TableRow>
6666
{:else}
6767
<tr class="w-full">
68-
<td colspan={6}>
68+
<td colspan="5">
6969
<EmptyState title={translate('workflows.workers-empty-state')} />
7070
</td>
7171
</tr>

Diff for: ‎src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
/>
7272
</p>
7373
<div
74-
class="surface-subtle mb-2 overflow-scroll whitespace-nowrap rounded border border-subtle p-2"
74+
class="surface-subtle mb-2 overflow-scroll whitespace-nowrap border border-subtle p-2"
7575
>
7676
<code data-testid="batch-action-workflows-query">
7777
{$workflowsQuery}

Diff for: ‎src/lib/components/workflow/dropdown-filter/conditional.svelte

+2-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,12 @@
44

55
<div class="mt-2 transition-all hover:cursor-pointer">
66
<button class="flex items-center" on:click={() => (conditional = '=')}>
7-
<div
8-
class="ml-4 mr-2 rounded-sm p-1 text-primary"
9-
class:active={conditional === '='}
10-
>
7+
<div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '='}>
118
Is
129
</div>
1310
</button>
1411
<button class="flex items-center" on:click={() => (conditional = '!=')}>
15-
<div
16-
class="ml-4 mr-2 rounded-sm p-1 text-primary"
17-
class:active={conditional === '!='}
18-
>
12+
<div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '!='}>
1913
Is Not
2014
</div>
2115
</button>

Diff for: ‎src/lib/components/workflow/input-and-results.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<h3 class="mb-2 flex items-center gap-2">
5252
{title}
5353
{#if showParsedContentCount}
54-
<Badge type="count" class="rounded-sm">{payloads.length}</Badge>
54+
<Badge type="count">{payloads.length}</Badge>
5555
{/if}
5656
</h3>
5757
{#if content}

0 commit comments

Comments
 (0)