feat(styles): update summary page

Author: americano98

packages/ui/locales/en/views.json

@@ -116,14 +116,16 @@
     "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
-    "clone": "Clone",
     "cloneRepo": "Clone repository",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Please generate a clone credential if its your first time.",
-    "addFile": "Add file",
     "readme": "README.md",
-    "openPullReq": "Open pull requests"
+    "editReadme": "Edit README.md",
+    "openPullReq": "Open pull requests",
+    "clone": "Clone",
+    "addFile": "Add file"
   },
   "createProject": {
     "newProject": "Create your new project",

packages/ui/locales/es/views.json

@@ -116,14 +116,16 @@
     "general": "General",
     "codeAutomation": "Code and automation",
     "webhooks": "Webhooks",
-    "clone": "Clone",
     "cloneRepo": "Clone repository",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Please generate a clone credential if its your first time.",
-    "addFile": "Add file",
     "readme": "README.md",
-    "openPullReq": "Open pull requests"
+    "editReadme": "Edit README.md",
+    "openPullReq": "Open pull requests",
+    "clone": "Clone",
+    "addFile": "Add file"
   },
   "createProject": {
     "newProject": "Create your new project",
@@ -152,6 +154,7 @@
     "unified": "",
     "viewed": "",
     "deleted": "",
+    "deletedComment": "",
     "commits": ""
   },
   "noData": {

packages/ui/locales/fr/views.json

@@ -116,14 +116,16 @@
     "general": "Général",
     "codeAutomation": "Code et automatisation",
     "webhooks": "Webhooks",
-    "clone": "Cloner",
     "cloneRepo": "Cloner le dépôt",
     "cloneHttps": "HTTPS",
     "cloneSsh": "SSH",
+    "gitCloneUrl": "Git clone URL",
     "generateCredential": "Veuillez générer un identifiant de clonage si c'est votre première fois.",
-    "addFile": "Ajouter un fichier",
     "readme": "README.md",
-    "openPullReq": "Requêtes de tirage ouvertes"
+    "editReadme": "Edit README.md",
+    "openPullReq": "Requêtes de tirage ouvertes",
+    "clone": "Cloner",
+    "addFile": "Ajouter un fichier"
   },
   "createProject": {
     "newProject": "Créez votre nouveau projet",

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

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, MouseEvent, useEffect, useState } from 'react'
 
 import { Button, ButtonProps, Icon } from '@/components'
 import copy from 'clipboard-copy'
