Merge pull request #1413 from argos-ci/refine-ui

feat: refine UI
argos-ci · Nov 6, 2024 · 56d7985 · 56d7985
2 parents 6e1fd6d + 79b76a2
commit 56d7985
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 44 deletions.
diff --git a/apps/frontend/src/pages/Build/BuildDetail.tsx b/apps/frontend/src/pages/Build/BuildDetail.tsx
@@ -138,7 +138,7 @@ const MissingScreenshotInfo = memo(
       <div className="w-full">
         <div className="bg-app flex flex-col items-center gap-4 rounded border p-8 text-center">
           <div className="flex flex-col items-center gap-2">
-            <div className="[&>*]:size-10">{icon}</div>
+            <div className="*:size-10">{icon}</div>
             <div className="text-base font-medium">{title}</div>
           </div>
           <p className="text-low text-sm">{description}</p>

diff --git a/apps/frontend/src/pages/Build/BuildDiffList.tsx b/apps/frontend/src/pages/Build/BuildDiffList.tsx
@@ -222,14 +222,14 @@ const ListHeader = ({
     <RACButton
       className={clsx(
         borderB,
-        "group/list-header border-t-base bg-app data-[hovered]:bg-subtle data-[focus-visible]:bg-subtle z-10 flex w-full cursor-default select-none items-center border-t pr-4 text-left focus:outline-none",
+        "group/list-header border-t-base bg-app data-[hovered]:bg-subtle data-[focus-visible]:bg-subtle z-10 flex w-full cursor-default select-none items-center border-t pr-2 text-left focus:outline-none",
       )}
       style={style}
       onPress={onClick}
     >
       <ChevronDownIcon
         className={clsx(
-          "text-low m-0.5 size-3 shrink-0 opacity-0 transition group-hover/sidebar:opacity-100 group-data-[focus-visible]/list-header:opacity-100",
+          "text-low m-[0.1875rem] size-2.5 shrink-0 opacity-0 transition group-hover/sidebar:opacity-100 group-data-[focus-visible]/list-header:opacity-100",
           !item.expanded && "-rotate-90",
         )}
       />
@@ -859,7 +859,7 @@ const InternalBuildDiffList = memo(() => {
     <>
       {stats && !searchMode && (
         <BuildStatsIndicator
-          className="border-b-base flex shrink-0 items-center border-b px-2"
+          className="border-b-base flex shrink-0 items-center overflow-x-auto border-b px-2"
           stats={stats}
           onClickGroup={openGroup}
         />

diff --git 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 (
     <RACTab
       ref={ref}
-      className="text-low data-[hovered]:text data-[selected]:text rac-focus cursor-default px-2 text-sm font-medium leading-10 transition"
+      className={clsx(
+        "text-low rac-focus cursor-default rounded px-2 text-sm font-medium leading-6",
+        "data-[hovered]:bg-ui",
+        "data-[selected]:text data-[selected]:bg-ui",
+      )}
       {...props}
     />
   );
@@ -44,20 +49,23 @@ const SearchInput = React.forwardRef<HTMLInputElement, object>(
   (_props, ref) => {
     const { search, setSearch } = useSearchState();
     return (
-      <input
-        ref={ref}
-        type="text"
-        autoFocus
-        placeholder="Find..."
-        className="text placeholder:text-low flex-1 bg-transparent p-2 text-xs leading-6 outline-none"
-        value={search}
-        onChange={(event) => setSearch(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-          }
-        }}
-      />
+      <div className="relative flex-1">
+        <SearchIcon className="text-low pointer-events-none absolute my-3 size-4" />
+        <input
+          ref={ref}
+          type="text"
+          autoFocus
+          placeholder="Find..."
+          className="text placeholder:text-low w-full bg-transparent p-2 pl-6 text-xs leading-6 outline-none"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+              event.preventDefault();
+            }
+          }}
+        />
+      </div>
     );
   },
 );
@@ -98,34 +106,40 @@ export const BuildSidebar = React.memo(
         className="group/sidebar flex w-[295px] shrink-0 flex-col border-r"
       >
         <div className="flex shrink-0 items-center border-b px-2">
-          <HotkeyTooltip
-            keys={searchModeHotKey.displayKeys}
-            description="Find..."
-          >
-            <IconButton
-              onPress={() => enterSearchMode()}
-              aria-pressed={searchMode}
-            >
-              <SearchIcon />
-            </IconButton>
-          </HotkeyTooltip>
           {searchMode ? (
             <>
               <SearchInput ref={searchInputRef} />
               <HotkeyTooltip
                 keys={leaveSearchModeHotKey.displayKeys}
                 description="Exit search mode"
               >
-                <IconButton onPress={() => setSearchMode(false)}>
+                <IconButton size="small" onPress={() => setSearchMode(false)}>
                   <XIcon />
                 </IconButton>
               </HotkeyTooltip>
             </>
           ) : (
-            <RACTabList className="flex shrink-0" aria-label="Build details">
-              <Tab id="screenshots">Screenshots</Tab>
-              <Tab id="info">Info</Tab>
-            </RACTabList>
+            <>
+              <RACTabList
+                className="flex flex-1 shrink-0 gap-2 py-2"
+                aria-label="Build details"
+              >
+                <Tab id="screenshots">Screenshots</Tab>
+                <Tab id="info">Info</Tab>
+              </RACTabList>
+              <HotkeyTooltip
+                keys={searchModeHotKey.displayKeys}
+                description="Find"
+              >
+                <IconButton
+                  onPress={() => enterSearchMode()}
+                  aria-pressed={searchMode}
+                  size="small"
+                >
+                  <SearchIcon />
+                </IconButton>
+              </HotkeyTooltip>
+            </>
           )}
         </div>
 

diff --git 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}
       >
-        <span className="[&>*]:size-4">{icon}</span>
+        <span className="*:size-4">{icon}</span>
         <span className="text-xs">{count}</span>
       </RACButton>
     </HotkeyTooltip>
@@ -115,7 +115,7 @@ function StatCount({ icon, count, color, tooltip }: StatCountProps) {
         count === 0 && "opacity-disabled",
       )}
     >
-      <span className="[&>*]:size-4">{icon}</span>
+      <span className="*:size-4">{icon}</span>
       <span className="text-xs">{count}</span>
     </div>
   );

diff --git 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(
       <Tooltip content="See all builds">
         <HeadlessLink
           href={`/${accountSlug}/${projectName}/builds`}
-          className="text-low data-[focus-visible]:ring-default rac-focus text-xs leading-none transition"
+          className="text-low data-[hovered]:text rac-focus text-xs leading-none transition"
         >
           {accountSlug}/{projectName}
         </HeadlessLink>

diff --git a/apps/frontend/src/ui/Button.tsx b/apps/frontend/src/ui/Button.tsx
@@ -37,8 +37,8 @@ const variantClassNames: Record<ButtonVariant, string> = {
 };
 
 const sizeClassNames: Record<ButtonSize, string> = {
-  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
@@ -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<HTMLButtonElement>,
 ) {
   return (
     <RACButton
       ref={ref}
-      className={clsx(getIconButtonClassName({ color, variant }), className)}
+      className={clsx(
+        getIconButtonClassName({ color, variant, size }),
+        className,
+      )}
       {...props}
     />
   );