From 6409a3c359cb508a7d9e374513dc8002e222539d Mon Sep 17 00:00:00 2001
From: Emilio Mariscal <emi.mariscal.dev@gmail.com>
Date: Tue, 10 Sep 2024 12:13:17 -0300
Subject: [PATCH] Header styling

---
 components/header/header.styles.ts | 8 ++++++++
 components/header/header.ts        | 8 ++++----
 theme/hot.css                      | 3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/header/header.styles.ts b/components/header/header.styles.ts
index 4ab861e..e98945a 100644
--- a/components/header/header.styles.ts
+++ b/components/header/header.styles.ts
@@ -66,6 +66,14 @@ export const styles = css`
 
   .header--tab::part(base) {
     font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-950);
+    padding: var(--sl-spacing-small) var(--sl-spacing-small);
+  }
+
+  .header--tab-group::part(base) {
+    --track-color: transparent;
+    --indicator-color: var(--sl-color-neutral-950);
   }
 
   .header--nav {
diff --git a/components/header/header.ts b/components/header/header.ts
index 1e2cfb2..019d80b 100644
--- a/components/header/header.ts
+++ b/components/header/header.ts
@@ -93,9 +93,9 @@ export class Header extends LitElement {
 
         ${/* Navigation bar for desktop, hide on mobile */ ""}
         <nav
-          className="header--nav"
+          class="header--nav"
         >
-          <sl-tab-group className="header--tab-group">
+          <sl-tab-group class="header--tab-group">
             ${this.tabs.map(
               (item, index) => html`
                 <sl-tab
@@ -116,10 +116,10 @@ export class Header extends LitElement {
         ${/* Stacked navigation drawer for mobile */ ""}
         ${/* NOTE this should probably be in a drawer instead */ ""}
         <nav
-          className="header--nav-mobile"
+          class="header--nav-mobile"
         ></nav>
 
-        <div id="right-section" className="header--right-section">
+        <div id="right-section" class="header--right-section">
           <sl-icon-button
             library="bundled"
             name="person-circle"
diff --git a/theme/hot.css b/theme/hot.css
index f77ca58..4e3d93d 100644
--- a/theme/hot.css
+++ b/theme/hot.css
@@ -11,4 +11,5 @@
   --hot-height-medium: 8rem;
   --hot-height-large: 20rem;
 
-}
\ No newline at end of file
+}
+