Figma fixes (harness#945)

* Added right color tokens for navbar logo

* Add selected bg color for navigation item background-04

* fix: background inputs fixes

* Changed background-10 color var

* fix: background inputs fixes

* Update the selected tab border width from 1px to 2px

* Removed close button from edit-repo-details-dialog since it is now added in the component itself

* Changed foreground-01 to foreground-1

* Changed hover:bg-background-2 to hover:bg-background-4 as suggested by Anastasia

* Fixed navbar active item background

* Increased navbar icon size since it was reduced because of increased padding

* Fixed lint errors

---------

Co-authored-by: Shaurya Kalia <[email protected]>

packages/ui/src/components/input.tsx

@@ -9,7 +9,7 @@ export interface BaseInputProps
     VariantProps<typeof inputVariants> {}
 
 const inputVariants = cva(
-  'bg-transparent px-3 py-1 text-foreground-1 disabled:cursor-not-allowed disabled:bg-background-3 disabled:text-foreground-7',
+  'bg-input-background px-3 py-1 text-foreground-1 disabled:cursor-not-allowed disabled:bg-background-3 disabled:text-foreground-7',
   {
     variants: {
       variant: {

packages/ui/src/components/multi-select.tsx

@@ -48,7 +48,7 @@ export const MultiSelect = <T = unknown,>({
         </Label>
       )}
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8">
+        <DropdownMenu.Trigger className="flex h-9 w-full items-center justify-between rounded border border-borders-2 px-3 transition-colors data-[state=open]:border-borders-8 bg-input-background">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>

packages/ui/src/components/navbar-skeleton/item.tsx

@@ -18,7 +18,8 @@ export function Item({ icon, text, description, active, submenuItem, className }
     return (
       <div
         className={cn(
-          'group relative grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-3 pb-[0.6875rem] pt-[0.5625rem]',
+          'group relative grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-3 pb-[0.6875rem] pt-[0.5625rem] py-2 px-3 rounded-md',
+          { 'bg-background-4': active },
           { 'gap-0': !icon },
           className
         )}
@@ -65,7 +66,14 @@ export function Item({ icon, text, description, active, submenuItem, className }
   }
 
   return (
-    <div className={cn('group flex cursor-pointer select-none gap-2.5 py-1', { 'gap-0': !icon }, className)}>
+    <div
+      className={cn(
+        'group flex cursor-pointer select-none gap-2.5 py-2 px-3 rounded-md',
+        { 'bg-background-4': active },
+        { 'gap-0': !icon },
+        className
+      )}
+    >
       {icon && (
         <div
           className={cn(

packages/ui/src/components/navbar/navbar-item/index.tsx

@@ -66,11 +66,11 @@ export const NavbarItem = ({
 
   return (
     <div className="group relative">
-      <NavLink className="block pr-6" to={item.to || ''}>
+      <NavLink className="block" to={item.to || ''}>
         {({ isActive }) => (
           <NavbarSkeleton.Item
             text={item.title}
-            icon={iconName && <Icon name={iconName} size={12} />}
+            icon={iconName && <Icon name={iconName} size={14} />}
             active={isActive}
           />
         )}

packages/ui/src/components/navbar/navbar.tsx

@@ -61,7 +61,7 @@ export const Navbar = ({
         <NavbarProjectChooser.Root
           logo={
             <Link className="flex items-center gap-1.5" to="/">
-              <Icon name="harness" size={18} className="text-foreground-1" />
+              <Icon name="harness" size={18} className="text-foreground-accent" />
               <Icon name="harness-logo-text" width={65} height={15} className="mb-0.5 text-foreground-1" />
             </Link>
           }
@@ -83,7 +83,7 @@ export const Navbar = ({
               />
             ))}
             <button onClick={handleMoreMenu}>
-              <NavbarSkeleton.Item text="More" icon={<Icon name="ellipsis" size={12} />} active={showMoreMenu} />
+              <NavbarSkeleton.Item text="More" icon={<Icon name="ellipsis" size={14} />} active={showMoreMenu} />
             </button>
           </NavbarSkeleton.Group>
 
@@ -106,14 +106,14 @@ export const Navbar = ({
           <NavbarSkeleton.Group topBorder>
             {!!currentUser?.admin && (
               <Link to="/admin/default-settings">
-                <NavbarSkeleton.Item text="User Management" icon={<Icon name="account" size={12} />} />
+                <NavbarSkeleton.Item text="User Management" icon={<Icon name="account" size={14} />} />
               </Link>
             )}
 
             <button onClick={handleSettingsMenu}>
               <NavbarSkeleton.Item
                 text={adminMenuItem.title}
-                icon={adminMenuItem.iconName && <Icon name={adminMenuItem.iconName} size={12} />}
+                icon={adminMenuItem.iconName && <Icon name={adminMenuItem.iconName} size={14} />}
                 active={showSettingMenu}
               />
             </button>

packages/ui/src/components/select.tsx

@@ -76,7 +76,7 @@ const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-borders-2 ring-offset-background flex h-9 w-full items-center justify-between whitespace-nowrap rounded border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed disabled:border-borders-1 [&>span]:line-clamp-1',
+      'border-borders-2 ring-offset-background flex h-9 w-full items-center justify-between whitespace-nowrap rounded border bg-input-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed disabled:border-borders-1 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -125,7 +125,7 @@ const SelectContent = forwardRef<
       <SelectPrimitive.Content
         ref={ref}
         className={cn(
-          'bg-background-2 text-popover-foreground relative z-50 max-h-96 min-w-[8rem] max-w-[var(--radix-popper-anchor-width)] overflow-hidden rounded box-border shadow-md',
+          'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] max-w-[var(--radix-popper-anchor-width)] overflow-hidden rounded box-border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className

packages/ui/src/components/stacked-list.tsx

@@ -104,7 +104,7 @@ const ListItem = ({
         className,
         isLast ? 'border-none' : 'border-b',
         isHeader ? 'bg-background-2' : '',
-        disableHover ? '' : 'hover:bg-background-2 cursor-pointer duration-150 ease-in-out'
+        disableHover ? '' : 'hover:bg-background-4 cursor-pointer duration-150 ease-in-out'
       )}
       {...props}
     >

packages/ui/src/components/table.tsx

@@ -59,7 +59,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn('hover:bg-background-2 data-[state=selected]:bg-muted border-b transition-colors', className)}
+      className={cn('hover:bg-background-4 data-[state=selected]:bg-muted border-b transition-colors', className)}
       {...props}
     />
   )

packages/ui/src/components/tabs.tsx

@@ -33,7 +33,7 @@ const tabsTriggerVariants = cva(
         underline:
           'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary',
         navigation:
-          'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
+          'm-0 -mb-px h-[44px] border-b-2 border-solid border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
         tabnav:
           'h-9 rounded-t-md border-x border-t border-transparent px-4 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
       }

packages/ui/src/components/textarea.tsx

@@ -27,7 +27,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <textarea
           className={cn(
-            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
+            'placeholder:text-foreground-4 flex min-h-[74px] w-full rounded border bg-input-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:rounded disabled:cursor-not-allowed',
             resizable ? 'resize-y [field-sizing:content] whitespace-pre-wrap [word-break:break-word]' : 'resize-none',
             className,
             error

packages/ui/src/shared-style-variables.css

@@ -528,7 +528,7 @@
     --canary-background-07: var(--canary-base-chrome-50);
     --canary-background-08: var(--canary-base-chrome-100);
     --canary-background-09: var(--canary-base-chrome-150);
-    --canary-background-10: var(--canary-accent-500);
+    --canary-background-10: var(--canary-accent-600);
     --canary-background-11: var(--canary-base-chrome-200);
     --canary-background-12: var(--canary-base-chrome-150);
     --canary-background-13: var(--canary-base-chrome-600);
@@ -1228,7 +1228,7 @@
     --canary-background-07: var(--canary-base-chrome-black);
     --canary-background-08: var(--canary-base-chrome-850);
     --canary-background-09: var(--canary-base-chrome-850);
-    --canary-background-10: var(--canary-accent-600);
+    --canary-background-10: var(--canary-accent-500);
     --canary-background-11: var(--canary-base-chrome-800);
     --canary-background-12: var(--canary-base-chrome-800);
     --canary-background-13: var(--canary-base-chrome-400);

packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx

@@ -37,7 +37,7 @@ export const BranchSelector: FC<BranchSelectorProps> = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button
-          className="flex items-center gap-1.5 overflow-hidden px-3 data-[state=open]:border-borders-9"
+          className="flex items-center gap-1.5 overflow-hidden px-3 data-[state=open]:border-borders-9 bg-input-background"
           variant="outline"
           size={buttonSize}
         >

packages/ui/src/views/repo/repo-summary/components/edit-repo-details-dialog.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useState } from 'react'
 
-import { AlertDialog, Button, ButtonGroup, Icon, Textarea } from '@/components'
+import { AlertDialog, Button, ButtonGroup, Textarea } from '@/components'
 
 interface EditRepoDetailsDialog {
   showEditRepoDetails: boolean
@@ -29,18 +29,7 @@ export const EditRepoDetails = ({
     <AlertDialog.Root open={showEditRepoDetails} onOpenChange={onClose}>
       <AlertDialog.Content className="h-80 max-h-[70vh] w-[460px] !rounded" onOverlayClick={handleClose}>
         <AlertDialog.Header>
-          <AlertDialog.Title className="mb-4">
-            Repository Description
-            <Button
-              className="absolute right-1 top-1 text-icons-4 hover:text-icons-2"
-              variant="custom"
-              size="icon"
-              onClick={handleClose}
-            >
-              <Icon name="close" size={16} />
-              <span className="sr-only">Close</span>
-            </Button>
-          </AlertDialog.Title>
+          <AlertDialog.Title className="mb-4">Repository Description</AlertDialog.Title>
         </AlertDialog.Header>
         <Textarea
           label="Description"