Skip to content

Commit d179847

Browse files
rachitkrsinghrachitkrsingh
committed
Adding new intuitive UX changes
1 parent 057e354 commit d179847

32 files changed

Lines changed: 1343 additions & 330 deletions

‎src/components/atoms/Editor.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/atoms/common/Button.js‎

Lines changed: 1 addition & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,48 +13,6 @@ const Button = ({
1313
onlyIcon,
1414
padding,
1515
}) => {
16-
// const btnColorStyles = {
17-
// primary: {
18-
// default: 'border-denim-600 bg-denim-600 text-white hover:bg-denim-700', // with bg color
19-
// intent: {
20-
// info: 'border-sky-600 bg-sky-600 text-white hover:bg-sky-700',
21-
// success: 'border-green-600 bg-green-600 text-white hover:bg-green-700',
22-
// warning: 'border-amber-600 bg-amber-600 text-white hover:bg-amber-700',
23-
// error: 'border-red-600 bg-red-600 text-white hover:bg-red-700',
24-
// },
25-
// },
26-
// secondary: {
27-
// default: 'border border-denim-600 bg-denim-50 text-denim-600 hover:bg-denim-100', // outline
28-
// intent: {
29-
// info: 'border border-sky-600 bg-sky-50 text-sky-600 hover:bg-sky-100',
30-
// success: 'border border-green-600 bg-green-50 text-green-600 hover:bg-green-100',
31-
// warning: 'border border-amber-600 bg-amber-50 text-amber-600 hover:bg-amber-100',
32-
// error: 'border border-red-600 bg-red-50 text-red-600 hover:bg-red-100',
33-
// },
34-
// },
35-
// tertiary: {
36-
// default: 'text-denim-600 hover:bg-denim-100', // without border
37-
// intent: {
38-
// info: 'text-sky-600 hover:bg-sky-100',
39-
// success: 'text-green-600 hover:bg-green-100',
40-
// warning: 'text-amber-600 hover:bg-amber-100',
41-
// error: 'text-red-600 hover:bg-red-100',
42-
// },
43-
// },
44-
// minimal: {
45-
// default: 'text-fog-600 hover:text-fog-900 hover:font-semibold hover:bg-fog-50',
46-
// intent: {
47-
// info: 'text-sky-600 hover:text-sky-900 hover:font-semibold',
48-
// success: 'text-green-600 hover:text-green-900 hover:font-semibold',
49-
// warning: 'text-amber-600 hover:text-amber-900 hover:font-semibold',
50-
// error: 'text-red-600 hover:text-red-900 hover:font-semibold',
51-
// },
52-
// },
53-
// disabled: {
54-
// default: 'text-fog-600 hover:text-fog-900 hover:font-semibold hover:bg-fog-50 cursor-not-allowed',
55-
// },
56-
// };
57-
5816
const btnColorStyles = {
5917
primary: {
6018
default: 'border-cyan-900 text-white bg-cyan-900 hover:border-cyan-950 hover:bg-cyan-950', // with bg color
@@ -93,7 +51,7 @@ const Button = ({
9351
},
9452
},
9553
disabled: {
96-
default: 'text-gray-300 hover:font-semibold cursor-not-allowed',
54+
default: 'text-gray-300 border border-gray-300 cursor-not-allowed',
9755
},
9856
};
9957

‎src/components/atoms/common/HorizontalDivider.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from 'react';
22

3-
const HorizontalDivider = () => {
4-
return <div className='h-[1px] w-full bg-gray-300'></div>;
3+
const HorizontalDivider = ({ themeColor, themeStyles }) => {
4+
return (
5+
<div
6+
className={`h-[1px] w-full ${themeColor ? themeColor : 'bg-gray-300'} ${themeStyles ? themeStyles : ''}`}
7+
></div>
8+
);
59
};
610

711
export default HorizontalDivider;

‎src/components/atoms/common/TextInput.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import React from 'react';
22

3-
const TextInput = ({ id, placeHolder, onChangeHandler, name, value }) => {
3+
const TextInput = ({ id, placeHolder, onChangeHandler, name, value, disableState }) => {
4+
const mainStyles =
5+
'nodrag nowheel block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm outline-none';
6+
const intentStyles = disableState ? 'cursor-not-allowed text-slate-400' : 'text-slate-900';
47
return (
58
<input
69
id={id}
710
type='text'
811
placeholder={placeHolder}
9-
className='nodrag nowheel bg-background-light block w-full rounded border border-slate-700 p-2.5 text-sm text-slate-900 outline-none'
12+
className={`${mainStyles} ${intentStyles}`}
1013
name={name}
1114
onChange={onChangeHandler}
1215
value={value}
16+
disabled={disableState}
1317
/>
1418
);
1519
};

‎src/components/atoms/common/TimeoutSelector.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const TimeoutSelector = ({ optionsData, onSelectHandler = () => null }) => {
2727
>
2828
<div className='relative flex h-full'>
2929
<Listbox.Button
30-
className={`flex items-center justify-between sm:text-sm ${optionsData.length ? 'cursor-default' : 'cursor-not-allowed'}`}
30+
className={`flex items-center justify-between gap-1 sm:text-sm ${optionsData.length ? 'cursor-default' : 'cursor-not-allowed'}`}
3131
>
3232
<ClockIcon className='w-5 h-5' />
3333
<div className='min-w-24'>{selected ? selected : 'Select Timeout'}</div>

‎src/components/atoms/flow/Textarea.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22

3-
const Textarea = ({ placeHolder, onChangeHandler, name, value, rows }) => {
3+
const Textarea = ({ id, placeHolder, onChangeHandler, name, value, rows }) => {
44
return (
55
<textarea
6+
id={id}
67
placeholder={placeHolder}
7-
className='nodrag nowheel bg-background-light min-h-12 w-full min-w-72 resize rounded border border-slate-700 p-2.5 text-sm text-slate-900 outline-none'
8+
className='nodrag nowheel min-h-12 w-full min-w-72 resize rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
89
name={name}
910
onChange={onChangeHandler}
1011
rows={rows}

‎src/components/layouts/WithoutSplitPane.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Allotment } from 'allotment';
3+
import 'allotment/dist/style.css';
4+
import Workspace from '../organisms/workspace/Workspace';
5+
import AppNavBar from 'components/organisms/AppNavBar';
6+
7+
const WithoutSplitPane = () => {
8+
const sideBarSize = 112;
9+
return (
10+
<main className='h-full'>
11+
<Allotment>
12+
<Allotment.Pane preferredSize={`${sideBarSize}px`} minSize={sideBarSize} maxSize={sideBarSize}>
13+
<div className='flex text-xs'>
14+
<AppNavBar showRightBorder={false} />
15+
</div>
16+
</Allotment.Pane>
17+
<Allotment.Pane>
18+
<Workspace />
19+
</Allotment.Pane>
20+
</Allotment>
21+
</main>
22+
);
23+
};
24+
25+
export default WithoutSplitPane;

‎src/components/molecules/flow/nodes/ComplexNode.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const ComplexNode = ({ id, data }) => {
6666
}}
6767
name='flow'
6868
value={data.relativePath ? data.relativePath : ''}
69-
className='h-12 p-2 border rounded outline-none cursor-default bg-background-light max-w-48 border-cyan-950'
69+
className='h-12 p-2 border rounded outline-none cursor-default max-w-48 border-cyan-950 bg-background-light'
7070
>
7171
<option key='None' value=''>
7272
Select a flow

‎src/components/molecules/flow/nodes/RequestBody.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const RequestBody = ({ nodeId, nodeData }) => {
115115
{requestBodyTypeOptions.map((bodyTypeOption, index) => (
116116
<Menu.Item key={index} data-click-from='body-type-menu' onClick={() => handleClose(bodyTypeOption)}>
117117
<button
118-
className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md hover:bg-background-light group'
118+
className='flex items-center w-full px-2 py-2 text-sm text-gray-900 rounded-md group hover:bg-background-light'
119119
data-click-from='body-type-menu'
120120
>
121121
{bodyTypeOption}
@@ -130,8 +130,10 @@ const RequestBody = ({ nodeId, nodeData }) => {
130130
<>
131131
<NodeHorizontalDivider />
132132
<div className='p-4 bg-background'>
133-
<div className='w-full nodrag nowheel min-w-72 bg-gray-50'>
134-
<Editor name='request-body-json' onChange={(e) => handleRawJson(e)} value={nodeData.requestBody.body} />
133+
<div className='w-full nodrag nowheel min-w-72'>
134+
<div className='bg-background-lighter'>
135+
<Editor name='request-body-json' onChange={(e) => handleRawJson(e)} value={nodeData.requestBody.body} />
136+
</div>
135137
<Button
136138
btnType={BUTTON_TYPES.secondary}
137139
classes={'mt-2'}

‎src/components/molecules/footers/MainFooter.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,24 @@ import React from 'react';
22
import { ArrowLeftEndOnRectangleIcon, ArrowRightStartOnRectangleIcon } from '@heroicons/react/24/outline';
33
import Tippy from '@tippyjs/react';
44
import useNavigationStore from 'stores/AppNavBarStore';
5+
import useCollectionStore from 'stores/CollectionStore';
56

67
const MainFooter = () => {
8+
const collections = useCollectionStore((state) => state.collections);
79
const collapseNavBarValue = useNavigationStore((state) => state.collapseNavBar);
810
const updateNavCollapseState = useNavigationStore((state) => state.setNavCollapseState);
911
return (
1012
<footer className='flex items-center justify-between px-6 py-2 text-xs'>
1113
<label className='py-1 cursor-pointer swap swap-rotate'>
1214
<input
1315
type='checkbox'
14-
onClick={() => {
15-
updateNavCollapseState(!collapseNavBarValue);
16+
onClick={(event) => {
17+
if (collections.length) {
18+
updateNavCollapseState(!collapseNavBarValue);
19+
} else {
20+
event.preventDefault();
21+
event.stopPropagation();
22+
}
1623
}}
1724
/>
1825
<ArrowRightStartOnRectangleIcon className='w-6 h-6 swap-on' />

0 commit comments

Comments
 (0)