Fix some UI bugs

bombies · Oct 26, 2023 · a198192 · a198192
1 parent 4af070a
commit a198192
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/src/app/(site)/(internal)/dashboard/components/dreams/LogDreamCard.tsx b/src/app/(site)/(internal)/dashboard/components/dreams/LogDreamCard.tsx
@@ -19,6 +19,7 @@ const LogDreamCard: FC = () => {
                 onPress={() => setModalOpen(true)}
                 isPressable
                 classNames={{
+                    base: "hover:scale-105",
                     body: "bg-primary py-8"
                 }}
             >

diff --git a/src/app/(site)/(internal)/dashboard/components/dreams/card/DreamCard.tsx b/src/app/(site)/(internal)/dashboard/components/dreams/card/DreamCard.tsx
@@ -24,7 +24,8 @@ const DreamCard: FC<Props> = ({dream}) => {
                 isPressable
                 onPress={() => setModalOpen(true)}
                 classNames={{
-                    header: "bg-[#0C0015] pt-6 px-8 pb-0",
+                    base: "hover:scale-105",
+                    header: "bg-[#0C0015] pt-6 px-8 pb-0 z-1",
                     body: "bg-[#0C0015] px-8 pt-4",
                     footer: "bg-[#0C0015] px-8",
                 }}>

diff --git a/src/app/(site)/(internal)/dashboard/components/dreams/card/DreamModal.tsx b/src/app/(site)/(internal)/dashboard/components/dreams/card/DreamModal.tsx
@@ -22,7 +22,7 @@ const DreamModal: FC<Props> = ({dream, isOpen, onClose}) => {
     const {data: fullDream, error: fullDreamError} = FetchFullDream(dream, isOpen ?? false)
 
     const tagChips = useMemo(() => fullDream?.tags?.map(tag => (
-        <Chip key={tag.id} color="primary" variant="flat">
+        <Chip key={tag.id} color="primary" variant="flat" size="sm">
             {tag.tag}
         </Chip>
     )), [fullDream?.tags])
@@ -40,13 +40,13 @@ const DreamModal: FC<Props> = ({dream, isOpen, onClose}) => {
                     {(tagChips || fullDreamError) && (
                         <div className="flex flex-wrap gap-2 mb-3">
                             {tagChips ?? (fullDreamError &&
-                                <Chip color="danger" variant="flat">
+                                <Chip color="danger" variant="flat" size="sm">
                                     Error Loading Tags
                                 </Chip>
                             )}
                         </div>
                     )}
-                    <h1 className="text-4xl">{dream.title}</h1>
+                    <h1 className="text-4xl phone:text-2xl">{dream.title}</h1>
                     <h3 className="text-subtext text-sm font-semibold italic">{dream.comments}</h3>
                     <h3 className="text-subtext text-xs italic">~{calcEstimatedReadingTime(dream.description)} min. read</h3>
                 </Fragment>
@@ -55,7 +55,7 @@ const DreamModal: FC<Props> = ({dream, isOpen, onClose}) => {
             onClose={onClose}
         >
             <article
-                className="text-[#EAE0FF] whitespace-pre-wrap rounded-3xl border border-primary/40 bg-[#0C0015]/50 p-6">{dream.description}</article>
+                className="text-[#EAE0FF] phone:text-sm whitespace-pre-wrap rounded-3xl border border-primary/40 bg-[#0C0015]/50 p-6">{dream.description}</article>
         </Modal>
     )
 }

diff --git a/src/app/(site)/components/Modal.tsx b/src/app/(site)/components/Modal.tsx
@@ -14,7 +14,7 @@ const Modal: FC<Props> = ({header, footer, title, subtitle, children, ...props})
             placement="center"
             scrollBehavior="outside"
             classNames={{
-                base: "py-6 px-3 bg-secondary",
+                base: "py-6 px-3 phone:px-0 bg-secondary",
                 closeButton: "hover:bg-primary/20"
             }}
             {...props}

diff --git a/src/app/(site)/components/sidebar/Sidebar.tsx b/src/app/(site)/components/sidebar/Sidebar.tsx
@@ -24,8 +24,8 @@ const Sidebar: FC<Props> = ({children}) => {
     return (
         <motion.aside
             className={clsx(
-                "bg-secondary min-h-screen data-[isopen=true]:w-64 w-24 pt-12 px-2",
-                "tablet:z-[10] tablet:!bg-opacity-0 tablet:data-[isopen=true]:!bg-opacity-90 tablet:data-[isopen=true]:backdrop-blur-md tablet:w-16 data-[isopen=true]:tablet:w-72 tablet:absolute",
+                "bg-secondary min-h-screen data-[isopen=true]:w-96 w-24 pt-12 px-2",
+                "z-[10] tablet:!bg-opacity-0 tablet:data-[isopen=true]:!bg-opacity-90 tablet:data-[isopen=true]:backdrop-blur-md tablet:w-16 data-[isopen=true]:tablet:w-72 tablet:fixed",
                 "phone:w-12 data-[isopen=true]:phone:w-64",
                 "data-[isopen=true]:p-6 flex flex-col data-[isopen=false]:items-center"
             )}

diff --git a/src/app/(site)/components/sidebar/SidebarItem.tsx b/src/app/(site)/components/sidebar/SidebarItem.tsx
@@ -20,12 +20,14 @@ const SidebarItem: FC<SidebarItemProps> = ({title, startContent, href, onClick})
         <motion.div
             initial={{
                 backgroundColor: "#9E23FF00",
-                color: "#EAE0FF"
+                color: "#EAE0FF",
+                transform: "scale(1)"
             }}
             whileHover={{
                 backgroundColor: "#9E23FF10",
                 color: "#c77dff",
-                filter: "drop-shadow(0px 2px 10px rgba(82, 0, 255, 0.65))"
+                filter: "drop-shadow(0px 2px 10px rgba(82, 0, 255, 0.65))",
+                transform: "scale(1.15)"
             }}
             className="flex gap-4 cursor-pointer rounded-lg font-semibold p-3"
             onClick={onClick}