feat: improving and fixing the styles for the PR detail page (harness…

…#858) * feat: improving and fixing the styles for the PR detail page * fix: minor changes * fix: minor changes * fix: minor changes
pixel-point · Jan 30, 2025 · 3b55b95 · 3b55b95
1 parent 9b9012a
commit 3b55b95
Show file tree

Hide file tree

Showing 21 changed files with 328 additions and 335 deletions.
diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx
@@ -552,7 +552,7 @@ export default function PullRequestConversationPage() {
         suggestions={suggestionsBatch?.length ? suggestionsBatch : suggestionToCommit ? [suggestionToCommit] : null}
         prId={prId}
       />
-      <SandboxLayout.Columns columnWidths="1fr 220px">
+      <SandboxLayout.Columns columnWidths="1fr 288px">
         <SandboxLayout.Column>
           <SandboxLayout.Content className="pl-0 pt-0">
             {/* TODO: fix handleaction for comment section in panel */}

diff --git a/packages/ui/src/components/markdown-viewer/CodeSuggestionBlock.tsx b/packages/ui/src/components/markdown-viewer/CodeSuggestionBlock.tsx
@@ -18,9 +18,8 @@ export interface Suggestion {
 interface CodeSuggestionBlockProps {
   code: string
   suggestionBlock?: SuggestionBlock
-  suggestionCheckSum?: string
 }
-export function CodeSuggestionBlock({ code, suggestionBlock, suggestionCheckSum }: CodeSuggestionBlockProps) {
+export function CodeSuggestionBlock({ code, suggestionBlock }: CodeSuggestionBlockProps) {
   const language = useMemo(() => suggestionBlock?.lang || 'plaintext', [suggestionBlock?.lang])
 
   const highlightedHtmlOld = useMemo(() => {
@@ -36,26 +35,13 @@ export function CodeSuggestionBlock({ code, suggestionBlock, suggestionCheckSum
   }, [code, language])
 
   return (
-    <div>
-      <span>
-        {suggestionBlock?.appliedCheckSum && suggestionBlock?.appliedCheckSum === suggestionCheckSum
-          ? 'Suggestion applied'
-          : 'Suggested change'}
-      </span>
-      <div className="pt-1">
-        <pre className="!bg-background-danger">
-          <code
-            className={`${language} code-highlight`}
-            dangerouslySetInnerHTML={{ __html: highlightedHtmlOld }}
-          ></code>
-        </pre>
-        <pre className="!bg-background-success">
-          <code
-            className={`${language} code-highlight`}
-            dangerouslySetInnerHTML={{ __html: highlightedHtmlNew }}
-          ></code>
-        </pre>
-      </div>
+    <div className="pt-1">
+      <pre className="!bg-background-danger">
+        <code className={`${language} code-highlight`} dangerouslySetInnerHTML={{ __html: highlightedHtmlOld }}></code>
+      </pre>
+      <pre className="!bg-background-success">
+        <code className={`${language} code-highlight`} dangerouslySetInnerHTML={{ __html: highlightedHtmlNew }}></code>
+      </pre>
     </div>
   )
 }
diff --git a/packages/ui/src/components/markdown-viewer/index.tsx b/packages/ui/src/components/markdown-viewer/index.tsx
@@ -156,9 +156,25 @@ export function MarkdownViewer({
   return (
     <Wrapper>
       <div ref={ref} style={styles}>
+        {isSuggestion && (
+          <div className="rounded-t-md border-x border-t border-borders-1 bg-background-2 px-4 py-3">
+            <span className="text-14 text-foreground-1">
+              {suggestionBlock?.appliedCheckSum && suggestionBlock?.appliedCheckSum === suggestionCheckSum
+                ? 'Suggestion applied'
+                : 'Suggested change'}
+            </span>
+          </div>
+        )}
+
         <MarkdownPreview
           source={source}
-          className={cn('prose prose-invert', markdownClassName)}
+          className={cn(
+            'prose prose-invert',
+            {
+              '[&>div>pre]:rounded-t-none': isSuggestion
+            },
+            markdownClassName
+          )}
           rehypeRewrite={rehypeRewrite}
           rehypePlugins={[
             rehypeSanitize,
@@ -172,7 +188,7 @@ export function MarkdownViewer({
               return (
                 <div className="relative">
                   <CopyButton
-                    className="absolute right-3 top-3 z-[1] size-6 bg-background-3"
+                    className="absolute right-3 top-3 z-10 size-6 bg-background-3"
                     buttonVariant="outline"
                     name={code}
                     iconSize={13}
@@ -191,13 +207,7 @@ export function MarkdownViewer({
                 typeof _className === 'string' &&
                 'language-suggestion' === _className.split(' ')[0].toLocaleLowerCase()
               ) {
-                return (
-                  <CodeSuggestionBlock
-                    code={code}
-                    suggestionBlock={suggestionBlock}
-                    suggestionCheckSum={suggestionCheckSum}
-                  />
-                )
+                return <CodeSuggestionBlock code={code} suggestionBlock={suggestionBlock} />
               }
 
               return <code className={String(_className)}>{children}</code>

diff --git a/packages/ui/src/components/markdown-viewer/style.css b/packages/ui/src/components/markdown-viewer/style.css
@@ -214,7 +214,7 @@
   }
 
   pre {
-    @apply bg-background-1 border-borders-4 rounded border px-4 py-[13px];
+    @apply bg-background-1 border-borders-1 rounded border px-4 py-[13px];
 
     code {
       @apply p-0 pr-14 text-sm;

diff --git a/packages/ui/src/components/node-group.tsx b/packages/ui/src/components/node-group.tsx
@@ -52,8 +52,8 @@ function Title({ children, className }: { children: ReactNode; className?: strin
   )
 }
 
-function Content({ children }: { children: ReactNode }) {
-  return <div className="col-start-2 row-start-2">{children}</div>
+function Content({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('col-start-2 row-start-2', className)}>{children}</div>
 }
 
 function Connector({ first, last, className }: { first?: boolean; last?: boolean; className?: string }) {

diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx
@@ -304,7 +304,7 @@ const PullRequestDiffViewer = ({
       const commentText = newComments[commentKey] ?? ''
 
       return (
-        <div className="flex w-full flex-col border px-[4px] py-[8px]">
+        <div className="flex w-full flex-col border-l border-borders-1 bg-background-1 p-4">
           <PullRequestCommentBox
             handleUpload={handleUpload}
             isEditMode
@@ -340,7 +340,7 @@ const PullRequestDiffViewer = ({
       if (!threads) return <></>
 
       return (
-        <div className="rounded border bg-background">
+        <div className="border-l border-borders-1 bg-background-1">
           {threads.map(thread => {
             const parent = thread.parent
             const componentId = `activity-code-${parent?.id}`
@@ -349,12 +349,13 @@ const PullRequestDiffViewer = ({
             const parentInitials = getInitials(parent.author ?? '', 2)
             return (
               <PullRequestTimelineItem
+                wrapperClassName="pb-3"
                 key={parent.id}
                 id={parentIdAttr}
                 parentCommentId={parent.id}
                 handleSaveComment={handleSaveComment}
                 isLast={true}
-                contentClassName="w-[calc(100%-38px)]"
+                contentWrapperClassName="col-start-1 row-start-1 col-end-3 row-end-3 px-4 pt-4 pb-1"
                 header={[]}
                 currentUser={currentUser}
                 isComment
@@ -375,9 +376,9 @@ const PullRequestDiffViewer = ({
                   )
                 }
                 content={
-                  <div className="flex-col px-4 pt-4">
+                  <div className="px-4 pt-4">
                     <PullRequestTimelineItem
-                      titleClassName="!flex max-w-full"
+                      titleClassName="max-w-full"
                       parentCommentId={parent.id}
                       handleSaveComment={handleSaveComment}
                       isLast={replies.length === 0}

diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-labels-header.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-labels-header.tsx
@@ -6,6 +6,7 @@ interface LabelsHeaderProps {
   labelsList?: { key?: string; id?: number; color?: string }[]
   selectedLabels?: { key?: string; id?: number; color?: string }[]
   addLabel?: (id?: number) => void
+  removeLabel?: (id: number) => void
   searchQuery?: string
   setSearchQuery?: (query: string) => void
   useTranslationStore: () => TranslationStore
@@ -15,6 +16,7 @@ const LabelsHeader = ({
   labelsList,
   selectedLabels,
   addLabel,
+  removeLabel,
   searchQuery,
   setSearchQuery,
   useTranslationStore
@@ -26,58 +28,58 @@ const LabelsHeader = ({
 
   return (
     <div className="flex items-center justify-between">
-      <span className="text-14 font-medium">{t('views:pullRequests.labels')}</span>
+      <span className="text-14 font-medium text-foreground-1">{t('views:pullRequests.labels')}</span>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Button size="sm" variant="ghost" className="px-2 py-1 text-tertiary-background">
-            <Icon name="vertical-ellipsis" size={12} />
+          <Button size="sm" variant="ghost" className="px-2 py-1">
+            <Icon className="text-icons-2" name="vertical-ellipsis" size={12} />
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content className="w-[298px] p-0" align="start">
-          <div className="px-3 pt-2">
-            <div role="presentation" onKeyDown={e => e.stopPropagation()}>
-              <SearchBox.Root
-                className="mt-2 w-full"
-                placeholder={t('views:pullRequests.searchLabels')}
-                value={searchQuery}
-                handleChange={handleSearchChange}
-                showOnFocus
-              />
-            </div>
-            <div className="mt-1">
-              {labelsList?.length === 0 && (
-                <div className="px-5 py-4 text-center">
-                  <span className="text-14 leading-tight text-foreground-2">{t('views:pullRequests.noLabels')}</span>
-                </div>
-              )}
-              <div className="max-h-[360px] overflow-y-auto px-1">
-                {labelsList?.map(({ key, id }) => {
-                  const isSelected = selectedLabels?.find(label => label.id === id)
-                  return (
-                    <DropdownMenu.Item
-                      className={cn('hover:bg-background-4 cursor-pointer py-1', {
-                        'bg-background-4': isSelected,
-                        'pl-7': !isSelected
-                      })}
-                      key={id}
-                      onClick={() => {
-                        addLabel?.(id)
-                      }}
-                    >
-                      <div className="flex w-full min-w-0 items-center gap-x-2">
-                        {isSelected && <Icon name="tick" size={12} className="min-w-[12px] text-foreground-1" />}
-                        <span
-                          className={cn('text-foreground-2 truncate', {
-                            'text-foreground-1': isSelected
-                          })}
-                        >
-                          {key}
-                        </span>
-                      </div>
-                    </DropdownMenu.Item>
-                  )
-                })}
+        <DropdownMenu.Content className="w-[280px] p-0" align="end">
+          <div
+            className="relative flex items-center justify-between border-b border-borders-1 px-3 py-2.5"
+            role="presentation"
+            onKeyDown={e => e.stopPropagation()}
+          >
+            <SearchBox.Root
+              className="w-full"
+              placeholder={t('views:pullRequests.searchLabels')}
+              value={searchQuery}
+              handleChange={handleSearchChange}
+              showOnFocus
+            />
+          </div>
+
+          <div className="p-1">
+            {labelsList?.length === 0 && (
+              <div className="px-5 py-4 text-center">
+                <span className="text-14 leading-tight text-foreground-2">{t('views:pullRequests.noLabels')}</span>
               </div>
+            )}
+            <div className="max-h-[360px] overflow-y-auto px-1">
+              {labelsList?.map(({ key, id }) => {
+                const isSelected = selectedLabels?.find(label => label.id === id)
+                return (
+                  <DropdownMenu.Item
+                    className={cn('py-2', {
+                      'pl-7': !isSelected
+                    })}
+                    key={id}
+                    onClick={() => {
+                      if (isSelected) {
+                        removeLabel?.(id as number)
+                      } else {
+                        addLabel?.(id)
+                      }
+                    }}
+                  >
+                    <div className="flex w-full min-w-0 items-center gap-x-2">
+                      {isSelected && <Icon name="tick" size={12} className="shrink-0 text-icons-2" />}
+                      <span className="truncate text-14 font-medium text-foreground-8">{key}</span>
+                    </div>
+                  </DropdownMenu.Item>
+                )
+              })}
             </div>
           </div>
         </DropdownMenu.Content>

diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-reviewers-header.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-reviewers-header.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -214,7 +214,7 @@ @@
       }
       pre {
-        @apply bg-background-1 border-borders-4 rounded border px-4 py-[13px];
+        @apply bg-background-1 border-borders-1 rounded border px-4 py-[13px];
         code {
           @apply p-0 pr-14 text-sm;
@@ Expand Down @@