fix(upload-model): UI/UX improvements for Upload Model Dialog (#7969)

## Summary

Addresses UI/UX feedback on the Upload Model Dialog (BYOM feature).

## Changes

1. **Standardize link styling** - Use consistent `text-muted-foreground
underline` for all links in both URL input variants
2. **Increase warning/example text font size** - Changed from 12px
(`text-xs`) to 14px (`text-sm`) for better readability
3. **Fix padding inconsistency** - Aligned padding between model name
box and SingleSelect dropdown; moved "Not sure?" help text inline with
the label
4. **Add "Upload Another" button** - Allows users to upload multiple
models without closing and reopening the dialog

## Testing

- Verified link styling consistency across both Civitai and generic URL
input components
- Confirmed padding alignment in confirmation step
- Tested Upload Another button resets wizard to step 1

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7969-fix-upload-model-UI-UX-improvements-for-Upload-Model-Dialog-2e66d73d3650815c8184cedb3d02672d)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2026-01-12 17:25:01 -08:00
committed by GitHub
parent dfb78b2e87
commit c6f2ae3130
7 changed files with 60 additions and 27 deletions

View File

@@ -80,21 +80,33 @@
<i v-if="isUploading" class="icon-[lucide--loader-circle] animate-spin" />
<span>{{ $t('assetBrowser.upload') }}</span>
</Button>
<Button
<template
v-else-if="
currentStep === 3 &&
(uploadStatus === 'success' || uploadStatus === 'processing')
"
variant="secondary"
data-attr="upload-model-step3-finish-button"
@click="emit('close')"
>
{{
uploadStatus === 'processing'
? $t('g.close')
: $t('assetBrowser.finish')
}}
</Button>
<Button
variant="muted-textonly"
size="lg"
data-attr="upload-model-step3-import-another-button"
@click="emit('importAnother')"
>
{{ $t('assetBrowser.importAnother') }}
</Button>
<Button
variant="secondary"
size="lg"
data-attr="upload-model-step3-finish-button"
@click="emit('close')"
>
{{
uploadStatus === 'processing'
? $t('g.close')
: $t('assetBrowser.finish')
}}
</Button>
</template>
<VideoHelpDialog
v-model="showCivitaiHelp"
video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
@@ -134,5 +146,6 @@ const emit = defineEmits<{
(e: 'fetchMetadata'): void
(e: 'upload'): void
(e: 'close'): void
(e: 'importAnother'): void
}>()
</script>