Fix UI css

redhat-developer · Nov 18, 2022 · a517485 · a517485
1 parent 90aa452
commit a517485
Show file tree

Hide file tree

Showing 10 changed files with 2,877 additions and 335 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1032,6 +1032,7 @@
     "proxyquire": "^2.1.0",
     "remap-istanbul": "^0.13.0",
     "rimraf": "^3.0.2",
+    "sass-loader": "^13.0.2",
     "simple-svg-tools": "^1.1.12",
     "sinon": "^7.3.2",
     "sinon-chai": "^3.7.0",
@@ -1074,6 +1075,7 @@
     "lodash": "^4.17.21",
     "mkdirp": "^0.5.1",
     "node-cache": "^5.1.2",
+    "node-sass": "^8.0.0",
     "node-yaml-parser": "0.0.9",
     "pluralize": "^4.0.0",
     "react": "^17.0.2",

diff --git a/src/webview/bundle/Form.tsx b/src/webview/bundle/Form.tsx
@@ -12,6 +12,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { LimitTags } from './form-components/SelectAllTransferList';
 import { vscode } from './index';
 import bundleStyle from './bundle.style';
+import './style.scss';
 
 interface IFormInput {
   textValue: string;
@@ -89,19 +90,16 @@ export function Form () {
           letterSpacing: '0.0075em',
           color: 'var(--vscode-foreground)'
         }}> Create Bundle</Typography>
-        <FormInputText label={inputLabel.image} setValue={setImage} placeHolder={'Use the schema registry/repository/image:version'} requiredField={true} fieldType={'text'}/>
-        <FormInputText label={inputLabel.userName} setValue={setUserName} placeHolder={'Provide username (optional if credentials are stored)'} requiredField={false} fieldType={'text'}/>
-        <FormInputText label={inputLabel.password} setValue={setPassword} placeHolder={'Provide password (optional if credentials are stored)'} requiredField={false} fieldType={'password'}/>
+        <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={{
-            width: 200,
-            left: '158px'
-          }}
+          style={{ backgroundColor: '#EE0000', textTransform: 'none', color: 'white', width: 200, left: '158px' }}
         >
           {' '}
           Submit{' '}

diff --git a/src/webview/bundle/bundle.style.tsx b/src/webview/bundle/bundle.style.tsx
@@ -3,11 +3,6 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 
-/*-----------------------------------------------------------------------------------------------
- *  Copyright (c) Red Hat, Inc. All rights reserved.
- *  Licensed under the MIT License. See LICENSE file in the project root for license information.
- *-----------------------------------------------------------------------------------------------*/
-
 import { Theme, createStyles } from '@material-ui/core/styles';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-unused-vars
