Merge pull request #1181 from refly-ai/fix/modal-center

fix: center settings modal

Author: mrcfps

apps/extension/src/entrypoints/floatingSphere-csui.content/index.tsx

@@ -39,6 +39,10 @@ export default defineContentScript({
               token: {
                 colorPrimary: '#00968F',
                 borderRadius: 6,
+                // Modal specific tokens
+                colorBgMask: 'var(--refly-modal-mask)',
+                borderRadiusLG: 20,
+                boxShadow: '0 8px 32px 0 #00000014',
               },
             }}
           >

apps/web-next/src/prepare/InitializationSuspense.tsx

@@ -34,15 +34,21 @@ export function InitializationSuspense({ children }: InitializationSuspenseProps
 
   useEffect(() => {
     const themeConfig = {
-      token: isDarkMode
-        ? {
-            controlItemBgActive: 'rgba(255, 255, 255, 0.08)',
-            controlItemBgActiveHover: 'rgba(255, 255, 255, 0.12)',
-          }
-        : {
-            controlItemBgActive: '#f1f1f0',
-            controlItemBgActiveHover: '#e0e0e0',
-          },
+      token: {
+        // Modal specific tokens
+        colorBgMask: 'var(--refly-modal-mask)',
+        borderRadiusLG: 20,
+        boxShadow: '0 8px 32px 0 #00000014',
+        ...(isDarkMode
+          ? {
+              controlItemBgActive: 'rgba(255, 255, 255, 0.08)',
+              controlItemBgActiveHover: 'rgba(255, 255, 255, 0.12)',
+            }
+          : {
+              controlItemBgActive: '#f1f1f0',
+              controlItemBgActiveHover: '#e0e0e0',
+            }),
+      },
       algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
     };
     updateTheme(themeConfig);

apps/web-next/src/tokens.css

@@ -7,7 +7,7 @@
   --refly-bg-float-z3: #ffffff;
   --refly-bg-glass-content: #ffffffcc;
   --refly-bg-canvas: #fbfbfb;
-  --refly-modal-mask: #00000026;
+  --refly-modal-mask: rgba(0, 0, 0, 0.15);
   --refly-Card-Border: rgba(0, 0, 0, 0.1);
   --refly-line: #1c232229;
   --refly-text-0: #1c1f23;
@@ -49,7 +49,7 @@
   --refly-bg-float-z3: #292929;
   --refly-bg-glass-content: #000000cc;
   --refly-bg-canvas: #1e1d1d;
-  --refly-modal-mask: #00000026;
+  --refly-modal-mask: rgba(0, 0, 0, 0.4);
   --refly-Card-Border: rgba(216, 216, 216, 0.1);
   --refly-line: #1c23221a;
   --refly-text-0: #f9f9f9;

apps/web/src/main.tsx

@@ -152,6 +152,10 @@ export const App = () => {
             token: {
               colorPrimary: '#0E9F77',
               borderRadius: 8,
+              // Modal specific tokens
+              colorBgMask: 'var(--refly-modal-mask)',
+              borderRadiusLG: 20,
+              boxShadow: '0 8px 32px 0 #00000014',
               ...(shouldUseDarkTheme
                 ? {
                     controlItemBgActive: 'rgba(255, 255, 255, 0.08)',
@@ -181,6 +185,10 @@ export const App = () => {
         token: {
           colorPrimary: '#0E9F77',
           borderRadius: 8,
+          // Modal specific tokens
+          colorBgMask: 'var(--refly-modal-mask)',
+          borderRadiusLG: 20,
+          boxShadow: '0 8px 32px 0 #00000014',
           ...(shouldUseDarkTheme
             ? {
                 controlItemBgActive: 'rgba(255, 255, 255, 0.08)',

packages/ai-workspace-common/src/components/canvas/layout-control/index.scss

@@ -1,7 +1,6 @@
 .help-modal {
   .ant-modal-content {
     padding: 24px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   .ant-modal-close {

packages/ai-workspace-common/src/components/settings/index.scss

@@ -3,11 +3,9 @@
   .ant-modal-content {
     height: 80vh;
     background: var(--refly-bg-content-z2);
-    box-shadow: none;
     padding: 0;
     margin: 0;
     box-sizing: border-box;
-    border-radius: 20px;
   }
 
   .ant-modal-body {

packages/ai-workspace-common/src/components/settings/index.tsx

@@ -183,10 +183,9 @@ const Settings: React.FC<SettingModalProps> = ({ visible, setVisible }) => {
       className="settings-modal"
       centered
       width={'90vw'}
-      height={'85vh'}
+      height={'80vh'}
       style={{
         maxWidth: '1400px',
-        maxHeight: '800px',
       }}
       title={null}
       footer={null}

packages/ai-workspace-common/src/components/settings/subscribe-modal/index.scss

@@ -1,6 +1,7 @@
 .subscribe-modal {
   .ant-modal-content {
     height: 100vh;
+    border-radius: 0;
     padding: 0;
     margin: 0;
     box-sizing: border-box;

packages/ai-workspace-common/src/components/sider/popover.scss

@@ -0,0 +1,17 @@
+// Custom animation for SiderPopover
+.sider-popover-animation {
+  .ant-popover-inner {
+    animation: siderPopoverSlideIn 0.3s ease-out;
+  }
+}
+
+@keyframes siderPopoverSlideIn {
+  0% {
+    transform: translateX(-240px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+} 

packages/ai-workspace-common/src/components/sider/popover.tsx

@@ -6,6 +6,7 @@ import { Logo } from '../common/logo';
 import { GithubStar } from '../common/github-star';
 import cn from 'classnames';
 import { useState } from 'react';
+import './popover.scss';
 
 interface SiderPopoverProps {
   children?: React.ReactNode;
@@ -35,16 +36,12 @@ export const SiderPopover = (props: SiderPopoverProps) => {
         <Popover
           zIndex={11}
           overlayInnerStyle={{ padding: 0, boxShadow: 'none', border: 'none' }}
-          className="shadow-none"
+          overlayClassName="sider-popover-animation"
           arrow={false}
           placement="bottom"
           align={align}
           open={isVisible}
-          content={
-            <div className="animate-slide-in-left">
-              <SiderLayout source="popover" />
-            </div>
-          }
+          content={<SiderLayout source="popover" />}
         >
           {children || (
             <Button