Merge pull request #37 from ScottLogic/feature/layout-management/VUU1…

…7-dialogStyling VUU17: Save Layout Panel component styling
ScottLogic · Sep 7, 2023 · 737bed8 · 737bed8
2 parents f7ceec0 + 9dd148b
commit 737bed8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css
@@ -33,6 +33,7 @@
   align-items: flex-start;
   align-self: stretch;
   color: var(--light-text-primary, #15171B);
+  font-family: Nunito Sans Regular;
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 16px;
   font-weight: 600;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
@@ -7,7 +7,8 @@
   --saltInputLegacy-fontSize: 12px;
   --salt-text-label-fontSize: 10px;
   --saltFormFieldLegacy-label-paddingLeft: 0;
-  font-family: Nunito Sans;
+  --saltFormField-label-fontWeight: 400;
+  font-family: Nunito Sans Regular;
 }
 
 .saveLayoutPanel-panelContainer {
@@ -32,6 +33,24 @@
   gap: 16px;
 }
 
+.saveLayoutPanel-formField {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.saveLayoutPanel-inputText {
+  color: var(--light-text-secondary, #606477);
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  border: none;
+  padding-left: 4px;
+  width: 100%;
+  outline: none;
+}
+
 .saveLayoutPanel-settingsGroup {
   display: flex;
   flex-wrap: wrap;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -7,6 +7,7 @@ import { LayoutMetadata } from "./layoutTypes";
 import "./SaveLayoutPanel.css";
 
 const classBase = "saveLayoutPanel";
+const formField = `${classBase}-formField`;
 
 const groups = [
   "Group 1",
@@ -67,7 +68,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
     <div className={`${classBase}-panelContainer`}>
       <div className={`${classBase}-panelContent`}>
         <div className={`${classBase}-formContainer`}>
-          <FormField>
+          <FormField className={formField}>
             <FormFieldLabel>Group</FormFieldLabel>
             <ComboBox
               ListProps={{
@@ -82,6 +83,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),
                 },
@@ -90,15 +92,18 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
               onSelectionChange={(_, value) => setGroup(value || "")}
             />
           </FormField>
-          <FormField>
+          <FormField className={formField}>
             <FormFieldLabel>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}
             />
           </FormField>
-          <FormField>
+          <FormField className={formField}>
             <FormFieldLabel>Some Layout Setting</FormFieldLabel>
             <div className={`${classBase}-settingsGroup`}>
               {checkboxValues.map((value, i) =>
@@ -111,7 +116,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
               )}
             </div>
           </FormField>
-          <FormField>
+          <FormField className={formField}>
             <FormFieldLabel>Some Layout Setting</FormFieldLabel>
             <div className={`${classBase}-settingsGroup`}>
               {radioValues.map((value, i) =>

diff --git a/vuu-ui/packages/vuu-theme/NunitoSans-Regular.woff b/vuu-ui/packages/vuu-theme/NunitoSans-Regular.woff
diff --git a/vuu-ui/packages/vuu-theme/css/global.css b/vuu-ui/packages/vuu-theme/css/global.css
@@ -2,6 +2,15 @@
  * Have some global styles to simulate more realistic app. Currently only for Storybook.
  */
 
+ @font-face {
+  font-family: 'Nunito Sans Regular';
+  src:
+      url('../NunitoSans-Regular.woff') 
+      format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
  .vuu-theme {
   color: var(--salt-text-primary-foreground);
   font-family: var(--salt-typography-fontFamily);