style: adjust settings style (#3083)

apps/web/src/components/affine/new-workspace-setting-detail/style.css.ts

@@ -51,11 +51,13 @@ globalStyle(`${urlButton} span`, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
+  color: 'var(--affine-placeholder-color)',
   fontWeight: '500',
 });
 
 export const fakeWrapper = style({
   position: 'relative',
+  opacity: 0.4,
   selectors: {
     '&::after': {
       content: '""',
@@ -64,7 +66,7 @@ export const fakeWrapper = style({
       position: 'absolute',
       left: 0,
       top: 0,
-      background: 'var(--affine-white-60)',
+      cursor: 'not-allowed',
     },
   },
 });

packages/component/src/ui/button/styles.ts

@@ -174,7 +174,6 @@ export const StyledButton = styled('button', {
           color: 'var(--affine-text-disable-color)',
         }
       : {}),
-    transition: 'background .15s',
     // TODO: Implement circle shape
     borderRadius: shape === 'default' ? borderRadius : height / 2,
     fontSize,

packages/component/src/ui/button/utils.ts

@@ -50,9 +50,14 @@ export const getButtonColors = (
         background: 'var(--affine-primary-color)',
         color: 'var(--affine-white)',
         borderColor: 'var(--affine-primary-color)',
+        backgroundBlendMode: 'overlay',
         '.affine-button-icon': {
           color: 'var(--affine-white)',
         },
+        ':hover': {
+          background:
+            'linear-gradient(var(--affine-primary-color),var(--affine-primary-color)),var(--affine-hover-color)',
+        },
       };
     case 'light':
       return {