Skip to content

Commit 181dfa0

Browse files
AhsanKhan7AhsanKhan7
committed
UI updates
1 parent be81316 commit 181dfa0

File tree

8 files changed

+43
-37
lines changed

8 files changed

+43
-37
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,11 @@ export const MakeSecretField = (
282282
borderRadius: '4px',
283283
boxShadow: 'var(--cardShadow)',
284284
width: '100%',
285+
286+
height: '185px',
287+
overflowY: 'auto',
288+
overflowX: 'hidden',
289+
285290
position: 'absolute',
286291
zIndex: 2,
287292
top: '7rem',

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,11 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
128128
<div
129129
style={{
130130
position: 'absolute',
131-
bottom: '0',
131+
bottom: '-5px',
132132
width: '5px',
133133
height: '5px',
134134
borderRadius: '100%',
135-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
135+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
136136
}}
137137
></div>
138138

@@ -211,11 +211,11 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
211211
<div
212212
style={{
213213
position: 'absolute',
214-
bottom: '0',
214+
bottom: '-5px',
215215
width: '5px',
216216
height: '5px',
217217
borderRadius: '100%',
218-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
218+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
219219
}}
220220
></div>
221221

@@ -308,7 +308,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
308308
width: '5px',
309309
height: '5px',
310310
borderRadius: '100%',
311-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
311+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
312312
}}
313313
></div>
314314

‎src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const Configuration: React.FC<{
8282
value={secret?.name}
8383
disabled
8484
onChange={() => {}}
85-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
85+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
8686
/>
8787
</Box>
8888
<Box marginTop="lg" style={{ width: '329px' }}>
@@ -94,7 +94,7 @@ export const Configuration: React.FC<{
9494
onChange={() => {}}
9595
disabled
9696
options={[] as any}
97-
style={{ paddingLeft: '10px', backgroundColor: 'rgba(168, 168, 168, 0.1)', color: '#a1a4ab' }}
97+
style={{ paddingLeft: '10px', background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px', color: '#a1a4ab' }}
9898
/>
9999
</Box>
100100

‎src/ui/layouts/secrets/Selector/SelectorDisabled.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
3434
value={item[0]}
3535
disabled
3636
placeholder={''}
37-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
37+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
3838
/>
3939
</Box>
4040
{console.log(item, 'itemitem')}
@@ -48,7 +48,7 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
4848
placeholder={''}
4949
error={{}}
5050
showPasswordOption
51-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
51+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
5252
/>
5353
</Box>
5454
</Box>

‎src/ui/layouts/stackComponents/ConfigureComponent/CreateComponent/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,11 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
273273
<div
274274
style={{
275275
position: 'absolute',
276-
bottom: '0',
276+
bottom: '-5px',
277277
width: '5px',
278278
height: '5px',
279279
borderRadius: '100%',
280-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
280+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
281281
}}
282282
></div>
283283

@@ -381,7 +381,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
381381
)
382382
}
383383
>
384-
<icons.minusCircle color={iconColors.primary} />
384+
<icons.delete color={iconColors.grey} />
385385
</button>
386386
)}
387387

@@ -393,7 +393,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
393393
handleAddFields(props.name, parentIndex)
394394
}
395395
>
396-
<icons.plusCircle color={iconColors.primary} />
396+
<icons.addNew color={iconColors.primary} />
397397
</button>
398398
)}
399399
</div>
@@ -588,11 +588,11 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
588588
<div
589589
style={{
590590
position: 'absolute',
591-
bottom: '0',
591+
bottom: '-5px',
592592
width: '5px',
593593
height: '5px',
594594
borderRadius: '100%',
595-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
595+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
596596
}}
597597
></div>
598598

@@ -682,7 +682,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
682682
setInputArrayFields(values);
683683
}}
684684
>
685-
<icons.minusCircle color={iconColors.primary} />
685+
<icons.delete color={iconColors.grey} />
686686
</button>
687687
)}
688688
{index === inputArrayFields[props.name].length - 1 && (
@@ -695,7 +695,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
695695
setInputArrayFields(values);
696696
}}
697697
>
698-
<icons.plusCircle color={iconColors.primary} />
698+
<icons.addNew color={iconColors.primary} />
699699
</button>
700700
)}
701701
</div>

