Skip to content

Commit c8a189a

Browse files
committed
Settings::ApiTokens: Improve list and form styling
1 parent 681cdd5 commit c8a189a

File tree

2 files changed

+22
-24
lines changed

2 files changed

+22
-24
lines changed

app/components/settings/api-tokens.hbs

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,16 @@
2525

2626
{{#if this.newToken}}
2727
<form local-class="new-token-form" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
28-
<div local-class="name">
29-
<Input
30-
@type="text"
31-
placeholder="New token name"
32-
aria-label="New token name"
33-
disabled={{this.newToken.isSaving}}
34-
@value={{this.newToken.name}}
35-
data-test-focused-input
36-
{{auto-focus}}
37-
/>
38-
</div>
28+
<Input
29+
@type="text"
30+
placeholder="New token name"
31+
aria-label="New token name"
32+
disabled={{this.newToken.isSaving}}
33+
@value={{this.newToken.name}}
34+
local-class="input"
35+
data-test-focused-input
36+
{{auto-focus}}
37+
/>
3938

4039
<div local-class="actions">
4140
<button

app/components/settings/api-tokens.module.css

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,19 @@
1414
}
1515

1616
.token-list {
17-
margin: 0;
17+
margin: 0 0 24px;
1818
padding: 0;
1919
list-style: none;
20+
border-radius: 5px;
21+
background-color: white;
22+
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
2023

2124
> * {
22-
border: 1px solid #d5d3cb;
23-
background-color: var(--main-bg-dark);
2425
padding: 10px 20px;
2526
}
2627

2728
> * + * {
28-
border-top: none;
29+
border-top: 1px solid #f1f0ed;
2930
}
3031
}
3132

@@ -38,17 +39,15 @@
3839
padding: 10px 20px;
3940
display: flex;
4041
align-items: center;
41-
border: 1px solid #d5d3cb;
42-
background-color: var(--main-bg-dark);
42+
border-radius: 6px;
43+
background-color: white;
44+
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
4345
margin-bottom: 24px;
4446

45-
.name {
46-
padding-right: 20px;
47-
margin-right: 0;
48-
49-
input {
50-
width: 100%;
51-
}
47+
.input {
48+
padding: 8px;
49+
margin-right: 20px;
50+
width: 100%;
5251
}
5352
}
5453

0 commit comments

Comments
 (0)