From 9842d45854d6ad46870fd79be3f54194f96d8a25 Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Wed, 22 Nov 2023 16:59:15 +0800
Subject: [PATCH] :lipstick: feat: fix wrong className order

---
 src/ActionIcon/ActionIcon.tsx |  2 +-
 src/Highlight/style.ts        | 22 +++++++++++++++++-----
 src/Highlight/wrapper.tsx     |  3 ++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/ActionIcon/ActionIcon.tsx b/src/ActionIcon/ActionIcon.tsx
index a27b6ea8..29fa842c 100644
--- a/src/ActionIcon/ActionIcon.tsx
+++ b/src/ActionIcon/ActionIcon.tsx
@@ -65,7 +65,7 @@ const ActionIcon: FC<ActionIconProps> = ({
   const Icon = (
     <Button
       icon={icon}
-      className={cx(className, styles.container)}
+      className={cx(styles.container, className)}
       type={'text'}
       style={{ cursor }}
       size={'small'}
diff --git a/src/Highlight/style.ts b/src/Highlight/style.ts
index f4849cd1..f01aab3a 100644
--- a/src/Highlight/style.ts
+++ b/src/Highlight/style.ts
@@ -15,7 +15,7 @@ export const useStyles = createStyles(
 
     const typeStylish = css`
       background-color: ${type === 'block' ? colorFillTertiary : 'transparent'};
-      border: 1px solid ${type === 'block' ? colorFillTertiary : 'transparent'};
+      border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
     `;
 
     const lighterTypeStylish = css`
@@ -38,13 +38,28 @@ export const useStyles = createStyles(
           }
         `,
       ),
+      expland: css`
+        color: ${Color(colorText).alpha(0.8).hsl().string()};
+      `,
+
+      copy: css`
+        color: ${Color(colorText).alpha(0.6).hsl().string()};
+      `,
       header: cx(
         `${prefix}-header`,
         css`
+          background-color: ${type === 'block' ? token.colorFillTertiary : 'transparent'};
           padding: 4px 8px;
-          background: rgba(0, 0, 0, 0.02);
+          border-radius: ${token.borderRadius}px;
           width: auto !important; // override self width
         `,
+        css`
+          .${STUDIO_UI_PREFIX}-btn {
+            &:hover {
+              color: ${colorTextSecondary} !important;
+            }
+          }
+        `,
       ),
       container: cx(
         `${prefix}-container`,
@@ -106,9 +121,6 @@ export const useStyles = createStyles(
         min-width: 100px;
         .${STUDIO_UI_PREFIX}-btn {
           color: ${colorText};
-          &:hover {
-            color: ${colorTextSecondary} !important;
-          }
         }
         .${STUDIO_UI_PREFIX}-select-selector {
           padding-inline-end: 4px !important;
diff --git a/src/Highlight/wrapper.tsx b/src/Highlight/wrapper.tsx
index 456a6337..63963e4c 100644
--- a/src/Highlight/wrapper.tsx
+++ b/src/Highlight/wrapper.tsx
@@ -49,6 +49,7 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
     <div className={classNames(styles.wrapper, className)} style={style}>
       <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
         <ActionIcon
+          className={styles.expland}
           icon={expand ? <DownOutlined size={14} /> : <RightOutlined size={14} />}
           onClick={() => setExpand(!expand)}
           size={24}
@@ -73,7 +74,7 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
           suffixIcon={false}
           value={lang.toLowerCase()}
         />
-        {copyable && <CopyButton content={children} />}
+        {copyable && <CopyButton className={styles.copy} content={children} />}
       </Flexbox>
       <HighlightBase
         {...props}