Skip to content

Commit b12ccab

Browse files
jsajaljsajal
authored
Merge pull request #99 from FlowTestAI/new-ui-theme
Adding style changes for new uniform theme
2 parents 998fc08 + a80b12a commit b12ccab

64 files changed

Lines changed: 1136 additions & 1134 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/atoms/SelectAuthKeys.js‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
1-
import React, { Fragment, useState } from 'react';
2-
import { Listbox, Transition } from '@headlessui/react';
3-
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
4-
const authKeys = [{ name: 'Select Auth Key' }, { name: 'No Authorization' }];
1+
// ToDo: Remove as we ar not using it
2+
// import React, { Fragment, useState } from 'react';
3+
// import { Listbox, Transition } from '@headlessui/react';
4+
// import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
5+
// const authKeys = [{ name: 'Select Auth Key' }, { name: 'No Authorization' }];
56

6-
const SelectAuthKeys = () => {
7-
const [selected, setSelected] = useState(authKeys[0]);
8-
return (
9-
<Listbox value={selected} onChange={setSelected}>
10-
<div className='relative rounded border border-solid border-[#94a3b8]'>
11-
<Listbox.Button className='relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg cursor-default sm:text-sm'>
12-
<span className='block truncate'>{selected.name}</span>
13-
<span className='absolute flex items-center pr-2 pointer-events-none right-2 top-3'>
14-
<ChevronUpDownIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
15-
</span>
16-
</Listbox.Button>
17-
<Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
18-
<Listbox.Options className='absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg sm:text-sm max-h-60 ring-1 ring-black/5'>
19-
{authKeys.map((authKey, authKeyIdx) => (
20-
<Listbox.Option
21-
key={authKeyIdx}
22-
className={({ active }) =>
23-
`relative cursor-default select-none py-2 pl-10 pr-4 ${
24-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
25-
}`
26-
}
27-
value={authKey}
28-
>
29-
{({ selected }) => (
30-
<>
31-
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{authKey.name}</span>
32-
{selected ? (
33-
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
34-
<CheckIcon className='w-5 h-5' aria-hidden='true' />
35-
</span>
36-
) : null}
37-
</>
38-
)}
39-
</Listbox.Option>
40-
))}
41-
</Listbox.Options>
42-
</Transition>
43-
</div>
44-
</Listbox>
45-
);
46-
};
7+
// const SelectAuthKeys = () => {
8+
// const [selected, setSelected] = useState(authKeys[0]);
9+
// return (
10+
// <Listbox value={selected} onChange={setSelected}>
11+
// <div className='relative rounded border border-solid border-[#94a3b8]'>
12+
// <Listbox.Button className='relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg cursor-default sm:text-sm'>
13+
// <span className='block truncate'>{selected.name}</span>
14+
// <span className='absolute flex items-center pr-2 pointer-events-none right-2 top-3'>
15+
// <ChevronUpDownIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
16+
// </span>
17+
// </Listbox.Button>
18+
// <Transition as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
19+
// <Listbox.Options className='absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black/5 sm:text-sm'>
20+
// {authKeys.map((authKey, authKeyIdx) => (
21+
// <Listbox.Option
22+
// key={authKeyIdx}
23+
// className={({ active }) =>
24+
// `relative cursor-default select-none py-2 pl-10 pr-4 ${
25+
// active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
26+
// }`
27+
// }
28+
// value={authKey}
29+
// >
30+
// {({ selected }) => (
31+
// <>
32+
// <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{authKey.name}</span>
33+
// {selected ? (
34+
// <span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
35+
// <CheckIcon className='w-5 h-5' aria-hidden='true' />
36+
// </span>
37+
// ) : null}
38+
// </>
39+
// )}
40+
// </Listbox.Option>
41+
// ))}
42+
// </Listbox.Options>
43+
// </Transition>
44+
// </div>
45+
// </Listbox>
46+
// );
47+
// };
4748

48-
export default SelectAuthKeys;
49+
// export default SelectAuthKeys;

