Merge pull request #9 from holaplex/anshul/form-modal-updates

Form, Modal ui fixes
holaplex · Feb 17, 2023 · dc9a726 · dc9a726
2 parents a54f093 + 8ffa95c
commit dc9a726
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 24 deletions.
diff --git a/packages/@holaplexui-playground/package.json b/packages/@holaplexui-playground/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev -p 3003",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
@@ -1,4 +1,4 @@
-import { Form } from '@holaplex/ui-library-react';
+import { Form, Icon } from '@holaplex/ui-library-react';
 
 function HidePasswordIcon({ size = 16, color = 'none', className = '' }) {
   return (
@@ -68,11 +68,12 @@ function ShowPasswordIcon({ size = 16, color = 'none', className = '' }) {
 
 export default function App() {
   return (
-    <div className='w-[400px] mx-auto'>
+    <div className='w-[400px] mx-auto p-4'>
       <Form>
         <Form.Label name='Email'>
           <Form.Input placeholder='e.g. [email protected]' />
         </Form.Label>
+
         <Form.Label
           name='Password'
           asideComponent={<div className='text-xs'>Forgot Password?</div>}
@@ -84,6 +85,7 @@ export default function App() {
             hidePasswordIcon={<HidePasswordIcon />}
           />
         </Form.Label>
+
         <Form.Select
           className='mt-5'
           placeholder='Select blockchain'
@@ -96,7 +98,7 @@ export default function App() {
         <Form.Checkbox
           id='subscribe'
           label='Subscribe newsletter'
-          className='mt-5'
+          className='mt-5 text-xs'
         />
       </Form>
     </div>

diff --git a/packages/@holaplexui-playground/pages/popover.tsx b/packages/@holaplexui-playground/pages/popover.tsx
@@ -3,10 +3,10 @@ import { Icon, PopoverBox } from '@holaplex/ui-library-react';
 export default function App() {
   return (
     <div className='flex flex-col gap-4 justify-center items-center'>
-      <div className='p-4 border border-gray-400'>
+      <div className='p-4'>
         <PopoverBox
           triggerButton={
-            <button className='font-bold underline cursor-pointer'>
+            <button className='font-bold underline cursor-pointer border border-gray-400'>
               Show Popover
             </button>
           }

diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
@@ -26,7 +26,7 @@ a {
 }
 
 .form-label {
-  @apply flex flex-col gap-2;
+  @apply flex flex-col gap-1;
 }
 
 .form-label-text {
@@ -83,3 +83,15 @@ a {
 .popover {
   @apply rounded-md p-6 bg-black text-white flex flex-col gap-4;
 }
+
+.modal-content {
+  @apply flex flex-col bg-white h-full transform !overflow-visible align-middle transition-all overflow-y-auto rounded-md shadow-md max-h-screen max-w-md sm:h-auto sm:max-w-lg;
+}
+
+.modal-close {
+  @apply top-1 right-1 rounded-full bg-gray-50 p-2 hover:bg-gray-100 hover:text-gray-400;
+}
+
+.modal-title {
+  @apply text-lg font-medium leading-6;
+}
diff --git a/packages/@holaplexui-playground/tailwind.config.js b/packages/@holaplexui-playground/tailwind.config.js
@@ -2,7 +2,8 @@
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}'
+    './components/**/*.{js,ts,jsx,tsx}',
+    './../../node_modules/@holaplex/ui-library-react/dist/index.{js,mjs}'
   ],
   theme: {
     extend: {}

diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
@@ -74,7 +74,7 @@ const FormInput = forwardRef(function FormInput(
         ref={ref as LegacyRef<HTMLInputElement> | undefined}
         type={props.type ?? 'text'}
         className={clsx(
-          'w-full block',
+          'w-full',
           {
             'pl-12': icon,
           },
@@ -118,7 +118,7 @@ const FormPassword = forwardRef(function FormPassword(
         ref={ref as LegacyRef<HTMLInputElement> | undefined}
         type={showPassword ? 'text' : 'password'}
         className={clsx(
-          'w-full absolute left-0 top-0',
+          'w-full',
           {
             'pl-12': icon,
             'pr-12': showPasswordIcon && hidePasswordIcon,
@@ -140,7 +140,7 @@ const FormPassword = forwardRef(function FormPassword(
       {showPasswordIcon && hidePasswordIcon && (
         <div
           className={clsx(
-            'absolute top-1/2 right-0 transform -translate-y-1/2 mr-1',
+            'absolute right-0 top-1/2 -translate-y-1/2 mr-1',
             'form-show-password-container'
           )}
           onClick={() => setShowPassword(!showPassword)}
@@ -172,7 +172,7 @@ const FormSelect = forwardRef(function FormSelect(
         {...props}
         ref={ref as LegacyRef<HTMLInputElement> | undefined}
         className={clsx(
-          'w-full block',
+          'w-full',
           {
             'pl-12': icon,
             'pr-12': dropDownIcon,

diff --git a/packages/@holaplexui-react/src/components/Modal.tsx b/packages/@holaplexui-react/src/components/Modal.tsx
@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
-import React, { Dispatch, Fragment, ReactNode, SetStateAction } from 'react';
+import { Dispatch, Fragment, ReactNode, SetStateAction } from 'react';
 
 type ModalProps = {
   children: ReactNode;
@@ -15,7 +15,7 @@ type ModalProps = {
 export function Modal(props: ModalProps) {
   return (
     <Transition appear show={props.open} as={Fragment}>
-      <Dialog as="div" className={`font-sans`} onClose={() => props.setOpen(false)}>
+      <Dialog as="div" className="font-sans" onClose={() => props.setOpen(false)}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -27,8 +27,8 @@ export function Modal(props: ModalProps) {
         >
           <div
             className={clsx(
-              'fixed inset-0 z-40', // bg-black bg-opacity-25
-              'bg-gray-800 bg-opacity-40 backdrop-blur-lg ',
+              'fixed inset-0 z-40',
+              'bg-gray-800 bg-opacity-40',
               'transition-opacity duration-500 ease-in-out',
               'flex flex-col items-center justify-center',
               {
@@ -44,7 +44,7 @@ export function Modal(props: ModalProps) {
         <div className={clsx('fixed inset-0 z-40 overflow-y-auto')}>
           <div
             className={clsx(
-              'flex min-h-full items-center justify-center  text-center',
+              'flex min-h-full items-center justify-center text-center',
               !props.scroll ? 'p-4' : 'py-4'
             )}
           >
@@ -59,22 +59,21 @@ export function Modal(props: ModalProps) {
             >
               <Dialog.Panel
                 className={clsx(
-                  'z-40 w-full max-w-md transform !overflow-visible rounded-2xl bg-gray-900  text-left align-middle transition-all',
-                  'scrollbar-thumb-rounded-full relative flex h-full max-h-screen w-full flex-col overflow-y-auto rounded-xl bg-gray-900  text-white shadow-md scrollbar-thin scrollbar-track-gray-900  sm:h-auto  sm:max-w-lg',
+                  'relative z-40',
+                  'modal-content',
                   props.short ? 'sm:max-h-[30rem]' : 'sm:max-h-[50rem]',
                   props.scroll ? 'pt-6' : 'p-6'
                 )}
               >
                 <button
                   type="button"
                   onClick={() => props.setOpen(false)}
-                  className="absolute -top-2 -right-2 z-50 rounded-full bg-white p-1 hover:bg-gray-100 hover:text-gray-400"
+                  className={clsx('absolute z-50', 'modal-close')}
                 >
-                  {/* <Close color={`#ffffff`} /> */}
-                  <XMarkIcon className="h-4 w-4 text-gray-900" />
+                  <XMarkIcon className="h-4 w-4 text-black" />
                 </button>
                 {props.title && (
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-white">
+                  <Dialog.Title as="h3" className="modal-title">
                     {props.title}
                   </Dialog.Title>
                 )}