fix: some style

frontend/appflowy_web_app/src/assets/arrow_right.svg

@@ -1,5 +1,6 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Icons/ Arrow / right" opacity="0.5">
-<path id="Vector 15" d="M4.5 9.375L7.875 6L4.5 2.625" stroke="#171717" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+    <g id="Icons/ Arrow / right" opacity="0.5">
+        <path id="Vector 15" d="M4.5 9.375L7.875 6L4.5 2.625" stroke="currentColor" stroke-width="0.9"
+              stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
 </svg>

frontend/appflowy_web_app/src/assets/moon.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="vuesax/linear/moon">
+        <g id="moon">
+            <path id="Vector"
+                  d="M1.35404 8.27997C1.59404 11.7133 4.50738 14.5066 7.99404 14.66C10.454 14.7666 12.654 13.62 13.974 11.8133C14.5207 11.0733 14.2274 10.58 13.314 10.7466C12.8674 10.8266 12.4074 10.86 11.9274 10.84C8.66738 10.7066 6.00071 7.97997 5.98738 4.75997C5.98071 3.89331 6.16071 3.07331 6.48738 2.32664C6.84738 1.49997 6.41404 1.10664 5.58071 1.45997C2.94071 2.57331 1.13404 5.23331 1.35404 8.27997Z"
+                  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+</svg>

frontend/appflowy_web_app/src/assets/more.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.325 9.00002C5.325 9.74561 4.72058 10.35 3.975 10.35C3.22942 10.35 2.625 9.74561 2.625 9.00002C2.625 8.25444 3.22942 7.65002 3.975 7.65002C4.72058 7.65002 5.325 8.25444 5.325 9.00002Z"
+          fill="currentColor"/>
+    <path d="M10.3504 9.00002C10.3504 9.74561 9.74597 10.35 9.00039 10.35C8.25481 10.35 7.65039 9.74561 7.65039 9.00002C7.65039 8.25444 8.25481 7.65002 9.00039 7.65002C9.74597 7.65002 10.3504 8.25444 10.3504 9.00002Z"
+          fill="currentColor"/>
+    <path d="M15.3758 9.00002C15.3758 9.74561 14.7714 10.35 14.0258 10.35C13.2802 10.35 12.6758 9.74561 12.6758 9.00002C12.6758 8.25444 13.2802 7.65002 14.0258 7.65002C14.7714 7.65002 15.3758 8.25444 15.3758 9.00002Z"
+          fill="currentColor"/>
+</svg>

frontend/appflowy_web_app/src/assets/report.svg

@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group 1321314169">
+        <path id="Vector" d="M7.63281 6.36667L12.8261 1.17334" stroke="currentColor" stroke-width="1.06667"
+              stroke-linecap="round" stroke-linejoin="round"/>
+        <path id="Vector_2" d="M13.331 3.70681V0.666809H10.291" stroke="currentColor" stroke-width="1.06667"
+              stroke-linecap="round" stroke-linejoin="round"/>
+        <path id="Vector_3"
+              d="M6.36602 0.666809H5.09935C1.93268 0.666809 0.666016 1.93348 0.666016 5.10014V8.90014C0.666016 12.0668 1.93268 13.3335 5.09935 13.3335H8.89935C12.066 13.3335 13.3327 12.0668 13.3327 8.90014V7.63348"
+              stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+</svg>

frontend/appflowy_web_app/src/components/app/AppTheme.tsx

@@ -1,4 +1,4 @@
-import { useAppThemeMode } from '@/components/app/useAppThemeMode';
+import { ThemeModeContext, useAppThemeMode } from '@/components/app/useAppThemeMode';
 import React, { useMemo } from 'react';
 import createTheme from '@mui/material/styles/createTheme';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
@@ -8,7 +8,8 @@ import 'src/styles/tailwind.css';
 import 'src/styles/template.css';
 
 function AppTheme({ children }: { children: React.ReactNode }) {
-  const { isDark } = useAppThemeMode();
+  const { isDark, setIsDark } = useAppThemeMode();
+
   const theme = useMemo(
     () =>
       createTheme({
@@ -161,7 +162,16 @@ function AppTheme({ children }: { children: React.ReactNode }) {
     [isDark]
   );
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeModeContext.Provider
+      value={{
+        isDark,
+        setDark: setIsDark,
+      }}
+    >
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ThemeModeContext.Provider>
+  );
 }
 
 export default AppTheme;

frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts

@@ -1,4 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, createContext } from 'react';
+
+export const ThemeModeContext = createContext<
+  | {
+      isDark: boolean;
+      setDark: (isDark: boolean) => void;
+    }
+  | undefined
+>(undefined);
 
 export function useAppThemeMode() {
   const [isDark, setIsDark] = useState<boolean>(false);
@@ -8,7 +16,6 @@ export function useAppThemeMode() {
       const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
       setIsDark(darkModeMediaQuery.matches);
-      document.documentElement.setAttribute('data-dark-mode', darkModeMediaQuery.matches ? 'true' : 'false');
     }
 
     detectColorScheme();
@@ -19,7 +26,13 @@ export function useAppThemeMode() {
     };
   }, []);
 