@@ -19,26 +14,19 @@ export default (theme: Theme) =>
       },
     },
     button: {
-      whiteSpace: 'nowrap',
-      display: 'inline-block',
-      backgroundColor: 'var(--vscode-button-background)',
-      background: 'var(--vscode-button-background)',
+      textAlign: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       color: 'var(--vscode-button-foreground)',
-      border: '1px solid var(--vscode-activityBar-border)',
       '&:hover' :{
-        color: 'var(--vscode-button-foreground)',
-        backgroundColor: 'var(--vscode-button-hoverBackground)',
-        cursor: 'pointer',
+        backgroundColor: '\'#BE0000\' !important',
       },
       '&:focus': {
-        backgroundColor: 'var(--vscode-button-hoverBackground)',
-        cursor: 'pointer',
+        backgroundColor: '\'#BE0000\' !important',
       },
       '&:disabled' :{
-        color: 'var(--vscode-disabledForeground)',
         opacity: '0.6',
-        border: '1px solid',
-        background: 'var(--vscode-button-background)',
+        background: '\'#BE0000\' !important',
       },
     },
     inputLabel: {

diff --git a/src/webview/bundle/form-components/FormInputText.tsx b/src/webview/bundle/form-components/FormInputText.tsx
@@ -4,69 +4,43 @@
  *-----------------------------------------------------------------------------------------------*/
 
 import * as React from 'react';
-import TextField from '@material-ui/core/TextField';
 import { FormInputProps } from './FormInputProps';
-import { createTheme, makeStyles, MuiThemeProvider } from '@material-ui/core/styles';
-import bundleStyle from '../bundle.style';
+import { InputLabel, TextField } from '@mui/material';
 import { inputLabel } from '../Form';
 
-const useStyles = makeStyles(bundleStyle);
-
-export const theme = createTheme({
-  overrides: {
-    MuiFormLabel: {
-      root: {
-        '&$focused': {
-          color: 'var(--vscode-keybindingLabel-foreground)'
-        }
-      }
-    },
-    MuiOutlinedInput: {
-      input: {
-        color: 'var(--vscode-foreground)',
-      },
-      root: {
-        borderRadius: '2px',
-        '& $notchedOutline': {
-          // background: 'var(--vscode-input-background)',
-          borderColor: 'var(--vscode-contrastBorder)'
-        },
-        '&:hover $notchedOutline': {
-          borderColor: 'var(--vscode-contrastBorder)'
-        },
-        '&$focused $notchedOutline': {
-          borderColor: 'var(--vscode-focusBorder)'
-        }
-      }
-    },
-    MuiInputLabel: {
-      outlined: {
-        color: 'var(--vscode-disabledForeground)',
-      }
-    },
-    MuiFormControl: {
-      fullWidth: {
-        background: 'var(--vscode-input-background)'
-      }
-    }
-  }
-});
-
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function FormInputText({label, setValue, placeHolder, requiredField, fieldType }: FormInputProps) {
-  const classes = useStyles();
+export function FormInputText({label, setValue, placeHolder, fieldType }: FormInputProps) {
   return (
-    <MuiThemeProvider theme={theme}>
+    <div>
+      <InputLabel htmlFor='bootstrap-input'
+        style={{
+          color: 'var(--vscode-settings-textInputForeground)'
+        }}>
+        {label}
+      </InputLabel>
       <TextField
-        InputLabelProps={{
-          classes: {
-            root: classes.inputLabel,
-            focused: 'focused',
-            shrink: 'shrink'
+        id='bootstrap-input'
+        size='small'
+        sx={{
+          '& .MuiOutlinedInput-root': {
+            '& > fieldset': { borderColor: 'var(--vscode-contrastBorder)' },
+          },
+          '& .MuiOutlinedInput-root:hover': {
+            '& > fieldset': {
+              borderColor: 'var(--vscode-contrastBorder)'
+            }
+          }, 
+          '& .MuiOutlinedInput-root.Mui-focused': {
+            '& > fieldset': {
+              borderColor: 'var(--vscode-contrastBorder)'
+            }
+          },
+          input: {
+            color: 'var(--vscode-settings-textInputForeground)',
+            backgroundColor: 'var(--vscode-settings-textInputBackground)',
+            borderRadius: '4px'
           }
         }}
-        fullWidth
-        required={requiredField}
         type={fieldType}
         placeholder={placeHolder}
         onChange={(text) => {
@@ -80,9 +54,8 @@ export function FormInputText({label, setValue, placeHolder, requiredField, fiel
             return setValue(text.target.value.trim());
           }
         }}
-        label={label}
-        variant="outlined"
+        style={{ width: '100%', paddingTop: '10px' }}
       />
-    </MuiThemeProvider>
+    </div>
   );
 }
diff --git a/src/webview/bundle/form-components/SelectAllTransferList.tsx b/src/webview/bundle/form-components/SelectAllTransferList.tsx
@@ -6,7 +6,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import * as React from 'react';
-import TextField from '@mui/material/TextField';
 import { vscode } from '../index';
 import { FormInputProps } from './FormInputProps';
 import Box from '@mui/material/Box';
@@ -15,21 +14,27 @@ import styled from '@emotion/styled';
 import Popper from '@mui/material/Popper';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import { MyChip } from './customChip';
+import { InputLabel, TextField } from '@mui/material';
+import '../index.css';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     borderRadius: '2px',
-    '& .MuiInputLabel-outlined.MuiInputLabel-shrink': {
-      color: 'var(--vscode-keybindingLabel-foreground)'
-    },
-    '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'var(--vscode-contrastBorder)',
-    },
-    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: 'var(--vscode-focusBorder)',
+    '& .MuiOutlinedInput-root': {
+      '& > fieldset': { borderColor: 'var(--vscode-contrastBorder)' },
     },
+    '& .MuiOutlinedInput-root:hover': {
+      '& > fieldset': {
+        borderColor: 'var(--vscode-contrastBorder)'
+      }
+    }, 
+    '& .MuiOutlinedInput-root.Mui-focused': {
+      '& > fieldset': {
+        borderColor: 'var(--vscode-contrastBorder)'
+      }
+    }, 
     '.css-1gywuxd-MuiInputBase-root-MuiOutlinedInput-root': {
-      borderColor: 'var(--vscode-focusBorder)',
+      borderColor: 'var(--vscode-contrastBorder)',
     },
   },
 }));
@@ -42,6 +47,9 @@ const StyledPopper = styled(Popper)(({ theme }) => ({
   '& .MuiAutocomplete-paper': {
     backgroundColor: 'var(--vscode-dropdown-background)',
     color: 'var(--vscode-foreground)',
+    transform: 'translate(-1px, 1px)',
+    width: '500px',
+    position: 'absolute',
   }
 }));
 
@@ -62,61 +70,75 @@ export function LimitTags({ setValue, getValue }: FormInputProps) {
   });
 
   return (
-    <Autocomplete
-      PopperComponent={StyledPopper}
-      disableCloseOnSelect
-      filterSelectedOptions={ true }
-      classes={classes}
-      multiple
-      limitTags={2}
-      style={{
-        fontFamily: 'var(--vscode-editor-font-family)',
-        width: 500
-      }}
-      id="checkboxes-tags-demo"
-      options={options3}
-      groupBy={(option) => option.tektonType}
-      getOptionLabel={(option: { tektonType: string; name: string; }) => option.name}
-      getOptionDisabled={(options) => {
-        if (getValue.length === 10) {
-          return true;
-        }
-        return false;
-      }}
-      isOptionEqualToValue={(event, newValue) => {
-        return (event.name === newValue.name && event.tektonType === newValue.tektonType);
-      }}
-      renderOption={(props, option) => (
-        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
-          <img
-            loading="lazy"
-            width="30"
-            src={`https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/${imageResource[option.tektonType]}.png`}
-            srcSet={`https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/${imageResource[option.tektonType]}.png`}
-            alt=""
-          />
-          {option.name}
-        </Box>
-      )}
-      onChange={(event, newValue) => {
-        setValue(newValue);
-      }}
-      renderTags={(tagValue, getTagProps) => {
-        return tagValue.map((option, index) => (
-          <MyChip {...getTagProps({ index })} label={option.name} />
-        ));
-      }}
-      renderInput={(params) => (
-        <TextField
-          required
-          {...params}
-          variant="outlined"
-          label="Tekton Resources"
-          InputLabelProps={{
-            sx: { color: 'var(--vscode-disabledForeground)' }
+    <div>
+      <InputLabel htmlFor='bootstrap-input'
+        style={{
+          color: 'var(--vscode-settings-textInputForeground)'
+        }}>
+        Tekton Resources
+      </InputLabel>
+      <div style={{ paddingTop: '10px' }}>
+        <Autocomplete
+          PopperComponent={StyledPopper}
+          disableCloseOnSelect
+          filterSelectedOptions={ true }
+          classes={classes}
+          multiple
+          limitTags={2}
+          style={{
+            fontFamily: 'var(--vscode-editor-font-family)',
+            color: 'var(--vscode-settings-textInputForeground)',
+            backgroundColor: 'var(--vscode-settings-textInputBackground)',
+            width: 500,
+            borderRadius: '4px'
+          }}
+          id="checkboxes-tags-demo"
+          options={options3}
+          groupBy={(option) => option.tektonType}
+          getOptionLabel={(option: { tektonType: string; name: string; }) => option.name}
+          getOptionDisabled={(options) => {
+            if (getValue.length === 10) {
+              return true;
+            }
+            return false;
+          }}
+          isOptionEqualToValue={(event, newValue) => {
+            return (event.name === newValue.name && event.tektonType === newValue.tektonType);
+          }}
+          renderOption={(props, option) => (
+            <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
+              <img
+                loading="lazy"
+                width="30"
+                src={`https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/${imageResource[option.tektonType]}.png`}
+                srcSet={`https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/${imageResource[option.tektonType]}.png`}
+                alt=""
+              />
+              {option.name}
+            </Box>
+          )}
+          onChange={(event, newValue) => {
+            setValue(newValue);
+          }}
+          renderTags={(tagValue, getTagProps) => {
+            return tagValue.map((option, index) => (
+              <MyChip {...getTagProps({ index })} label={option.name} />
+            ));
           }}
+          size="small"
+          renderInput={(params) => (
+            <TextField
+              required
+              {...params}
+              variant="outlined"
+              style={{ width: '100%' }}
+              InputLabelProps={{
+                sx: { color: 'var(--vscode-disabledForeground)' }
+              }}
+            />
+          )}
         />
-      )}
-    />
+      </div>
+    </div>
   );
 }
diff --git a/src/webview/bundle/form-components/customChip.tsx b/src/webview/bundle/form-components/customChip.tsx
@@ -22,7 +22,8 @@ export const MyChip = (props) => {
     <Chip
       classes={{
         label: classes.label
-      }}
+      }} 
+      size="small"
       {...props}
     />
   );