Fix css

redhat-developer · Nov 24, 2022 · 23219fe · 23219fe
1 parent ded4fed
commit 23219fe
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 52 deletions.
diff --git a/src/webview/bundle/Form.tsx b/src/webview/bundle/Form.tsx
@@ -4,7 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 
 
-import { Button, Paper, Typography } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import { useForm } from 'react-hook-form';
 import { FormInputText } from './form-components/FormInputText';
 import * as React from 'react';
@@ -60,51 +60,27 @@ export function Form () {
   }
 
   return (
-    <div 
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        // Change the size to fit the parent element of this div
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <Paper
-        style={{
-          display: 'grid',
-          gridRowGap: '20px',
-          padding: '20px',
-          margin: '76px 300px',
-          border: '1px solid var(--vscode-settings-focusedRowBorder)',
-          background: 'var(--vscode-editor-background)'
-          // position: 'absolute'
-        }}
+    <div className='mainContainer margin' >
+      <div className='title'>
+        <Typography variant="h5" > Create Bundle</Typography>
+      </div>
+      <div className='subTitle'>
+        <Typography>This workflow will help to create a bundle and push it to remote registry.</Typography>
+      </div>
+      <FormInputText label={inputLabel.image} setValue={setImage} placeHolder={'Use the schema registry/repository/image:version'} fieldType={'text'}/>
+      <FormInputText label={inputLabel.userName} setValue={setUserName} placeHolder={'Provide username (optional if credentials are stored)'} fieldType={'text'}/>
+      <FormInputText label={inputLabel.password} setValue={setPassword} placeHolder={'Provide password (optional if credentials are stored)'} fieldType={'password'}/>
+      <LimitTags setValue={setResource} getValue={resource}/>
+      <Button
+        onClick={handleSubmit(onSubmit)}
+        className={classes.button}
+        variant={'contained'}
+        disabled={validateButton(image, username, password, resource)}
+        style={{ backgroundColor: '#EE0000', textTransform: 'none', color: 'white', width: 200, left: '4px' }}
       >
-        <Typography variant="h6" style={{
-          fontSize: '1.25rem',
-          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-          fontWeight: '500',
-          lineHeight: '1.6',
-          letterSpacing: '0.0075em',
-          color: 'var(--vscode-foreground)'
-        }}> Create Bundle</Typography>
-        <FormInputText label={inputLabel.image} setValue={setImage} placeHolder={'Use the schema registry/repository/image:version'} fieldType={'text'}/>
-        <FormInputText label={inputLabel.userName} setValue={setUserName} placeHolder={'Provide username (optional if credentials are stored)'} fieldType={'text'}/>
-        <FormInputText label={inputLabel.password} setValue={setPassword} placeHolder={'Provide password (optional if credentials are stored)'} fieldType={'password'}/>
-        <LimitTags setValue={setResource} getValue={resource}/>
-        <Button
-          onClick={handleSubmit(onSubmit)}
-          className={classes.button}
-          variant={'contained'}
-          disabled={validateButton(image, username, password, resource)}
-          style={{ backgroundColor: '#EE0000', textTransform: 'none', color: 'white', width: 200, left: '158px' }}
-        >
-          {' '}
+        {' '}
           Submit{' '}
-        </Button>
-      </Paper>
+      </Button>
     </div>
   );
 }
diff --git a/src/webview/bundle/form-components/FormInputText.tsx b/src/webview/bundle/form-components/FormInputText.tsx
@@ -54,7 +54,7 @@ export function FormInputText({label, setValue, placeHolder, fieldType }: FormIn
             return setValue(text.target.value.trim());
           }
         }}
-        style={{ width: '100%', paddingTop: '10px' }}
+        style={{ width: '40%', paddingTop: '10px', paddingBottom: '10px' }}
       />
     </div>
   );

diff --git a/src/webview/bundle/form-components/SelectAllTransferList.tsx b/src/webview/bundle/form-components/SelectAllTransferList.tsx
@@ -47,9 +47,7 @@ const StyledPopper = styled(Popper)(({ theme }) => ({
   '& .MuiAutocomplete-paper': {
     backgroundColor: 'var(--vscode-dropdown-background)',
     color: 'var(--vscode-foreground)',
-    transform: 'translate(-1px, 1px)',
-    width: '500px',
-    position: 'absolute',
+    transform: 'translate(1px, -1px)',
   }
 }));
 
@@ -77,7 +75,7 @@ export function LimitTags({ setValue, getValue }: FormInputProps) {
         }}>
         Tekton Resources
       </InputLabel>
-      <div style={{ paddingTop: '10px' }}>
+      <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
         <Autocomplete
           PopperComponent={StyledPopper}
           disableCloseOnSelect
@@ -89,7 +87,7 @@ export function LimitTags({ setValue, getValue }: FormInputProps) {
             fontFamily: 'var(--vscode-editor-font-family)',
             color: 'var(--vscode-settings-textInputForeground)',
             backgroundColor: 'var(--vscode-settings-textInputBackground)',
-            width: 500,
+            width: '40%',
             borderRadius: '4px'
           }}
           id="checkboxes-tags-demo"

diff --git a/src/webview/bundle/form-components/customChip.tsx b/src/webview/bundle/form-components/customChip.tsx
@@ -22,7 +22,7 @@ export const MyChip = (props) => {
     <Chip
       classes={{
         label: classes.label
-      }} 
+      }}
       size="small"
       {...props}
     />

diff --git a/src/webview/bundle/style.scss b/src/webview/bundle/style.scss
@@ -9,4 +9,33 @@
     }
 
     text-transform: none;
-  }
+}
+
+.mainContainer,
+.formContainer,
+.form {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--vscode-font-family);
+    // overflow-y: scroll;
+}
+
+.margin {
+    margin: 3rem;
+}
+
+.title {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.subTitle {
+    margin-bottom: 2rem;
+    max-width: 59rem;
+    justify-content: center;
+    word-spacing: 5px;
+    text-align: justify;
+    color: var(--vscode-foreground);
+    font-weight: normal;
+    font-size: 14px;
+}