VUU-17: Add styling for input text

ScottLogic · Sep 6, 2023 · cb3c13b · cb3c13b
1 parent 3095bc4
commit cb3c13b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/NunitoSans-Regular.ttf b/vuu-ui/packages/vuu-shell/src/layout-management/NunitoSans-Regular.ttf
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
@@ -10,6 +10,29 @@
   font-family: Nunito Sans;
 }
 
+@font-face {
+  font-family: 'Nunito Sans';
+  src:
+      url('NunitoSans-Regular.ttf') 
+      format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.saveLayoutPanel-inputText {
+  color: var(--light-text-secondary, #606477);
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-family: Nunito Sans;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  border: none;
+  padding-left: 4px;
+  width: 100%;
+  outline: none;
+}
+
 .saveLayoutPanel-panelContainer {
   display: flex;
   padding: 16px;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -62,6 +62,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
               allowFreeText={true}
               InputProps={{
                 inputProps: {
+                  className: `${classBase}-inputText`,
                   placeholder: "Select Group or Enter New Name",
                   onChange: (event: ChangeEvent<HTMLInputElement>) => setGroup(event.target.value),
                 },
@@ -73,7 +74,10 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
           <FormField className={formField}>
             <FormFieldLabel style={{fontWeight: 400}}>Layout Name</FormFieldLabel>
             <Input
-              inputProps={{ placeholder: "Enter Layout Name" }}
+              inputProps={{
+                className: `${classBase}-inputText`,
+                placeholder: "Enter Layout Name"
+              }}
               onChange={(event: ChangeEvent<HTMLInputElement>) => setLayoutName(event.target.value)}
               value={layoutName}
             />