Skip to content

Commit 7e6f8fb

Browse files
danialraza03danialraza03
authored
Merge pull request #342 from zenml-io/ahsan_secrets_2
UI fixes
2 parents 5c42346 + f787f6c commit 7e6f8fb

File tree

7 files changed

+305
-293
lines changed

7 files changed

+305
-293
lines changed

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

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
7070
return (
7171
<>
7272
{' '}
73-
<Box marginTop="sm">
73+
<Box marginTop="lg">
7474
<Paragraph size="body" style={{ color: '#000' }}>
7575
<label htmlFor="key">{titleCase(elementName)}</label>
7676
</Paragraph>
@@ -126,22 +126,22 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
126126
{Object.keys(elementSchema).length < 1 && (
127127
<Box style={{ position: 'relative' }}>
128128
<div
129-
style={{
130-
position: 'absolute',
131-
bottom: '-5px',
132-
width: '5px',
133-
height: '5px',
134-
borderRadius: '100%',
135-
backgroundColor: 'rgba(68, 62, 153, 0.3)',
136-
}}
137-
></div>
138-
139-
<div
140-
style={{
141-
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
142-
marginLeft: '2px',
143-
}}
144-
>
129+
style={{
130+
position: 'absolute',
131+
bottom: '-5px',
132+
width: '5px',
133+
height: '5px',
134+
borderRadius: '100%',
135+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
136+
}}
137+
></div>
138+
139+
<div
140+
style={{
141+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
142+
marginLeft: '2px',
143+
}}
144+
>
145145
<FlexBox.Row>
146146
<Box
147147
style={{ display: 'flex', alignItems: 'center' }}
@@ -205,49 +205,49 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
205205
</FlexBox.Row>
206206
</div>
207207
</Box>
208-
)}
209-
210-
<Box style={{ position: 'relative' }}>
211-
<div
212-
style={{
213-
position: 'absolute',
214-
bottom: '-5px',
215-
width: '5px',
216-
height: '5px',
217-
borderRadius: '100%',
218-
backgroundColor: 'rgba(68, 62, 153, 0.3)',
219-
}}
220-
></div>
221-
222-
<div
223-
style={{
224-
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
225-
marginLeft: '2px',
226-
}}
227-
>
228-
{Object.entries(elementSchema).map(([key, value], index) => (
229-
<FlexBox.Row>
230-
<Box
231-
style={{ display: 'flex', alignItems: 'center' }}
232-
marginTop="sm"
233-
>
234-
<div
235-
style={{
236-
marginTop: '30px',
237-
width: '35px',
238-
borderTop: '1px solid rgba(68, 62, 153, 0.3)',
239-
}}
240-
></div>
241-
<div
242-
style={{
243-
marginTop: '30px',
244-
marginRight: '5px',
245-
marginLeft: '-2px',
246-
color: 'rgba(68, 62, 153, 0.3)',
247-
}}
248-
>
249-
&#x27A4;
250-
</div>
208+
)}
209+
210+
<Box style={{ position: 'relative' }}>
211+
<div
212+
style={{
213+
position: 'absolute',
214+
bottom: '-5px',
215+
width: '5px',
216+
height: '5px',
217+
borderRadius: '100%',
218+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
219+
}}
220+
></div>
221+
222+
<div
223+
style={{
224+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
225+
marginLeft: '2px',
226+
}}
227+
>
228+
{Object.entries(elementSchema).map(([key, value], index) => (
229+
<FlexBox.Row>
230+
<Box
231+
style={{ display: 'flex', alignItems: 'center' }}
232+
marginTop="sm"
233+
>
234+
<div
235+
style={{
236+
marginTop: '30px',
237+
width: '35px',
238+
borderTop: '1px solid rgba(68, 62, 153, 0.3)',
239+
}}
240+
></div>
241+
<div
242+
style={{
243+
marginTop: '30px',
244+
marginRight: '5px',
245+
marginLeft: '-2px',
246+
color: 'rgba(68, 62, 153, 0.3)',
247+
}}
248+
>
249+
&#x27A4;
250+
</div>
251251

252252
<EditField
253253
disabled
@@ -301,22 +301,22 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
301301

302302
<Box style={{ position: 'relative' }}>
303303
<div
304-
style={{
305-
position: 'absolute',
306-
bottom: '10px',
307-
width: '5px',
308-
height: '5px',
309-
borderRadius: '100%',
310-
backgroundColor: 'rgba(68, 62, 153, 0.3)',
311-
}}
312-
></div>
313-
314-
<div
315-
style={{
316-
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
317-
marginLeft: '2px',
318-
}}
319-
>
304+
style={{
305+
position: 'absolute',
306+
bottom: '10px',
307+
width: '5px',
308+
height: '5px',
309+
borderRadius: '100%',
310+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
311+
}}
312+
></div>
313+
314+
<div
315+
style={{
316+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
317+
marginLeft: '2px',
318+
}}
319+
>
320320
{mappedObject &&
321321
mappedObject[elementName]?.map((item: any, index: any) => (
322322
<Fragment key={index}>

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

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

7575
return (
7676
<FlexBox.Column marginLeft="xl">
77-
<Box marginTop="lg" style={{ width: '329px' }}>
77+
<Box marginTop="lg" style={{ width: '417px' }}>
7878
<FormTextField
7979
label={'Secret name'}
8080
labelColor="rgba(66, 66, 64, 0.5)"
8181
placeholder={'Ex.John Doe'}
8282
value={secret?.name}
8383
disabled
8484
onChange={() => {}}
85-
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
85+
style={{
86+
background: 'rgb(233, 234, 236)',
87+
border: 'none',
88+
borderRadius: '4px',
89+
}}
8690
/>
8791
</Box>
88-
<Box marginTop="lg" style={{ width: '329px' }}>
92+
<Box marginTop="lg" style={{ width: '417px' }}>
8993
<FormDropdownField
9094
label={'Scope'}
9195
labelColor="rgba(66, 66, 64, 0.5)"
@@ -96,16 +100,16 @@ export const Configuration: React.FC<{
96100
options={[] as any}
97101
style={{
98102
paddingLeft: '10px',
99-
backgroundColor: 'rgba(168, 168, 168, 0.1)',
103+
background: 'rgba(233, 234, 236, 0.5)',
100104
color: '#a1a4ab',
101-
border: '1px solid #c9cbd0',
102-
borderRadius: '4px',
105+
border: 'none',
106+
borderRadius: '4px',
103107
}}
104108
/>
105109
</Box>
106110

107111
<Box marginTop="md">
108-
<SelectorDisabled inputFields={secret.values} width="329px" />
112+
<SelectorDisabled inputFields={secret.values} width="417px" />
109113
</Box>
110114

111115
<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: '329px' }}>
137+
<Box style={{ width: '417px' }}>
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: '329px' }} marginLeft="md">
149+
<Box style={{ width: '417px' }} marginLeft="md">
150150
<FormPasswordField
151151
onChange={(event: any) =>
152152
handleInputChange(index, event, 'value')

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
3434
value={item[0]}
3535
disabled
3636
placeholder={''}
37-
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
37+
style={{
38+
background: 'rgb(233, 234, 236)',
39+
border: 'none',
40+
borderRadius: '4px',
41+
}}
3842
/>
3943
</Box>
4044
{console.log(item, 'itemitem')}
@@ -48,7 +52,11 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
4852
placeholder={''}
4953
error={{}}
5054
showPasswordOption
51-
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
55+
style={{
56+
background: 'rgb(233, 234, 236)',
57+
border: 'none',
58+
borderRadius: '4px',
59+
}}
5260
/>
5361
</Box>
5462
</Box>

‎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: '329px' }}>
221+
<Box marginTop="lg" style={{ width: '417px' }}>
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: '329px' }}>
233+
<Box marginTop="lg" style={{ width: '417px' }}>
234234
<FormDropdownField
235235
label={'Scope'}
236236
labelColor="rgba(66, 66, 64, 0.5)"

0 commit comments

Comments
 (0)