Skip to content

Commit f0fe794

Browse files
AhsanKhan7AhsanKhan7
committed
UI updates
1 parent b11fa47 commit f0fe794

File tree

10 files changed

+105
-79
lines changed

10 files changed

+105
-79
lines changed

‎src/ui/components/icons/assets/MultiUser.svg‎

Lines changed: 5 additions & 7 deletions
Loading

‎src/ui/components/icons/assets/SingleUser.svg‎

Lines changed: 5 additions & 3 deletions
Loading

‎src/ui/components/inputs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const InputWithLabel = ({
1919
optional?: string;
2020
}): JSX.Element => (
2121
<FlexBox.Column fullWidth>
22-
<Box paddingBottom="xs">
22+
<Box paddingBottom="sm">
2323
<Paragraph
2424
size="body"
2525
style={{ color: labelColor ? labelColor : 'black' }}

‎src/ui/layouts/NonEditableConfig/index.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Container,
88
FullWidthSpinner,
99
} from '../../components';
10+
import { ToggleField } from '../common/FormElement';
1011
import styles from './index.module.scss';
1112
import { useService } from './useService';
1213

@@ -106,15 +107,22 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
106107
if (typeof elementSchema === 'boolean') {
107108
return (
108109
<Box marginVertical={'md'} style={{ width: '100%' }}>
109-
<Box>
110+
<ToggleField
111+
name={titleCase(elementName)}
112+
value={elementSchema}
113+
onHandleChange={() => {}}
114+
label={titleCase(elementName)}
115+
disabled={true}
116+
/>
117+
{/* <Box>
110118
<FlexBox.Row justifyContent="space-between">
111119
<Paragraph>{titleCase(elementName)}</Paragraph>
112120
<label className={styles.switch}>
113121
<input type="checkbox" checked={elementSchema} />
114122
<span className={`${styles.slider} ${styles.round}`}></span>
115123
</label>
116124
</FlexBox.Row>
117-
</Box>
125+
</Box> */}
118126
</Box>
119127
);
120128
}
@@ -161,13 +169,20 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
161169
className={styles.field}
162170
/>
163171
</Box>
164-
<FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
172+
{/* <FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
165173
<Paragraph>Share Component with public</Paragraph>
166174
<label className={styles.switch}>
167175
<input type="checkbox" checked={details.is_shared} />
168176
<span className={`${styles.slider} ${styles.round}`}></span>
169177
</label>
170-
</FlexBox.Row>
178+
</FlexBox.Row> */}
179+
<ToggleField
180+
name='Share Component with public'
181+
value={details.is_shared}
182+
onHandleChange={() => {}}
183+
label='Share Component with public'
184+
disabled={true}
185+
/>
171186
</Container>
172187
{/* <Container>
173188

‎src/ui/layouts/common/CustomStackBox/index.module.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@
2323
justify-content: center;
2424
align-items: center;
2525
.imageContainer {
26-
// max-height: 60px;
27-
// max-width: 60px;
2826

2927
height: 59px;
3028
width: 119px;

‎src/ui/layouts/common/FormElement/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
letter-spacing: 0em;
8484
text-align: right;
8585
margin-right: 15px;
86+
width: 20px;
8687
}
8788

8889
.sliderBlue {

‎src/ui/layouts/common/FormElement/index.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,32 +26,32 @@ export function TextField(props: any) {
2626
);
2727
}
2828

29-
export function ToggleField(props: any) {
30-
const { name, onHandleChange, label } = props;
31-
return (
32-
<Box marginVertical="md">
33-
<FlexBox.Row justifyContent="space-between" alignItems="center">
34-
<Box>
35-
<Paragraph size="body" style={{ color: '#000' }}>
36-
{label}
37-
</Paragraph>
38-
</Box>
39-
<Box>
40-
<label className={styles.switch}>
41-
<input
42-
type="checkbox"
43-
onChange={(event) => onHandleChange(name, event.target.checked)}
44-
/>
45-
<span className={`${styles.slider} ${styles.round}`}></span>
46-
</label>
47-
</Box>
48-
</FlexBox.Row>
49-
</Box>
50-
);
51-
}
29+
// export function ToggleField(props: any) {
30+
// const { name, onHandleChange, label } = props;
31+
// return (
32+
// <Box marginVertical="md">
33+
// <FlexBox.Row justifyContent="space-between" alignItems="center">
34+
// <Box>
35+
// <Paragraph size="body" style={{ color: '#000' }}>
36+
// {label}
37+
// </Paragraph>
38+
// </Box>
39+
// <Box>
40+
// <label className={styles.switch}>
41+
// <input
42+
// type="checkbox"
43+
// onChange={(event) => onHandleChange(name, event.target.checked)}
44+
// />
45+
// <span className={`${styles.slider} ${styles.round}`}></span>
46+
// </label>
47+
// </Box>
48+
// </FlexBox.Row>
49+
// </Box>
50+
// );
51+
// }
5252

53-
export function ToggleFieldBlock(props: any) {
54-
const { name, value, onHandleChange, label } = props;
53+
export function ToggleField(props: any) {
54+
const { name, value, onHandleChange, label, disabled } = props;
5555
return (
5656
<Box style={{ height: '68px' }}>
5757
<FlexBox.Row justifyContent="space-between" flexDirection='column'>
@@ -61,11 +61,12 @@ export function ToggleFieldBlock(props: any) {
6161
</Paragraph>
6262
</Box>
6363
<FlexBox.Row className={styles.switchContainer}>
64-
<div><span className={styles.switchLabel} >{value ? <>Yes</> : <>No</>}</span></div>
64+
<div className={styles.switchLabel}><span>{value ? <>Yes</> : <>No</>}</span></div>
6565
<label className={styles.switch}>
6666
<input
6767
type="checkbox"
6868
onChange={(event) => onHandleChange(name, event.target.checked)}
69+
disabled={disabled}
6970
/>
7071
<span className={`${styles.sliderBlue} ${styles.round}`}></span>
7172
</label>

‎src/ui/layouts/common/StackBox/index.module.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
padding: 10px;
77
background-color: #fff;
88
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
9+
cursor: pointer;
910
}
1011

1112
.checkbox {
@@ -25,9 +26,9 @@
2526
height: 59px;
2627
width: 119px;
2728
background-color: #fff;
28-
display: flex;
29-
justify-content: center;
30-
align-items: center;
29+
// display: flex;
30+
// justify-content: center;
31+
// align-items: center;
3132

3233
img {
3334
height: 100%;

‎src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import styles from './index.module.scss';
33
import { Box, FlexBox, H2, FormTextField } from '../../../../components';
4-
import { ToggleFieldBlock } from '../../../common/FormElement';
4+
import { ToggleField } from '../../../common/FormElement';
55

66
import {
77
sessionSelectors,
@@ -199,43 +199,43 @@ export const ListForAll: React.FC<Props> = () => {
199199
/>
200200
</Box>
201201
<Box marginLeft='xl' style={{ width: '30%' }}>
202-
<ToggleFieldBlock
202+
<ToggleField
203203
label={'Share Stack with public'}
204204
value={isShared}
205205
onHandleChange={(value: any) => setIshared(!isShared)}
206206
/>
207207
</Box>
208208
</FlexBox.Row>
209209
</Box>
210-
</div>
211210

212-
{selectedStack?.length >= 0 && (
213-
<FlexBox.Row marginTop="md">
214-
{selectedStack?.map((stack: any) => (
215-
<Box
216-
onClick={() => selectStack(stack)}
217-
marginLeft="sm"
218-
style={{
219-
border:
220-
selectedStackBox?.id === stack.id
221-
? '2px solid #431E93'
222-
: '2px solid #fff',
223-
}}
224-
className={styles.selectedBox}
225-
>
226-
{selectedStackBox?.id !== stack.id && (
227-
<input
228-
type="checkbox"
229-
className={styles.selectedBoxCheckbox}
230-
checked
231-
onClick={(e) => handleSelectedBox(e, stack)}
232-
/>
233-
)}
234-
<img src={stack.logoUrl} alt={stack.name} />
235-
</Box>
236-
))}
237-
</FlexBox.Row>
238-
)}
211+
{selectedStack?.length >= 0 && (
212+
<FlexBox.Row marginTop="md">
213+
{selectedStack?.map((stack: any) => (
214+
<Box
215+
onClick={() => selectStack(stack)}
216+
marginLeft="sm"
217+
style={{
218+
border:
219+
selectedStackBox?.id === stack.id
220+
? '2px solid #431E93'
221+
: '2px solid #fff',
222+
}}
223+
className={styles.selectedBox}
224+
>
225+
{selectedStackBox?.id !== stack.id && (
226+
<input
227+
type="checkbox"
228+
className={styles.selectedBoxCheckbox}
229+
checked
230+
onClick={(e) => handleSelectedBox(e, stack)}
231+
/>
232+
)}
233+
<img src={stack.logoUrl} alt={stack.name} />
234+
</Box>
235+
))}
236+
</FlexBox.Row>
237+
)}
238+
</div>
239239

240240
<FlexBox.Column>
241241
{stackComponentsTypes?.map((item) => {

‎src/ui/layouts/stacks/StackDetail/Configuration/index.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
FullWidthSpinner,
1313
// Container,
1414
EditField,
15-
Paragraph,
15+
// Paragraph,
1616
} from '../../../../components';
1717
// import { iconColors, iconSizes } from '../../../../../constants';
1818

@@ -46,6 +46,7 @@ import {
4646
import { toasterTypes } from '../../../../../constants';
4747
import axios from 'axios';
4848
import { routePaths } from '../../../../../routes/routePaths';
49+
import { ToggleField } from '../../../common/FormElement';
4950
// import { SidePopup } from '../../../common/SidePopup';
5051

5152
export const Configuration: React.FC<{
@@ -187,7 +188,16 @@ export const Configuration: React.FC<{
187188
className={styles.field}
188189
/>
189190
</Box>
190-
<FlexBox
191+
<Box marginLeft="xxl2">
192+
<ToggleField
193+
name='Share Component with public'
194+
value={stack.isShared}
195+
onHandleChange={() => onCallApi(stack.name, !stack.isShared)}
196+
label='Share Component with public'
197+
disabled={false}
198+
/>
199+
</Box>
200+
{/* <FlexBox
191201
marginLeft="xxl2"
192202
justifyContent="space-between"
193203
style={{ width: '20%' }}
@@ -203,7 +213,7 @@ export const Configuration: React.FC<{
203213
/>
204214
<span className={`${styles.slider} ${styles.round}`}></span>
205215
</label>
206-
</FlexBox>
216+
</FlexBox> */}
207217
{/* </Container> */}
208218
</FlexBox.Row>
209219
<Box margin="md">

0 commit comments

Comments
 (0)