fix(modal): change css prop to fix text rendering error

changed transform prop of the modal so it can render text properly fix benawad#2779
byeze · May 23, 2021 · 7e2d64e · 7e2d64e
1 parent 584055a
commit 7e2d64e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/kibbeh/src/ui/Input.tsx b/kibbeh/src/ui/Input.tsx
@@ -12,7 +12,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ className, textarea, error, transparent, ...props }, ref) => {
     const bg = transparent ? `bg-transparent` : `bg-primary-700`;
     const ring = error ? `ring-1 ring-secondary` : "";
-    const cn = `w-full py-2 px-4 rounded-8 text-primary-100 placeholder-primary-300 focus:outline-none ${bg} ${ring} ${className} `;
+    const cn = `w-full py-2 px-4 rounded-8 text-primary-100 placeholder-primary-300 focus:outline-none ${bg} ${ring} ${
+      className || ""
+    } `;
 
     return textarea ? (
       <textarea

diff --git a/kibbeh/src/ui/Modal.tsx b/kibbeh/src/ui/Modal.tsx
@@ -16,7 +16,7 @@ const customStyles = {
       marginRight: "-50%",
       borderRadius: 8,
       padding: "40px 40px 40px 40px",
-      transform: "translate(-50%, -50%)",
+      transform: "translateX(-50%) translateY(calc(-50% - .5px));",
       backgroundColor: "var(--color-primary-800)",
       border: "none",
       maxHeight: "80vh",