Skip to content

Commit d27ecb7

Browse files
jsajaljsajal
authored
Merge pull request #132 from FlowTestAI/settings-modal-css
Add css to settings modal to integrate theme
2 parents 235603f + 11a3f46 commit d27ecb7

2 files changed

Lines changed: 115 additions & 115 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,4 @@ Fun fact: our contributing guide itself was an external contribution 🍺
116116

117117
## License 📄
118118

119-
Source code in this repository is made available under the [MIT License](LICENSE.md).
119+
Source code in this repository is made available under the [MIT License](LICENSE).

‎src/components/molecules/modals/SettingsModal.js‎

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
8282
</Transition.Child>
8383

8484
<div className='fixed inset-0 overflow-y-auto'>
85-
<div className='flex items-center justify-center min-h-full p-4 text-center'>
85+
<div className='flex min-h-full items-center justify-center p-4 text-center'>
8686
<Transition.Child
8787
as={Fragment}
8888
enter='ease-out duration-300'
@@ -92,131 +92,131 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
9292
leaveFrom='opacity-100 scale-100'
9393
leaveTo='opacity-0 scale-95'
9494
>
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'>
96-
<Dialog.Title as='div' className='flex items-center justify-between pb-4 border-b border-gray-300'>
95+
<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'>
96+
<Dialog.Title as='div' className='flex items-center justify-between border-b border-gray-300 pb-4'>
9797
<h1 className='text-3xl font-semibold'>Settings</h1>
9898
<button onClick={closeFn} className='text-gray-400 hover:text-gray-600'>
99-
<XCircleIcon className='w-6 h-6' />
99+
<XCircleIcon className='h-6 w-6' />
100100
</button>
101101
</Dialog.Title>
102-
<Tab.Group defaultIndex={initialTab}>
103-
<Tab.List className='flex p-1 space-x-1 rounded-xl bg-blue-900/20'>
104-
<Tab
105-
className={({ selected }) =>
106-
`w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700
107-
${selected ? 'bg-white shadow' : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'}`
108-
}
109-
>
110-
Scans
111-
</Tab>
112-
<Tab
113-
className={({ selected }) =>
114-
`w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700
115-
${selected ? 'bg-white shadow' : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'}`
116-
}
117-
>
118-
Theme
119-
</Tab>
120-
</Tab.List>
121-
<Tab.Panels className='mt-2'>
122-
<Tab.Panel className='p-4'>
123-
{/* Scans Content */}
124-
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
125-
<div className='py-2'>
126-
<p className='text-lg'>
127-
Scans aim to provide anayltics and observability for your flows. <br />
128-
<a
129-
href='https://flowtest-ai.vercel.app/'
130-
target='_blank'
131-
rel='noreferrer'
132-
className='text-blue-500 hover:underline'
133-
>
134-
Get Access Keys
135-
</a>
136-
</p>
137-
</div>
138-
<div className='py-2'>
139-
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
140-
Enabled
141-
</label>
142-
<input
143-
type='checkbox'
144-
checked={enabled}
145-
onChange={() => setEnabled(!enabled)}
146-
id='enabled'
147-
className='block'
148-
/>
149-
</div>
150-
<div className='py-2'>
151-
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
152-
Access Id
153-
</label>
154-
<input
155-
value={accessId}
156-
onChange={(e) => setAccessId(e.target.value)}
157-
type='text'
158-
placeholder='Access Id'
159-
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
160-
/>
161-
</div>
162-
<div className='py-2'>
163-
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
164-
Access Key
165-
</label>
166-
<input
167-
value={accessKey}
168-
onChange={(e) => setAccessKey(e.target.value)}
169-
type='text'
170-
placeholder='Access Key'
171-
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
172-
/>
173-
</div>
174-
<div>
175-
{failureFullSubmissionMessage && (
176-
<div className='text-red-500'> Failed to saved settings</div>
177-
)}
178-
{successFullSubmissionMessage && (
179-
<div className='text-green-500'> Successfully saved settings</div>
180-
)}
181-
</div>
182-
</div>
183-
<div className='flex justify-center w-full mt-6'>
184-
<Button
185-
btnType={BUTTON_TYPES.primary}
186-
fullWidth={true}
187-
onClickHandle={async () => await onFormSubmit()}
188-
>
189-
{'Save'}
190-
</Button>
191-
</div>
192-
</Tab.Panel>
193-
<Tab.Panel className='p-4'>
194-
{/* Theme Content */}
195-
<form className='flex flex-col items-start gap-4'>
102+
<div className='py-4'>
103+
<Tab.Group defaultIndex={initialTab}>
104+
<Tab.List className='flex'>
105+
<Tab
106+
className={({ selected }) =>
107+
`w-full p-2 ${selected ? 'rounded border border-cyan-900 bg-slate-100' : ''}`
108+
}
109+
>
110+
Scans
111+
</Tab>
112+
<Tab
113+
className={({ selected }) =>
114+
`w-full p-2 ${selected ? 'rounded border border-cyan-900 bg-slate-100' : ''}`
115+
}
116+
>
117+
Theme
118+
</Tab>
119+
</Tab.List>
120+
<Tab.Panels className='mt-2'>
121+
<Tab.Panel className='py-4'>
122+
{/* Scans Content */}
196123
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
197-
<div className='flex items-center'>
198-
<input type='radio' id='light' name='theme' value='light' defaultChecked />
199-
<label htmlFor='light' className='ml-2 text-lg'>
200-
Light
124+
<div className='py-2'>
125+
<p className='text-lg'>
126+
Scans aim to provide anayltics and observability for your flows. <br />
127+
<a
128+
href='https://flowtest-ai.vercel.app/'
129+
target='_blank'
130+
rel='noreferrer'
131+
className='text-blue-500 hover:underline'
132+
>
133+
Get Access Keys
134+
</a>
135+
</p>
136+
</div>
137+
<div className='py-2'>
138+
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
139+
Enabled
201140
</label>
141+
<input
142+
type='checkbox'
143+
checked={enabled}
144+
onChange={() => setEnabled(!enabled)}
145+
id='enabled'
146+
className='block'
147+
/>
202148
</div>
203-
<div className='flex items-center'>
204-
<input type='radio' id='dark' name='theme' value='dark' />
205-
<label htmlFor='dark' className='ml-2 text-lg'>
206-
Dark
149+
<div className='py-2'>
150+
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
151+
Access Id
207152
</label>
153+
<input
154+
value={accessId}
155+
onChange={(e) => setAccessId(e.target.value)}
156+
type='text'
157+
placeholder='Access Id'
158+
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
159+
/>
208160
</div>
209-
<div className='flex items-center'>
210-
<input type='radio' id='system' name='theme' value='system' />
211-
<label htmlFor='system' className='ml-2 text-lg'>
212-
System
161+
<div className='py-2'>
162+
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
163+
Access Key
213164
</label>
165+
<input
166+
value={accessKey}
167+
onChange={(e) => setAccessKey(e.target.value)}
168+
type='text'
169+
placeholder='Access Key'
170+
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
171+
/>
172+
</div>
173+
<div>
174+
{failureFullSubmissionMessage && (
175+
<div className='text-red-500'> Failed to saved settings</div>
176+
)}
177+
{successFullSubmissionMessage && (
178+
<div className='text-green-500'> Successfully saved settings</div>
179+
)}
214180
</div>
215181
</div>
216-
</form>
217-
</Tab.Panel>
218-
</Tab.Panels>
219-
</Tab.Group>
182+
<div className='mt-6 flex w-full justify-center'>
183+
<Button
184+
btnType={BUTTON_TYPES.primary}
185+
fullWidth={true}
186+
onClickHandle={async () => await onFormSubmit()}
187+
>
188+
{'Save'}
189+
</Button>
190+
</div>
191+
</Tab.Panel>
192+
<Tab.Panel className='p-4'>
193+
{/* Theme Content */}
194+
<form className='flex flex-col items-start gap-4'>
195+
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
196+
<div className='flex items-center'>
197+
<input type='radio' id='light' name='theme' value='light' defaultChecked />
198+
<label htmlFor='light' className='ml-2 text-lg'>
199+
Light
200+
</label>
201+
</div>
202+
<div className='flex items-center'>
203+
<input type='radio' id='dark' name='theme' value='dark' />
204+
<label htmlFor='dark' className='ml-2 text-lg'>
205+
Dark
206+
</label>
207+
</div>
208+
<div className='flex items-center'>
209+
<input type='radio' id='system' name='theme' value='system' />
210+
<label htmlFor='system' className='ml-2 text-lg'>
211+
System
212+
</label>
213+
</div>
214+
</div>
215+
</form>
216+
</Tab.Panel>
217+
</Tab.Panels>
218+
</Tab.Group>
219+
</div>
220220
</Dialog.Panel>
221221
</Transition.Child>
222222
</div>

0 commit comments

Comments
 (0)