From 8edb6f9c3fcf9aa879698c3034f9b5d0e6c48dfb Mon Sep 17 00:00:00 2001
From: vferraro-scottlogic <vferraro@scottlogic.com>
Date: Mon, 18 Sep 2023 15:27:39 +0100
Subject: [PATCH] VUU-41 style fixes

---
 .../packages/vuu-popups/src/dialog/Dialog.css |  1 +
 .../packages/vuu-popups/src/menu/MenuList.css |  1 -
 .../src/layout-management/LayoutList.css      |  9 ++++----
 .../src/layout-management/SaveLayoutPanel.css |  1 +
 .../src/layout-management/SaveLayoutPanel.tsx |  8 -------
 .../vuu-theme/css/characteristics/focused.css | 22 ++++---------------
 .../vuu-ui-controls/src/inputs/Checkbox.css   |  1 +
 .../vuu-ui-controls/src/list/List.css         |  4 +---
 8 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css
index 089204ede..e84937e9e 100644
--- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css
+++ b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css
@@ -36,4 +36,5 @@
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 16px;
   font-weight: 600;
+  font-family: Nunito Sans Regular;
 }
diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css
index e636c2163..dcfc61a28 100644
--- a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css
+++ b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css
@@ -18,7 +18,6 @@
 
   background-clip: padding-box;
   background-color: white;
-  border-style: var(--vuuMenuList-borderStyle, none);
   font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
   font-weight: var(--salt-typography-fontWeight-medium);
   list-style: none;
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
index b99f4008d..44d383b16 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -1,3 +1,7 @@
+.vuuLayoutList {
+    align-self: stretch;
+}
+
 .vuuLayoutList-header {
     color: var(--light-text-primary, #15171B);
     font-weight: 700;
@@ -5,8 +9,6 @@
     text-transform: uppercase;
     display: flex;
     padding: 16px 0px;
-    align-items: center;
-    align-self: stretch;
     border-bottom: 1px solid rgba(119, 124, 148, 0.10);
     line-height: 200%;
 }
@@ -14,8 +16,6 @@
 .vuuLayoutList-groupName {
     display: flex;
     padding-top: 24px;
-    align-items: center;
-    align-self: stretch;
     color: var(--light-text-secondary, #606477);
     font-weight: 700;
     letter-spacing: 0.48px;
@@ -27,7 +27,6 @@
     align-items: center;
     gap: 8px;
     padding: 8px 0px;
-    align-self: stretch;
     flex: 1 1 auto;
     cursor: pointer;
 }
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
index 8e04a4b57..81ab92060 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
@@ -38,6 +38,7 @@
 
 .saveLayoutPanel-inputText {
   color: var(--light-text-secondary, #606477);
+  font-family: Nunito Sans Regular;
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
   font-size: 12px;
   font-weight: 400;
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
index 5e2420f83..14b7e565b 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -71,14 +71,6 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
           <FormField className={formField}>
             <FormFieldLabel>Group</FormFieldLabel>
             <ComboBox
-              ListProps={{
-                style: {
-                  zIndex: 10000,
-                  border: "1px solid #777C94",
-                  borderRadius: 10,
-                  boxSizing: "border-box"
-                }
-              }}
               source={groups}
               allowFreeText={true}
               InputProps={{
diff --git a/vuu-ui/packages/vuu-theme/css/characteristics/focused.css b/vuu-ui/packages/vuu-theme/css/characteristics/focused.css
index 64c7eab28..acf5e5b67 100644
--- a/vuu-ui/packages/vuu-theme/css/characteristics/focused.css
+++ b/vuu-ui/packages/vuu-theme/css/characteristics/focused.css
@@ -1,21 +1,7 @@
 .vuu-theme {
-  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
-  --salt-focused-outlineStyle: dotted;
-  --salt-focused-outlineWidth: 2px;
-  --salt-focused-outlineInset: 0;
-  --salt-focused-outlineOffset: 0;
-
-  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); /* CSS shortcut token: not in Figma */
+  --salt-editable-borderColor-active: var(--editable-border-active, #6D18BD);
 }
 
-.saltFocusVisible:after,
-.focused:focus:after,
-.focused:focus-visible:after {
-  content: "";
-  inset: var(--salt-focused-outlineInset);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  position: absolute;
-}
+.saltInput-focused{
+  border-color: var(  --salt-editable-borderColor-active)!important;
+}
\ No newline at end of file
diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css
index a627219cb..39af11346 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css
@@ -1,4 +1,5 @@
 .vuuCheckbox {
+  --vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);
   display: flex;
   height: 24px;
   align-items: center;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/List.css b/vuu-ui/packages/vuu-ui-controls/src/list/List.css
index 0d8e504b1..329bd0b59 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/List.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/List.css
@@ -12,9 +12,6 @@
   --vuuDraggable-transitionProp: height;
 
   background: var(--list-background);
-  border-color: var(--salt-container-primary-borderColor);
-  border-style: var(--list-borderStyle);
-  border-width: var(--list-borderWidth);
   height: var(--saltList-height, var(--list-height));
   max-height: var(--list-maxHeight);
   outline: none;
@@ -22,6 +19,7 @@
   position: relative;
   user-select: none;
   width: var(--saltList-width, auto);
+  padding: 0 1px;
 }
 
 .vuuList-borderless {