Merge pull request #2 from visoftsolutions/1-create-basic-frontend-de…

…sign-for-common-components-across-tabs

basic design sketch

package.json

@@ -30,23 +30,26 @@
   "devDependencies": {
     "@builder.io/qwik": "^1.2.13",
     "@builder.io/qwik-city": "^1.2.13",
+    "@dnlup/fastify-traps": "^3.0.0",
+    "@fastify/compress": "^6.4.0",
+    "@fastify/static": "^6.11.2",
     "@types/eslint": "8.44.4",
     "@types/node": "^20.8.6",
     "@typescript-eslint/eslint-plugin": "6.7.5",
     "@typescript-eslint/parser": "6.7.5",
     "@vanilla-extract/css": "^1.13.0",
     "eslint": "8.51.0",
     "eslint-plugin-qwik": "^1.2.13",
+    "fastify": "^4.24.1",
+    "fastify-plugin": "^4.5.1",
     "prettier": "3.0.3",
     "styled-vanilla-extract": "^0.5.7",
     "typescript": "5.2.2",
     "undici": "5.26.3",
     "vite": "4.4.11",
-    "@dnlup/fastify-traps": "^3.0.0",
-    "@fastify/compress": "^6.4.0",
-    "@fastify/static": "^6.11.2",
-    "fastify": "^4.24.1",
-    "fastify-plugin": "^4.5.1",
     "vite-tsconfig-paths": "4.2.1"
+  },
+  "dependencies": {
+    "@vanilla-extract/dynamic": "^2.0.3"
   }
 }

public/manifest.json

@@ -1,9 +1,9 @@
 {
   "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "ksox-finance",
+  "name": "Ksox Finance",
   "short_name": "Ksox Finance",
   "start_url": ".",
   "display": "standalone",
   "background_color": "#000000",
-  "description": "Ksox Finance Platform"
+  "description": "Ksox Finance Business Platform"
 }

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

@@ -0,0 +1,44 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+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

@@ -0,0 +1,22 @@
+import { component$ } from "@builder.io/qwik";
+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 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/iconButton/iconButton.css.ts

@@ -0,0 +1,26 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const button = style({
+  display: "grid",
+  justifyItems: "center",
+  alignItems: "center",
+  padding: "8px",
+  borderRadius: "8px",
+  transition: "background-color",
+  transitionDuration: vars.transitions.duration,
+  transitionTimingFunction: vars.transitions.timingFunction,
+  ":hover": {
+    backgroundColor: vars.color.backgroundHighlight,
+  },
+  cursor: "pointer",
+});
+
+export const iconSlot = style({
+  width: "24px",
+  height: "24px",
+  aspectRatio: "square",
+  display: "grid",
+  justifyItems: "center",
+  alignItems: "center",
+});

src/components/iconButton/iconButton.tsx

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

src/components/sidenav/sidenav.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+export const sidenav = style({
+  display: "grid",
+  gridTemplateRows: "repeat(6, 1fr)",
+  gap: "2px",
+});

src/components/sidenav/sidenav.tsx

@@ -0,0 +1,41 @@
+import { component$ } from "@builder.io/qwik";
+import { sidenav } from "./sidenav.css";
+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";
+import ChartSvg from "~/media/icons/dark_theme/chart.svg?jsx";
+import WalletSvg from "~/media/icons/dark_theme/wallet.svg?jsx";
+import PeopleSvg from "~/media/icons/dark_theme/people.svg?jsx";
+import SettingsSvg from "~/media/icons/dark_theme/settings.svg?jsx";
+
+export const SideNav = component$(() => {
+  return (
+    <div class={sidenav}>
+      <IconButton>
+        <HomeSvg style={{ height: "24px" }} q:slot="icon"></HomeSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+      <IconButton>
+        <TransferSvg q:slot="icon"></TransferSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+      <IconButton>
+        <ChartSvg q:slot="icon"></ChartSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+      <IconButton>
+        <WalletSvg q:slot="icon"></WalletSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+      <IconButton>
+        <PeopleSvg q:slot="icon"></PeopleSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+      <IconButton>
+        <SettingsSvg q:slot="icon"></SettingsSvg>
+        {/* <div q:slot="text">Home</div> */}
+      </IconButton>
+    </div>
+  );
+});

src/global.css

@@ -5,25 +5,6 @@
  * the styles in here will be applied to the Document, without any sort of CSS scoping.
  *
  */
-
-:root {
-  --dark-background: #2b2f3a; /* Background (Dark Grayish Bluish) */
-  --dark-red: #d43f4a; /* Muted Red */
-  --dark-green: #3d8e5d; /* Muted Green */
-  --dark-blue: #2f6d99; /* Muted Blue */
-  --dark-text: #e0e0e0; /* Text (For light text against dark backgrounds) */
-  --dark-subtext: #a0a0a0; /* Subtext (For lesser important text) */
-  --dark-devider: #42465b; /* Border/Divider Color */
-
-  --light-background: #e6eaf0; /* Background (Dark Grayish Bluish) */
-  --light-red: #e05a67; /* Muted Red */
-  --light-green: #59a883; /* Muted Green */
-  --light-blue: #508db3; /* Muted Blue */
-  --light-text: #2c2f3b; /* Text (For light text against dark backgrounds) */
-  --light-subtext: #6c6f7f; /* Subtext (For lesser important text) */
-  --light-devider: #b2b5c3; /* Border/Divider Color */
-}
-
 html {
   line-height: 1;
   -webkit-text-size-adjust: 100%;