UI update

src/components/entity/AnimationResource.tsx

@@ -5,7 +5,7 @@ import { StoreContext } from "@/store";
 import { observer } from "mobx-react";
 import { MdDelete } from "react-icons/md";
 import {
-  Animation,
+  TAnimation,
   FadeInAnimation,
   FadeOutAnimation,
   SlideDirection,
@@ -22,7 +22,7 @@ const ANIMATION_TYPE_TO_LABEL: Record<string, string> = {
   breath: "Breath",
 };
 export type AnimationResourceProps = {
-  animation: Animation;
+  animation: TAnimation;
 };
 export const AnimationResource = observer((props: AnimationResourceProps) => {
   const store = React.useContext(StoreContext);
@@ -40,13 +40,13 @@ export const AnimationResource = observer((props: AnimationResourceProps) => {
         </button>
       </div>
       {props.animation.type === "fadeIn" ||
-      props.animation.type === "fadeOut" ? (
+        props.animation.type === "fadeOut" ? (
         <FadeAnimation
           animation={props.animation as FadeInAnimation | FadeOutAnimation}
         />
       ) : null}
       {props.animation.type === "slideIn" ||
-      props.animation.type === "slideOut" ? (
+        props.animation.type === "slideOut" ? (
         <SlideAnimation
           animation={props.animation as SlideInAnimation | SlideOutAnimation}
         />

src/components/panels/AudioResourcesPanel.tsx

@@ -14,17 +14,18 @@ export const AudioResourcesPanel = observer(() => {
   };
   return (
     <>
-      <div className="text-sm px-[16px] pt-[16px] pb-[8px] font-semibold">
-        Audios
-      </div>
+
       {store.audios.map((audio, index) => {
         return <AudioResource key={audio} audio={audio} index={index} />;
       })}
-      <UploadButton
-        accept="audio/mp3,audio/*"
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
-        onChange={handleFileChange}
-      />
+      <div className="flex justify-center mt-4">
+        <UploadButton
+          accept="audio/mp3,audio/*"
+          className="bg-green-400 w-full max-w-[260px]  hover:bg-green-500 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
+          onChange={handleFileChange}
+          name="Audios"
+        />
+      </div>
     </>
   );
 });

src/components/panels/ImageResourcesPanel.tsx

@@ -14,14 +14,13 @@ export const ImageResourcesPanel = observer(() => {
   };
   return (
     <>
-      <div className="text-sm px-[16px] pt-[16px] pb-[8px] font-semibold">
-        Images
-      </div>
-      <UploadButton
-        accept="image/*"
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
-        onChange={handleFileChange}
-      />
+      <div className="flex justify-center mt-4">
+        <UploadButton
+          accept="image/*"
+          className="bg-green-400 w-full max-w-[260px]  hover:bg-green-500 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
+          onChange={handleFileChange}
+          name="Images"
+        /></div>
       <div >
         {store.images.map((image, index) => {
           return <ImageResource key={image} image={image} index={index} />;

src/components/panels/VideoResourcesPanel.tsx

@@ -14,17 +14,18 @@ export const VideoResourcesPanel = observer(() => {
   };
   return (
     <>
-      <div className="text-sm px-[16px] pt-[16px] pb-[8px] font-semibold">
-        Videos
-      </div>
+
       {store.videos.map((video, index) => {
         return <VideoResource key={video} video={video} index={index} />;
       })}
-      <UploadButton
-        accept="video/mp4,video/x-m4v,video/*"
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
-        onChange={handleFileChange}
-      />
+      <div className="flex justify-center mt-4">
+        <UploadButton
+          accept="video/mp4,video/x-m4v,video/*"
+          className="bg-green-400 w-full max-w-[260px]  hover:bg-green-500 text-gray-800 font-bold text-center mx-2 py-2 px-4 rounded cursor-pointer"
+          onChange={handleFileChange}
+          name={'Videos'}
+        />
+      </div>
     </>
   );
 });

src/components/shared/UploadButton.tsx

@@ -1,7 +1,9 @@
+import Image from "next/image";
 export type UploadButtonProps = {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   accept: string;
+  name: string
 };
 export const UploadButton = (props: UploadButtonProps) => {
   return (
@@ -13,7 +15,8 @@ export const UploadButton = (props: UploadButtonProps) => {
         className="hidden"
         onChange={props.onChange}
       />
-      Upload
+      <p className="flex items-center justify-center"> {props.name}
+      </p>
     </label>
   );
 };