add omnibox mockup and change some of the colors

Author: velzie

frontend/src/Omnibox.tsx

@@ -0,0 +1,80 @@
+import type { Component } from "dreamland/core";
+import { Icon } from "./ui/Icon";
+import type { IconifyIcon } from "@iconify/types";
+import iconBack from "@ktibow/iconset-material-symbols/arrow-back";
+import iconForwards from "@ktibow/iconset-material-symbols/arrow-forward";
+import iconRefresh from "@ktibow/iconset-material-symbols/refresh";
+import iconExtension from "@ktibow/iconset-material-symbols/extension";
+
+export const Spacer: Component = function (cx) {
+	cx.css = `
+    :scope {
+      width: 2em;
+    }
+  `;
+	return <div></div>;
+};
+
+export const UrlInput: Component = function (cx) {
+	cx.css = `
+    :scope {
+      flex: 1;
+      display: flex;
+      padding: 0.25em;
+    }
+    input {
+      width: 100%;
+      height: 100%;
+      border: none;
+      outline: none;
+      border-radius: 4px;
+    }
+  `;
+	return (
+		<div>
+			<input></input>
+		</div>
+	);
+};
+
+export const IconButton: Component<{ icon: IconifyIcon }> = function (cx) {
+	cx.css = `
+    :scope {
+      padding: 0.4em;
+      display: flex;
+      outline: none;
+      border: none;
+      font-size: 1.25em;
+      background: inerhit
+      # background: var(--aboutbrowser-toolbar-bg);
+      cursor: pointer;
+    }
+  `;
+	return (
+		<button>
+			<Icon icon={this.icon} />
+		</button>
+	);
+};
+
+export const Omnibox: Component<{}> = function (cx) {
+	cx.css = `
+	  :scope {
+     	background: var(--aboutbrowser-omnibox-bg);
+      display: flex;
+      padding: 0px 7px 0px 7px;
+    }
+	`;
+
+	return (
+		<div>
+			<IconButton icon={iconBack}></IconButton>
+			<IconButton icon={iconForwards}></IconButton>
+			<IconButton icon={iconRefresh}></IconButton>
+			<Spacer></Spacer>
+			<UrlInput></UrlInput>
+			<Spacer></Spacer>
+			<IconButton icon={iconExtension}></IconButton>
+		</div>
+	);
+};

frontend/src/browser.tsx

@@ -1,6 +1,7 @@
 import { createState, type Stateful } from "dreamland/core";
 import { ThemeVars, type Theme } from "./ui/theme";
 import { Tab, Tabs } from "./tabs";
+import { Omnibox } from "./Omnibox";
 
 class StatefulClass {
 	constructor(state: Stateful<any>) {
@@ -16,22 +17,22 @@ export class Browser extends StatefulClass {
 		super(state);
 
 		this.theme = {
-			frame_bg: [40, 40, 40],
-			toolbar_bg: [60, 60, 60],
-			toolbar_button_fg: [199, 199, 199],
-			toolbar_fg: [199, 199, 199],
+			frame_bg: [231, 238, 245],
+			toolbar_bg: [211, 218, 255],
+			toolbar_button_fg: [65, 72, 76],
+			toolbar_fg: [65, 72, 76],
 
 			inactive_tab_bg: [40, 40, 40],
-			inactive_tab_fg: [199, 199, 199],
-			active_tab_fg: [227, 227, 227],
+			inactive_tab_fg: [95, 92, 96],
+			active_tab_fg: [65, 72, 76],
 
-			button_bg: [60, 60, 60],
+			button_bg: [231, 238, 0],
 
-			ntp_bg: [60, 60, 60],
+			ntp_bg: [231, 238, 0],
 			ntp_fg: [232, 234, 237],
 			ntp_link_fg: [138, 180, 248],
 
-			omnibox_bg: [40, 40, 40],
+			omnibox_bg: [221, 228, 235],
 			omnibox_fg: [227, 227, 227],
 
 			bookmark_fg: [199, 199, 199],
@@ -46,6 +47,7 @@ export class Browser extends StatefulClass {
 			<div>
 				<ThemeVars colors={use(this.theme)} />
 				<Tabs />
+				<Omnibox />
 			</div>
 		);
 	}

frontend/src/tabs.tsx

@@ -52,7 +52,7 @@ export const Tab: Component<
 
 			color: var(--aboutbrowser-inactive-tab-fg);
 
-			border-radius: 10px;
+			border-radius: 4px;
 			padding: 7px 8px 5px 8px;
 
 			display: flex;
@@ -66,7 +66,7 @@ export const Tab: Component<
 		.main span {
 			flex: 1;
 			font-size: 13px;
-			
+
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -87,7 +87,7 @@ export const Tab: Component<
 			background: var(--aboutbrowser-active-tab-bg);
 			color: var(--aboutbrowser-active-tab-fg);
 
-			border-radius: 12px 12px 0 0;
+			# border-radius: 12px 12px 0 0;
 		}
 
 		.belowcontainer {
@@ -185,9 +185,9 @@ export const Tab: Component<
 					<span>{use(this.title)}</span>
 					<Icon class="close" icon={iconClose} />
 				</div>
-				<div class="belowcontainer">
+				{/* <div class="belowcontainer">
 					{use(this.active).andThen(<div class="below"></div>)}
-				</div>
+				</div> */}
 			</div>
 		</div>
 	);
@@ -349,6 +349,14 @@ export const Tabs: Component<
 				funcs={tabfuncs}
 			/>
 		) as ComponentInstance<typeof Tab>,
+		(
+			<Tab
+				active={false}
+				icon="/vite.svg"
+				title="ViteViteViteViteViteVite  Vite Vite Vite"
+				funcs={tabfuncs}
+			/>
+		) as ComponentInstance<typeof Tab>,
 	];
 
 	cx.mount = () => {