‎src/ui/layouts/stackComponents/StackDetail/Configuration/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ input:checked + .slider:before {
110110
box-sizing: border-box;
111111
display: flex;
112112
min-height: 45px;
113+
min-width: 417px;
113114
width: 100%;
114115
height: 160px;
115116
font-family: $fontFamilyNormal;

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -350,11 +350,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
350350
<div
351351
style={{
352352
position: 'absolute',
353-
bottom: '0',
353+
bottom: '-5px',
354354
width: '5px',
355355
height: '5px',
356356
borderRadius: '100%',
357-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
357+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
358358
}}
359359
></div>
360360

@@ -365,8 +365,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
365365
marginLeft: '2px',
366366
}}
367367
>
368-
</div>
369-
<FlexBox.Row alignItems='center'>
368+
<FlexBox.Row alignItems='center' marginTop="sm">
370369
<div
371370
style={{
372371
marginTop: '30px',
@@ -421,6 +420,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
421420
className={styles.field}
422421
/>
423422
</FlexBox.Row>
423+
</div>
424424
</>
425425
)}
426426
</Box>
@@ -431,11 +431,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
431431
<div
432432
style={{
433433
position: 'absolute',
434-
bottom: '0',
434+
bottom: '-5px',
435435
width: '5px',
436436
height: '5px',
437437
borderRadius: '100%',
438-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
438+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
439439
}}
440440
></div>
441441

@@ -513,11 +513,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
513513
<div
514514
style={{
515515
position: 'absolute',
516-
bottom: '0',
516+
bottom: '-5px',
517517
width: '5px',
518518
height: '5px',
519519
borderRadius: '100%',
520-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
520+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
521521
}}
522522
></div>
523523

@@ -611,11 +611,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
611611
<div
612612
style={{
613613
position: 'absolute',
614-
bottom: '0',
614+
bottom: '-5px',
615615
width: '5px',
616616
height: '5px',
617617
borderRadius: '100%',
618-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
618+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
619619
}}
620620
></div>
621621

@@ -703,7 +703,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
703703
}
704704
if (typeof elementSchema === 'boolean') {
705705
return (
706-
<Box marginTop={'lg'} style={{ width: '100%' }}>
706+
<Box marginTop={'lg'} style={{ width: '417px' }}>
707707
<Box>
708708
<ToggleField
709709
value={elementSchema}
@@ -812,7 +812,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
812812
</Box>
813813
</Container>
814814
<Container>
815-
<Box marginTop="lg">
815+
<Box marginTop="lg" style={{ width: '417px' }}>
816816
<ToggleField
817817
value={stackComponent.isShared}
818818
onHandleChange={() =>

‎src/ui/layouts/stackComponents/UpdateComponent/UpdateConfig/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -678,11 +678,11 @@ export const UpdateConfig: React.FC<{
678678
<div
679679
style={{
680680
position: 'absolute',
681-
bottom: '0',
681+
bottom: '-5px',
682682
width: '5px',
683683
height: '5px',
684684
borderRadius: '100%',
685-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
685+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
686686
}}
687687
></div>
688688

@@ -790,7 +790,7 @@ export const UpdateConfig: React.FC<{
790790
// )
791791
}
792792
>
793-
<icons.minusCircle color={iconColors.primary} />
793+
<icons.delete color={iconColors.grey} />
794794
</button>
795795
)}
796796

@@ -808,7 +808,7 @@ export const UpdateConfig: React.FC<{
808808
}));
809809
}}
810810
>
811-
<icons.plusCircle color={iconColors.primary} />
811+
<icons.addNew color={iconColors.primary} />
812812
</button>
813813
)}
814814
</div>
@@ -834,11 +834,11 @@ export const UpdateConfig: React.FC<{
834834
<div
835835
style={{
836836
position: 'absolute',
837-
bottom: '0',
837+
bottom: '-5px',
838838
width: '5px',
839839
height: '5px',
840840
borderRadius: '100%',
841-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
841+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
842842
}}
843843
></div>
844844

@@ -925,7 +925,7 @@ export const UpdateConfig: React.FC<{
925925
}));
926926
}}
927927
>
928-
<icons.minusCircle color={iconColors.primary} />
928+
<icons.delete color={iconColors.grey} />
929929
</button>
930930
)}
931931
{index ===
@@ -944,7 +944,7 @@ export const UpdateConfig: React.FC<{
944944
}));
945945
}}
946946
>
947-
<icons.plusCircle color={iconColors.primary} />
947+
<icons.addNew color={iconColors.primary} />
948948
</button>
949949
)}
950950
</div>

0 commit comments

Comments
 (0)