Skip to content

Commit

Permalink
Merge pull request #132 from FlowTestAI/settings-modal-css
Browse files Browse the repository at this point in the history 
Add css to settings modal to integrate theme
  • Loading branch information
@jsajal
jsajal authored Jul 17, 2024
2 parents 235603f + 11a3f46 commit d27ecb7
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 115 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,4 @@ Fun fact: our contributing guide itself was an external contribution 🍺

## License 📄

Source code in this repository is made available under the [MIT License](LICENSE.md).
Source code in this repository is made available under the [MIT License](LICENSE).
228 changes: 114 additions & 114 deletions src/components/molecules/modals/SettingsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
</Transition.Child>

<div className='fixed inset-0 overflow-y-auto'>
<div className='flex items-center justify-center min-h-full p-4 text-center'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
Expand All @@ -92,131 +92,131 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
<Dialog.Panel className='w-full max-w-5xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-xl'>
<Dialog.Title as='div' className='flex items-center justify-between pb-4 border-b border-gray-300'>
<Dialog.Panel className='h-[40rem] w-full max-w-5xl transform overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title as='div' className='flex items-center justify-between border-b border-gray-300 pb-4'>
<h1 className='text-3xl font-semibold'>Settings</h1>
<button onClick={closeFn} className='text-gray-400 hover:text-gray-600'>
<XCircleIcon className='w-6 h-6' />
<XCircleIcon className='h-6 w-6' />
</button>
</Dialog.Title>
<Tab.Group defaultIndex={initialTab}>
<Tab.List className='flex p-1 space-x-1 rounded-xl bg-blue-900/20'>
<Tab
className={({ selected }) =>
`w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700
${selected ? 'bg-white shadow' : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'}`
}
>
Scans
</Tab>
<Tab
className={({ selected }) =>
`w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700
${selected ? 'bg-white shadow' : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'}`
}
>
Theme
</Tab>
</Tab.List>
<Tab.Panels className='mt-2'>
<Tab.Panel className='p-4'>
{/* Scans Content */}
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
<div className='py-2'>
<p className='text-lg'>
Scans aim to provide anayltics and observability for your flows. <br />
<a
href='https://flowtest-ai.vercel.app/'
target='_blank'
rel='noreferrer'
className='text-blue-500 hover:underline'
>
Get Access Keys
</a>
</p>
</div>
<div className='py-2'>
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
Enabled
</label>
<input
type='checkbox'
checked={enabled}
onChange={() => setEnabled(!enabled)}
id='enabled'
className='block'
/>
</div>
<div className='py-2'>
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
Access Id
</label>
<input
value={accessId}
onChange={(e) => setAccessId(e.target.value)}
type='text'
placeholder='Access Id'
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
/>
</div>
<div className='py-2'>
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
Access Key
</label>
<input
value={accessKey}
onChange={(e) => setAccessKey(e.target.value)}
type='text'
placeholder='Access Key'
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
/>
</div>
<div>
{failureFullSubmissionMessage && (
<div className='text-red-500'> Failed to saved settings</div>
)}
{successFullSubmissionMessage && (
<div className='text-green-500'> Successfully saved settings</div>
)}
</div>
</div>
<div className='flex justify-center w-full mt-6'>
<Button
btnType={BUTTON_TYPES.primary}
fullWidth={true}
onClickHandle={async () => await onFormSubmit()}
>
{'Save'}
</Button>
</div>
</Tab.Panel>
<Tab.Panel className='p-4'>
{/* Theme Content */}
<form className='flex flex-col items-start gap-4'>
<div className='py-4'>
<Tab.Group defaultIndex={initialTab}>
<Tab.List className='flex'>
<Tab
className={({ selected }) =>
`w-full p-2 ${selected ? 'rounded border border-cyan-900 bg-slate-100' : ''}`
}
>
Scans
</Tab>
<Tab
className={({ selected }) =>
`w-full p-2 ${selected ? 'rounded border border-cyan-900 bg-slate-100' : ''}`
}
>
Theme
</Tab>
</Tab.List>
<Tab.Panels className='mt-2'>
<Tab.Panel className='py-4'>
{/* Scans Content */}
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
<div className='flex items-center'>
<input type='radio' id='light' name='theme' value='light' defaultChecked />
<label htmlFor='light' className='ml-2 text-lg'>
Light
<div className='py-2'>
<p className='text-lg'>
Scans aim to provide anayltics and observability for your flows. <br />
<a
href='https://flowtest-ai.vercel.app/'
target='_blank'
rel='noreferrer'
className='text-blue-500 hover:underline'
>
Get Access Keys
</a>
</p>
</div>
<div className='py-2'>
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
Enabled
</label>
<input
type='checkbox'
checked={enabled}
onChange={() => setEnabled(!enabled)}
id='enabled'
className='block'
/>
</div>
<div className='flex items-center'>
<input type='radio' id='dark' name='theme' value='dark' />
<label htmlFor='dark' className='ml-2 text-lg'>
Dark
<div className='py-2'>
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
Access Id
</label>
<input
value={accessId}
onChange={(e) => setAccessId(e.target.value)}
type='text'
placeholder='Access Id'
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
/>
</div>
<div className='flex items-center'>
<input type='radio' id='system' name='theme' value='system' />
<label htmlFor='system' className='ml-2 text-lg'>
System
<div className='py-2'>
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
Access Key
</label>
<input
value={accessKey}
onChange={(e) => setAccessKey(e.target.value)}
type='text'
placeholder='Access Key'
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
/>
</div>
<div>
{failureFullSubmissionMessage && (
<div className='text-red-500'> Failed to saved settings</div>
)}
{successFullSubmissionMessage && (
<div className='text-green-500'> Successfully saved settings</div>
)}
</div>
</div>
</form>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
<div className='mt-6 flex w-full justify-center'>
<Button
btnType={BUTTON_TYPES.primary}
fullWidth={true}
onClickHandle={async () => await onFormSubmit()}
>
{'Save'}
</Button>
</div>
</Tab.Panel>
<Tab.Panel className='p-4'>
{/* Theme Content */}
<form className='flex flex-col items-start gap-4'>
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
<div className='flex items-center'>
<input type='radio' id='light' name='theme' value='light' defaultChecked />
<label htmlFor='light' className='ml-2 text-lg'>
Light
</label>
</div>
<div className='flex items-center'>
<input type='radio' id='dark' name='theme' value='dark' />
<label htmlFor='dark' className='ml-2 text-lg'>
Dark
</label>
</div>
<div className='flex items-center'>
<input type='radio' id='system' name='theme' value='system' />
<label htmlFor='system' className='ml-2 text-lg'>
System
</label>
</div>
</div>
</form>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
Expand Down

0 comments on commit d27ecb7

Please sign in to comment.