+  useEffect(() => {
+    console.log('isDark', isDark);
+    document.documentElement.setAttribute('data-dark-mode', isDark ? 'true' : 'false');
+  }, [isDark]);
+
   return {
     isDark,
+    setIsDark,
   };
 }

frontend/appflowy_web_app/src/components/publish/header/MoreActions.tsx

@@ -0,0 +1,88 @@
+import { Popover } from '@/components/_shared/popover';
+import { ThemeModeContext } from '@/components/app/useAppThemeMode';
+import { openUrl } from '@/utils/url';
+import { IconButton } from '@mui/material';
+import React, { useContext, useMemo } from 'react';
+import { ReactComponent as MoreIcon } from '@/assets/more.svg';
+import { ReactComponent as MoonIcon } from '@/assets/moon.svg';
+import { ReactComponent as ReportIcon } from '@/assets/report.svg';
+import { useTranslation } from 'react-i18next';
+
+function MoreActions() {
+  const { isDark, setDark } = useContext(ThemeModeContext) || {};
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+
+  const { t } = useTranslation();
+
+  const actions = useMemo(() => {
+    return [
+      isDark
+        ? {
+            Icon: MoonIcon,
+            label: t('settings.appearance.themeMode.light'),
+            onClick: () => {
+              setDark?.(false);
+            },
+          }
+        : {
+            Icon: MoonIcon,
+            label: t('settings.appearance.themeMode.dark'),
+            onClick: () => {
+              setDark?.(true);
+            },
+          },
+      {
+        Icon: ReportIcon,
+        label: t('publish.reportPage'),
+        onClick: () => {
+          void openUrl('', '_blank');
+        },
+      },
+    ];
+  }, [isDark, t, setDark]);
+
+  return (
+    <>
+      <IconButton onClick={handleClick}>
+        <MoreIcon className={'text-text-caption'} />
+      </IconButton>
+      <Popover
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+      >
+        <div className={'flex w-[240px] flex-col gap-2 px-2 py-2'}>
+          {actions.map((action, index) => (
+            <button
+              onClick={action.onClick}
+              key={index}
+              className={'flex items-center gap-2 rounded-[8px] p-1.5 text-sm hover:bg-content-blue-50'}
+            >
+              <action.Icon />
+              <span>{action.label}</span>
+            </button>
+          ))}
+        </div>
+      </Popover>
+    </>
+  );
+}
+
+export default MoreActions;

frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx

@@ -1,8 +1,10 @@
 import { usePublishContext } from '@/application/publish';
 import { openOrDownload } from '@/components/publish/header/utils';
+import { Divider } from '@mui/material';
 import React, { useMemo } from 'react';
 import Breadcrumb from './Breadcrumb';
 import { ReactComponent as Logo } from '@/assets/logo.svg';
+import MoreActions from './MoreActions';
 
 export function PublishViewHeader() {
   const viewMeta = usePublishContext()?.viewMeta;
@@ -27,11 +29,18 @@ export function PublishViewHeader() {
 
   return (
     <div className={'appflowy-top-bar flex h-[64px] px-5'}>
-      <div className={'flex w-full items-center justify-between overflow-hidden'}>
-        <Breadcrumb crumbs={crumbs} />
-        <button onClick={openOrDownload}>
-          <Logo className={'h-6 w-6'} />
-        </button>
+      <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
+        <div className={'flex-1'}>
+          <Breadcrumb crumbs={crumbs} />
+        </div>
+
+        <div className={'flex items-center gap-2'}>
+          <MoreActions />
+          <Divider orientation={'vertical'} className={'mx-2'} flexItem />
+          <button onClick={openOrDownload}>
+            <Logo className={'h-6 w-6'} />
+          </button>
+        </div>
       </div>
     </div>
   );

frontend/appflowy_web_app/src/styles/app.scss

@@ -23,6 +23,7 @@ body {
     @apply bg-content-blue-100;
   }
 
+  @apply bg-bg-body text-text-title;
   &[data-os="windows"]:not([data-browser="firefox"]) {
     .appflowy-custom-scroller {
       @include mixin.hidden-scrollbar