Fix rendering buttons in table in safari

drawdb-io · Apr 13, 2024 · c20dd54 · c20dd54
1 parent 9faf99d
commit c20dd54
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
@@ -100,8 +100,7 @@ export default function Table(props) {
                   size="small"
                   theme="solid"
                   style={{
-                    backgroundColor: "#2f68ad",
-                    opacity: "0.7",
+                    backgroundColor: "#2F68ADB3",
                     marginRight: "6px",
                   }}
                   onClick={openEditor}
@@ -176,8 +175,7 @@ export default function Table(props) {
                     type="tertiary"
                     size="small"
                     style={{
-                      opacity: "0.7",
-                      backgroundColor: "grey",
+                      backgroundColor: "#808080B3",
                       color: "white",
                     }}
                   />
@@ -282,7 +280,7 @@ export default function Table(props) {
           } flex items-center gap-2 overflow-hidden`}
         >
           <button
-            className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full"
+            className="flex-shrink-0 w-[10px] h-[10px] bg-[#2F68ADCC] rounded-full"
             onMouseDown={() => {
               handleGripField(index);
               setLinkingLine((prev) => ({
@@ -316,8 +314,7 @@ export default function Table(props) {
               theme="solid"
               size="small"
               style={{
-                opacity: "0.7",
-                backgroundColor: "#d42020",
+                backgroundColor: "#D42020B3",
               }}
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}

diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
@@ -51,7 +51,7 @@ function Table({ table, grab }) {
           >
             <div className={hoveredField === i ? "text-zinc-500" : ""}>
               <button
-                className={`w-[9px] h-[9px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
+                className={`w-[9px] h-[9px] bg-[#2F68ADCC] rounded-full me-2`}
               />
               {e.name}
             </div>