Skip to content

Commit d58e9f8

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #344 from zenml-io/ahsan_fixes
field width update
2 parents 7e6f8fb + 5693c49 commit d58e9f8

File tree

8 files changed

+50
-38
lines changed

8 files changed

+50
-38
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
3030
return (
3131
<>
3232
{flavor?.config_schema?.properties[elementName].sensitive ? (
33-
<Box marginTop="lg" style={{ width: '417px' }}>
33+
<Box marginTop="lg" style={{ width: '30vw' }}>
3434
<EditField
3535
disabled
3636
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -44,7 +44,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
4444
/>
4545
</Box>
4646
) : (
47-
<Box marginTop="lg" style={{ width: '417px' }}>
47+
<Box marginTop="lg" style={{ width: '30vw' }}>
4848
<EditField
4949
disabled
5050
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -75,7 +75,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
7575
<label htmlFor="key">{titleCase(elementName)}</label>
7676
</Paragraph>
7777
</Box>
78-
<FlexBox marginTop="sm" style={{ width: '417px' }}>
78+
<FlexBox marginTop="sm" style={{ width: '30vw' }}>
7979
<textarea
8080
disabled
8181
className={styles.textArea}
@@ -118,7 +118,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
118118
// }
119119
if (flavor?.config_schema?.properties[elementName]?.type === 'object') {
120120
return (
121-
<Box marginTop="lg" style={{ width: '417px' }}>
121+
<Box marginTop="lg" style={{ width: '30vw' }}>
122122
<Paragraph size="body" style={{ color: 'black' }}>
123123
<label htmlFor={elementName}>{titleCase(elementName)}</label>
124124
</Paragraph>
@@ -342,7 +342,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
342342
&#x27A4;
343343
</div>
344344

345-
<div className="form-group" style={{ width: '390px' }}>
345+
<div className="form-group" style={{ width: '28vw' }}>
346346
<EditField
347347
disabled
348348
className={styles.field}
@@ -454,7 +454,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
454454
<FlexBox.Column marginTop="xl" fullWidth>
455455
<FlexBox.Row flexDirection="column">
456456
{/* <Container> */}
457-
<Box style={{ width: '417px' }}>
457+
<Box style={{ width: '30vw' }}>
458458
<EditField
459459
disabled
460460
onChangeText={() => console.log('')}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const Configuration: React.FC<{
7474

7575
return (
7676
<FlexBox.Column marginLeft="xl">
77-
<Box marginTop="lg" style={{ width: '417px' }}>
77+
<Box marginTop="lg" style={{ width: '30vw' }}>
7878
<FormTextField
7979
label={'Secret name'}
8080
labelColor="rgba(66, 66, 64, 0.5)"
@@ -89,7 +89,7 @@ export const Configuration: React.FC<{
8989
}}
9090
/>
9191
</Box>
92-
<Box marginTop="lg" style={{ width: '417px' }}>
92+
<Box marginTop="lg" style={{ width: '30vw' }}>
9393
<FormDropdownField
9494
label={'Scope'}
9595
labelColor="rgba(66, 66, 64, 0.5)"
@@ -109,7 +109,7 @@ export const Configuration: React.FC<{
109109
</Box>
110110

111111
<Box marginTop="md">
112-
<SelectorDisabled inputFields={secret.values} width="417px" />
112+
<SelectorDisabled inputFields={secret.values} width="30vw" />
113113
</Box>
114114

115115
<FlexBox

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const Selector: React.FC<Props> = ({
134134
{console.log()}
135135
{inputFields?.map((item: any, index: any) => (
136136
<Box key={index} marginTop="md" style={{ display: 'flex' }}>
137-
<Box style={{ width: '417px' }}>
137+
<Box style={{ width: '30vw' }}>
138138
<FormTextField
139139
onChange={(event: any) =>
140140
handleInputChange(index, event, 'key')
@@ -146,7 +146,7 @@ const Selector: React.FC<Props> = ({
146146
/>
147147
</Box>
148148

149-
<Box style={{ width: '417px' }} marginLeft="md">
149+
<Box style={{ width: '30vw' }} marginLeft="md">
150150
<FormPasswordField
151151
onChange={(event: any) =>
152152
handleInputChange(index, event, 'value')

‎src/ui/layouts/secrets/UpdateSecret/UpdateConfig/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export const UpdateConfig: React.FC<{
218218
}
219219
return (
220220
<FlexBox.Column marginLeft="xl">
221-
<Box marginTop="lg" style={{ width: '417px' }}>
221+
<Box marginTop="lg" style={{ width: '30vw' }}>
222222
<FormTextField
223223
label={'Secret name'}
224224
labelColor="rgba(66, 66, 64, 0.5)"
@@ -230,7 +230,7 @@ export const UpdateConfig: React.FC<{
230230
}}
231231
/>
232232
</Box>
233-
<Box marginTop="lg" style={{ width: '417px' }}>
233+
<Box marginTop="lg" style={{ width: '30vw' }}>
234234
<FormDropdownField
235235
label={'Scope'}
236236
labelColor="rgba(66, 66, 64, 0.5)"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -903,7 +903,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
903903
</Box> */}
904904

905905
<FlexBox.Row style={{ width: '100%' }}>
906-
<Box style={{ width: '417px' }}>
906+
<Box style={{ width: '30vw' }}>
907907
<FormTextField
908908
onChange={(e: any) => {
909909
setComponentName(e);

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ input:checked + .slider:before {
110110
box-sizing: border-box;
111111
display: flex;
112112
min-height: 45px;
113-
min-width: 417px;
113+
min-width: 30vw;
114114
width: 100%;
115115
height: 160px;
116116
font-family: $fontFamilyNormal;
@@ -123,15 +123,15 @@ input:checked + .slider:before {
123123
}
124124

125125
.updateButton {
126-
background: #FFFFFF;
126+
background: #ffffff;
127127
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
128128
border-radius: 4px;
129-
color: #443E99;
129+
color: #443e99;
130130
}
131131

132132
.updateButton:hover {
133-
background: #443E99;
133+
background: #443e99;
134134
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
135135
border-radius: 4px;
136136
color: #fff;
137-
}
137+
}

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
250250
return (
251251
<>
252252
{flavor?.configSchema?.properties[elementName].sensitive ? (
253-
<Box marginTop="lg" style={{ width: '417px' }}>
253+
<Box marginTop="lg" style={{ width: '30vw' }}>
254254
<EditField
255255
disabled
256256
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -264,7 +264,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
264264
/>
265265
</Box>
266266
) : (
267-
<Box marginTop="lg" style={{ width: '417px' }}>
267+
<Box marginTop="lg" style={{ width: '30vw' }}>
268268
<EditField
269269
disabled
270270
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -300,7 +300,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
300300
disabled
301301
className={styles.textArea}
302302
defaultValue={JSON.stringify(mappedObject[elementName])}
303-
style={{ width: '417px' }}
303+
style={{ width: '30vw' }}
304304
onBlur={(e) => {
305305
const jsonStr = e.target.value;
306306
try {
@@ -339,7 +339,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
339339
// }
340340
if (flavor?.configSchema?.properties[elementName]?.type === 'object') {
341341
return (
342-
<Box marginTop="lg" style={{ width: '415px' }}>
342+
<Box marginTop="lg" style={{ width: '30vw' }}>
343343
<Paragraph size="body" style={{ color: 'black' }}>
344344
<label htmlFor={elementName}>{titleCase(elementName)}</label>
345345
</Paragraph>
@@ -365,7 +365,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
365365
marginLeft: '2px',
366366
}}
367367
>
368-
<FlexBox.Row alignItems="center" marginTop="sm">
368+
<FlexBox.Row
369+
alignItems="center"
370+
marginTop="sm"
371+
style={{ width: '30vw' }}
372+
>
369373
<div
370374
style={{
371375
marginTop: '30px',
@@ -527,7 +531,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
527531
marginLeft: '2px',
528532
}}
529533
>
530-
<FlexBox.Row marginTop="lg" alignItems="center">
534+
<FlexBox.Row
535+
marginTop="lg"
536+
alignItems="center"
537+
style={{ width: '30vw' }}
538+
>
531539
<div
532540
style={{
533541
marginTop: '30px',
@@ -607,7 +615,11 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
607615
marginLeft: '2px',
608616
}}
609617
>
610-
<FlexBox.Row marginTop="lg" alignItems="center">
618+
<FlexBox.Row
619+
marginTop="lg"
620+
alignItems="center"
621+
style={{ width: '30vw' }}
622+
>
611623
<div
612624
style={{
613625
marginTop: '30px',
@@ -728,7 +740,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
728740
&#x27A4;
729741
</div>
730742

731-
<div className="form-group" style={{ width: '383px' }}>
743+
<div className="form-group" style={{ width: '28.5vw' }}>
732744
<EditField
733745
disabled
734746
className={styles.field}
@@ -780,7 +792,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
780792
}
781793
if (typeof elementSchema === 'boolean') {
782794
return (
783-
<Box marginTop={'lg'} style={{ width: '417px' }}>
795+
<Box marginTop={'lg'} style={{ width: '30vw' }}>
784796
<Box>
785797
<ToggleField
786798
value={elementSchema}
@@ -874,7 +886,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
874886
<FlexBox.Column marginTop="xl">
875887
<FlexBox.Row flexDirection="column">
876888
<Container>
877-
<Box style={{ width: '417px' }}>
889+
<Box style={{ width: '30vw' }}>
878890
<EditField
879891
disabled
880892
onKeyDown={(e: any) => onPressEnter(e, 'name')}
@@ -889,7 +901,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
889901
</Box>
890902
</Container>
891903
<Container>
892-
<Box marginTop="lg" style={{ width: '417px' }}>
904+
<Box marginTop="lg" style={{ width: '30vw' }}>
893905
<ToggleField
894906
value={stackComponent.isShared}
895907
onHandleChange={() =>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ export const UpdateConfig: React.FC<{
521521
return (
522522
<>
523523
{flavor?.configSchema?.properties[elementName].sensitive ? (
524-
<Box marginTop="lg" style={{ width: '417px' }}>
524+
<Box marginTop="lg" style={{ width: '30vw' }}>
525525
<MakeSecretField
526526
required={flavor?.configSchema?.required?.includes(elementName)}
527527
label={titleCase(elementName) + ' (Secret)'}
@@ -593,7 +593,7 @@ export const UpdateConfig: React.FC<{
593593
/>
594594
</Box>
595595
) : (
596-
<Box marginTop="lg" style={{ width: '417px' }}>
596+
<Box marginTop="lg" style={{ width: '30vw' }}>
597597
<FormTextField
598598
onChange={(e: any) => {
599599
setMappedConfiguration((prevConfig: any) => ({
@@ -628,7 +628,7 @@ export const UpdateConfig: React.FC<{
628628
<label htmlFor="key">{titleCase(elementName)}</label>
629629
</Paragraph>
630630
</Box>
631-
<FlexBox marginTop="sm" fullWidth style={{ width: '417px' }}>
631+
<FlexBox marginTop="sm" fullWidth style={{ width: '30vw' }}>
632632
<textarea
633633
className={styles.textArea}
634634
defaultValue={JSON.stringify(mappedConfiguration[elementName])}
@@ -720,7 +720,7 @@ export const UpdateConfig: React.FC<{
720720
<Box
721721
className="form-group"
722722
marginRight="md"
723-
style={{ width: '184px' }}
723+
style={{ width: '13.7vw' }}
724724
>
725725
<FormTextField
726726
onChange={(event: any) => {
@@ -736,7 +736,7 @@ export const UpdateConfig: React.FC<{
736736
/>
737737
</Box>
738738

739-
<Box className="form-group" style={{ width: '184px' }}>
739+
<Box className="form-group" style={{ width: '13.7vw' }}>
740740
<FormTextField
741741
onChange={(event: any) => {
742742
const values = { ...inputFields };
@@ -879,7 +879,7 @@ export const UpdateConfig: React.FC<{
879879
&#x27A4;
880880
</div>
881881

882-
<Box className="form-group" style={{ width: '383px' }}>
882+
<Box className="form-group" style={{ width: '28.3vw' }}>
883883
<FormTextField
884884
onChange={(event: any) => {
885885
const values = [
@@ -966,7 +966,7 @@ export const UpdateConfig: React.FC<{
966966
}
967967
if (typeof elementSchema === 'boolean') {
968968
return (
969-
<Box marginTop={'lg'} style={{ width: '450px' }}>
969+
<Box marginTop={'lg'} style={{ width: '30vw' }}>
970970
<Box>
971971
<ToggleField
972972
value={elementSchema}
@@ -1068,7 +1068,7 @@ export const UpdateConfig: React.FC<{
10681068
<FlexBox.Column marginTop="xl">
10691069
<FlexBox.Row flexDirection="column">
10701070
<Container>
1071-
<Box style={{ width: '417px' }}>
1071+
<Box style={{ width: '30vw' }}>
10721072
<FormTextField
10731073
onChange={(e: any) => {
10741074
setComponentName(e);

0 commit comments

Comments
 (0)