UI fixes

Author: AhsanKhan7

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

@@ -74,18 +74,22 @@ export const Configuration: React.FC<{
 
   return (
     <FlexBox.Column marginLeft="xl">
-      <Box marginTop="lg" style={{ width: '329px' }}>
+      <Box marginTop="lg" style={{ width: '417px' }}>
         <FormTextField
           label={'Secret name'}
           labelColor="rgba(66, 66, 64, 0.5)"
           placeholder={'Ex.John Doe'}
           value={secret?.name}
           disabled
           onChange={() => {}}
-          style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
+          style={{
+            background: 'rgb(233, 234, 236)',
+            border: 'none',
+            borderRadius: '4px',
+          }}
         />
       </Box>
-      <Box marginTop="lg" style={{ width: '329px' }}>
+      <Box marginTop="lg" style={{ width: '417px' }}>
         <FormDropdownField
           label={'Scope'}
           labelColor="rgba(66, 66, 64, 0.5)"
@@ -96,16 +100,16 @@ export const Configuration: React.FC<{
           options={[] as any}
           style={{
             paddingLeft: '10px',
-            backgroundColor: 'rgba(168, 168, 168, 0.1)',
+            background: 'rgba(233, 234, 236, 0.5)',
             color: '#a1a4ab',
-            border: '1px solid #c9cbd0', 
-            borderRadius: '4px', 
+            border: 'none',
+            borderRadius: '4px',
           }}
         />
       </Box>
 
       <Box marginTop="md">
-        <SelectorDisabled inputFields={secret.values} width="329px" />
+        <SelectorDisabled inputFields={secret.values} width="417px" />
       </Box>
 
       <FlexBox

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

@@ -134,7 +134,7 @@ const Selector: React.FC<Props> = ({
           {console.log()}
           {inputFields?.map((item: any, index: any) => (
             <Box key={index} marginTop="md" style={{ display: 'flex' }}>
-              <Box style={{ width: '329px' }}>
+              <Box style={{ width: '417px' }}>
                 <FormTextField
                   onChange={(event: any) =>
                     handleInputChange(index, event, 'key')
@@ -146,7 +146,7 @@ const Selector: React.FC<Props> = ({
                 />
               </Box>
 
-              <Box style={{ width: '329px' }} marginLeft="md">
+              <Box style={{ width: '417px' }} marginLeft="md">
                 <FormPasswordField
                   onChange={(event: any) =>
                     handleInputChange(index, event, 'value')

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

@@ -34,7 +34,11 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
                   value={item[0]}
                   disabled
                   placeholder={''}
-                  style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
+                  style={{
+                    background: 'rgb(233, 234, 236)',
+                    border: 'none',
+                    borderRadius: '4px',
+                  }}
                 />
               </Box>
               {console.log(item, 'itemitem')}
@@ -48,7 +52,11 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
                   placeholder={''}
                   error={{}}
                   showPasswordOption
-                  style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
+                  style={{
+                    background: 'rgb(233, 234, 236)',
+                    border: 'none',
+                    borderRadius: '4px',
+                  }}
                 />
               </Box>
             </Box>

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

@@ -218,7 +218,7 @@ export const UpdateConfig: React.FC<{
   }
   return (
     <FlexBox.Column marginLeft="xl">
-      <Box marginTop="lg" style={{ width: '329px' }}>
+      <Box marginTop="lg" style={{ width: '417px' }}>
         <FormTextField
           label={'Secret name'}
           labelColor="rgba(66, 66, 64, 0.5)"
@@ -230,7 +230,7 @@ export const UpdateConfig: React.FC<{
           }}
         />
       </Box>
-      <Box marginTop="lg" style={{ width: '329px' }}>
+      <Box marginTop="lg" style={{ width: '417px' }}>
         <FormDropdownField
           label={'Scope'}
           labelColor="rgba(66, 66, 64, 0.5)"