[chrome] give bookmark button proper margin and highlight

Author: velzie

packages/chrome/src/components/Omnibar/BookmarkButton.tsx

@@ -1,16 +1,17 @@
-import { createState } from "dreamland/core";
+import { createState, css } from "dreamland/core";
 import { OmnibarButton } from "./OmnibarButton";
 import { browser } from "../../Browser";
 import { createMenuCustom } from "../Menu";
 import { BookmarkPopup } from "../BookmarkPopup";
 import { emToPx } from "../../utils";
 
 import { iconStar, iconStarFilled } from "../../icons";
+import { Icon } from "../Icon";
 
 export function BookmarkButton(s: { url: URL }) {
 	return (
-		<OmnibarButton
-			click={(e) => {
+		<button
+			on:click={(e) => {
 				e.stopPropagation();
 				e.preventDefault();
 				let bookmark = browser.bookmarks.find((b) => b.url == s.url.href);
@@ -33,11 +34,34 @@ export function BookmarkButton(s: { url: URL }) {
 					<BookmarkPopup new={isnew} bookmark={bookmark}></BookmarkPopup>
 				);
 			}}
-			icon={use(browser.bookmarks, s.url).map(() =>
-				browser.bookmarks.some((b) => b.url == s.url.href)
-					? iconStarFilled
-					: iconStar
-			)}
-		></OmnibarButton>
+		>
+			<Icon
+				icon={use(browser.bookmarks, s.url).map(() =>
+					browser.bookmarks.some((b) => b.url == s.url.href)
+						? iconStarFilled
+						: iconStar
+				)}
+			></Icon>
+		</button>
 	);
 }
+BookmarkButton.style = css`
+	:scope {
+		font-size: 1em;
+		color: var(--fg2);
+		display: flex;
+		margin: 0.25em;
+		padding: 0.25em;
+		box-sizing: border-box;
+		aspect-ratio: 1/1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		color: var(--fg2);
+		border-radius: 0.2em;
+	}
+	:scope:hover {
+		background: var(--bg01);
+	}
+`;

packages/chrome/src/components/Omnibar/OmnibarButton.tsx

@@ -2,23 +2,23 @@ import type { IconifyIcon } from "@iconify/types";
 import { css } from "dreamland/core";
 import { Icon } from "../Icon";
 
-export function OmnibarButton(s: {
+export function OmnibarButton(props: {
 	icon: IconifyIcon;
 	click?: (e: MouseEvent) => void;
 	rightclick?: (e: MouseEvent) => void;
 	active?: boolean;
 	tooltip?: string;
 }) {
-	s.active ??= true;
+	props.active ??= true;
 	return (
 		<button
-			disabled={use(s.active).map((x) => (x ? undefined : true))}
-			class:active={use(s.active)}
-			on:click={(e: MouseEvent) => s.click?.(e)}
-			on:contextmenu={(e: MouseEvent) => s.rightclick?.(e)}
-			title={s.tooltip}
+			disabled={use(props.active).map((x) => (x ? undefined : true))}
+			class:active={use(props.active)}
+			on:click={(e: MouseEvent) => props.click?.(e)}
+			on:contextmenu={(e: MouseEvent) => props.rightclick?.(e)}
+			title={props.tooltip}
 		>
-			<Icon icon={use(s.icon)} />
+			<Icon icon={use(props.icon)} />
 		</button>
 	);
 }

packages/chrome/src/components/Omnibar/Omnibox.tsx

@@ -426,6 +426,7 @@ Omnibox.style = css`
 		margin: 0 auto;
 
 		border-bottom: 1px solid var(--fg5);
+		margin-bottom: 0.5em;
 	}
 
 	.spacertext {

packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx

@@ -9,7 +9,6 @@ import { iconOptions } from "../../icons";
 export function SiteOptionsButton() {
 	return (
 		<button
-			class="optionsbutton"
 			on:click={(e: MouseEvent) => {
 				createMenuCustom(
 					{
@@ -27,7 +26,7 @@ export function SiteOptionsButton() {
 	);
 }
 SiteOptionsButton.style = css`
-	.optionsbutton {
+	:scope {
 		width: 100%;
 		cursor: pointer;
 		padding: 0;
@@ -44,7 +43,7 @@ SiteOptionsButton.style = css`
 		justify-content: center;
 		background: var(--bg01);
 	}
-	.optionsbutton:hover {
+	:scope:hover {
 		background: var(--bg02);
 	}
 `;

packages/chrome/src/components/SmallIconButton.tsx

@@ -2,13 +2,13 @@ import type { IconifyIcon } from "@iconify/types";
 import { css } from "dreamland/core";
 import { Icon } from "./Icon";
 
-export function SmallIconButton(s: {
+export function SmallIconButton(props: {
 	click: (e: MouseEvent) => void;
 	icon: IconifyIcon;
 }) {
 	return (
-		<button on:click={s.click}>
-			<Icon icon={s.icon}></Icon>
+		<button on:click={props.click}>
+			<Icon icon={props.icon}></Icon>
 		</button>
 	);
 }