‎src/components/atoms/SelectEnvironment.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ const SelectEnvironment = ({ environments }) => {
1515

1616
return (
1717
<Listbox value={selected} onChange={setSelected}>
18-
<div className='relative flex h-full pl-4 border-l border-neutral-300'>
18+
<div className='relative flex h-full pl-4 border-l border-gray-300'>
1919
<Listbox.Button
20-
className={`flex items-center justify-between gap-4 sm:text-sm ${environments.length ? 'cursor-default' : 'cursor-not-allowed'}`}
20+
className={`flex items-center justify-between gap-2 sm:text-sm ${environments.length ? 'cursor-default' : 'cursor-not-allowed'}`}
2121
>
2222
<Square3Stack3DIcon className='w-4 h-4' />
2323
<div className='min-w-32'>{selected ? selected : 'Select environment'}</div>
@@ -30,19 +30,17 @@ const SelectEnvironment = ({ environments }) => {
3030
<Listbox.Option
3131
key={environmentIndex}
3232
className={({ active }) =>
33-
`relative cursor-default select-none py-2 pl-10 pr-4 ${
34-
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
33+
`relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${
34+
active ? 'bg-background-light text-slate-900' : ''
3535
}`
3636
}
3737
value={environment.name}
3838
>
3939
{({ selected }) => (
4040
<>
41-
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
42-
{environment.name}
43-
</span>
41+
<span className={`block truncate`}>{environment.name}</span>
4442
{selected ? (
45-
<span className='absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600'>
43+
<span className='absolute inset-y-0 left-0 flex items-center pl-3 font-semibold'>
4644
<CheckIcon className='w-5 h-5' aria-hidden='true' />
4745
</span>
4846
) : null}

‎src/components/atoms/Tabs.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@ const Tabs = () => {
3838
const closeTab = useTabStore((state) => state.closeTab);
3939
const [closingTabId, setClosingTabId] = useState('');
4040
const [closingCollectionId, setClosingCollectionId] = useState('');
41-
42-
// const activeTabStyles =
43-
// 'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0 bg-cyan-950 text-white';
41+
// ToDo: change color according to theme
4442
const activeTabStyles = 'bg-cyan-900 text-white';
4543
const tabCommonStyles =
4644
'tab flex items-center gap-x-2 border-r border-neutral-300 pr-0 tracking-[0.15em] transition duration-300 ease-in text-sm flex-nowrap';
@@ -84,8 +82,8 @@ const Tabs = () => {
8482
{tabUnsavedChanges(tab) ? '*' : ''}
8583
{tab.name}
8684
</a>
87-
{/* close needs to be a separate clickable component other wise it gets confused with above */}
8885
<div
86+
// ToDo: change color according to theme
8987
className={`flex h-full items-center px-2 ${focusTabId === tab.id ? 'text-white hover:bg-cyan-950 ' : 'text-cyan-900 hover:bg-slate-200'} `}
9088
data-tab-id={tab.id}
9189
onClick={(e) => handleCloseTab(e, tab)}

‎src/components/atoms/ThemeController.js‎

Lines changed: 77 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,84 @@ import Tippy from '@tippyjs/react';
33
import 'tippy.js/dist/tippy.css';
44

55
const ThemeController = () => {
6+
const [dark, setDark] = React.useState(false);
7+
const darkModeHandler = () => {
8+
setDark(!dark);
9+
document.body.classList.toggle('dark');
10+
};
11+
612
return (
7-
<Tippy content='Coming Soon!' placement='bottom'>
8-
<label className='flex items-center gap-2 cursor-pointer'>
9-
<svg
10-
xmlns='http://www.w3.org/2000/svg'
11-
width='16'
12-
height='16'
13-
viewBox='0 0 24 24'
14-
fill='none'
15-
stroke='currentColor'
16-
strokeWidth='2'
17-
strokeLinecap='round'
18-
strokeLinejoin='round'
19-
>
20-
<circle cx='12' cy='12' r='5' />
21-
<path d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4' />
22-
</svg>
23-
<input type='checkbox' value='synthwave' className='theme-controller toggle toggle-xs' disabled />
24-
<svg
25-
xmlns='http://www.w3.org/2000/svg'
26-
width='16'
27-
height='16'
28-
viewBox='0 0 24 24'
29-
fill='none'
30-
stroke='currentColor'
31-
strokeWidth='2'
32-
strokeLinecap='round'
33-
strokeLinejoin='round'
34-
>
35-
<path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
36-
</svg>
37-
</label>
38-
</Tippy>
13+
// <Tippy content='Coming Soon!' placement='bottom'>
14+
// <label className='flex items-center gap-2 cursor-pointer'>
15+
// <svg
16+
// xmlns='http://www.w3.org/2000/svg'
17+
// width='16'
18+
// height='16'
19+
// viewBox='0 0 24 24'
20+
// fill='none'
21+
// stroke='currentColor'
22+
// strokeWidth='2'
23+
// strokeLinecap='round'
24+
// strokeLinejoin='round'
25+
// >
26+
// <circle cx='12' cy='12' r='5' />
27+
// <path d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4' />
28+
// </svg>
29+
// <input type='checkbox' value='synthwave' className='theme-controller toggle toggle-xs' disabled />
30+
// <svg
31+
// xmlns='http://www.w3.org/2000/svg'
32+
// width='16'
33+
// height='16'
34+
// viewBox='0 0 24 24'
35+
// fill='none'
36+
// stroke='currentColor'
37+
// strokeWidth='2'
38+
// strokeLinecap='round'
39+
// strokeLinejoin='round'
40+
// >
41+
// <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
42+
// </svg>
43+
// </label>
44+
// </Tippy>
45+
<div className=''>
46+
<button onClick={() => darkModeHandler()}>
47+
{dark && (
48+
<>
49+
<svg
50+
xmlns='http://www.w3.org/2000/svg'
51+
width='16'
52+
height='16'
53+
viewBox='0 0 24 24'
54+
fill='none'
55+
stroke='currentColor'
56+
strokeWidth='2'
57+
strokeLinecap='round'
58+
strokeLinejoin='round'
59+
>
60+
<circle cx='12' cy='12' r='5' />
61+
<path d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4' />
62+
</svg>
63+
</>
64+
)}
65+
{!dark && (
66+
<>
67+
<svg
68+
xmlns='http://www.w3.org/2000/svg'
69+
width='16'
70+
height='16'
71+
viewBox='0 0 24 24'
72+
fill='none'
73+
stroke='currentColor'
74+
strokeWidth='2'
75+
strokeLinecap='round'
76+
strokeLinejoin='round'
77+
>
78+
<path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path>
79+
</svg>
80+
</>
81+
)}
82+
</button>
83+
</div>
3984
);
4085
};
4186

0 commit comments

Comments
 (0)