Skip to content

Commit eba939b

Browse files
srpiattsrpiatt
authored
[ALS-6878] Style Refinements (#103)
- Add CardButton for card style buttons across the sites.
1 parent 4b2d73c commit eba939b

File tree

29 files changed

+382
-241
lines changed

29 files changed

+382
-241
lines changed

‎postcss.config.cjs

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
module.exports = {
22
plugins: {
3+
'postcss-import': {},
4+
'tailwindcss/nesting': {},
35
tailwindcss: {},
46
autoprefixer: {},
57
},

‎src/app.postcss

+122-17
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ body {
2020
}
2121

2222
#landing {
23-
width: 60%;
24-
margin: 2rem auto 0;
23+
width: 45%;
2524
}
2625

2726
/* Use a media query to add a breakpoint at 800px: */
@@ -86,24 +85,44 @@ select {
8685
#sidebar-right {
8786
border-left: 2px solid rgba(var(--color-surface-500));
8887
}
88+
h1,
89+
h2,
90+
h3,
91+
h4,
92+
h5,
93+
h6 {
94+
@apply my-1;
95+
}
8996

90-
h1 {
91-
@apply h1 my-1;
97+
h1,
98+
.h1 {
99+
font-size: 2.5rem;
100+
line-height: 2.75rem;
92101
}
93-
h2 {
94-
@apply h2 my-1;
102+
h2,
103+
.h2 {
104+
font-size: 2rem;
105+
line-height: 2.25rem;
95106
}
96-
h3 {
97-
@apply h3 my-1;
107+
h3,
108+
.h3 {
109+
font-size: 1.5rem;
110+
line-height: 2rem;
98111
}
99-
h4 {
100-
@apply h4 my-1;
112+
h4,
113+
.h4 {
114+
font-size: 1, 25rem;
115+
line-height: 1.75rem;
101116
}
102-
h5 {
103-
@apply h5 my-1;
117+
h5,
118+
.h5 {
119+
font-size: 1.125rem;
120+
line-height: 1.75rem;
104121
}
105-
h6 {
106-
@apply h6 my-1;
122+
h6,
123+
.h6 {
124+
font-size: 1rem;
125+
line-height: 1.5rem;
107126
}
108127

109128
button:disabled,
@@ -147,6 +166,11 @@ ul.primary-list li::marker {
147166
padding: 0px;
148167
}
149168

169+
.table tbody td {
170+
font-size: 1rem;
171+
line-height: 1.25rem;
172+
}
173+
150174
#nav-logo {
151175
max-height: 80px;
152176
}
@@ -277,16 +301,15 @@ nav#page-navigation li .nav-dropdown a:focus {
277301

278302
#landing .stats {
279303
font-size: 1rem;
280-
margin: 1rem 0;
281-
padding: 2rem;
304+
padding: 1rem;
282305
@apply card variant-filled-primary;
283306
}
284307

285308
#landing .stats a {
286309
text-decoration: underline;
287310
}
288311

289-
.subtitle {
312+
.main-content .subtitle {
290313
font-size: 2rem;
291314
}
292315

@@ -331,6 +354,10 @@ nav#page-navigation li .nav-dropdown a:focus {
331354
line-height: 1rem;
332355
}
333356

357+
.rounded-xl {
358+
border-radius: 0.75rem;
359+
}
360+
334361
.label.required span:after {
335362
content: ' *';
336363
display: inline;
@@ -357,6 +384,84 @@ input.required:invalid,
357384
z-index: -1;
358385
}
359386

387+
.card-btn {
388+
display: flex;
389+
flex-direction: column;
390+
align-items: center;
391+
justify-content: center;
392+
393+
text-decoration: none;
394+
text-align: center;
395+
396+
padding: 1rem 0.5rem;
397+
margin: 0.3rem;
398+
399+
@apply border rounded-container-token;
400+
401+
&:hover {
402+
@apply border border-surface-300-600-token scale-110 shadow-lg;
403+
}
404+
}
405+
406+
.card-btn-sm {
407+
width: 6rem;
408+
height: 6rem;
409+
max-width: 6rem;
410+
411+
.icon {
412+
font-size: 1.5rem;
413+
}
414+
415+
.title {
416+
font-size: 1rem;
417+
line-height: 1rem;
418+
}
419+
}
420+
421+
.card-btn-md {
422+
width: 7rem;
423+
height: 7rem;
424+
max-width: 7rem;
425+
426+
.icon {
427+
font-size: 2.25rem;
428+
}
429+
430+
.title {
431+
font-size: 1.125rem;
432+
line-height: 1.25rem;
433+
margin-top: 0.5rem;
434+
margin-bottom: 0.5rem;
435+
}
436+
437+
.subtitle {
438+
font-size: 0.8rem;
439+
line-height: 1rem;
440+
}
441+
}
442+
443+
.card-btn-lg {
444+
width: 13rem;
445+
height: 13rem;
446+
max-width: 13rem;
447+
448+
.icon {
449+
font-size: 5em;
450+
}
451+
452+
.title {
453+
font-size: 1.5rem;
454+
line-height: 1.5rem;
455+
margin-top: 0.5rem;
456+
margin-bottom: 0.5rem;
457+
}
458+
459+
.subtitle {
460+
font-size: 1rem;
461+
line-height: 1.25rem;
462+
}
463+
}
464+
360465
/* === Button Groups - Horizontal === */
361466
/* Skeleton ships the btn-group class with a background color on hover, which can't
362467
be overriden, so we're using a custom btn-group and copying their other styles.

‎src/lib/components/Content.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<section class={`main-content ${full ? 'w-full' : ''}`}>
2020
{#if backUrl}<AngleButton name="back" class="my-2" on:click={onBack}>{backTitle}</AngleButton
2121
>{/if}
22-
{#if title}<h1 class="mb-4">{title}</h1>{/if}
22+
{#if title}<h1 class="my-4">{title}</h1>{/if}
2323
{#if subtitle}<p class="subtitle mb-4">{subtitle}</p>{/if}
2424
<slot />
2525
</section>

‎src/lib/components/Stats.svelte

+5-2
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,13 @@
2727
// @html branding.landing.explanation is from a static file and will only be populated by staff.
2828
</script>
2929

30-
<section class="stats flex flex-row flex-wrap justify-evenly items-center w-full px-4 gap-y-4">
30+
<section class="stats flex flex-row flex-wrap justify-evenly items-center w-full p-4 my-4 gap-y-9">
3131
{#each stats as stat}
3232
<div class="flex flex-col w-1/{width}">
33-
<div data-testid="value-{stat.title}" class="flex flex-col justify-center items-center">
33+
<div
34+
data-testid="value-{stat.title}"
35+
class="flex flex-col justify-center items-center text-2xl"
36+
>
3437
{#if stat.loading}
3538
<ProgressRadial
3639
width="w-10"

‎src/lib/components/UserToken.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
<ProgressRadial width="w-10" value={undefined} />
8989
{:then}
9090
<div id="user-token" class="card variant-filled-sureface">
91-
<header class="card-header">PIC-SURE Token</header>
91+
<header class="card-header"><h4>PIC-SURE Token</h4></header>
9292
<section class="p-4 grid grid-cols-2 gap-y-2 items-center">
9393
<label for="account">Account:</label>
9494
<span id="account" class="w-full">{account}</span>
@@ -108,7 +108,7 @@
108108
{/if}
109109
</div>
110110
</section>
111-
<footer class="card-footer">
111+
<footer class="card-footer mt-2">
112112
<CopyButton buttonText="Copy" itemToCopy={$user.token || ''} />
113113
<button
114114
id="refresh-button"

‎src/lib/components/admin/authorization/cell/PrivilegeActions.svelte

+32-30
Original file line numberDiff line numberDiff line change
@@ -39,33 +39,35 @@
3939
}
4040
</script>
4141

42-
<button
43-
data-testid={`privilege-view-btn-${data.cell}`}
44-
type="button"
45-
title="View"
46-
class="text-secondary-600 hover:text-primary-600"
47-
on:click|stopPropagation={() => goto(`/admin/authorization/privilege/${data.cell}`)}
48-
>
49-
<i class="fa-solid fa-circle-info fa-xl"></i>
50-
<span class="sr-only">View Privilege</span>
51-
</button>
52-
<button
53-
data-testid={`privilege-edit-btn-${data.cell}`}
54-
type="button"
55-
title="Edit"
56-
class="text-secondary-600 hover:text-primary-600"
57-
on:click|stopPropagation={() => goto(`/admin/authorization/privilege/${data.cell}/edit`)}
58-
>
59-
<i class="fa-solid fa-pen-to-square fa-xl"></i>
60-
<span class="sr-only">Edit</span>
61-
</button>
62-
<button
63-
data-testid={`privilege-delete-btn-${data.cell}`}
64-
type="button"
65-
title="Delete"
66-
class="bg-initial text-secondary-600 hover:text-primary-600"
67-
on:click|stopPropagation={deleteModal}
68-
>
69-
<i class="fa-solid fa-trash fa-xl"></i>
70-
<span class="sr-only">Delete</span>
71-
</button>
42+
<div class="w-20 min-w-20">
43+
<button
44+
data-testid={`privilege-view-btn-${data.cell}`}
45+
type="button"
46+
title="View"
47+
class="text-black-600 hover:text-primary-600"
48+
on:click|stopPropagation={() => goto(`/admin/authorization/privilege/${data.cell}`)}
49+
>
50+
<i class="fa-solid fa-circle-info fa-xl"></i>
51+
<span class="sr-only">View Privilege</span>
52+
</button>
53+
<button
54+
data-testid={`privilege-edit-btn-${data.cell}`}
55+
type="button"
56+
title="Edit"
57+
class="text-black-600 hover:text-primary-600"
58+
on:click|stopPropagation={() => goto(`/admin/authorization/privilege/${data.cell}/edit`)}
59+
>
60+
<i class="fa-solid fa-pen-to-square fa-xl"></i>
61+
<span class="sr-only">Edit</span>
62+
</button>
63+
<button
64+
data-testid={`privilege-delete-btn-${data.cell}`}
65+
type="button"
66+
title="Delete"
67+
class="text-black-600 hover:text-primary-600"
68+
on:click|stopPropagation={deleteModal}
69+
>
70+
<i class="fa-solid fa-trash fa-xl"></i>
71+
<span class="sr-only">Delete</span>
72+
</button>
73+
</div>

‎src/lib/components/admin/authorization/cell/RoleActions.svelte

+32-30
Original file line numberDiff line numberDiff line change
@@ -39,33 +39,35 @@
3939
}
4040
</script>
4141

42-
<button
43-
data-testid={`role-view-btn-${data.cell}`}
44-
type="button"
45-
title="View"
46-
class="text-secondary-600 hover:text-primary-600"
47-
on:click|stopPropagation={() => goto(`/admin/authorization/role/${data.cell}`)}
48-
>
49-
<i class="fa-solid fa-circle-info fa-xl"></i>
50-
<span class="sr-only">View Role</span>
51-
</button>
52-
<button
53-
data-testid={`role-edit-btn-${data.cell}`}
54-
type="button"
55-
title="Edit"
56-
class="text-secondary-600 hover:text-primary-600"
57-
on:click|stopPropagation={() => goto(`/admin/authorization/role/${data.cell}/edit`)}
58-
>
59-
<i class="fa-solid fa-pen-to-square fa-xl"></i>
60-
<span class="sr-only">Edit</span>
61-
</button>
62-
<button
63-
data-testid={`role-delete-btn-${data.cell}`}
64-
type="button"
65-
title="Delete"
66-
class="bg-initial text-secondary-600 hover:text-primary-600"
67-
on:click|stopPropagation={deleteModal}
68-
>
69-
<i class="fa-solid fa-trash fa-xl"></i>
70-
<span class="sr-only">Delete</span>
71-
</button>
42+
<div class="w-20 min-w-20">
43+
<button
44+
data-testid={`role-view-btn-${data.cell}`}
45+
type="button"
46+
title="View"
47+
class="text-black-600 hover:text-primary-600"
48+
on:click|stopPropagation={() => goto(`/admin/authorization/role/${data.cell}`)}
49+
>
50+
<i class="fa-solid fa-circle-info fa-xl"></i>
51+
<span class="sr-only">View Role</span>
52+
</button>
53+
<button
54+
data-testid={`role-edit-btn-${data.cell}`}
55+
type="button"
56+
title="Edit"
57+
class="text-black-600 hover:text-primary-600"
58+
on:click|stopPropagation={() => goto(`/admin/authorization/role/${data.cell}/edit`)}
59+
>
60+
<i class="fa-solid fa-pen-to-square fa-xl"></i>
61+
<span class="sr-only">Edit</span>
62+
</button>
63+
<button
64+
data-testid={`role-delete-btn-${data.cell}`}
65+
type="button"
66+
title="Delete"
67+
class="text-black-600 hover:text-primary-600"
68+
on:click|stopPropagation={deleteModal}
69+
>
70+
<i class="fa-solid fa-trash fa-xl"></i>
71+
<span class="sr-only">Delete</span>
72+
</button>
73+
</div>

0 commit comments

Comments
 (0)