refactor(console): fix sie live preview button styles (#3447)

packages/console/src/components/Button/index.module.scss

@@ -48,6 +48,15 @@
     }
   }
 
+  .trailingIcon {
+    display: flex;
+    align-items: center;
+
+    &:not(:first-child) {
+      margin-left: _.unit(2);
+    }
+  }
+
   &.small {
     height: 30px;
     padding: 0 _.unit(3);
@@ -61,6 +70,12 @@
         margin-right: _.unit(1);
       }
     }
+
+    .trailingIcon {
+      &:not(:first-child) {
+        margin-left: _.unit(1);
+      }
+    }
   }
 
   &.medium {
@@ -92,7 +107,7 @@
     border-style: solid;
 
     &:disabled {
-      border-color: var(--color-neutral-70);
+      border-color: var(--color-border);
       color: var(--color-neutral-70);
     }
 
@@ -221,4 +236,42 @@
       background-color: var(--color-hover-variant);
     }
   }
+
+  &.violet {
+    background: var(--color-layer-1);
+    border: 1px solid var(--color-surface-5);
+    overflow: hidden;
+    position: relative;
+
+    .icon,
+    .trailingIcon {
+      color: var(--color-primary);
+    }
+
+    &:disabled {
+      color: var(--color-disabled);
+
+      .icon,
+      .trailingIcon {
+        color: var(--color-primary-80);
+      }
+    }
+
+    &:focus-visible {
+      border: 2px solid var(--color-primary-40);
+      outline: 4px solid var(--color-focused-variant);
+    }
+
+    &:not(:disabled):hover {
+      background-color: var(--color-hover-variant);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--color-layer-1);
+        z-index: -1;
+      }
+    }
+  }
 }

packages/console/src/components/Button/index.tsx

@@ -9,7 +9,14 @@ import { Ring as Spinner } from '@/components/Spinner';
 import type DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
 
-export type ButtonType = 'primary' | 'danger' | 'outline' | 'text' | 'default' | 'branding';
+export type ButtonType =
+  | 'primary'
+  | 'danger'
+  | 'outline'
+  | 'text'
+  | 'default'
+  | 'branding'
+  | 'violet';
 
 type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
   htmlType?: 'button' | 'submit' | 'reset';
@@ -86,7 +93,7 @@ const Button = ({
       {showSpinner && <Spinner className={styles.spinner} />}
       {icon && <span className={styles.icon}>{icon}</span>}
       {title && (typeof title === 'string' ? <span>{t(title)}</span> : title)}
-      {trailingIcon}
+      {trailingIcon && <span className={styles.trailingIcon}>{trailingIcon}</span>}
     </button>
   );
 };

packages/console/src/components/LivePreviewButton/index.module.scss

@@ -1,10 +1,7 @@
-@use '@/scss/underscore' as _;
-
-.icon {
+.defaultIcon {
   color: var(--color-text-secondary);
-  margin-left: _.unit(1.5);
-
-  &.disabled {
-    color: var(--color-neutral-70);
-  }
+}
+
+.disabledDefaultIcon {
+  color: var(--color-neutral-70);
 }

packages/console/src/components/LivePreviewButton/index.tsx

@@ -7,19 +7,18 @@ import ExternalLinkIcon from '@/assets/images/external-link.svg';
 import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
 import useConfigs from '@/hooks/use-configs';
 
-import type { Props as ButtonProps } from '../Button';
+import type { Props as ButtonProps, ButtonType } from '../Button';
 import Button from '../Button';
 import { Tooltip } from '../Tip';
 import * as styles from './index.module.scss';
 
 type Props = {
   size?: ButtonProps['size'];
+  type?: ButtonType;
   isDisabled: boolean;
-  className?: string;
-  iconClassName?: string;
 };
 
-const LivePreviewButton = ({ size = 'medium', isDisabled, className, iconClassName }: Props) => {
+const LivePreviewButton = ({ size, type, isDisabled }: Props) => {
   const { configs, updateConfigs } = useConfigs();
   const { userEndpoint } = useContext(AppEndpointsContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -28,12 +27,15 @@ const LivePreviewButton = ({ size = 'medium', isDisabled, className, iconClassNa
     <Tooltip content={conditional(isDisabled && t('sign_in_exp.preview.live_preview_tip'))}>
       <Button
         size={size}
+        type={type}
         disabled={isDisabled}
-        className={className}
         title="sign_in_exp.preview.live_preview"
         trailingIcon={
           <ExternalLinkIcon
-            className={classNames(styles.icon, iconClassName, isDisabled && styles.disabled)}
+            className={conditional(
+              type !== 'violet' &&
+                classNames(styles.defaultIcon, isDisabled && styles.disabledDefaultIcon)
+            )}
           />
         }
         onClick={() => {

packages/console/src/components/Select/index.module.scss

@@ -7,7 +7,7 @@
   padding: 0 _.unit(2) 0 _.unit(3);
   background: var(--color-layer-1);
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: 8px;
   outline: 3px solid transparent;
   transition-property: outline, border;
   transition-timing-function: ease-in-out;

packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.module.scss

@@ -12,15 +12,4 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  .button {
-    border: 1px solid var(--color-surface-5);
-    margin-left: _.unit(2);
-  }
-
-  .livePreviewIcon {
-    width: 20px;
-    height: 20px;
-    color: var(--color-primary);
-  }
 }

packages/console/src/onboarding/pages/SignInExperience/components/Preview/index.tsx

@@ -1,6 +1,5 @@
 import type { SignInExperience } from '@logto/schemas';
 import { Theme } from '@logto/schemas';
-import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useState } from 'react';
 
@@ -24,11 +23,7 @@ const Preview = ({ signInExperience, isLivePreviewDisabled = false, className }:
     <div className={classNames(styles.container, className)}>
       <div className={styles.topBar}>
         <PlatformTabs currentTab={currentTab} onSelect={setCurrentTab} />
-        <LivePreviewButton
-          isDisabled={isLivePreviewDisabled}
-          className={styles.button}
-          iconClassName={conditional(!isLivePreviewDisabled && styles.livePreviewIcon)}
-        />
+        <LivePreviewButton type="violet" isDisabled={isLivePreviewDisabled} />
       </div>
       <SignInExperiencePreview
         platform={currentTab}

packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.module.scss

@@ -36,7 +36,6 @@
 }
 
 .trailingIcon {
-  display: block;
   width: 16px;
   height: 16px;
 }