@@ -8,11 +8,23 @@ export interface CopyButtonProps {
   className?: string
   buttonVariant?: ButtonProps['variant']
   iconSize?: number
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant = 'custom', iconSize = 16 }) => {
+export const CopyButton: FC<CopyButtonProps> = ({
+  name,
+  className,
+  buttonVariant = 'custom',
+  iconSize = 16,
+  onClick
+}) => {
   const [copied, setCopied] = useState(false)
 
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e)
+    setCopied(true)
+  }
+
   useEffect(() => {
     let timeoutId: number
 
@@ -29,8 +41,8 @@ export const CopyButton: FC<CopyButtonProps> = ({ name, className, buttonVariant
   const changeIcon = copied ? 'tick' : 'clone'
 
   return (
-    <Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={() => setCopied(true)}>
-      <Icon name={changeIcon} size={iconSize} className="text-icons-3" />
+    <Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={handleClick}>
+      <Icon className="text-icons-3" name={changeIcon} size={iconSize} />
     </Button>
   )
 }

packages/ui/src/components/dialog.tsx

@@ -64,7 +64,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
             {mainContent}
           </div>
           {footer}
-          <DialogPrimitive.Close className="absolute right-4 top-[18px] disabled:pointer-events-none" asChild>
+          <DialogPrimitive.Close className="absolute right-3 top-[18px] disabled:pointer-events-none" asChild>
             <Button size="icon" variant="custom" className="text-icons-4 hover:text-icons-2">
               <Icon name="close" size={16} />
               <span className="sr-only">Close</span>

packages/ui/src/views/repo/components/token-dialog/clone-credential-dialog.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
@@ -35,7 +36,7 @@ const formSchema = z.object({
 
 export type TCloneCredentialsDialog = z.infer<typeof formSchema>
 
-export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
+export const CloneCredentialDialog: FC<CloneCredentialDialogProps> = ({
   open,
   onClose,
   toManageToken,
@@ -49,36 +50,43 @@ export const CloneCredentialDialog: React.FC<CloneCredentialDialogProps> = ({
   })
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-[576px]">
+      <DialogContent className="max-w-xl">
         <DialogHeader>
           <DialogTitle>{t('views:repos.cloneCredential', 'Generate Clone Credential')}</DialogTitle>
         </DialogHeader>
-        <form className="flex flex-col gap-y-7 pb-4">
+        <form className="flex flex-col gap-y-7">
           {/* NAME */}
 
           <Input
+            className="py-px"
             id="identifier"
             label={t('views:repos.name')}
             value={tokenData?.identifier}
             readOnly
             variant="extended"
             rightElementVariant="default"
-            rightElement={<CopyButton name={tokenData?.identifier} />}
+            rightElement={<CopyButton name={tokenData?.identifier} onClick={e => e.preventDefault()} />}
           />
 
-          <Input id="lifetime" label={t('views:repos.expiration')} value={tokenData?.lifetime} readOnly />
+          <Input
+            className="py-px"
+            id="lifetime"
+            label={t('views:repos.expiration')}
+            value={tokenData?.lifetime}
+            readOnly
+          />
 
           {/* Expiration Info */}
           <Input
+            className="py-px truncate"
             id="token"
             label={t('views:repos.token')}
             variant="extended"
             value={tokenData?.token}
             readOnly
             rightElementVariant="default"
-            rightElement={<CopyButton name={tokenData?.token} />}
+            rightElement={<CopyButton name={tokenData?.token} onClick={e => e.preventDefault()} />}
             autoFocus
-            className="truncate"
           />
 
           <span>{t('views:repos.cloneCredGenerated')}</span>

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

@@ -1,16 +1,18 @@
 import { FC, useMemo } from 'react'
 
-import { Avatar, AvatarFallback, CommitCopyActions, NodeGroup, StackedList } from '@/components'
+import { Avatar, AvatarFallback, CommitCopyActions, NodeGroup, StackedList, StyledLink } from '@/components'
 import { formatDate, getInitials } from '@/utils/utils'
 import { TypesCommit } from '@/views'
 
 type CommitsGroupedByDate = Record<string, TypesCommit[]>
 
 interface CommitProps {
   data?: TypesCommit[]
+  useRepoBranchesStore: () => { spaceId: string; repoId: string }
 }
 
-export const CommitsList: FC<CommitProps> = ({ data }) => {
+export const CommitsList: FC<CommitProps> = ({ data, useRepoBranchesStore }) => {
+  const { spaceId, repoId } = useRepoBranchesStore()
   const entries = useMemo(() => {
     const commitsGroupedByDate = !data
       ? {}
@@ -46,7 +48,27 @@ export const CommitsList: FC<CommitProps> = ({ data }) => {
                       <StackedList.Field
                         title={
                           <div className="flex flex-col gap-y-1.5">
-                            <span className="truncate text-16 font-medium leading-snug">{commit.title}</span>
+                            <span className="truncate text-16 font-medium leading-snug">
+                              {(() => {
+                                const match = commit?.title?.match(/\s*\(#(\d+)\)$/)
+                                if (!match) return commit?.title
+
+                                const [fullMatch, prNumber] = match
+                                const titleWithoutPR = commit?.title?.slice(0, -fullMatch.length)
+
+                                if (!prNumber) return commit?.title
+
+                                return (
+                                  <>
+                                    {titleWithoutPR} (
+                                    <StyledLink to={`/${spaceId}/repos/${repoId}/pulls/${prNumber}`}>
+                                      #{prNumber}
+                                    </StyledLink>
+                                    )
+                                  </>
+                                )
+                              })()}
+                            </span>
                             <div className="flex items-center gap-x-1.5">
                               {authorName && (
                                 <Avatar className="size-[18px]">

packages/ui/src/views/repo/repo-commits/repo-commits-view.tsx

@@ -124,7 +124,7 @@ export const RepoCommitsView: FC<RepoCommitsViewProps> = ({
               />
             ) : (
               <>
-                <CommitsList data={commitsList} />
+                <CommitsList data={commitsList} useRepoBranchesStore={useRepoBranchesStore} />
                 <PaginationComponent
                   className="pl-[26px]"
                   nextPage={xNextPage}

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { FC, useState } from 'react'
 
 import {
   Button,
@@ -27,7 +27,7 @@ export enum CloneRepoTabs {
   SSH = 'ssh'
 }
 
-export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
+export const CloneRepoDialog: FC<CloneRepoDialogProps> = ({
   httpsUrl,
   sshUrl,
   handleCreateToken,
@@ -39,30 +39,30 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button>
-          <Icon name="clone" />
-          &nbsp; {t('views:repos.clone', 'Clone')}
+        <Button className="gap-x-2 items-center pl-5 pr-2.5">
+          {t('views:repos.cloneRepo', 'Clone repository')}
+          <Icon name="chevron-down" size={12} className="text-icons-5" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-[328px] p-0" align="end">
-        <div className="px-4 pt-4">
-          <span className="text-14 font-medium leading-none">{t('views:repos.cloneRepo', 'Clone repository')}</span>
+      <DropdownMenuContent className="w-[328px] p-0 shadow-2" align="end">
+        <div className="px-4 pt-4 leading-none">
+          <span className="text-14 font-medium inline-block">{t('views:repos.cloneRepo', 'Clone repository')}</span>
         </div>
         <Tabs
-          className="mt-2"
+          className="mt-4"
           variant="branch"
           value={currentTab}
           onValueChange={val => setCurrentTab(val as CloneRepoTabs)}
         >
-          <TabsList>
+          <TabsList className="px-4">
             <DropdownMenuItem
               className="rounded-t-md p-0"
               onSelect={e => {
                 e.preventDefault()
                 setCurrentTab(CloneRepoTabs.HTTPS)
               }}
             >
-              <TabsTrigger className="data-[state=active]:bg-background-2" value={CloneRepoTabs.HTTPS}>
+              <TabsTrigger className="data-[state=active]:bg-background-2 px-4" value={CloneRepoTabs.HTTPS}>
                 {t('views:repos.cloneHttps', 'HTTPS')}
               </TabsTrigger>
             </DropdownMenuItem>
@@ -74,7 +74,7 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
               }}
             >
               <TabsTrigger
-                className="data-[state=active]:bg-background-2"
+                className="data-[state=active]:bg-background-2 px-4"
                 value={CloneRepoTabs.SSH}
                 onClick={e => e.stopPropagation()}
               >
@@ -83,20 +83,25 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
             </DropdownMenuItem>
           </TabsList>
         </Tabs>
-        <div className="px-5 py-4">
+        <div className="p-4">
+          <div className="flex items-center mb-2.5">
+            <span className="text-foreground-2 leading-none inline-block">
+              {t('views:repos.gitCloneUrl', 'Git clone URL')}
+            </span>
+          </div>
           {currentTab === 'https' ? (
             <>
               <Input
+                className="text-foreground-1 py-px"
                 id="httpsUrl"
                 readOnly
                 value={httpsUrl}
                 variant="extended"
-                className="text-foreground-2"
                 rightElementVariant="default"
                 rightElement={<CopyButton name={httpsUrl} />}
               />
               <div className="flex items-center mt-4">
-                <span className="text-foreground-4">
+                <span className="text-foreground-4 leading-snug">
                   {t('views:repos.generateCredential', 'Please generate a clone credential if its your first time.')}
                 </span>
               </div>
@@ -108,10 +113,10 @@ export const CloneRepoDialog: React.FC<CloneRepoDialogProps> = ({
             </>
           ) : (
             <Input
+              className="text-foreground-1 py-px"
               id="sshUrl"
               readOnly
               value={sshUrl}
-              className="text-tertiary-background"
               variant="extended"
               rightElementVariant="default"
               rightElement={<CopyButton name={sshUrl} />}