Added color textfield styles

src/app/components/gradient/custom_gradient_menu.tsx

@@ -12,7 +12,7 @@ import {
 } from "../../../core";
 import { ColorPicker, colorToCSS } from "../fluentui_color_picker";
 import { Callout, DefaultButton, TextField } from "@fluentui/react";
-import { ColorCell, ColorRowWrapper, deleteColorStyles } from "./styles";
+import { ColorCell, ColorRowWrapper, colorTextInputStyles, deleteColorStyles } from "./styles";
 import { GradientView } from "./gradient_palettes";
 import { CustomGradientButtons } from "./custom_gradient_buttons";
 
@@ -86,15 +86,7 @@ export class CustomGradientMenu extends React.Component<
                       }
                     }}
                     underlined
-                    styles={{
-                      root: {
-                        display: "inline-block",
-                        height: "unset",
-                      },
-                      fieldGroup: {
-                        height: "unset",
-                      },
-                    }}
+                    styles={colorTextInputStyles}
                   />
                   <DefaultButton
                     iconProps={{

src/app/components/gradient/styles.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 
-import { IButtonStyles, IDropdownStyles, ILabelStyles } from "@fluentui/react";
+import { IButtonStyles, IDropdownStyles, ILabelStyles, ITextFieldStyles } from "@fluentui/react";
 import styled from "styled-components";
 
 export const defaultActionButtonsStyles: IButtonStyles = {
@@ -49,6 +49,18 @@ export const dropdownStyles: Partial<IDropdownStyles> = {
   },
 };
 
+export const colorTextInputStyles: Partial<ITextFieldStyles> = {
+  root: {
+    display: "inline-block",
+    height: "unset",
+    marginLeft: 5,
+    marginRight: 5,
+  },
+  fieldGroup: {
+    height: "unset",
+  },
+};
+
 export const PalettesWrapper = styled.div`
   cursor: pointer;