update button styles

Author: ameer2468

apps/desktop/src/routes/editor/ExportDialog.tsx

@@ -33,8 +33,6 @@ import {
 	type ExportSettings,
 	events,
 	type FramesRendered,
-	type GifExportSettings,
-	type Mp4ExportSettings,
 } from "~/utils/tauri";
 import { type RenderState, useEditorContext } from "./context";
 import { RESOLUTION_OPTIONS } from "./Header";
@@ -158,8 +156,7 @@ export function ExportDialog() {
 
 	const [outputPath, setOutputPath] = createSignal<string | null>(null);
 
-	const selectedStyle =
-		"ring-1 ring-offset-2 ring-offset-gray-200 bg-gray-5 ring-gray-500";
+	const selectedStyle = "bg-gray-7";
 
 	const projectPath = editorInstance.path;
 
@@ -492,10 +489,8 @@ export function ExportDialog() {
 										{(option) => (
 											<Button
 												onClick={() => setSettings("exportTo", option.value)}
-												class={cx(
-													"flex flex-1 gap-2 items-center text-nowrap",
-													settings.exportTo === option.value && selectedStyle,
-												)}
+												data-selected={settings.exportTo === option.value}
+												class="flex flex-1 gap-2 items-center text-nowrap"
 												variant="secondary"
 											>
 												{option.icon}
@@ -550,9 +545,7 @@ export function ExportDialog() {
 													);
 												}}
 												autofocus={false}
-												class={cx(
-													settings.format === option.value && selectedStyle,
-												)}
+												data-selected={settings.format === option.value}
 											>
 												{option.label}
 											</Button>
@@ -639,10 +632,7 @@ export function ExportDialog() {
 													);
 												}}
 												variant="secondary"
-												class={cx(
-													settings.compression === option.value &&
-														selectedStyle,
-												)}
+												data-selected={settings.compression === option.value}
 											>
 												{option.label}
 											</Button>
@@ -669,12 +659,10 @@ export function ExportDialog() {
 									>
 										{(option) => (
 											<Button
-												class={cx(
-													"flex-1",
+												data-selected={
 													settings.resolution.value === option.value
-														? selectedStyle
-														: "",
-												)}
+												}
+												class="flex-1"
 												variant="secondary"
 												onClick={() => setSettings("resolution", option)}
 											>

apps/desktop/src/routes/editor/Header.tsx

@@ -216,7 +216,7 @@ function NameEditor(props: { name: string }) {
 
 	return (
 		<Tooltip disabled={!truncated()} content={props.name}>
-			<div class="flex flex-row items-center relative text-sm font-inherit font-normal tracking-inherit text-gray-12">
+			<div class="flex relative flex-row items-center text-sm font-normal font-inherit tracking-inherit text-gray-12">
 				<input
 					ref={prettyNameRef}
 					class={cx(

apps/desktop/src/styles/theme.css

@@ -139,6 +139,21 @@
 	--shadow-s: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
 }
 
+.dark .dark-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+.dark-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
+}
+
+.dark .gray-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+
+.gray-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
+}
+
 [data-transparent-window] {
 	background: transparent !important;
 }

apps/web/app/globals.css

@@ -69,11 +69,11 @@ html {
 }
 
 .dark .dark-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.2) inset;
+	box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
 }
 
 .dark .gray-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.05) inset;
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
 }
 
 .gray-button-shadow {

apps/web/components/pages/HomePage/Header.tsx

@@ -121,7 +121,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 						variants={fadeIn}
 					>
 						<Button
-							variant="white"
+							variant="dark"
 							href={
 								platform === "windows"
 									? "/download"
@@ -178,7 +178,7 @@ const Header = ({ serverHomepageCopyVariant = "" }: HeaderProps) => {
 						variants={fadeIn}
 					>
 						<p className="mb-4 text-sm italic text-gray-10">
-							Trusted by <strong>10,000+</strong> teams, builders and creators
+							Trusted by <strong>15,000+</strong> teams, builders and creators
 						</p>
 						<LogoMarquee />
 					</motion.div>

packages/ui-solid/src/Button.tsx

@@ -12,15 +12,15 @@ const styles = cva(
 			variant: {
 				blue: "bg-blue-9 text-white hover:bg-blue-10 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:outline-blue-10",
 				primary:
-					"bg-gray-12 text-gray-1 hover:bg-gray-11 enabled:hover:bg-gray-11 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:bg-gray-4 disabled:dark:text-gray-9",
+					"bg-gray-12 gray-button-shadow text-gray-1 hover:bg-gray-11 enabled:hover:bg-gray-11 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:bg-gray-4 disabled:dark:text-gray-9",
 				secondary:
-					"dark:bg-gray-4 bg-gray-5 enabled:hover:bg-gray-5 text-gray-500 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:outline-blue-10",
+					"border border-gray-6 data-[selected=true]:!bg-gray-8 dark:data-[selected=true]:!bg-gray-9 gray-button-shadow bg-gray-5 enabled:hover:bg-gray-7 text-gray-500 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300 disabled:outline-blue-10",
 				destructive:
 					"bg-red-300 text-gray-50 dark:text-gray-12 disabled:bg-gray-6 disabled:text-gray-9 enabled:hover:bg-red-400 disabled:bg-red-200 outline-red-300",
 				white:
-					"bg-gray-12 hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 dark:text-gray-1 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300",
+					"bg-gray-12 dark-button-shadow hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 dark:text-gray-1 disabled:bg-gray-6 disabled:text-gray-9 outline-blue-300",
 				lightdark:
-					"bg-gray-12 hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 disabled:bg-gray-6 disabled:text-gray-9",
+					"bg-gray-12 gray-button-shadow hover:bg-gray-11 text-gray-1 dark:disabled:bg-gray-300 dark:disabled:text-gray-8 disabled:bg-gray-6 disabled:text-gray-9",
 			},
 			size: {
 				xs: "text-[0.75rem] px-[0.5rem] h-[1.25rem]",

packages/ui/src/components/Button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
 				white:
 					"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
-				gray: "bg-gray-4 hover:bg-gray-6 border border-gray-5 gray-button-shadow text-gray-12 disabled:bg-gray-6 disabled:text-gray-9",
+				gray: "bg-gray-5 hover:bg-gray-7 border border-gray-6 gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
 				dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border border-gray-12 text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
 					"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",