improvement: new buttons look

apps/web/app/(org)/dashboard/_components/Navbar/Desktop.tsx

@@ -35,59 +35,57 @@ export const DesktopNav = () => {
 	}, [toggleSidebarCollapsed]);
 
 	return (
-		<>
-			<motion.div
-				initial={{
-					width: sidebarCollapsed ? "70px" : "230px",
-				}}
-				animate={{
-					width: sidebarCollapsed ? "70px" : "230px",
-					transition: {
-						duration: 0.6,
-						type: "spring",
-						bounce: 0.25,
-					},
-				}}
-				className={clsx("hidden z-50 h-full lg:flex group", "relative")}
-			>
-				<div className="flex flex-col w-full max-w-[220px] mx-auto h-full">
-					<div className="flex justify-start items-center px-3 pt-5 mb-3.5 w-full truncate min-h-8">
-						<Link href="/dashboard">
-							<Logo
-								hideLogoName={sidebarCollapsed}
-								className="mx-auto w-[120px] h-[40px]"
-							/>
-						</Link>
-					</div>
+		<motion.div
+			initial={{
+				width: sidebarCollapsed ? "70px" : "230px",
+			}}
+			animate={{
+				width: sidebarCollapsed ? "70px" : "230px",
+				transition: {
+					duration: 0.6,
+					type: "spring",
+					bounce: 0.25,
+				},
+			}}
+			className={clsx("hidden z-50 h-full lg:flex group", "relative")}
+		>
+			<div className="flex flex-col w-full max-w-[220px] mx-auto h-full">
+				<div className="flex justify-start items-center px-3 pt-5 mb-3.5 w-full truncate min-h-8">
+					<Link href="/dashboard">
+						<Logo
+							hideLogoName={sidebarCollapsed}
+							className="mx-auto w-[120px] h-[40px]"
+						/>
+					</Link>
+				</div>
 
-					<div className="flex overflow-y-auto flex-col flex-grow">
-						<div className="flex flex-col px-3 h-full">
-							<AdminNavItems />
-						</div>
+				<div className="flex overflow-y-auto flex-col flex-grow">
+					<div className="flex flex-col px-3 h-full">
+						<AdminNavItems />
 					</div>
+				</div>
 
-					<Tooltip
-						kbd={[cmdSymbol, "Shift", "S"]}
-						position="right"
-						content="Toggle collapse"
+				<Tooltip
+					kbd={[cmdSymbol, "Shift", "S"]}
+					position="right"
+					content="Toggle collapse"
+				>
+					<Button
+						variant="white"
+						onClick={toggleSidebarCollapsed}
+						className="absolute right-[-12px] size-7 p-0 min-w-[unset] top-[50%] transform -translate-y-1/2 rounded-full transition-colors z-10"
 					>
-						<Button
-							variant="dark"
-							onClick={toggleSidebarCollapsed}
-							className="absolute right-[-12px] size-7 p-0 min-w-[unset] hover:border-gray-3 hover:bg-gray-2 top-[50%] transform -translate-y-1/2 rounded-full border bg-gray-1 border-gray-3 transition-colors z-10"
-						>
-							<ChevronRight
-								size={14}
-								className={clsx(
-									"transition-transform duration-200 text-gray-12",
-									sidebarCollapsed ? "rotate-180" : "",
-								)}
-							/>
-						</Button>
-					</Tooltip>
-				</div>
-			</motion.div>
-		</>
+						<ChevronRight
+							size={14}
+							className={clsx(
+								"transition-transform duration-200 text-gray-12",
+								sidebarCollapsed ? "rotate-180" : "",
+							)}
+						/>
+					</Button>
+				</Tooltip>
+			</div>
+		</motion.div>
 	);
 };
 

apps/web/app/(org)/dashboard/_components/Navbar/SpacesList.tsx

