feat: improve branch selector styles and create branch/tag dialogs (#…

…1169)
harness · Feb 28, 2025 · 0e79235 · 0e79235
1 parent 9ee4846
commit 0e79235
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx b/packages/ui/src/views/repo/components/branch-selector/branch-selector.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { Button, DropdownMenu, Icon, Text } from '@/components'
+import { Button, DropdownMenu, Icon } from '@/components'
 import { BranchSelectorListItem, BranchSelectorTab, IBranchSelectorStore, TranslationStore } from '@/views'
 
 import { BranchSelectorDropdown } from './branch-selector-dropdown'
@@ -9,13 +9,13 @@ interface BranchSelectorProps {
   useRepoBranchesStore: () => IBranchSelectorStore
   useTranslationStore: () => TranslationStore
   branchPrefix?: string
+  buttonSize?: 'default' | 'sm' | 'md'
   selectedBranch?: BranchSelectorListItem
   onSelectBranch: (branchTag: BranchSelectorListItem, type: BranchSelectorTab) => void
   isBranchOnly?: boolean
   searchQuery?: string
   setSearchQuery: (query: string) => void
   dynamicWidth?: boolean
-  buttonSize?: 'default' | 'sm' | 'md'
 }
 export const BranchSelector: FC<BranchSelectorProps> = ({
   useRepoBranchesStore,
@@ -46,12 +46,12 @@ export const BranchSelector: FC<BranchSelectorProps> = ({
           {!branchPrefix && (
             <Icon className="shrink-0 fill-transparent text-icons-9" name={isTag ? 'tag' : 'branch'} size={14} />
           )}
-          <Text className="w-full text-foreground-8" truncate align="left">
+          <span className="w-full truncate text-left text-foreground-8">
             {branchPrefix
               ? `${branchPrefix}: ${selectedBranch?.name || selectedBranchTag.name}`
               : selectedBranch?.name || selectedBranchTag.name}
-          </Text>
-          <Icon name="chevron-down" className="chevron-down text-icons-2" size={20} />
+          </span>
+          <Icon name="chevron-down" className="chevron-down shrink-0 text-icons-2" size={12} />
         </Button>
       </DropdownMenu.Trigger>
       <BranchSelectorDropdown

diff --git a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
@@ -53,6 +53,7 @@ export function CreateBranchDialog({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSubmitSuccessful, open, onClose])
+
   const handleClose = () => {
     clearErrors()
     setValue('name', '', { shouldValidate: false })
@@ -95,6 +96,7 @@ export function CreateBranchDialog({
 
           <Fieldset>
             <ControlGroup>
+              {/* TODO: Currently the search within BranchSelector is not working, we need to review the current passed states for it to work */}
               <BranchSelector
                 useRepoBranchesStore={useRepoBranchesStore}
                 useTranslationStore={useTranslationStore}
@@ -103,9 +105,9 @@ export function CreateBranchDialog({
                   setSelectedBranchTag(value)
                 }}
                 setSearchQuery={handleChangeSearchValue}
-                dynamicWidth
                 buttonSize="md"
                 isBranchOnly
+                dynamicWidth
               />
             </ControlGroup>
           </Fieldset>
@@ -122,9 +124,7 @@ export function CreateBranchDialog({
             <Button
               variant="outline"
               type="button"
-              onClick={() => {
-                handleClose()
-              }}
+              onClick={handleClose}
               loading={isCreatingBranch}
               disabled={isCreatingBranch}
             >

diff --git a/packages/ui/src/views/repo/repo-tags/components/create-tags-dialog.tsx b/packages/ui/src/views/repo/repo-tags/components/create-tags-dialog.tsx
@@ -121,8 +121,8 @@ export function CreateTagDialog({
                 }}
                 searchQuery={branchQuery}
                 setSearchQuery={setBranchQuery}
-                dynamicWidth
                 buttonSize="md"
+                dynamicWidth
               />
             </ControlGroup>
           </Fieldset>