refactor(OrganizationSwitch): improve popover content and organization list component

Author: Merlin218

frontend/magic-web/src/opensource/layouts/BaseLayout/components/Sider/components/OrganizationSwitch/OrganizationList.tsx

@@ -147,7 +147,7 @@ interface OrganizationListItemProps {
 	onClose?: () => void
 }
 
-function OrganizationList(props: OrganizationListItemProps) {
+function OrganizationListComponent(props: OrganizationListItemProps) {
 	const { onClose } = props
 
 	const { styles, cx } = useOrganizationListStyles()
@@ -235,4 +235,6 @@ function OrganizationList(props: OrganizationListItemProps) {
 	)
 }
 
-export default memo(OrganizationList)
+const OrganizationList = memo(OrganizationListComponent)
+
+export default OrganizationList

frontend/magic-web/src/opensource/layouts/BaseLayout/components/Sider/components/OrganizationSwitch/index.tsx

@@ -5,7 +5,6 @@ import { Popover } from "antd"
 import type { ReactNode } from "react"
 import { useState, memo } from "react"
 import { useStyles } from "./styles"
-import OrganizationList from "./OrganizationList"
 
 interface OrganizationSwitchProps {
 	className?: string
@@ -47,7 +46,14 @@ const OrganizationSwitch = memo(function OrganizationSwitch({
 			arrow={false}
 			trigger={["click"]}
 			autoAdjustOverflow
-			content={<ComponentRender componentName="OrganizationList" onClose={() => setOpen(false)} />}
+			content={
+				<div className={styles.popoverContent}>
+					<ComponentRender
+						componentName="OrganizationList"
+						onClose={() => setOpen(false)}
+					/>
+				</div>
+			}
 		>
 			{ChildrenContent}
 		</Popover>

frontend/magic-web/src/opensource/layouts/BaseLayout/components/Sider/components/OrganizationSwitch/styles.ts

@@ -1,6 +1,9 @@
 import { createStyles } from "antd-style"
 
 export const useStyles = createStyles(({ css, isDarkMode, prefixCls, token }) => {
+	const backgroundColor = isDarkMode
+		? token.magicColorScales.grey[0]
+		: token.magicColorScales.white
 	return {
 		popover: css`
 			.${prefixCls}-popover-inner {
@@ -55,7 +58,11 @@ export const useStyles = createStyles(({ css, isDarkMode, prefixCls, token }) =>
 				flex-shrink: 0;
 
 				&.${prefixCls}-menu-item-danger:hover {
-					background-color: ${isDarkMode ? token.magicColorUsages.danger.default : token.magicColorScales.red[0]} !important;
+					background-color: ${
+						isDarkMode
+							? token.magicColorUsages.danger.default
+							: token.magicColorScales.red[0]
+					} !important;
 					color: ${isDarkMode ? token.magicColorUsages.white : token.magicColorUsages.danger} !important;
 				}
 			}
@@ -76,24 +83,31 @@ export const useStyles = createStyles(({ css, isDarkMode, prefixCls, token }) =>
 			color: white !important;
 			border: 1px solid ${token.magicColorUsages.border};
 		`,
+		popoverContent: css`
+			width: 300px;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 10px;
+			background-color: ${backgroundColor};
+			box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.3);
+			border-radius: 8px;
+		`,
 	}
 })
 
 export const useOrganizationListStyles = createStyles(({ isDarkMode, css, token }) => {
-	const backgroundColor = isDarkMode ? token.magicColorScales.grey[0] : token.magicColorScales.white
+	const backgroundColor = isDarkMode
+		? token.magicColorScales.grey[0]
+		: token.magicColorScales.white
 	return {
 		container: css`
 			display: flex;
-			width: 400px;
+			width: 100%;
 			padding: 10px 0;
 			flex-direction: column;
 			align-items: flex-start;
 			gap: 10px;
 			border-radius: 12px;
-			background-color: ${backgroundColor};
-			box-shadow:
-				0 4px 14px 0 rgba(0, 0, 0, 0.1),
-				0 0 1px 0 rgba(0, 0, 0, 0.3);
 			overflow: hidden;
 		`,
 		scroll: css`
@@ -114,7 +128,7 @@ export const useOrganizationListStyles = createStyles(({ isDarkMode, css, token
 		groupHeader: css`
 			position: relative;
 			background-color: ${backgroundColor};
-			
+
 			&:before {
 				content: "";
 				position: absolute;

frontend/magic-web/src/opensource/pages/login/AccountModal/AccountModal.tsx

@@ -1,4 +1,4 @@
-import { Form, Modal, message } from "antd"
+import { Form, message } from "antd"
 import { useMemoizedFn } from "ahooks"
 import type { Login } from "@/types/login"
 import { LoginFormValuesMap, OnSubmitFn } from "@/opensource/pages/login/types"
@@ -14,6 +14,7 @@ import MobilePhonePasswordForm from "../components/MobilePhonePasswordForm"
 import Footer from "../components/Footer"
 import { useUserAgreedPolicy } from "../hooks/useUserAgreedPolicy"
 import MagicSpin from "@/opensource/components/base/MagicSpin"
+import MagicModal from "@/opensource/components/base/MagicModal"
 
 interface AccountModalProps {
 	onClose: () => void
@@ -85,7 +86,7 @@ function AccountModal(props: AccountModalProps) {
 	const dom = <div className={styles.header}>{t("account.create")}</div>
 
 	return (
-		<Modal
+		<MagicModal
 			title={dom}
 			footer={null}
 			open={open}
@@ -107,7 +108,7 @@ function AccountModal(props: AccountModalProps) {
 					<Footer agree={agree} onAgreeChange={setAgree} tipVisible />
 				</div>
 			</MagicSpin>
-		</Modal>
+		</MagicModal>
 	)
 }
 

frontend/magic-web/src/opensource/pages/login/AccountModal/styles.ts

@@ -8,7 +8,6 @@ export const useStyles = createStyles(({ css, prefixCls }) => {
 			}
 		`,
 		modalHeader: css`
-			padding: 20px 24px 0 24px !important;
 			display: flex;
 			align-items: center;
 		`,
@@ -21,7 +20,7 @@ export const useStyles = createStyles(({ css, prefixCls }) => {
 		layout: css`
 			width: 100%;
 			height: 100%;
-			padding: 40px;
+			padding: 20px 10px;
 		`,
 		header: css`
 			width: 100%;