@@ -142,10 +142,10 @@ const SpacesList = ({ toggleMobileNav }: { toggleMobileNav?: () => void }) => {
 				<Tooltip position="right" content="Create space">
 					<Button
 						className={clsx(
-							"p-0 bg-transparent min-w-[unset] hover:bg-gray-3",
+							"p-0 min-w-[unset] hover:bg-gray-3",
 							sidebarCollapsed ? "size-8" : "size-7",
 						)}
-						variant="gray"
+						variant="white"
 						onClick={() => {
 							setShowSpaceDialog(true);
 						}}

apps/web/app/(org)/login/form.tsx

@@ -419,7 +419,7 @@ const NormalLogin = ({
 					}}
 				/>
 				<MotionButton
-					variant="primary"
+					variant="dark"
 					type="submit"
 					disabled={loading || emailSent}
 					icon={<FontAwesomeIcon className="mr-1 size-4" icon={faEnvelope} />}

apps/web/app/globals.css

@@ -25,6 +25,7 @@
 	--filler-txt: #b3b3b3;
 	--text-primary: #0d1b2a;
 	--text-secondary: #ffffff;
+	--shadow-gray-11: hsl(0, 0%, 13%);
 	--header-height: 80px;
 	--vh100-offset: calc(100vh - var(--header-height));
 	--foreground-rgb: #000000;
@@ -67,6 +68,22 @@ html {
 	border-radius: 10px;
 }
 
+.dark .dark-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.2) inset;
+}
+
+.dark .gray-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.05) inset;
+}
+
+.gray-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
+}
+
+.dark-button-shadow {
+	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.2) inset;
+}
+
 .dark ::selection {
 	background: #ffffff;
 	color: #000000;

apps/web/components/ReadyToGetStarted.tsx

@@ -29,7 +29,7 @@ export function ReadyToGetStarted() {
 						{homepageCopy.readyToGetStarted.buttons.secondary}
 					</Button>
 					<Button
-						variant="primary"
+						variant="blue"
 						href="/download"
 						size="lg"
 						className="w-full font-medium sm:w-auto"

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

@@ -202,7 +202,7 @@ const Features = () => {
 				{/* View all features button */}
 				<Button
 					href="/features"
-					variant="primary"
+					variant="dark"
 					size="lg"
 					className="inline-flex"
 				>

apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx

@@ -75,7 +75,7 @@ export const CommercialCard = () => {
 					<div className="text-center">
 						<a
 							href="/docs/commercial-license"
-							className="text-sm text-gray-10 hover:text-gray-12 underline"
+							className="text-sm underline text-gray-10 hover:text-gray-12"
 						>
 							Learn more about the commercial license here
 						</a>
@@ -184,7 +184,7 @@ export const CommercialCard = () => {
 			<Button
 				disabled={commercialLoading}
 				onClick={openCommercialCheckout}
-				variant="primary"
+				variant="dark"
 				size="lg"
 				className="w-full font-medium"
 				aria-label="Purchase Commercial License"

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

@@ -140,7 +140,7 @@ const Testimonials = () => {
 			<Button
 				href="/testimonials"
 				className="mx-auto mt-10 md:mt-0 w-fit"
-				variant="primary"
+				variant="dark"
 				size="lg"
 			>
 				{homepageCopy.testimonials.cta}

packages/ui/src/components/Button.tsx

@@ -14,16 +14,17 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				primary:
-					"bg-gray-12 text-gray-1 hover:bg-gray-11 disabled:bg-gray-6 disabled:text-gray-9",
-				blue: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-6 disabled:text-gray-9",
+					"bg-gray-12 dark-button-shadow text-gray-1 disabled:bg-gray-6 disabled:text-gray-9",
+				blue: "bg-blue-600 text-white border border-blue-800 shadow-[0_1.50px_0_0_rgba(255,255,255,0.20)_inset] hover:bg-blue-700  disabled:bg-gray-6 disabled:text-gray-9",
 				destructive:
 					"bg-red-500 text-white hover:bg-red-600 disabled:bg-red-200",
 				outline:
 					"border border-gray-4 hover:border-gray-12 hover:bg-gray-12 hover:text-gray-1 text-gray-12 disabled:bg-gray-8",
-				white: "bg-gray-1 text-gray-12 hover:bg-gray-2 disabled:bg-gray-8",
+				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 text-gray-12 hover:bg-gray-5 disabled:bg-gray-6 disabled:text-gray-9",
-				dark: "bg-gray-12 text-gray-1 disabled:cursor-not-allowed hover:bg-gray-11 disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
+				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",
+				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",
 				radialblue: