Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactors UI styles with typography and color updates

Browse source 
Applies JetBrains Mono font across key components
Updates color scheme to use consistent teal palette
Adjusts font sizes and weights for improved readability

Enhances visual design tokens and styling for drawer components
This commit is contained in:
Janus C. H. Knudsen 2025-12-19 21:08:24 +01:00
parent 1b0ef74551
commit 23eb582ad3
1 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

53
wwwroot/poc-detail-drawer.html
View file

@ -4,6 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Drawer POC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Import design tokens fra calendar-base.css */
:root {
@ -30,6 +33,10 @@
--b-color-teal: #00897b;
--b-mix: #fff;
/* Checkout style tokens */
--color-teal: #00897b;
--font-mono: 'JetBrains Mono', monospace;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@ -229,12 +236,12 @@
swp-section-label {
display: block;
font-size: 13px;
font-weight: 500;
font-size: 11px;
font-weight: 400;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
margin-bottom: 10px;
}
/* Event time/date */
@ -286,7 +293,7 @@
}
swp-contact-item a {
color: var(--color-primary);
color: var(--color-teal);
text-decoration: none;
}
@ -377,11 +384,16 @@
swp-service-details {
display: block;
font-size: 14px;
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 2px;
}
swp-service-price {
font-family: var(--font-mono);
font-weight: 500;
}
swp-service-resource {
display: block;
font-size: 13px;
@ -407,6 +419,7 @@
}
swp-total-amount {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 600;
}
@ -438,7 +451,7 @@
swp-journal-link:hover {
background: var(--color-background-hover);
border-color: var(--color-primary);
border-color: var(--color-teal);
}
swp-journal-icon {
@ -491,7 +504,7 @@
swp-journal-link.no-journal:hover {
background: var(--color-surface);
border-color: var(--color-primary);
border-color: var(--color-teal);
border-style: solid;
}
@ -517,6 +530,10 @@
color: var(--color-text);
}
swp-stat-value.mono {
font-family: var(--font-mono);
}
swp-stat-label {
font-size: 11px;
color: var(--color-text-secondary);
@ -545,13 +562,13 @@
}
swp-footer-btn.btn-primary {
background: var(--color-primary);
background: var(--color-teal);
color: white;
border-color: var(--color-primary);
border-color: var(--color-teal);
}
swp-footer-btn.btn-primary:hover {
background: #1565c0;
background: #00796b;
}
swp-footer-btn.btn-secondary {
@ -565,8 +582,10 @@
/* Footer states based on booking status */
swp-drawer-footer.status-paid swp-footer-btn.btn-primary {
background: var(--b-color-green);
border-color: var(--b-color-green);
background: var(--color-teal);
border-color: var(--color-teal);
opacity: 0.7;
cursor: default;
}
swp-drawer-footer.status-cancelled swp-footer-btn.btn-primary,
@ -819,12 +838,12 @@
<swp-services-list>
<swp-service-item>
<swp-service-name>Klipning og styling</swp-service-name>
<swp-service-details>60 min · 500 DKK</swp-service-details>
<swp-service-details>60 min · <swp-service-price>500 kr</swp-service-price></swp-service-details>
<swp-service-resource>Emma (EMP001)</swp-service-resource>
</swp-service-item>
<swp-service-item>
<swp-service-name>Bundfarve</swp-service-name>
<swp-service-details>90 min · 800 DKK</swp-service-details>
<swp-service-details>90 min · <swp-service-price>800 kr</swp-service-price></swp-service-details>
<swp-service-resource>Emma (EMP001)</swp-service-resource>
</swp-service-item>
</swp-services-list>
@ -834,7 +853,7 @@
<swp-drawer-section>
<swp-total-row>
<swp-total-label>Total</swp-total-label>
<swp-total-amount>1.300 DKK</swp-total-amount>
<swp-total-amount>1.300 kr</swp-total-amount>
</swp-total-row>
</swp-drawer-section>
@ -861,11 +880,11 @@
<swp-section-label>Kundehistorik</swp-section-label>
<swp-stats-grid>
<swp-stat-item>
<swp-stat-value>14</swp-stat-value>
<swp-stat-value class="mono">14</swp-stat-value>
<swp-stat-label>Besøg</swp-stat-label>
</swp-stat-item>
<swp-stat-item>
<swp-stat-value>8.450</swp-stat-value>
<swp-stat-value class="mono">8.450 kr</swp-stat-value>
<swp-stat-label>Omsætning</swp-stat-label>
</swp-stat-item>
<swp-stat-item>