fix: update offline notice style

web/app/components/offline-notice.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { RiCloseLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import type { PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function OfflineNotice({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const [showOfflineNotice, { setFalse }] = useBoolean(true)
+
+  useEffect(() => {
+    const timer = setTimeout(setFalse, 60000)
+    return () => clearTimeout(timer)
+  }, [setFalse])
+  return <>
+    {showOfflineNotice && <div className='px-4 py-2 flex items-center justify-start gap-x-2 bg-[#FFFAEB] border-b-[0.5px] border-b-[#FEF0C7]'>
+      <div className='rounded-[12px] flex items-center justify-center px-2 py-0.5 h-[22px] bg-[#f79009] text-white text-[11px] not-italic font-medium leading[18px]'>{t('common.offlineNoticeTitle')}</div>
+      <div className='grow font-medium leading-[18px] text-[12px] not-italic text-[#344054]'>{t('common.offlineNotice')}</div>
+      <RiCloseLine className='size-4 text-[#667085] cursor-pointer' onClick={setFalse} />
+    </div>}
+    {children}
+  </>
+}

web/app/components/sentry-initor.tsx

@@ -2,24 +2,12 @@
 
 import { useEffect } from 'react'
 import * as Sentry from '@sentry/react'
-import { useTranslation } from 'react-i18next'
-import Toast from './base/toast'
-import { useDebounceEffect } from 'ahooks'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 
 const SentryInit = ({
   children,
 }: { children: React.ReactElement }) => {
-  const { t } = useTranslation()
-  useDebounceEffect(() => {
-    Toast.notify({
-      type: 'warning',
-      message: t('common.offlineNotice'),
-      duration: 60000,
-      className: 'fixed left-1/2 -translate-x-1/2 !w-[520px]',
-    })
-  }, [t])
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
     if (!isDevelopment && SENTRY_DSN) {

web/app/layout.tsx

@@ -7,6 +7,7 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
 import './styles/globals.css'
 import './styles/markdown.scss'
+import OfflineNotice from './components/offline-notice'
 
 export const metadata = {
   title: 'Dify',
@@ -61,7 +62,9 @@ const LocaleLayout = ({
                 disableTransitionOnChange
               >
                 <I18nServer>
-                  {children}
+                  <OfflineNotice>
+                    {children}
+                  </OfflineNotice>
                 </I18nServer>
               </ThemeProvider>
             </TanstackQueryIniter>

web/i18n/en-US/common.ts

@@ -1,4 +1,5 @@
 const translation = {
+  offlineNoticeTitle: 'Important Notice',
   offlineNotice: 'Dify v1.0.0 is now officially released. Effective February 24, 2025, the current environment will no longer be accessible, and all data will be permanently deleted. Please ensure that you back up any necessary data prior to this date to avoid any loss.',
   api: {
     success: 'Success',

web/i18n/zh-Hans/common.ts

@@ -1,4 +1,5 @@
 const translation = {
+  offlineNoticeTitle: '重要通知',
   offlineNotice: 'Dify v1.0.0 现已正式发布。自 2025年 2 月 24 日起，当前环境将不可访问，所有数据将被永久删除。请务必在此日期之前备份所有必要数据，以避免任何数据丢失。',
   api: {
     success: '成功',