Cleaned up visuals

Nounspace · May 13, 2024 · 773fb54 · 773fb54
1 parent 76755ba
commit 773fb54
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx
@@ -5,6 +5,7 @@ import { Button } from "../ui/atoms/button";
 import FidgetWrapperEditMode from "./FidgetWrapperEditMode";
 import { toast } from "sonner";
 import { FidgetConfig, FidgetSettings, FidgetDetails } from ".";
+import { FaGear } from "react-icons/fa6";
 
 type FidgetWrapperProps = {
   fidget: React.FC<FidgetSettings>;
@@ -37,27 +38,24 @@ export function FidgetWrapper({ fidget, config, saveConfig }: FidgetWrapperProps
   }
 
   return (
-    <Card style={{width: "100%", height: "100%"}}>
-      <CardHeader>
-        {
-          editing ? 
-          <Button
-            className="w-full"
-            onClick={() => setViewEditor(!viewEditor)}
-          >
-            { viewEditor ? "View Fidget" : "View Editor" }
-          </Button> : null
-        }
-        { config.instanceConfig.editable ? 
-          <Button
-            className="w-full"
-            onClick={toggleEditing}
-          >
-            { editing ? "Save": "Edit" }
-          </Button> : null
-        }
-      </CardHeader>
-      <CardContent style={{position: "relative", width: "100%", height: "100%" }}>
+    <Card className="size-full">
+      {
+        editing ? 
+        <Button
+          className="flex items-center justify-center opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50"
+          onClick={() => setViewEditor(!viewEditor)}
+        >
+          { viewEditor ? "View Fidget" : "View Editor" }
+        </Button> : null
+      }
+      { config.instanceConfig.editable ? 
+        <div className = "flex items-center justify-center opacity-0 hover:opacity-50 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50 rounded-md">
+          <button onClick={toggleEditing} className = "absolute flex-1 size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+            <FaGear />
+          </button>
+        </div> : null
+      }
+      <CardContent className="size-full">
         { 
           editing && viewEditor ? 
             <FidgetWrapperEditMode

diff --git a/src/common/ui/atoms/card.tsx b/src/common/ui/atoms/card.tsx
@@ -57,7 +57,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={mergeClasses("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={mergeClasses("", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 

diff --git a/src/fidgets/layout/Grid.tsx b/src/fidgets/layout/Grid.tsx
@@ -80,7 +80,7 @@ const Grid: LayoutFiget<GridArgs> = ({ layoutConfig, fidgets, isEditable }: Grid
   function generateDOM() {
     return _.map(layoutConfigWithEditable.layout, (gridItem: PlacedGridItem) => {
       return (
-        <div key={gridItem.i} className="overflow-hidden rounded-md flex justify-center items-center">
+        <div key={gridItem.i}>
           { fidgets[gridItem.i] }
         </div>
       );

diff --git a/src/fidgets/ui/gallery.tsx b/src/fidgets/ui/gallery.tsx
@@ -25,12 +25,22 @@ const galleryConfig: FidgetEditConfig = {
 
 const Gallery: React.FC<GalleryFidgetSettings> = ({ imageUrl }: GalleryFidgetSettings) => {
   return (
-    <Image 
-      src={imageUrl}
-      alt={imageUrl}
-      fill
-      style={{objectFit: 'contain'}}
-    />
+    <div className ="rounded-md flex-1 items-center justify-center overflow-hidden relative size-full bg-cover">
+      <div className ="bg-[image:var(--image-url)] bg-cover size-full overflow-hidden"
+            style={{'--image-url': `url(${imageUrl})`}}
+      ></div>
+      {/* <div className = "flex items-center justify-center opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-50">
+        <button onClick={switchMode} className = "absolute flex-1 size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+          <FaGear />
+        </button>
+      </div>
+      <Image 
+        src={imageUrl}
+        alt={imageUrl}
+        fill
+        style={{objectFit: 'contain'}}
+      /> */}
+    </div>
   )
 }
 

diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx
@@ -58,7 +58,7 @@ export default function Homebase() {
           imageUrl: "https://storage.googleapis.com/papyrus_images/d467b07030969fab95a8f44b1de596ab.png",
         },
       },
-    },
+    },  
     frame: {
       fidgetName: "frame",
       id: "frame",
@@ -120,15 +120,15 @@ export default function Homebase() {
         onClick={switchMode}
         className={
           editMode
-            ? "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-90 hover:opacity-100 duration-500"
-            : "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-50 hover:opacity-100 duration-500"
+            ? "opacity-90 rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex hover:opacity-100 duration-500"
+            : "opacity-50 rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex hover:opacity-100 duration-500"
         }
       >
         <RiPencilFill
           className={
             editMode
               ? "text-slate-900 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
-              : "x  text-gray-700 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+              : "text-gray-700 font-semibold text-2xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
           }
         />
       </button>