infinite-canvas block - fix styles

githubnext · May 5, 2022 · 733bbe0 · 733bbe0
1 parent 0eba103
commit 733bbe0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/blocks/folder-blocks/infinite-canvas/Item.tsx b/src/blocks/folder-blocks/infinite-canvas/Item.tsx
@@ -86,7 +86,7 @@ export const Item = ({
       borderColor="border.default"
       borderWidth={1}
       borderStyle="solid"
-      className={`item group shadow ${zIndex}`}
+      className={tw(`item group shadow ${zIndex}`)}
       style={{
         width: dimensions[0],
         height: dimensions[1],
@@ -95,7 +95,7 @@ export const Item = ({
     >
       {/* grabby header */}
       <div
-        className={`${headerColor} h-full w-full flex-none`}
+        className={tw(`${headerColor} h-full w-full flex-none`)}
         style={{
           cursor: isDragging ? "grabbing" : "grab",
         }}

diff --git a/src/blocks/folder-blocks/infinite-canvas/ResizeButton.tsx b/src/blocks/folder-blocks/infinite-canvas/ResizeButton.tsx
@@ -2,7 +2,6 @@ import { tw } from "twind";
 import { useRef } from "react";
 import { useDrag } from "./useDrag";
 import { Position } from "./index";
-import { Button } from "@primer/react";
 
 export const ResizeButton = ({
   onResize,
@@ -18,12 +17,22 @@ export const ResizeButton = ({
   });
 
   return (
-    <Button
-      className={tw(`absolute bottom-0 right-0 w-5 h-5 bg-gray-200 z-10`)}
+    <button
+      className={tw(`absolute bottom-0 right-0 w-4 h-4 z-10`)}
       style={{
         cursor: "nwse-resize",
       }}
       ref={buttonElement}
-    />
+    >
+      <svg
+        className={tw("w-full h-full text-gray-300")}
+        viewBox="0 0 10 10"
+        stroke="currentColor"
+      >
+        <path d="M 0 10 L 10 0" vectorEffect="non-scaling-stroke" />
+        <path d="M 3 10 L 10 3" vectorEffect="non-scaling-stroke" />
+        <path d="M 6 10 L 10 6" vectorEffect="non-scaling-stroke" />
+      </svg>
+    </button>
   );
 };
diff --git a/src/blocks/folder-blocks/infinite-canvas/index.tsx b/src/blocks/folder-blocks/infinite-canvas/index.tsx
@@ -200,7 +200,7 @@ export default function (
           return (
             <Item
               {...item}
-              key={index}
+              key={item.id || index} // to re-render text when placeholder is replaced
               contents={
                 item.type === "file"
                   ? fileContents[item.path || ""] || "Loading file contents..."
@@ -252,6 +252,7 @@ export default function (
 
 const placeholderItems = [
   {
+    id: "placeholder",
     type: "text",
     text: "Start typing or grab a file",
     position: [
@@ -280,6 +281,7 @@ export type ItemType = {
   path?: string;
   text?: string;
   url?: string;
+  id?: string;
   block?: Block;
   position: Position;
   dimensions: Dimensions;