Fix margins around renamed list items (#1976)

* Fix css in list and textfield

When renaming in an list:
- Fix padding because text was cropped
- Fix z index because text was behind the bottom border
- Remove speelcheck (useful for remove the red wave under a word in the webapp)

* Remove z-index, increase padding bottom

* Align text in textfield with near text

* Factor resourcesSelector styling

* Make typing of ResourceSelector styling stricter

Co-authored-by: Florian Rival <Florian.rival@gmail.com>

newIDE/app/src/ObjectEditor/Editors/TextEditor.js

@@ -22,6 +22,7 @@ const styles = {
     width: 90,
     ...toolbarItemStyle,
   },
+  resourcesSelector: { alignSelf: 'center' },
   toolbarItem: toolbarItemStyle,
   checkbox: toolbarItemStyle,
 };
@@ -108,6 +109,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               this.forceUpdate();
             }}
             hintText={<Trans>Choose a font</Trans>}
+            style={styles.resourcesSelector}
           />
         </MiniToolbar>
         <Line noMargin>

newIDE/app/src/ResourcesList/ResourceSelector.js

@@ -37,6 +37,7 @@ type Props = {|
   helperMarkdownText?: ?string,
   hintText?: MessageDescriptor,
   margin?: 'none' | 'dense',
+  style?: {| alignSelf?: 'center' |},
 |};
 
 type State = {|
@@ -263,6 +264,7 @@ export default class ResourceSelector extends React.Component<Props, State> {
         margin={this.props.margin}
         renderTextField={() => (
           <SemiControlledAutoComplete
+            style={this.props.style}
             floatingLabelText={this.props.floatingLabelText}
             helperMarkdownText={this.props.helperMarkdownText}
             hintText={this.props.hintText}

newIDE/app/src/UI/SemiControlledAutoComplete.js

@@ -45,6 +45,7 @@ type Props = {|
   margin?: 'none' | 'dense',
   textFieldStyle?: Object,
   openOnFocus?: boolean,
+  style?: Object,
 |};
 
 export type SemiControlledAutoCompleteInterface = {|
@@ -231,7 +232,10 @@ export default React.forwardRef<Props, SemiControlledAutoCompleteInterface>(
               }
             }}
             open={isMenuOpen}
-            style={styles.container}
+            style={{
+              ...props.style,
+              ...styles.container,
+            }}
             inputValue={currentInputValue}
             value={currentInputValue}
             onInputChange={handleInputChange}

newIDE/app/src/UI/TextField.js

@@ -255,6 +255,7 @@ export default class TextField extends React.Component<Props, {||}> {
             onFocus={props.onFocus}
             onBlur={props.onBlur}
             inputRef={this._input}
+            spellCheck="false"
           />
         )}
       </I18n>

newIDE/app/src/UI/Theme/DarkTheme/index.js

@@ -136,6 +136,10 @@ const muiTheme = createMuiTheme({
       },
     },
     MuiInput: {
+      input: {
+        padding: 0,
+        paddingBottom: 3,
+      },
       underline: {
         '&:before': {
           borderBottom: `1px solid #444444`,

newIDE/app/src/UI/Theme/DefaultTheme/index.js

@@ -125,6 +125,10 @@ const muiTheme = createMuiTheme({
       },
     },
     MuiInput: {
+      input: {
+        padding: 0,
+        paddingBottom: 3,
+      },
       underline: {
         '&:before': {
           borderBottom: `1px solid #BBBBBB`,

newIDE/app/src/UI/Theme/NordTheme/index.js

@@ -150,6 +150,10 @@ const muiTheme = createMuiTheme({
       },
     },
     MuiInput: {
+      input: {
+        padding: 0,
+        paddingBottom: 3,
+      },
       underline: {
         '&:before': {
           borderBottom: `1px solid ##D8DEE9`,

newIDE/app/src/UI/Theme/SolarizedDarkTheme/index.js

@@ -135,6 +135,10 @@ const muiTheme = createMuiTheme({
       },
     },
     MuiInput: {
+      input: {
+        padding: 0,
+        paddingBottom: 3,
+      },
       underline: {
         '&:before': {
           borderBottom: `1px solid #444444`,