Merge pull request #6073 from logto-io/gao-update-console-jit

feat(console): update jit config
logto-io · Jun 21, 2024 · 5065eea · 5065eea
2 parents 12bcbb9 + 71f5fa3
commit 5065eea
Show file tree

Hide file tree

Showing 9 changed files with 365 additions and 216 deletions.
diff --git a/packages/console/src/components/MultiOptionInput/index.tsx b/packages/console/src/components/MultiOptionInput/index.tsx
@@ -13,6 +13,7 @@ type CanBePromise<T> = T | Promise<T>;
 
 type Props<T> = {
   readonly className?: string;
+  readonly valueClassName?: string | ((value: T) => string | undefined);
   readonly values: T[];
   readonly getId?: (value: T) => string;
   readonly onError?: (error: string) => void;
@@ -27,6 +28,7 @@ type Props<T> = {
 
 function MultiOptionInput<T>({
   className,
+  valueClassName,
   values,
   getId: getIdInput,
   onError,
@@ -98,7 +100,11 @@ function MultiOptionInput<T>({
             <Tag
               key={getId(option)}
               variant="cell"
-              className={classNames(styles.tag, getId(option) === focusedValueId && styles.focused)}
+              className={classNames(
+                styles.tag,
+                getId(option) === focusedValueId && styles.focused,
+                typeof valueClassName === 'function' ? valueClassName(option) : valueClassName
+              )}
               onClick={() => {
                 ref.current?.focus();
               }}

diff --git a/packages/console/src/ds-components/ActionMenu/index.tsx b/packages/console/src/ds-components/ActionMenu/index.tsx
@@ -57,7 +57,7 @@ function ActionMenu(props: Props) {
         <Button
           {...props.buttonProps}
           ref={anchorReference}
-          className={styles.actionMenuButton}
+          className={classNames(styles.actionMenuButton, props.buttonProps.className)}
           onClick={() => {
             setIsOpen(true);
           }}

diff --git a/packages/console/src/pages/EnterpriseSso/SsoConnectorLogo/index.module.scss b/packages/console/src/pages/EnterpriseSso/SsoConnectorLogo/index.module.scss
@@ -1,5 +1,4 @@
 .container {
-  background-color: var(--color-hover);
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
@@ -4,11 +4,65 @@
   margin-top: _.unit(3);
 }
 
-.ssoEnabled {
-  vertical-align: middle;
-  color: var(--color-text-link);
+// Additional layer of nesting to override the styles from the imported components
+.jitEmailDomains .ssoEnabled {
+  display: flex;
+  align-items: center;
+  gap: _.unit(1);
+  background-color: var(--color-alert-container);
+
+  > svg {
+    color: var(--color-on-alert-container);
+  }
 }
 
+
 .warning {
   margin-top: _.unit(3);
 }
+
+.addSsoConnectorButton {
+  margin-top: _.unit(3);
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: _.unit(2);
+  font: var(--font-body-2);
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.ssoConnectorList {
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(1);
+}
+
+.ssoConnector {
+  display: flex;
+  align-items: center;
+  gap: _.unit(2);
+
+  .info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: _.unit(3);
+    gap: _.unit(3);
+    background-color: var(--color-layer-2);
+    font: var(--font-label-2);
+    border-radius: 8px;
+    color: var(--color-text);
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}