header design

src/components/connect/connect.css.tsx

@@ -0,0 +1,23 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const connect = style({
+  fontSize: "16px",
+  fontWeight: "bold",
+  border: "1px solid",
+  borderColor: vars.color.blue,
+  borderRadius: "8px",
+  color: vars.color.blue,
+  paddingTop: "4px",
+  paddingBottom: "4px",
+  paddingLeft: "12px",
+  paddingRight: "12px",
+  transition: "background-color, color",
+  transitionDuration: vars.transitions.duration,
+  transitionTimingFunction: vars.transitions.timingFunction,
+  ":hover": {
+    backgroundColor: vars.color.blue,
+    color: vars.color.background,
+  },
+  cursor: "pointer",
+});

src/components/connect/connect.tsx

@@ -0,0 +1,6 @@
+import { component$ } from "@builder.io/qwik";
+import { connect } from "./connect.css";
+
+export const Connect = component$(() => {
+  return <div class={connect}>Connect</div>;
+});

src/components/header/header.css.ts

@@ -1,3 +1,44 @@
 import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
 
-export const header = style({});
+export const headerGrid = style({
+  display: "grid",
+  gridAutoFlow: "column",
+  gap: "8px",
+  justifyItems: "center",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const header = style([
+  headerGrid,
+  {
+    paddingLeft: "8px",
+    paddingRight: "8px",
+    height: "100%",
+    gridTemplateColumns: "auto 1fr auto",
+  },
+]);
+
+export const leftSide = style([
+  headerGrid,
+  {
+    gridColumnStart: "1",
+    gridColumnEnd: "2",
+  },
+]);
+
+export const rightSide = style([
+  headerGrid,
+  {
+    gridColumnStart: "3",
+    gridColumnEnd: "4",
+  },
+]);
+
+export const title = style({
+  fontWeight: "bolder",
+  letterSpacing: "1px",
+  fontSize: "20px",
+  color: vars.color.subtext,
+});

src/components/header/header.tsx

@@ -1,6 +1,22 @@
 import { component$ } from "@builder.io/qwik";
-import { header } from "./header.css";
+import { header, leftSide, rightSide, title } from "./header.css";
+import { Connect } from "../connect/connect";
+import BellSvg from "~/media/icons/dark_theme/bell.svg?jsx";
+import { IconButton } from "~/components/iconButton/iconButton";
 
 export const Header = component$(() => {
-  return <div class={header}></div>;
+  return (
+    <div class={header}>
+      <div class={leftSide}>
+        <div class={title}>KSOX Finance</div>
+      </div>
+      <div class={rightSide}>
+        <IconButton>
+          <BellSvg q:slot="icon"></BellSvg>
+          {/* <div q:slot="text">Home</div> */}
+        </IconButton>
+        <Connect></Connect>
+      </div>
+    </div>
+  );
 });

src/components/sidenav/button.css.ts → src/components/iconButton/iconButton.css.ts

@@ -7,10 +7,13 @@ export const button = style({
   alignItems: "center",
   padding: "8px",
   borderRadius: "8px",
-  transition: "background-color 0.3s ease-in-out",
+  transition: "background-color",
+  transitionDuration: vars.transitions.duration,
+  transitionTimingFunction: vars.transitions.timingFunction,
   ":hover": {
     backgroundColor: vars.color.backgroundHighlight,
   },
+  cursor: "pointer",
 });
 
 export const iconSlot = style({

src/components/sidenav/button.tsx → src/components/iconButton/iconButton.tsx

@@ -1,7 +1,7 @@
 import { Slot, component$ } from "@builder.io/qwik";
-import { button, iconSlot } from "./button.css";
+import { button, iconSlot } from "./iconButton.css";
 
-export const Button = component$(() => {
+export const IconButton = component$(() => {
   return (
     <div class={button}>
       <div class={iconSlot}>

src/components/sidenav/sidenav.tsx

@@ -1,6 +1,6 @@
 import { component$ } from "@builder.io/qwik";
 import { sidenav } from "./sidenav.css";
-import { Button } from "./button";
+import { IconButton } from "~/components/iconButton/iconButton";
 
 import HomeSvg from "~/media/icons/dark_theme/logo.svg?jsx";
 import TransferSvg from "~/media/icons/dark_theme/transfer.svg?jsx";
@@ -12,30 +12,30 @@ import SettingsSvg from "~/media/icons/dark_theme/settings.svg?jsx";
 export const SideNav = component$(() => {
   return (
     <div class={sidenav}>
-      <Button>
+      <IconButton>
         <HomeSvg style={{ height: "24px" }} q:slot="icon"></HomeSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
-      <Button>
+      </IconButton>
+      <IconButton>
         <TransferSvg q:slot="icon"></TransferSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
-      <Button>
+      </IconButton>
+      <IconButton>
         <ChartSvg q:slot="icon"></ChartSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
-      <Button>
+      </IconButton>
+      <IconButton>
         <WalletSvg q:slot="icon"></WalletSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
-      <Button>
+      </IconButton>
+      <IconButton>
         <PeopleSvg q:slot="icon"></PeopleSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
-      <Button>
+      </IconButton>
+      <IconButton>
         <SettingsSvg q:slot="icon"></SettingsSvg>
         {/* <div q:slot="text">Home</div> */}
-      </Button>
+      </IconButton>
     </div>
   );
 });

src/routes/index.tsx

@@ -6,7 +6,7 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: "Ksox Finance",
+  title: "KSOX Finance",
   meta: [
     {
       name: "description",

src/routes/layout.css.ts

@@ -5,7 +5,7 @@ export const layoutRow = style({
   width: "100vw",
   height: "100vh",
   display: "grid",
-  gridTemplateRows: "36px 1fr",
+  gridTemplateRows: "auto 1fr",
   backgroundColor: vars.color.backgroundHighlight,
   gap: "1px",
 });

src/theme.css.ts

@@ -11,6 +11,10 @@ export const [darkTheme, vars] = createTheme({
     subtext: "#838383", // Subtext (For lesser important text)
     divider: "#2b2b2b", // Border/Divider Color
   },
+  transitions: {
+    duration: "0.1s",
+    timingFunction: "ease-in-out",
+  },
 });
 
 export const lightTheme = createTheme(vars, {
@@ -24,4 +28,8 @@ export const lightTheme = createTheme(vars, {
     subtext: "#5c5c5c", // Subtext (For lesser important text)
     divider: "#e5e5e5", // Border/Divider Color
   },
+  transitions: {
+    duration: "0.1s",
+    timingFunction: "ease-in-out",
+  },
 });