diff --git a/vuu-ui/packages/vuu-popups/src/notifications/ToastNotification.css b/vuu-ui/packages/vuu-popups/src/notifications/ToastNotification.css index f9abb0ecc..31ab7bca7 100644 --- a/vuu-ui/packages/vuu-popups/src/notifications/ToastNotification.css +++ b/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); } - 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 ec315b1ac..d7365fee1 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css +++ b/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; -} 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 801073145..28d60506c 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/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 ( -