daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-09 19:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

more styling cleanup

Browse Source
This commit is contained in:
bflatastic committed 2026-04-11 01:32:39 +07:00
1 parent 4fc9188622
commit 49a0e8d6f2
3 files changed
+34 -47
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/apps/artcraft-website/src/components/prompt-box/ImagePromptRow.tsx
+21 -34
View File
@@ -11,7 +11,6 @@ import {
faPlus,
faSpinner,
faSpinnerThird,
faTrashAlt,
faXmark,
} from "@fortawesome/pro-solid-svg-icons";
import { faImage } from "@fortawesome/pro-regular-svg-icons";
@@ -44,7 +43,7 @@ interface ImagePromptRowProps {
referenceImages: RefImage[];
setReferenceImages: (images: RefImage[]) => void;
onPickFromLibrary?: () => void;
onClearAll?: () => void;
onClearAll?: () => void; // unused, kept for API compat
className?: string;
// Video mode props
@@ -229,13 +228,16 @@ export const ImagePromptRow = ({
/>
)}
<div
className={twMerge("glass flex flex-col sm:flex-row rounded-t-xl", className)}
className={twMerge(
"glass flex flex-col sm:flex-row rounded-t-xl",
className,
)}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<div className="flex min-w-0 flex-1 gap-2 px-3 py-2">
<div className="flex grow flex-col gap-1">
<div className="flex grow flex-col gap-1 min-w-32">
<div className="flex items-center gap-2 text-white/90">
<FontAwesomeIcon icon={faImage} className="h-3.5 w-3.5" />
<span className="flex items-center gap-1.5 text-sm font-medium">
@@ -250,7 +252,7 @@ export const ImagePromptRow = ({
<span className="text-[13px] text-white/60">{sectionSubtitle}</span>
</div>
<div className="flex gap-2">
<div className="flex flex-wrap gap-2">
{allowReorder ? (
<DndContext
sensors={sensors}
@@ -327,7 +329,7 @@ export const ImagePromptRow = ({
>
<button
onClick={() => fileInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -338,7 +340,7 @@ export const ImagePromptRow = ({
) : (
<button
onClick={() => fileInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -351,10 +353,10 @@ export const ImagePromptRow = ({
{/* End frame section */}
{isVideo && showEndFrameSection && (
<div className="flex min-w-0 flex-1 items-stretch gap-3 px-3 sm:pe-3 sm:ps-0 border-t sm:border-t-0 border-white/10">
<div className="flex min-w-0 flex-1 items-stretch gap-2 px-3 py-2 sm:py-0 sm:pe-3 sm:ps-0 border-t sm:border-t-0 border-white/10">
<div className="flex grow gap-1">
<div className="hidden sm:block w-[1px] bg-white/10" />
<div className="flex grow flex-col gap-1 p-2">
<div className="flex grow flex-col gap-1 sm:p-2">
<div className="flex items-center gap-2 text-white/90">
<FontAwesomeIcon icon={faImage} className="h-3.5 w-3.5" />
<span className="flex items-center gap-1.5 text-sm font-medium">
@@ -369,7 +371,7 @@ export const ImagePromptRow = ({
</div>
<div className="flex items-center gap-2">
{endFrameImage ? (
<div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<div className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<img
src={endFrameImage.url}
alt="End frame"
@@ -377,13 +379,13 @@ export const ImagePromptRow = ({
/>
<button
onClick={() => setEndFrameImage?.(undefined)}
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
</button>
</div>
) : uploadingEndFrame ? (
<div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<FontAwesomeIcon
icon={faSpinnerThird}
spin
@@ -420,7 +422,7 @@ export const ImagePromptRow = ({
>
<button
onClick={() => endFrameInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -431,7 +433,7 @@ export const ImagePromptRow = ({
) : (
<button
onClick={() => endFrameInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -442,21 +444,6 @@ export const ImagePromptRow = ({
</div>
</div>
)}
{/* Clear all refs */}
{onClearAll && (
<div className="flex items-center">
<div className="h-full w-[1px] bg-white/10" />
<div className="p-2">
<button
onClick={onClearAll}
className="flex h-8 w-8 items-center justify-center rounded-md text-white/50 transition-colors hover:bg-white/10 hover:text-white/80"
>
<FontAwesomeIcon icon={faTrashAlt} className="h-3.5 w-3.5" />
</button>
</div>
</div>
)}
</div>
</>
);
@@ -471,7 +458,7 @@ const ImageThumbnail = ({
image: RefImage;
onRemove: (id: string) => void;
}) => (
<div className="group glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<div className="group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<img
src={image.url}
alt="Reference"
@@ -482,7 +469,7 @@ const ImageThumbnail = ({
e.stopPropagation();
onRemove(image.id);
}}
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
</button>
@@ -519,7 +506,7 @@ const SortableImage = ({
style={style}
{...(allowReorder ? { ...attributes, ...listeners } : {})}
className={twMerge(
"group glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-opacity",
"group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-opacity",
allowReorder
? "cursor-move hover:border-white/80"
: "cursor-pointer hover:border-white/80",
@@ -538,7 +525,7 @@ const SortableImage = ({
}}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
</button>
@@ -550,7 +537,7 @@ const UploadingThumbnail = ({ file }: { file: File }) => {
const previewUrl = useMemo(() => URL.createObjectURL(file), [file]);
useEffect(() => () => URL.revokeObjectURL(previewUrl), [previewUrl]);
return (
<div className="glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30">
<div className="glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30">
<div className="absolute inset-0">
<img
src={previewUrl}
frontend/apps/artcraft-website/src/components/prompt-box/MediaReferenceRow.tsx
+12 -12
View File
@@ -179,7 +179,7 @@ export const MediaReferenceRow = ({
onChange={handleAudioUpload}
/>
<div
className={twMerge("glass flex", className)}
className={twMerge("glass flex flex-col sm:flex-row", className)}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
@@ -200,7 +200,7 @@ export const MediaReferenceRow = ({
{totalVideoDuration}/{maxVideoRefDuration}s
</span>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
{referenceVideos.map((video) => (
<VideoRefTile
key={video.id}
@@ -209,7 +209,7 @@ export const MediaReferenceRow = ({
/>
))}
{uploadingVideo && (
<div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<FontAwesomeIcon
icon={faSpinnerThird}
spin
@@ -220,7 +220,7 @@ export const MediaReferenceRow = ({
{canAddVideo && (
<button
onClick={() => videoInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -231,7 +231,7 @@ export const MediaReferenceRow = ({
</div>
</div>
<div className="w-[1px] self-stretch bg-white/10" />
<div className="h-[1px] sm:h-auto sm:w-[1px] self-stretch bg-white/10 mx-3 sm:mx-0" />
{/* Audio section */}
<div className="flex grow gap-2 px-3 py-2">
@@ -249,7 +249,7 @@ export const MediaReferenceRow = ({
{totalAudioDuration}/{maxAudioRefDuration}s
</span>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
{referenceAudios.map((audio, i) => (
<AudioRefTile
key={audio.id}
@@ -259,7 +259,7 @@ export const MediaReferenceRow = ({
/>
))}
{uploadingAudio && (
<div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
<FontAwesomeIcon
icon={faSpinnerThird}
spin
@@ -270,7 +270,7 @@ export const MediaReferenceRow = ({
{canAddAudio && (
<button
onClick={() => audioInputRef.current?.click()}
className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
>
<FontAwesomeIcon
icon={faPlus}
@@ -294,7 +294,7 @@ const VideoRefTile = ({
video: RefVideo;
onRemove: (id: string) => void;
}) => (
<div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<div className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<video
src={video.url}
muted
@@ -309,7 +309,7 @@ const VideoRefTile = ({
e.stopPropagation();
onRemove(video.id);
}}
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
</button>
@@ -348,7 +348,7 @@ const AudioRefTile = ({
);
return (
<div className="group relative flex aspect-square w-14 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<div className="group relative flex aspect-square w-10 sm:w-14 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
<button
onClick={handleTogglePlay}
className="flex h-full w-full items-center justify-center"
@@ -369,7 +369,7 @@ const AudioRefTile = ({
e.stopPropagation();
onRemove(audio.id);
}}
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
</button>
frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
+1 -1
View File
@@ -891,7 +891,7 @@ export default function CreateVideo() {
<button
type="button"
onClick={() => setIsCharactersModalOpen(true)}
className="flex h-9 items-center justify-center gap-1 rounded-lg border border-white/10 bg-white/[0.08] px-3 text-sm font-medium text-white transition-all duration-150 hover:bg-white/[0.12] active:scale-95"
className="flex h-9 items-center justify-center gap-1 rounded-lg border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg shadow-sm transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
>
@Characters
</button>