Skip to content

Commit 333031c

Browse files
hrhvhrhv
committed
fix: ui fixes in theme colors, settings modal etc.
1 parent 157e18e commit 333031c

11 files changed

Lines changed: 197 additions & 130 deletions

File tree

‎packages/imagekit-editor-dev/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "imagekit-editor-dev",
3-
"version": "2.2.0-stage-30-04-2026.2",
3+
"version": "2.2.0-stage-30-04-2026.6",
44
"description": "AI Image Editor powered by ImageKit",
55
"scripts": {
66
"prepack": "yarn build",

‎packages/imagekit-editor-dev/src/components/editor/ActionBar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export const ActionBar: FC<ActionBarProps> = ({
6666
size="md"
6767
fontWeight="normal"
6868
leftIcon={<Icon boxSize={4} as={PiImageSquare} />}
69+
_hover={{ bg: "gray.100" }}
6970
onClick={() => setShowOriginal(!showOriginal)}
7071
>
7172
{showOriginal ? "Show Transformed" : "Show Original"}
@@ -105,6 +106,7 @@ export const ActionBar: FC<ActionBarProps> = ({
105106
variant="ghost"
106107
size="md"
107108
fontWeight="normal"
109+
_hover={{ bg: "gray.100" }}
108110
onClick={() => window.open(currentImage, "_blank")}
109111
>
110112
Open image in new tab

‎packages/imagekit-editor-dev/src/components/header/NavbarItem.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Button, type ButtonProps, Icon, IconButton } from "@chakra-ui/react"
22
import type React from "react"
33
import { forwardRef } from "react"
4+
import { chakraAny } from "../../utils"
45

56
interface NavbarItemProps extends Omit<ButtonProps, "variant" | "size"> {
67
icon?: React.ReactElement
@@ -13,6 +14,8 @@ export const NavbarItem = forwardRef<HTMLButtonElement, NavbarItemProps>(
1314
{ icon, label, variant = "button", children, ...props },
1415
ref,
1516
) {
17+
const ButtonAny = chakraAny(Button)
18+
const IconButtonAny = chakraAny(IconButton)
1619
const commonStyles = {
1720
variant: "ghost" as const,
1821
borderRadius: "md" as const,
@@ -21,35 +24,39 @@ export const NavbarItem = forwardRef<HTMLButtonElement, NavbarItemProps>(
2124
mx: "2" as const,
2225
fontSize: "sm" as const,
2326
fontWeight: "medium" as const,
27+
color: "editorBattleshipGrey.700",
2428
_hover: {
25-
bg: "editorBattleshipGrey.50",
29+
bg: "gray.100",
2630
},
2731
}
2832

2933
// If only icon is provided (no children or label to display), use icon variant
3034
if (variant === "icon" || (!children && icon && !label)) {
3135
return (
32-
<IconButton
36+
<IconButtonAny
3337
ref={ref}
3438
aria-label={label}
35-
icon={icon ? <Icon as={icon.type} boxSize={5} /> : undefined}
36-
color="editorBattleshipGrey.500"
39+
icon={
40+
icon ? (
41+
<Icon as={icon.type as React.ElementType} boxSize={5} />
42+
) : undefined
43+
}
3744
{...commonStyles}
38-
{...props}
45+
{...(props as unknown as Record<string, unknown>)}
3946
/>
4047
)
4148
}
4249

4350
return (
44-
<Button
51+
<ButtonAny
4552
ref={ref}
4653
leftIcon={icon}
4754
aria-label={label}
4855
{...commonStyles}
49-
{...props}
56+
{...(props as unknown as Record<string, unknown>)}
5057
>
5158
{children || label}
52-
</Button>
59+
</ButtonAny>
5360
)
5461
},
5562
)

‎packages/imagekit-editor-dev/src/components/header/SettingsModal.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,11 @@ export function SettingsModal({
203203
[canChangeVisibility],
204204
)
205205

206+
// Get height of the current viewport
207+
const viewportHeight = useMemo(() => {
208+
return window.innerHeight
209+
}, [])
210+
206211
// -------------------------------------------------------------------------
207212
// Render
208213
// -------------------------------------------------------------------------
@@ -301,6 +306,7 @@ export function SettingsModal({
301306
{ value: "onlyMe", label: "Only to me" },
302307
{ value: "everyone", label: "Shared with everyone" },
303308
]}
309+
menuPlacement={viewportHeight > 900 ? "auto" : "top"}
304310
formatOptionLabel={(opt) => (
305311
<Box display="flex" alignItems="center" gap="2">
306312
<Icon

‎packages/imagekit-editor-dev/src/components/header/TemplateNameInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@ export function TemplateNameInput() {
107107
px="2"
108108
py="1"
109109
borderRadius="md"
110-
_hover={{ bg: "editorGray.200" }}
111-
_focus={{ bg: "editorGray.200", outline: "none", boxShadow: "none" }}
110+
_hover={{ bg: "gray.100" }}
111+
_focus={{ bg: "gray.100", outline: "none", boxShadow: "none" }}
112112
cursor="text"
113113
/>
114114
)

‎packages/imagekit-editor-dev/src/components/header/TemplateStatus.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const FlexAny = chakraAny(Flex)
2828
const PopoverContentAny = chakraAny(PopoverContent)
2929
const TooltipAny = chakraAny(Tooltip)
3030
const PopoverBodyAny = chakraAny(PopoverBody)
31+
const ButtonAny = chakraAny(Button)
3132

3233
export function TemplateStatus() {
3334
const syncStatus = useEditorStore((s) => s.syncStatus)
@@ -195,7 +196,7 @@ export function TemplateStatus() {
195196
cursor={isInteractive ? "pointer" : "default"}
196197
pointerEvents={isInteractive ? "auto" : "none"}
197198
_hover={{
198-
bg: isInteractive ? "editorGray.200" : "transparent",
199+
bg: isInteractive ? "gray.100" : "transparent",
199200
}}
200201
>
201202
<Icon
@@ -226,15 +227,15 @@ export function TemplateStatus() {
226227
</TextAny2>
227228
{isUnsavedState && (
228229
<Box mt="3">
229-
<Button
230+
<ButtonAny
230231
size="sm"
231232
colorScheme="blue"
232233
onClick={() => void save()}
233234
isLoading={syncStatus === "saving"}
234235
isDisabled={templateStorageWriteBlocked}
235236
>
236237
Save
237-
</Button>
238+
</ButtonAny>
238239
</Box>
239240
)}
240241
</PopoverBodyAny>

‎packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
PopoverTrigger,
1616
Spinner,
1717
Text,
18+
Tooltip,
1819
useDisclosure,
1920
} from "@chakra-ui/react"
2021
import { PiCaretDown } from "@react-icons/all-files/pi/PiCaretDown"
@@ -53,6 +54,7 @@ const InputAny = chakraAny(Input)
5354
const BadgeAny = chakraAny(Badge)
5455
const AvatarAny = chakraAny(Avatar)
5556
const SpinnerAny = chakraAny(Spinner)
57+
const TooltipAny = chakraAny(Tooltip)
5658

5759
const MAX_VISIBLE = 5
5860

@@ -300,7 +302,7 @@ export function TemplatesDropdown({
300302
paddingY="2"
301303
height="10"
302304
marginX="2"
303-
_hover={{ bg: "editorGray.200" }}
305+
_hover={{ bg: "gray.100" }}
304306
transition="background-color 0.15s"
305307
aria-label="Open templates dropdown"
306308
>
@@ -407,15 +409,21 @@ export function TemplatesDropdown({
407409
{/* Name + badge */}
408410
<Box flex="1" minW={0}>
409411
<FlexAny alignItems="center" gap="2">
410-
<TextAny
411-
fontSize="sm"
412-
fontWeight="medium"
413-
isTruncated
414-
color="blue.800"
415-
title={templateNameUI}
412+
<TooltipAny
413+
label={templateNameUI}
414+
openDelay={300}
415+
placement="top-start"
416+
hasArrow
416417
>
417-
{truncateTemplateName(templateName)}
418-
</TextAny>
418+
<TextAny
419+
fontSize="sm"
420+
fontWeight="medium"
421+
isTruncated
422+
color="blue.800"
423+
>
424+
{truncateTemplateName(templateName)}
425+
</TextAny>
426+
</TooltipAny>
419427
<BadgeAny colorScheme="blue" fontSize="xs" flexShrink={0}>
420428
Current
421429
</BadgeAny>
@@ -494,17 +502,23 @@ export function TemplatesDropdown({
494502
/>
495503

496504
{/* Template name */}
497-
<TextAny
498-
flex="1"
499-
minW={0}
500-
fontSize="sm"
501-
fontWeight="medium"
502-
isTruncated
503-
color="editorBattleshipGrey.800"
504-
title={recordNameUI}
505+
<TooltipAny
506+
label={recordNameUI}
507+
openDelay={300}
508+
placement="top-start"
509+
hasArrow
505510
>
506-
{truncateTemplateName(record.name)}
507-
</TextAny>
511+
<TextAny
512+
flex="1"
513+
minW={0}
514+
fontSize="sm"
515+
fontWeight="medium"
516+
isTruncated
517+
color="editorBattleshipGrey.800"
518+
>
519+
{truncateTemplateName(record.name)}
520+
</TextAny>
521+
</TooltipAny>
508522

509523
{/* Creator on hover + pin (always visible for pinned, hover for others) */}
510524
<FlexAny alignItems="center" gap="3">

0 commit comments

Comments
 (0)