Merge pull request #127 from BuidlerDAO/nig-729

fix: nig-729
BuidlerDAO · Apr 19, 2024 · a46615c · a46615c
2 parents 83becba + 2beaf06
commit a46615c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 65 deletions.
diff --git a/src/content/Content.tsx b/src/content/Content.tsx
@@ -10,7 +10,6 @@ const Content = (): ReactElement => {
 
   return (
     <div
-      id="xfans-root"
       style={{
         position: 'fixed',
         zIndex: 999,

diff --git a/src/content/drawer/index.tsx b/src/content/drawer/index.tsx
@@ -3,52 +3,25 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import { styled } from '@mui/material/styles';
 
 import * as toaster from '../../components/Toaster';
 import { XFANS_CONTENT_WIDTH } from '../../constants';
+import { XFANS_TOKEN } from '../../constants';
 import { ProfileData } from '../../service/login/me';
 import { TwitterOauth2Data } from '../../service/login/twiterOuth2';
 import http, { ResultData } from '../../service/request';
 import useGlobalStore, { PageType } from '../../store/useGlobalStore';
+import { caculateBackWidth, caculateDrawerWidth } from '../../utils';
 import Profile from '../../welcome/Profile';
 import Wallet from '../../welcome/Wallet';
 import ProfileModal from '../../welcome/Wallet/Profile';
 import CongratulationPage from '../loginPage/congratulationPage';
 import InvitePage from '../loginPage/invitePage';
 import SignInWithXPage from '../loginPage/signInWithXPage';
-import { caculateBackWidth, caculateDrawerWidth } from '../../utils';
+
 import LogoButton from './logoButton';
-import { XFANS_TOKEN } from '../../constants';
-import '../../tailwind.css';
 
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
-  open?: boolean;
-  drawerwidth?: number; // 添加 width 参数
-}>(({ theme, open, drawerwidth }) => ({
-  // flexGrow: 1,
-  // padding: theme.spacing(3),
-  transition: theme.transitions.create('margin', {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  marginRight: -(drawerwidth || 0),
-  ...(open && {
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    marginRight: 0,
-  }),
-  /**
-   * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
-   * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
-   * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
-   * proper interaction with the underlying content.
-   */
-  position: 'relative',
-}));
+import '../../tailwind.css';
 
 export default function PersistentDrawerRight() {
   const { isShowDrawer, goPage, page, logout } = useGlobalStore((state) => ({ ...state }));
@@ -224,18 +197,7 @@ export default function PersistentDrawerRight() {
   return (
     <Box sx={{ display: 'flex' }}>
       <ProfileModal />
-      <IconButton
-        color="inherit"
-        aria-label="open drawer"
-        edge="start"
-        onClick={handleDrawerOpen}
-        disableRipple
-        sx={{ ...(isShowDrawer && { display: 'none' }) }}
-      >
-        {/* <MenuIcon className="rounded-full m-0 w-[24px] h-[24px] cursor-pointer" /> */}
-        <LogoButton />
-      </IconButton>
-      <Main open={isShowDrawer} drawerwidth={drawerWidth}></Main>
+      <LogoButton aria-label="open xfans" onClick={handleDrawerOpen} />
       <Drawer
         sx={{
           width: drawerWidth,

diff --git a/src/content/drawer/logoButton.tsx b/src/content/drawer/logoButton.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-const LogoButton = () => {
+const LogoButton = (props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
   return (
-    <div className="absolute right-0 m-0 h-[35px] w-[35px] cursor-pointer rounded-full">
+    <div
+      {...props}
+      className="absolute right-0 top-[120px] m-0 h-[35px] w-[35px] cursor-pointer rounded-full"
+    >
       <img
         src="https://cdn-fe.s3.amazonaws.com/xfans/20240328-153101.png"
-        className="mx-0 mt-[120px] h-[35px] w-[35px] cursor-pointer rounded-full p-0"
+        className="mx-0 h-[35px] w-[35px] cursor-pointer rounded-full p-0"
         alt="Logo"
       />
     </div>

diff --git a/src/content/index.tsx b/src/content/index.tsx
@@ -5,13 +5,15 @@ import { Store } from '@eduardoac-skimlinks/webext-redux';
 
 import { proxyStore as store } from '../app/proxyStore';
 import useGlobalStore from '../store/useGlobalStore';
+
 import { addTwitterComponent, addUserPagePriceComponent } from './addToTwitterHome';
 import Content from './Content';
 
 import '../tailwind.css';
 
 withProxyStore(<Content />, store).then((component) => {
-  const container = document.createElement('my-extension-root');
+  const container = document.createElement('div');
+  container.id = 'xfans-root';
   document.body.append(container);
   createRoot(container).render(component);
 

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -19,6 +19,23 @@
   font-family: 'SF Pro Display', sans-serif !important;
 }
 
+/* tailwind 的 text size 都是根据 rem 计算的，防止 twitter 的根节点不是 16px 的，我们设置为固定大小 */
+#xfans-root .text-xs {
+  font-size: 12px;
+}
+
+#xfans-root .text-sm {
+  font-size: 14px;
+}
+
+#xfans-root .text-base {
+  font-size: 16px;
+}
+
+#xfans-root .text-lg {
+  font-size: 18px;
+}
+
 /* For Webkit-based browsers (Chrome, Safari and Opera) */
 .scrollbar-hide::-webkit-scrollbar {
   display: none;

diff --git a/src/welcome/Profile/Reward.tsx b/src/welcome/Profile/Reward.tsx
@@ -215,19 +215,14 @@ const Reward = () => {
                           className="w-[44px] cursor-pointer rounded-full"
                         />
                         <div className="flex flex-col space-y-[2px]">
-                          <span className="text-sm font-bold" style={{ fontVariant: 'small-caps' }}>
-                            {item.author?.username}
-                          </span>
-                          <span
-                            className="text-xs text-[#919099]"
-                            style={{ fontVariant: 'small-caps' }}
-                          >
+                          <span className="text-sm font-bold">{item.author?.username}</span>
+                          <span className="text-xs text-[#919099]">
                             {dayjs(item.createdAt).locale('en').format('MMM DD YYYY, HH:mm')}
                           </span>
                         </div>
                       </div>
 
-                      <span className="text-sm font-medium">#{item.rank}</span>
+                      <span className="text-sm font-medium text-[#0F1419]">#{item.rank}</span>
                     </div>
 
                     <p
@@ -275,19 +270,14 @@ const Reward = () => {
                           className="w-[44px] cursor-pointer rounded-full"
                         />
                         <div className="flex flex-col space-y-[2px]">
-                          <span className="text-sm font-bold" style={{ fontVariant: 'small-caps' }}>
-                            {item.author?.username}
-                          </span>
-                          <span
-                            className="text-xs text-[#919099]"
-                            style={{ fontVariant: 'small-caps' }}
-                          >
+                          <span className="text-sm font-bold">{item.author?.username}</span>
+                          <span className="text-xs text-[#919099]">
                             {dayjs(item.createdAt).locale('en').format('MMM DD YYYY, HH:mm')}
                           </span>
                         </div>
                       </div>
 
-                      <span className="text-sm font-medium">#{item.rank}</span>
+                      <span className="text-sm font-medium text-[#0F1419]">#{item.rank}</span>
                     </div>
 
                     <p