add pr status header design review

packages/ui/src/components/avatar.tsx

@@ -37,7 +37,7 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'span'> {
 }
 
 const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
-  ({ name, src, size = 'md', rounded = false, className, ...props }, ref) => {
+  ({ name, src, size = 'sm', rounded = false, className, ...props }, ref) => {
     const initials = getInitials(name || '')
 
     return (

packages/ui/src/components/branch-tag.tsx

@@ -1,4 +1,4 @@
-import { CopyTag, Link } from '@/components'
+import { CopyTag, Link, Tag } from '@/components'
 
 import type { TagProps } from './tag'
 
@@ -7,6 +7,7 @@ interface BranchTagProps {
   spaceId?: string
   repoId?: string
   hideBranchIcon?: boolean
+  hideCopyButton?: boolean
   theme?: TagProps['theme']
   variant?: TagProps['variant']
   size?: TagProps['size']
@@ -17,13 +18,16 @@ const BranchTag: React.FC<BranchTagProps> = ({
   spaceId,
   repoId,
   hideBranchIcon,
+  hideCopyButton,
   theme = 'gray',
   variant = 'secondary',
   size = 'md'
 }) => {
+  const TagComponent = hideCopyButton ? Tag : CopyTag
+
   return (
     <Link noHoverUnderline to={`${spaceId ? `/${spaceId}` : ''}/repos/${repoId}/files/${branchName}`}>
-      <CopyTag
+      <TagComponent
         variant={variant}
         theme={theme}
         size={size}

packages/ui/src/components/copy-tag.tsx

@@ -9,7 +9,7 @@ type CopyTagProps = TagProps & {
   onActionClick?: never
 }
 
-export function CopyTag(props: CopyTagProps) {
+export function CopyTag({ ...props }: CopyTagProps) {
   const { value } = props
 
   const [copied, setCopied] = useState(false)

packages/ui/src/components/more-actions-tooltip.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useRouterContext } from '@/context'
-import { Button, ButtonVariants } from '@components/button'
+import { Button, ButtonProps, ButtonVariants } from '@components/button'
 import { DropdownMenu } from '@components/dropdown-menu'
 import { IconV2, type IconPropsV2 } from '@components/icon-v2'
 import { cn } from '@utils/cn'
@@ -17,6 +17,7 @@ export interface ActionData {
 }
 
 export interface MoreActionsTooltipProps {
+  theme?: ButtonProps['theme']
   actions: ActionData[]
   isInTable?: boolean
   iconName?: IconPropsV2['name']
@@ -30,14 +31,18 @@ export interface MoreActionsTooltipProps {
  * A component for displaying a button that, when clicked, shows a tooltip with a list of actions.
  */
 export const MoreActionsTooltip = forwardRef<HTMLButtonElement, MoreActionsTooltipProps>(
-  ({ actions, iconName = 'more-vert', sideOffset = 2, alignOffset = 0, className, buttonVariant = 'ghost' }, ref) => {
+  (
+    { theme, actions, iconName = 'more-vert', sideOffset = 2, alignOffset = 0, className, buttonVariant = 'ghost' },
+    ref
+  ) => {
     const { Link } = useRouterContext()
     if (!actions.length) return <></>
 
     return (
       <DropdownMenu.Root>
         <DropdownMenu.Trigger ref={ref} asChild>
           <Button
+            theme={theme}
             className={cn('text-icons-1 hover:text-icons-2 data-[state=open]:text-icons-2')}
             variant={buttonVariant}
             iconOnly

packages/ui/src/components/text.tsx

@@ -74,7 +74,7 @@ export const textVariants = cva('', {
       warning: 'text-cn-warning',
       merged: 'text-cn-merged',
       danger: 'text-cn-danger',
-      accent: 'text-cn-brand'
+      brand: 'text-cn-brand'
     },
     lineClamp: {
       default: '',

packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx

@@ -74,7 +74,7 @@ export const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
 }) => {
   return (
     <Layout.Vertical gap="md">
-      <Layout.Vertical gap="md">
+      <Layout.Vertical gap="2xs">
         <ReviewersHeader
           currentUserId={currentUserId}
           usersList={usersList}
@@ -95,7 +95,7 @@ export const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
         />
       </Layout.Vertical>
       {!isCreatingPr ? (
-        <Layout.Vertical gap="md">
+        <Layout.Vertical gap="2xs">
           <LabelsHeader
             labelsList={labelsList}
             labelsValues={labelsValues}

packages/ui/src/views/repo/pull-request/components/reviewers/pull-request-reviewers-header.tsx

@@ -1,6 +1,14 @@
 import { useMemo, useRef } from 'react'
 
-import { Button, DropdownMenu, IconV2, SearchInput, Text, useSearchableDropdownKeyboardNavigation } from '@/components'
+import {
+  Button,
+  DropdownMenu,
+  IconV2,
+  Layout,
+  SearchInput,
+  Text,
+  useSearchableDropdownKeyboardNavigation
+} from '@/components'
 import { useTranslation } from '@/context'
 import { PrincipalType } from '@/types'
 import { PRReviewer } from '@/views'
@@ -46,7 +54,7 @@ const ReviewersHeader = ({
   const handleCloseValuesView = useRef(debounce(() => handleSearchQuery(''), 300)).current
 
   return (
-    <div className="mb-0.5 flex items-center justify-between">
+    <Layout.Flex align="center" justify="between">
       <Text as="h5" variant="body-strong" color="foreground-1">
         {t('views:pullRequests.reviewers', 'Reviewers')}
       </Text>
@@ -94,7 +102,7 @@ const ReviewersHeader = ({
           })}
         </DropdownMenu.Content>
       </DropdownMenu.Root>
-    </div>
+    </Layout.Flex>
   )
 }
 

packages/ui/src/views/repo/pull-request/components/reviewers/pull-request-reviewers-list.tsx

@@ -1,4 +1,5 @@
 import { Alert } from '@components/alert'
+import { Layout } from '@components/layout'
 import { Text } from '@components/text'
 
 import { EnumPullReqReviewDecision, PullReqReviewDecision } from '../../pull-request.types'
@@ -28,13 +29,13 @@ const ReviewersList: React.FC<ReviewersListProps> = ({
   addReviewerError,
   removeReviewerError
 }) => (
-  <div className="flex flex-col gap-3">
-    {addReviewerError || removeReviewerError ? (
+  <Layout.Vertical gapY="md">
+    {(addReviewerError || removeReviewerError) && (
       <Alert.Root theme="danger">
         <Alert.Title>Failed to add reviewer</Alert.Title>
         <Alert.Description>{addReviewerError ?? removeReviewerError}</Alert.Description>
       </Alert.Root>
-    ) : null}
+    )}
 
     {reviewers.length ? (
       reviewers.map(({ reviewer, review_decision, sha }) => (
@@ -52,7 +53,7 @@ const ReviewersList: React.FC<ReviewersListProps> = ({
         No reviewers
       </Text>
     )}
-  </div>
+  </Layout.Vertical>
 )
 
 export { ReviewersList }