Changed help icon position next to label (#119)

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -19,7 +19,7 @@ import Grid from "@material-ui/core/Grid";
 import get from "lodash/get";
 import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
 import { InputLabel, Tooltip } from "@material-ui/core";
-import { fieldBasic } from "../common/styleLibrary";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 import HelpIcon from "@material-ui/icons/Help";
 
 interface ICSVMultiSelector {
@@ -34,18 +34,17 @@ interface ICSVMultiSelector {
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
+    ...tooltipHelper,
     inputLabel: {
       ...fieldBasic.inputLabel,
-      marginBottom: 10,
-      width: 122
+      width: 116
     },
     inputContainer: {
       height: 150,
       overflowY: "auto",
       padding: 15,
       position: "relative",
-      border: "1px solid #c4c4c4",
-      marginBottom: 10
+      border: "1px solid #c4c4c4"
     },
     labelContainer: {
       display: "flex"
@@ -130,18 +129,20 @@ const CSVMultiSelector = ({
   return (
     <React.Fragment>
       <Grid item xs={12} className={classes.fieldContainer}>
-        <InputLabel className={classes.inputLabel}>{label}</InputLabel>
+        <InputLabel className={classes.inputLabel}>
+          <span>{label}</span>
+          {tooltip !== "" && (
+            <div className={classes.tooltipContainer}>
+              <Tooltip title={tooltip} placement="top-start">
+                <HelpIcon className={classes.tooltip} />
+              </Tooltip>
+            </div>
+          )}
+        </InputLabel>
         <Grid item xs={12} className={classes.inputContainer}>
           {inputs}
           <div ref={bottomList} />
         </Grid>
-        {tooltip !== "" && (
-          <div className={classes.tooltipContainer}>
-            <Tooltip title={tooltip} placement="left">
-              <HelpIcon />
-            </Tooltip>
-          </div>
-        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

@@ -28,7 +28,7 @@ import {
   Theme,
   withStyles
 } from "@material-ui/core/styles";
-import { fieldBasic } from "../common/styleLibrary";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 import HelpIcon from "@material-ui/icons/Help";
 
 interface InputBoxProps {
@@ -49,6 +49,7 @@ interface InputBoxProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
+    ...tooltipHelper,
     textBoxContainer: {
       flexGrow: 1
     }
@@ -98,9 +99,17 @@ const InputBoxWrapper = ({
       <Grid item xs={12} className={classes.fieldContainer}>
         {label !== "" && (
           <InputLabel htmlFor={id} className={classes.inputLabel}>
-            {label}
+            <span>{label}</span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <HelpIcon className={classes.tooltip} />
+                </Tooltip>
+              </div>
+            )}
           </InputLabel>
         )}
+
         <div className={classes.textBoxContainer}>
           <InputField
             className={classes.boxDesign}
@@ -117,13 +126,6 @@ const InputBoxWrapper = ({
             inputProps={{ "data-index": index }}
           />
         </div>
-        {tooltip !== "" && (
-          <div className={classes.tooltipContainer}>
-            <Tooltip title={tooltip} placement="left">
-              <HelpIcon />
-            </Tooltip>
-          </div>
-        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx

@@ -25,7 +25,7 @@ import {
   withStyles,
   makeStyles
 } from "@material-ui/core/styles";
-import { fieldBasic } from "../common/styleLibrary";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 import HelpIcon from "@material-ui/icons/Help";
 
 export interface SelectorTypes {
@@ -48,6 +48,7 @@ interface RadioGroupProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
+    ...tooltipHelper,
     radioBoxContainer: {
       flexGrow: 1
     }
@@ -116,8 +117,16 @@ export const RadioGroupSelector = ({
     <React.Fragment>
       <Grid item xs={12} className={classes.fieldContainer}>
         <InputLabel htmlFor={id} className={classes.inputLabel}>
-          {label}
+          <span>{label}</span>
+          {tooltip !== "" && (
+            <div className={classes.tooltipContainer}>
+              <Tooltip title={tooltip} placement="top-start">
+                <HelpIcon className={classes.tooltip} />
+              </Tooltip>
+            </div>
+          )}
         </InputLabel>
+
         <div className={classes.radioBoxContainer}>
           <RadioGroup
             aria-label={id}
@@ -139,13 +148,6 @@ export const RadioGroupSelector = ({
             })}
           </RadioGroup>
         </div>
-        {tooltip !== "" && (
-          <div>
-            <Tooltip title={tooltip} placement="left">
-              <HelpIcon />
-            </Tooltip>
-          </div>
-        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx

@@ -20,10 +20,12 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  InputBase
+  InputBase,
+  Tooltip
 } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { fieldBasic } from "../common/styleLibrary";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import HelpIcon from "@material-ui/icons/Help";
 
 interface selectorTypes {
   label: string;
@@ -36,6 +38,7 @@ interface SelectProps {
   label: string;
   id: string;
   name: string;
+  tooltip?: string;
   onChange: (
     e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
   ) => void;
@@ -45,6 +48,7 @@ interface SelectProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
+    ...tooltipHelper,
     inputLabel: {
       ...fieldBasic.inputLabel,
       width: 116
@@ -82,13 +86,21 @@ const SelectWrapper = ({
   onChange,
   options,
   label,
+  tooltip = "",
   value
 }: SelectProps) => {
   return (
     <React.Fragment>
       <Grid item xs={12} className={classes.fieldContainer}>
         <InputLabel htmlFor={id} className={classes.inputLabel}>
-          {label}
+          <span>{label}</span>
+          {tooltip !== "" && (
+            <div className={classes.tooltipContainer}>
+              <Tooltip title={tooltip} placement="top-start">
+                <HelpIcon className={classes.tooltip} />
+              </Tooltip>
+            </div>
+          )}
         </InputLabel>
         <FormControl variant="outlined" fullWidth>
           <Select

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -19,13 +19,19 @@
 export const fieldBasic = {
   inputLabel: {
     fontWeight: 500,
-    marginRight: 16,
+    marginRight: 10,
     width: 100,
     fontSize: 14,
     color: "#393939",
     textAlign: "right" as const,
+    display: "flex",
     textOverflow: "ellipsis",
-    overflow: "hidden"
+    overflow: "hidden",
+    justifyContent: "flex-end",
+    "& span": {
+      display: "flex",
+      alignItems: "center"
+    }
   },
   fieldContainer: {
     display: "flex",
@@ -33,7 +39,9 @@ export const fieldBasic = {
     marginBottom: 10
   },
   tooltipContainer: {
-    marginLeft: 5
+    marginLeft: 5,
+    display: "flex",
+    alignItems: "center"
   }
 };
 
@@ -47,3 +55,9 @@ export const modalBasic = {
     marginLeft: 0
   }
 };
+
+export const tooltipHelper = {
+  tooltip: {
+    fontSize: 18
+  }
+};