add pr commits design review

Author: ankormoreankor

packages/ui/src/components/node-group.tsx

@@ -33,7 +33,7 @@ function Icon({
       <div
         className={cn(
           {
-            'text-cn-foreground-1 shadow-commit-list-bullet': simpleNodeIcon,
+            'text-cn-foreground-1': simpleNodeIcon,
             'border-cn-borders-3 bg-cn-background-2 text-cn-foreground-1 relative flex h-6 w-6 place-content-center place-items-center rounded-full border p-1 layer-medium':
               !simpleNodeIcon
           },
@@ -61,7 +61,7 @@ function Content({ children, className }: { children: ReactNode; className?: str
 function Connector({ className }: { className?: string }) {
   return (
     <div
-      className={cn('absolute bottom-0 left-[4px] top-5 z-10 w-1 border-l border-cn-borders-4', className)}
+      className={cn('absolute bottom-0 left-[4px] top-5 z-10 w-1 border-l border-cn-borders-3', className)}
       data-connector
     />
   )

packages/ui/src/views/repo/components/commits-list.tsx

@@ -45,7 +45,7 @@ export const CommitsList: FC<CommitProps> = ({ data, toCommitDetails, toPullRequ
   return (
     <div className={className}>
       {entries.map(([date, commitData]) => (
-        <NodeGroup.Root className="pb-cn-xl grid-cols-[9px_1fr] gap-4 last:pb-0" key={date}>
+        <NodeGroup.Root className="pb-cn-xl gap-cn-md grid-cols-[9px_1fr] last:pb-0" key={date}>
           <NodeGroup.Icon simpleNodeIcon />
           <NodeGroup.Title>{date && <Text variant="body-single-line-normal">Commits on {date}</Text>}</NodeGroup.Title>
           <NodeGroup.Content>

packages/ui/src/views/repo/pull-request/compare/pull-request-compare-page.tsx

@@ -285,7 +285,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
           <Layout.Horizontal
             align="center"
             justify="between"
-            className="mt-5 rounded-md border border-cn-borders-2 bg-cn-background-2 px-4 py-3"
+            className="border-cn-borders-2 bg-cn-background-2 mt-5 rounded-md border px-4 py-3"
           >
             <Text variant="body-normal" color="foreground-1">
               {isBranchSelected ? (
@@ -324,7 +324,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
           <Layout.Horizontal
             align="center"
             justify="between"
-            className="mt-4 rounded-md border border-cn-borders-2 bg-cn-background-2 p-4"
+            className="border-cn-borders-2 bg-cn-background-2 mt-4 rounded-md border p-4"
           >
             <div className="flex items-center gap-x-1.5">
               <div>
@@ -364,7 +364,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
                 </Tabs.Trigger>
               </Tabs.List>
               {!prBranchCombinationExists && (
-                <Tabs.Content className="pt-7" value="overview">
+                <Tabs.Content className="pt-cn-lg" value="overview">
                   <Layout.Flex gap="xl">
                     <Layout.Horizontal className="flex-1" gap="sm">
                       {currentUser && <Avatar name={currentUser?.display_name} rounded />}
@@ -412,7 +412,7 @@ export const PullRequestComparePage: FC<PullRequestComparePageProps> = ({
                   </Layout.Flex>
                 </Tabs.Content>
               )}
-              <Tabs.Content className="pt-7" value="commits">
+              <Tabs.Content className="pt-cn-lg" value="commits">
                 {/* TODO: add pagination to this */}
                 {isFetchingCommits ? (
                   <Skeleton.List />