SESP/sesp-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor component styles: Update various components to use rounded-lg instead of rounded-2xl for a more consistent design, and adjust button styles for improved visual coherence across the application.

Browse Source
This commit is contained in:
killer-cf
2026-01-06 14:12:00 -03:00
parent a478c834e3
commit 0fbd56d39e
10 changed files with 86 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/ProgramPage.svelte
View File

@@ -32,13 +32,13 @@
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
<a
href="/"
class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
>
<span aria-hidden="true">←</span>
Voltar para a página inicial
</a>
<section class="mt-6 overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
<section class="mt-6 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
<div
class={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`}
>
@@ -46,7 +46,7 @@
<div class="min-w-0">
<div class="flex items-center gap-4">
<div
class="grid h-16 w-16 place-items-center rounded-2xl bg-white/90 ring-1 ring-black/5"
class="grid h-16 w-16 place-items-center rounded-lg bg-white/90 ring-1 ring-black/5"
>
<img
src={program.brandImageSrc}
@@ -69,7 +69,7 @@
</p>
<div class="mt-6 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Inscrições 2026
</p>
@@ -79,21 +79,21 @@
<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
</div>
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
</div>
</div>
<div class="mt-3 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Como funciona
</p>
<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
</div>
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Benefícios
</p>
@@ -114,7 +114,7 @@
href={program.signupUrl}
target="_blank"
rel="noopener noreferrer"
class={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
class={`inline-flex items-center justify-center gap-2 rounded-md px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
>
Inscrição
<span aria-hidden="true">↗</span>
@@ -124,7 +124,7 @@
href={program.editalUrl}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
>
Edital
<span aria-hidden="true">↗</span>