From 79b76a2ea9ce6e780bf52559c64672e890203869 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Mon, 4 Nov 2024 08:05:21 +0100 Subject: [PATCH] feat: refine UI --- apps/frontend/src/pages/Build/BuildDetail.tsx | 2 +- .../src/pages/Build/BuildDiffList.tsx | 6 +- .../frontend/src/pages/Build/BuildSidebar.tsx | 76 +++++++++++-------- .../src/pages/Build/BuildStatsIndicator.tsx | 4 +- .../src/pages/Build/header/BuildHeader.tsx | 2 +- apps/frontend/src/ui/Button.tsx | 4 +- apps/frontend/src/ui/IconButton.tsx | 18 ++++- 7 files changed, 68 insertions(+), 44 deletions(-) diff --git a/apps/frontend/src/pages/Build/BuildDetail.tsx b/apps/frontend/src/pages/Build/BuildDetail.tsx index d5746ba54..d391b7aca 100644 --- a/apps/frontend/src/pages/Build/BuildDetail.tsx +++ b/apps/frontend/src/pages/Build/BuildDetail.tsx @@ -138,7 +138,7 @@ const MissingScreenshotInfo = memo(
-
{icon}
+
{icon}
{title}

{description}

diff --git a/apps/frontend/src/pages/Build/BuildDiffList.tsx b/apps/frontend/src/pages/Build/BuildDiffList.tsx index 09fdf62d1..d510d8426 100644 --- a/apps/frontend/src/pages/Build/BuildDiffList.tsx +++ b/apps/frontend/src/pages/Build/BuildDiffList.tsx @@ -222,14 +222,14 @@ const ListHeader = ({ @@ -859,7 +859,7 @@ const InternalBuildDiffList = memo(() => { <> {stats && !searchMode && ( diff --git a/apps/frontend/src/pages/Build/BuildSidebar.tsx b/apps/frontend/src/pages/Build/BuildSidebar.tsx index 3b0b8cdae..8d838ddf5 100644 --- a/apps/frontend/src/pages/Build/BuildSidebar.tsx +++ b/apps/frontend/src/pages/Build/BuildSidebar.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import clsx from "clsx"; import { SearchIcon, XIcon } from "lucide-react"; import { Tab as RACTab, @@ -25,7 +26,11 @@ const Tab = React.forwardRef(function Tab( return ( ); @@ -44,20 +49,23 @@ const SearchInput = React.forwardRef( (_props, ref) => { const { search, setSearch } = useSearchState(); return ( - setSearch(event.target.value)} - onKeyDown={(event) => { - if (event.key === "ArrowDown" || event.key === "ArrowUp") { - event.preventDefault(); - } - }} - /> +
+ + setSearch(event.target.value)} + onKeyDown={(event) => { + if (event.key === "ArrowDown" || event.key === "ArrowUp") { + event.preventDefault(); + } + }} + /> +
); }, ); @@ -98,17 +106,6 @@ export const BuildSidebar = React.memo( className="group/sidebar flex w-[295px] shrink-0 flex-col border-r" >
- - enterSearchMode()} - aria-pressed={searchMode} - > - - - {searchMode ? ( <> @@ -116,16 +113,33 @@ export const BuildSidebar = React.memo( keys={leaveSearchModeHotKey.displayKeys} description="Exit search mode" > - setSearchMode(false)}> + setSearchMode(false)}> ) : ( - - Screenshots - Info - + <> + + Screenshots + Info + + + enterSearchMode()} + aria-pressed={searchMode} + size="small" + > + + + + )}
diff --git a/apps/frontend/src/pages/Build/BuildStatsIndicator.tsx b/apps/frontend/src/pages/Build/BuildStatsIndicator.tsx index f6d7d72a3..770ffad20 100644 --- a/apps/frontend/src/pages/Build/BuildStatsIndicator.tsx +++ b/apps/frontend/src/pages/Build/BuildStatsIndicator.tsx @@ -91,7 +91,7 @@ function InteractiveStatCount({ onPress={onActive} isDisabled={count === 0} > - {icon} + {icon} {count} @@ -115,7 +115,7 @@ function StatCount({ icon, count, color, tooltip }: StatCountProps) { count === 0 && "opacity-disabled", )} > - {icon} + {icon} {count}
); diff --git a/apps/frontend/src/pages/Build/header/BuildHeader.tsx b/apps/frontend/src/pages/Build/header/BuildHeader.tsx index 1e18993a0..3515c58d9 100644 --- a/apps/frontend/src/pages/Build/header/BuildHeader.tsx +++ b/apps/frontend/src/pages/Build/header/BuildHeader.tsx @@ -71,7 +71,7 @@ const ProjectLink = memo( {accountSlug}/{projectName} diff --git a/apps/frontend/src/ui/Button.tsx b/apps/frontend/src/ui/Button.tsx index a1c295f04..30e0b2077 100644 --- a/apps/frontend/src/ui/Button.tsx +++ b/apps/frontend/src/ui/Button.tsx @@ -37,8 +37,8 @@ const variantClassNames: Record = { }; const sizeClassNames: Record = { - medium: "group/button-medium rounded-lg py-1.5 px-3 text-sm", small: "group/button-small rounded py-1 px-2 text-xs", + medium: "group/button-medium rounded-lg py-[calc(0.375rem-1px)] px-3 text-sm", large: "group/button-large rounded py-3 px-8 text-base", }; @@ -50,7 +50,7 @@ function getButtonClassName(options: ButtonOptions) { variantClassName, sizeClassName, "focus:outline-none data-[focus-visible]:ring-4", - "items-center data-[disabled]:opacity-disabled inline-flex select-none whitespace-nowrap border font-sans font-medium transition data-[disabled]:cursor-default", + "items-center data-[disabled]:opacity-disabled inline-flex select-none whitespace-nowrap border font-sans font-medium data-[disabled]:cursor-default", ); } diff --git a/apps/frontend/src/ui/IconButton.tsx b/apps/frontend/src/ui/IconButton.tsx index 717a74783..1d3c5f924 100644 --- a/apps/frontend/src/ui/IconButton.tsx +++ b/apps/frontend/src/ui/IconButton.tsx @@ -9,10 +9,12 @@ import { type IconButtonVariant = "contained" | "outline"; type IconButtonColor = "danger" | "success" | "neutral"; +type IconButtonSize = "small" | "medium"; type IconButtonOptions = { variant?: IconButtonVariant; color?: IconButtonColor; + size?: IconButtonSize; }; const colorClassNames: Record< @@ -36,14 +38,19 @@ const colorClassNames: Record< }; function getIconButtonClassName(options: IconButtonOptions) { - const { variant = "outline", color = "neutral" } = options; + const { variant = "outline", color = "neutral", size = "medium" } = options; const variantClassName = colorClassNames[variant][color]; return clsx( variantClassName, /* Group */ "group-[]/button-group:rounded-none group-[]/button-group:first:rounded-l-lg group-[]/button-group:last:rounded-r-lg", + /* Size */ + { + small: "p-[calc(0.25rem-1px)] *:size-4 rounded-md leading-4 text-sm", + medium: "p-[calc(0.5rem-1px)] *:size-4 rounded-lg leading-4 text-sm", + }[size], /* Base */ - "data-[disabled]:opacity-disabled flex h-8 cursor-default items-center gap-2 rounded-lg border border-transparent p-[7px] text-sm transition [&>*]:size-4", + "data-[disabled]:opacity-disabled flex cursor-default border border-transparent text-sm", /* Focus */ "focus:outline-none data-[focus-visible]:ring-4", ); @@ -52,13 +59,16 @@ function getIconButtonClassName(options: IconButtonOptions) { type IconButtonProps = RACButtonProps & IconButtonOptions; export const IconButton = forwardRef(function IconButton( - { className, color, variant, ...props }: IconButtonProps, + { className, color, variant, size, ...props }: IconButtonProps, ref: React.ForwardedRef, ) { return ( );