fix: brings design updates

harness · Jan 24, 2025 · 216c68c · 216c68c
1 parent 852dc80
commit 216c68c
Show file tree

Hide file tree

Showing 17 changed files with 198 additions and 197 deletions.
diff --git a/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx b/apps/design-system/src/subjects/views/profile-settings-keys/index.tsx
@@ -60,26 +60,24 @@ export const ProfileSettingsKeysView = () => {
   return (
     <>
       <SandboxLayout.Content className="px-0">
-        <h1 className="text-2xl font-medium text-foreground-1">Keys and Tokens</h1>
+        <h1 className="text-24 font-medium text-foreground-1">Keys and Tokens</h1>
         <Spacer size={10} />
         <FormWrapper>
           <Fieldset className="gap-y-5">
-            <Legend
-              title={
-                <span className="flex justify-between gap-x-4">
-                  Personal access token
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="text-primary"
-                    onClick={() => setIsTokenDialogOpen(true)}
-                  >
-                    Add new token
-                  </Button>
-                </span>
-              }
-              description="Personal access tokens allow you to authenticate with the API."
-            />
+            <div className="flex items-end justify-between">
+              <Legend
+                title={<span className="flex justify-between gap-x-4">Personal access token</span>}
+                description="Personal access tokens allow you to authenticate with the API."
+              />
+              <Button
+                type="button"
+                variant="outline"
+                className="text-primary"
+                onClick={() => setIsTokenDialogOpen(true)}
+              >
+                Add new token
+              </Button>
+            </div>
             <ControlGroup>
               <ProfileTokensList
                 tokens={tokens}
@@ -89,7 +87,7 @@ export const ProfileSettingsKeysView = () => {
             </ControlGroup>
           </Fieldset>
 
-          <FormSeparator />
+          <FormSeparator className="border-borders-4" />
 
           <Fieldset className="gap-y-5">
             <div className="flex items-end justify-between">

diff --git a/apps/design-system/src/subjects/views/profile-settings/index.tsx b/apps/design-system/src/subjects/views/profile-settings/index.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   ButtonGroup,
   ControlGroup,
+  Fieldset,
   FormSeparator,
   FormWrapper,
   Input,
@@ -25,26 +26,24 @@ export const ProfileSettingsView = () => {
 
   return (
     <SandboxLayout.Content className="max-w-[476px] px-0">
-      <h1 className="text-2xl font-medium text-foreground-1">Account settings</h1>
+      <h1 className="text-24 font-medium text-foreground-1">Account settings</h1>
       <Spacer size={10} />
       {isLoadingUser ? (
         <SkeletonForm />
       ) : (
         <>
           <FormWrapper>
             <Legend title="Personal information" />
-            <ControlGroup>
-              <Avatar size="20" className="size-20 shadow-md">
-                <AvatarImage src="/images/anon.jpg" />
-                <AvatarFallback>
-                  <span className="text-2xl font-medium text-foreground-3">TN</span>
-                </AvatarFallback>
-              </Avatar>
-            </ControlGroup>
-            <ControlGroup>
+            <Avatar size="20" className="size-20 shadow-md">
+              <AvatarImage src="/images/anon.jpg" />
+              <AvatarFallback>
+                <span className="text-2xl font-medium text-foreground-3">TN</span>
+              </AvatarFallback>
+            </Avatar>
+            <Fieldset>
               <Input id="name" size="md" placeholder="Enter your name" label="Name" value="Test Name" />
-            </ControlGroup>
-            <ControlGroup>
+            </Fieldset>
+            <Fieldset>
               <Input
                 id="username"
                 size="md"
@@ -54,10 +53,10 @@ export const ProfileSettingsView = () => {
                 value="test-user"
                 caption="This username will be shown across the platform."
               />
-            </ControlGroup>
-            <ControlGroup>
+            </Fieldset>
+            <Fieldset>
               <Input id="email" size="md" value="[email protected]" placeholder="[email protected]" label="Account email" />
-            </ControlGroup>
+            </Fieldset>
 
             <ControlGroup type="button">
               <ButtonGroup>
@@ -68,31 +67,31 @@ export const ProfileSettingsView = () => {
             </ControlGroup>
           </FormWrapper>
 
-          <FormSeparator className="my-7" />
+          <FormSeparator className="my-7 border-borders-4" />
 
           <FormWrapper>
             <Legend
               title="Password settings"
               description="Minimum of 6 characters long containing at least one number and a mixture of uppercase and lowercase letters."
             />
-            <ControlGroup>
+            <Fieldset>
               <Input
                 id="newPassword"
                 type="password"
                 size="md"
                 placeholder="Enter a new password"
                 label="New password"
               />
-            </ControlGroup>
-            <ControlGroup>
+            </Fieldset>
+            <Fieldset>
               <Input
                 id="confirmPassword"
                 type="password"
                 size="md"
                 placeholder="Confirm your new password"
                 label="Confirm password"
               />
-            </ControlGroup>
+            </Fieldset>
 
             <ControlGroup type="button">
               <ButtonGroup>

diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-keys-container.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-keys-container.tsx
@@ -133,9 +133,9 @@ export const SettingsProfileKeysPage = () => {
           token: newToken.access_token ?? 'Token not available'
         }
 
-        closeTokenDialog()
         setCreatedTokenData(tokenData)
         setSuccessTokenDialog(true)
+        closeTokenDialog()
         addToken(newToken.token as TokensList)
       },
       onError: (error: CreateTokenErrorResponse) => {

diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
@@ -288,8 +288,8 @@
     "select": "Select",
     "tokenExpiryNone": "Token will never expire",
     "tokenExpiryDate": " Token will expire on",
-    "generateTokenButton": "Generate Token",
-    "generatingTokenButton": "Generating Token...",
+    "generateTokenButton": "Generate token",
+    "generatingTokenButton": "Generating token...",
     "token": "Token",
     "tokenSuccessDescription": "Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t beable to see it again.",
     "gotItButton": "Got it",

diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json
@@ -278,8 +278,8 @@
     "select": "Select",
     "tokenExpiryNone": "Token will never expire",
     "tokenExpiryDate": " Token will expire on",
-    "generateTokenButton": "Generate Token",
-    "generatingTokenButton": "Generating Token...",
+    "generateTokenButton": "Generate token",
+    "generatingTokenButton": "Generating token...",
     "token": "Token",
     "tokenSuccessDescription": "Your token has been generated. Please make sure to copy and store your token somewhere safe, you won’t beable to see it again.",
     "gotItButton": "Got it",

diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import { Button, Icon } from '@/components'
 import { buttonVariants } from '@/components/button'
 import { usePortal } from '@/context'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
@@ -33,12 +34,13 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
 interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
   onOverlayClick?: () => void
+  onClose?: () => void
 }
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   AlertDialogContentProps
->(({ className = 'max-w-lg', children, onOverlayClick, ...props }, ref) => {
+>(({ className = 'max-w-lg', children, onOverlayClick, onClose, ...props }, ref) => {
   const { portalContainer } = usePortal()
   const mainContent: React.ReactNode[] = []
   let footer: React.ReactNode = null
@@ -62,6 +64,17 @@ const AlertDialogContent = React.forwardRef<
         )}
         {...props}
       >
+        <Button
+          className="absolute top-4 right-4 z-10 transition-colors duration-200 text-icons-4 hover:text-icons-2"
+          type="button"
+          variant="custom"
+          size="icon"
+          aria-label="Close"
+          onClick={onClose}
+        >
+          <Icon name="close" size={12} />
+        </Button>
+
         <div
           className={cn('flex flex-col gap-y-4 overflow-y-auto p-5', footer ? 'max-h-[calc(100%-65px)]' : 'max-h-full')}
         >

diff --git a/packages/ui/src/components/copy-button.tsx b/packages/ui/src/components/copy-button.tsx
@@ -58,7 +58,14 @@ export const CopyButton: FC<CopyButtonProps> = ({
   const changeIcon = copied ? 'tick' : 'clone'
 
   return (
-    <Button className={className} variant={buttonVariant} size="icon" aria-label="Copy" onClick={handleClick}>
+    <Button
+      className={className}
+      type="button"
+      variant={buttonVariant}
+      size="icon"
+      aria-label="Copy"
+      onClick={handleClick}
+    >
       <Icon className={copyIconVariants({ color: iconCopyStyle })} name={changeIcon} size={iconSize} />
     </Button>
   )

diff --git a/packages/ui/src/components/skeletons/skeleton-table.tsx b/packages/ui/src/components/skeletons/skeleton-table.tsx
@@ -16,9 +16,9 @@ export const SkeletonTable = ({ className, countRows = 12, countColumns = 5 }: S
   return (
     <TableBody className={cn('relative h-full w-full', className)}>
       {Array.from({ length: countRows }).map((_, index) => (
-        <TableRow key={`row-${index}`}>
+        <TableRow className="flex" key={`row-${index}`}>
           {Array.from({ length: countColumns }).map((_, columnIndex) => (
-            <TableCell className="h-12 content-center" key={`cell-${index}-${columnIndex}`}>
+            <TableCell className="flex-1 h-12 content-center" key={`cell-${index}-${columnIndex}`}>
               <Skeleton className="h-2.5" style={{ width: getRandomPercentageWidth(30, 80) }} />
             </TableCell>
           ))}

diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 const tableVariants = cva('w-full text-sm', {
   variants: {
     variant: {
-      default: 'caption-bottom ',
+      default: 'caption-bottom',
       asStackedList:
         'rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }

diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-create-dialog.tsx
@@ -1,7 +1,7 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import { AlertDialog, Button, ControlGroup, FormWrapper, Input, Spacer, Textarea } from '@/components'
+import { AlertDialog, Button, Fieldset, FormWrapper, Input, Textarea } from '@/components'
 import { ApiErrorType } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TranslationStore } from '@views/repo'
@@ -35,6 +35,7 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
     register,
     handleSubmit,
     watch,
+    reset,
     formState: { errors, isValid }
   } = useForm<SshKeyFormType>({
     resolver: zodResolver(formSchema),
@@ -48,18 +49,22 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
   const content = watch('content')
   const identifier = watch('identifier')
 
+  useEffect(() => {
+    !open && reset()
+  }, [open, reset])
+
   const handleFormSubmit: SubmitHandler<SshKeyFormType> = data => {
     handleCreateSshKey(data)
   }
 
   return (
     <AlertDialog.Root open={open} onOpenChange={onClose}>
-      <AlertDialog.Content>
+      <AlertDialog.Content onOverlayClick={onClose} onClose={onClose}>
         <AlertDialog.Header>
           <AlertDialog.Title>{t('views:profileSettings.newSshKey', 'New SSH key')}</AlertDialog.Title>
         </AlertDialog.Header>
-        <FormWrapper formRef={setFormElement} onSubmit={handleSubmit(handleFormSubmit)}>
-          <ControlGroup>
+        <FormWrapper className="pb-3 pt-2.5" formRef={setFormElement} onSubmit={handleSubmit(handleFormSubmit)}>
+          <Fieldset>
             <Input
               id="identifier"
               value={identifier}
@@ -70,28 +75,26 @@ export const ProfileSettingsKeysCreateDialog: FC<ProfileSettingsKeysCreateDialog
               error={errors.identifier?.message?.toString()}
               autoFocus
             />
-          </ControlGroup>
-          <ControlGroup>
+          </Fieldset>
+          <Fieldset className="gap-y-0">
             <Textarea
+              className="text-foreground-1"
               id="content"
               value={content}
               {...register('content')}
               label={t('views:profileSettings.publicKey', 'Public key')}
               error={errors.content?.message?.toString()}
             />
             {error?.type === ApiErrorType.KeyCreate && (
-              <>
-                <span className="text-14 text-destructive">{error.message}</span>
-                <Spacer size={4} />
-              </>
+              <span className="text-14 mt-6 text-destructive">{error.message}</span>
             )}
-          </ControlGroup>
+          </Fieldset>
         </FormWrapper>
         <AlertDialog.Footer>
-          <Button type="button" variant="outline" size="sm" onClick={onClose}>
+          <Button type="button" variant="outline" onClick={onClose}>
             {t('views:profileSettings.cancel', 'Cancel')}
           </Button>
-          <Button type="button" size="sm" disabled={!isValid} onClick={() => formElement?.requestSubmit()}>
+          <Button type="button" disabled={!isValid} onClick={() => formElement?.requestSubmit()}>
             {t('views:profileSettings.saveButton', 'Save')}
           </Button>
         </AlertDialog.Footer>

diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-keys-list.tsx
@@ -32,34 +32,32 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
         {publicKeys.length ? (
           publicKeys.map((key: KeysList) => (
             <TableRow key={key.identifier}>
-              <TableCell>
+              <TableCell className="content-center">
                 <div className="inline-flex items-center gap-x-2.5">
                   <Icon name="ssh-key" size={32} />
                   <div className="flex flex-col">
-                    <span className="font-medium text-foreground-1">{key.identifier}</span>
+                    <span className="font-medium text-foreground-1 block max-w-[200px] truncate">{key.identifier}</span>
                     <span className="max-w-[200px] truncate text-12 text-foreground-3">{key.fingerprint}</span>
                   </div>
                 </div>
               </TableCell>
-              <TableCell className="h-1">
+              <TableCell className="h-1 content-center">
                 <span className="text-foreground-1">{timeAgo(new Date(key.created!).getTime())}</span>
               </TableCell>
-              <TableCell className="h-1">
+              <TableCell className="h-1 content-center">
                 {/* TODO: pass the data to KeysList item about last used date */}
                 {/* <span className="text-foreground-1">
                   {key.last_used ? new Date(key.last_used).toLocaleString() : 'Never used'}
                 </span> */}
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-right content-center">
                 <MoreActionsTooltip
                   isInTable
                   actions={[
                     {
                       isDanger: true,
                       title: t('views:profileSettings.deleteSshKey', 'Delete SSH key'),
-                      onClick: () => {
-                        openAlertDeleteDialog({ identifier: key.identifier!, type: 'key' })
-                      }
+                      onClick: () => openAlertDeleteDialog({ identifier: key.identifier!, type: 'key' })
                     }
                   ]}
                 />
@@ -68,7 +66,7 @@ export const ProfileKeysList: FC<ProfileKeysListProps> = ({
           ))
         ) : (
           <TableRow className="hover:bg-transparent">
-            <TableCell className="!p-4" colSpan={4}>
+            <TableCell className="!p-4 content-center" colSpan={4}>
               <p className="text-center text-14 text-foreground-4">
                 {t(
                   'views:profileSettings.noDataKeysDescription',