Merge pull request #1429 from finos/fix-layout-save-panel-styling

save layout panel and toast styling

vuu-ui/packages/vuu-popups/src/notifications/ToastNotification.css

@@ -1,47 +1,43 @@
 .vuuToastNotification {
-    --notification-color: var(--salt-content-primary-foreground);
-    --vuu-icon-color: var(--notification-color);
-    --vuu-icon-size: 24px;
-
-    color: var(--notification-color);
-    position: absolute;
-    display: flex;
-    padding: 8px 32px 8px 8px;
-    align-items: center;
-    gap: 8px;
-    border-radius: 6px;
-    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.40);
-    z-index: 100000;
+  --notification-color: var(--salt-content-primary-foreground);
+  --vuu-icon-size: 24px;
+
+  color: var(--notification-color);
+  position: absolute;
+  display: flex;
+  padding: 8px 32px 8px 8px;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
+  z-index: 100000;
 }
 
-.vuuToastNotifications-toastContent{
-    display: flex;
-    flex-direction: column;
-    gap: var(--salt-spacing-100);
+.vuuToastNotification-toastContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-100);
 }
 
-.vuuToastNotifications-toastHeader{
-    font-size: 16px;
-    font-weight: 700;
+.vuuToastNotification-toastHeader {
+  font-size: 16px;
+  font-weight: 700;
 }
 
 .vuuToastNotification-error {
-    --notification-color: var(--salt-status-error-foreground);
-    background: var(--salt-status-error-background);
+  --notification-color: var(--salt-status-error-foreground);
+  background: var(--salt-status-error-background);
 }
 
 .vuuToastNotification-success {
-    --notification-color: var(--salt-status-success-foreground);
-    background: var(--salt-status-success-background);
+  background: var(--salt-status-success-background);
 }
 
 .vuuToastNotification-info {
-    --notification-color: var(--salt-status-info-foreground);
-    background: var(--salt-status-info-background);
+  --notification-color: var(--salt-status-info-foreground);
+  background: var(--salt-status-info-background);
 }
 
 .vuuToastNotification-warning {
-    --notification-color: var(--salt-status-warning-foreground);
-    background: var(--salt-status-warning-background);
+  --notification-color: var(--salt-status-warning-foreground);
+  background: var(--salt-status-warning-background);
 }
-

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css

@@ -1,51 +1,63 @@
-.saveLayoutPanel {
+.vuuSaveLayoutPanel {
   --salt-selectable-foreground-hover: #6d18bdc3;
-  --salt-selectable-foreground-selected: #6D18BD;
-  --salt-selectable-borderColor-selected: #6D18BD;
+  --salt-selectable-foreground-selected: #6d18bd;
+  --salt-selectable-borderColor-selected: #6d18bd;
   --saltInputLegacy-fontSize: 12px;
   --salt-text-label-fontSize: 10px;
   --saltFormFieldLegacy-label-paddingLeft: 0;
   --saltFormField-label-fontWeight: 400;
   --saltText-color: var(--text-secondary-foreground, #606477);
-}
 
-.spinner{
-  width: 100px;
-  height:100px;
-  background-image: var(--svg-spinner);
-}
-
-.saveLayoutPanel-panelContainer {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-}
 
-.saveLayoutPanel-panelContent {
-  display: flex;
-  align-items: flex-start;
-  gap: 32px;
+  .saltFormField {
+    border: solid 1px var(--salt-editable-borderColor);
+    padding: var(--salt-spacing-50) var(--salt-spacing-200);
+  }
+
+  .saltComboBox {
+    .saltPillInput-endAdornmentContainer {
+      .saltButton {
+        border: none;
+        width: 18px;
+        transform: rotate(90deg);
+      }
+      .saltButton:after {
+        content: "";
+        background-color: var(--salt-content-secondary-foreground);
+        left: auto;
+        height: 20px;
+        mask: var(--vuu-svg-triangle-right) center center/20px 20px;
+        mask-repeat: no-repeat;
+        position: absolute;
+        top: var(--vuu-icon-top, auto);
+        transform: var(--vuu-icon-transform, none);
+        width: 20px;
+      }
+    }
+    .saltPillInput-activationIndicator {
+      display: none;
+    }
+  }
 }
 
-.saveLayoutPanel-formContainer {
-  display: flex;
-  width: 217px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
+.spinner {
+  width: 100px;
+  height: 100px;
+  background-image: var(--svg-spinner);
 }
 
-.saveLayoutPanel-formField {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
+.vuuSaveLayoutPanel-panelContent {
+  display: grid;
+  gap: 32px;
+  margin-top: var(--salt-spacing-200);
 }
 
-.saveLayoutPanel-inputText {
+.vuuSaveLayoutPanel-inputText {
   border: none;
-  color: var(--light-text-primary, #15171B);
-  font-family: Nunito Sans A-Variant, serif;
-  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  color: var(--light-text-primary, #15171b);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -54,7 +66,7 @@
   outline: none;
 }
 
-.saveLayoutPanel-settingsGroup {
+.vuuSaveLayoutPanel-settingsGroup {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
@@ -63,24 +75,24 @@
   line-height: 16px;
 }
 
-.saveLayoutPanel-screenshotContainer {
+.vuuSaveLayoutPanel-screenshotContainer {
   display: flex;
   width: 304px;
   height: 208px;
   padding: 11px 15.5px;
   justify-content: center;
   align-items: center;
-  border: 1px solid #E8E8E8;
-  background: var(--dark-text-primary, #FFF);
+  border: 1px solid #e8e8e8;
+  background: var(--dark-text-primary, #fff);
 }
 
-.saveLayoutPanel-screenshot {
+.vuuSaveLayoutPanel-screenshot {
   background: lightgray 50% / cover no-repeat;
   width: 273px;
   height: 186px;
 }
 
-.saveLayoutPanel-buttonsContainer {
+.vuuSaveLayoutPanel-buttonsContainer {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -89,8 +101,8 @@
   gap: 8px;
 }
 
-.saveLayoutPanel-cancelButton,
-.saveLayoutPanel-saveButton {
+.vuuSaveLayoutPanel-cancelButton,
+.vuuSaveLayoutPanel-saveButton {
   display: flex;
   height: fit-content;
   padding: 4px 8px;
@@ -104,27 +116,3 @@
   letter-spacing: 0.48px;
   text-transform: uppercase;
 }
-
-.saveLayoutPanel-cancelButton {
-  color: var(--actionable-primary-foreground-default, #606477);
-  background: var(--actionable-primary-background-default, #FFF);
-}
-
-.saveLayoutPanel-saveButton {
-  background: #6D18BD;
-  border-color: #6D18BD;
-  color: white;
-}
-
-.saveLayoutPanel-saveButton.saltButton:disabled {
-  background: #6D18BD;
-  border-color: #6D18BD;
-  color: white;
-  opacity: 0.3;
-}
-
-.saveLayoutPanel-saveButton.saltButton:hover {
-  background: #F37880;
-  border-color: #F37880;
-  color: white;
-}

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx

@@ -23,8 +23,7 @@ import { getAuthDetailsFromCookies } from "../login";
 
 import saveLayoutPanelCss from "./SaveLayoutPanel.css";
 
-const classBase = "saveLayoutPanel";
-const formField = `${classBase}-formField`;
+const classBase = "vuuSaveLayoutPanel";
 
 const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
 
@@ -109,42 +108,42 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
   }, []);
 
   return (
-    <div className={`${classBase}-panelContainer`}>
+    <div className={`${classBase}`}>
       <div className={`${classBase}-panelContent`}>
-        <div className={`${classBase}-formContainer`}>
-          <FormField className={formField}>
-            <FormFieldLabel>Group</FormFieldLabel>
-            <ComboBox
-              inputProps={{
-                autoComplete: "off",
-                className: `${classBase}-inputText`,
-                placeholder: "Select Group or Enter New Name",
-                // onChange: (event: ChangeEvent<HTMLInputElement>) =>
-                //   setGroup(event.target.value),
-              }}
-              onChange={handleChange}
-              onSelectionChange={handleSelectionChange}
-              value={group}
-            >
-              {groups.map((group, i) => (
-                <Option key={i} value={group} />
-              ))}
-            </ComboBox>
-          </FormField>
-          <FormField className={formField}>
-            <FormFieldLabel>Layout Name</FormFieldLabel>
-            <Input
-              inputProps={{
-                className: `${classBase}-inputText`,
-                placeholder: "Enter Layout Name",
-              }}
-              onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                setLayoutName(event.target.value)
-              }
-              value={layoutName}
-            />
-          </FormField>
-        </div>
+        <FormField>
+          <FormFieldLabel>Group</FormFieldLabel>
+          <ComboBox
+            data-embedded
+            inputProps={{
+              autoComplete: "off",
+              className: `${classBase}-inputText`,
+              placeholder: "Select Group or Enter New Name",
+              // onChange: (event: ChangeEvent<HTMLInputElement>) =>
+              //   setGroup(event.target.value),
+            }}
+            onChange={handleChange}
+            onSelectionChange={handleSelectionChange}
+            value={group}
+          >
+            {groups.map((group, i) => (
+              <Option key={i} value={group} />
+            ))}
+          </ComboBox>
+        </FormField>
+        <FormField>
+          <FormFieldLabel>Layout Name</FormFieldLabel>
+          <Input
+            data-embedded
+            inputProps={{
+              className: `${classBase}-inputText`,
+              placeholder: "Enter Layout Name",
+            }}
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              setLayoutName(event.target.value)
+            }
+            value={layoutName}
+          />
+        </FormField>
         <div className={`${classBase}-screenshotContainer`}>
           {screenshotContent}
         </div>
@@ -157,6 +156,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
           className={`${classBase}-saveButton`}
           onClick={handleSubmit}
           disabled={layoutName === "" || group === ""}
+          variant="cta"
         >
           Save
         </Button>

vuu-ui/packages/vuu-theme/css/components/components.css

@@ -6,8 +6,10 @@
 @import url(icon.css);
 @import url(input.css);
 @import url(left-nav.css);
+@import url(notification.css);
 @import url(options-list.css);
 @import url(palette.css);
+@import url(save-layout-panel.css);
 @import url(scrollable.css);
 @import url(split-button.css);
 @import url(splitter.css);

vuu-ui/packages/vuu-theme/css/components/notification.css

@@ -0,0 +1,14 @@
+.salt-theme.vuu-theme {
+  .vuuToastNotification {
+    border-radius: 6px;
+  }
+
+  .vuuToastNotification-success {
+    --vuu-icon-color: white;
+    color: white;
+  }
+  .vuuToastNotification-info {
+    --vuu-icon-color: white;
+    color: white;
+  }
+}

vuu-ui/packages/vuu-theme/css/components/save-layout-panel.css

@@ -0,0 +1,6 @@
+.salt-theme.vuu-theme {
+  .vuuSaveLayoutPanel-inputText {
+    font-family: Nunito Sans A-Variant, serif;
+    font-feature-settings: "ss02" on, "ss01" on, "salt" on, "liga" off;
+  }
+}