fix(frontend): correct info button styles for gallery slide info

MiracleHorizon · Aug 6, 2024 · a62e7c6 · a62e7c6
1 parent fec1648
commit a62e7c6
Show file tree

Hide file tree

Showing 5 changed files with 826 additions and 425 deletions.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -27,7 +27,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-form": "0.0.3",
-    "@radix-ui/themes": "3.0.5",
+    "@radix-ui/themes": "3.1.1",
     "@scissors/react-icons": "workspace:*",
     "@scissors/sharp": "workspace:*",
     "@scissors/utility": "workspace:*",

diff --git a/...ntend/src/app/gallery/components/GallerySlide/GallerySlideInfo/GallerySlideDetailItem.tsx b/...ntend/src/app/gallery/components/GallerySlide/GallerySlideInfo/GallerySlideDetailItem.tsx
@@ -11,6 +11,6 @@ interface Props {
 
 export const GallerySlideDetailItem = ({ label, value }: Props) => (
   <Text as='div'>
-    {label}: <Text weight='medium'>{value}</Text>
+    <Text color='gray'>{label}</Text>: <Text weight='medium'>{value}</Text>
   </Text>
 )
diff --git a/apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideInfo/GallerySlideInfo.tsx b/apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideInfo/GallerySlideInfo.tsx
@@ -43,7 +43,7 @@ const ExportSettings = ({ index, settings }: Pick<Props, 'index' | 'settings'>)
     })
 
   return (
-    <Flex mt='2' className={styles.export}>
+    <Flex mt='2' justify='end' className={styles.export}>
       <ButtonDownload onClick={handleExport} />
     </Flex>
   )

diff --git a/...ntend/src/app/gallery/components/GallerySlide/GallerySlidePopover/GallerySlidePopover.tsx b/...ntend/src/app/gallery/components/GallerySlide/GallerySlidePopover/GallerySlidePopover.tsx
@@ -11,7 +11,7 @@ export const GallerySlidePopover = (props: Props) => (
   <Popover.Root modal>
     <GallerySlidePopoverTrigger />
 
-    <Popover.Content align='end' minWidth='120px' maxWidth='170px' className={styles.content}>
+    <Popover.Content align='end' minWidth='120px' maxWidth='220px' className={styles.content}>
       <GallerySlideInfo {...props} />
     </Popover.Content>
   </Popover.Root>