fix: separate icons page

frontend/appflowy_tauri/src/appflowy_app/App.tsx

@@ -1,6 +1,6 @@
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 
-import { TestColors } from './components/TestColors/TestColors';
+import { ColorPalette } from './components/tests/ColorPalette';
 import { Provider } from 'react-redux';
 import { store } from './stores/store';
 import { DocumentPage } from './views/DocumentPage';
@@ -15,6 +15,7 @@ import initializeI18n from './stores/i18n/initializeI18n';
 import { TestAPI } from './components/tests/TestAPI';
 import { GetStarted } from './components/auth/GetStarted/GetStarted';
 import { ErrorBoundary } from 'react-error-boundary';
+import { AllIcons } from '$app/components/tests/AllIcons';
 
 initializeI18n();
 
@@ -25,7 +26,8 @@ const App = () => {
         <ErrorBoundary FallbackComponent={ErrorHandlerPage}>
           <Routes>
             <Route path={'/'} element={<ProtectedRoutes />}>
-              <Route path={'/page/colors'} element={<TestColors />} />
+              <Route path={'/page/all-icons'} element={<AllIcons />} />
+              <Route path={'/page/colors'} element={<ColorPalette />} />
               <Route path={'/page/api-test'} element={<TestAPI />} />
               <Route path={'/page/document/:id'} element={<DocumentPage />} />
               <Route path={'/page/board/:id'} element={<BoardPage />} />

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx

@@ -117,6 +117,7 @@ export const NavigationPanel = ({
             {/*<PluginsButton></PluginsButton>*/}
 
             <DesignSpec></DesignSpec>
+            <AllIcons></AllIcons>
             <TestBackendButton></TestBackendButton>
 
             {/*Trash Button*/}
@@ -158,7 +159,7 @@ export const TestBackendButton = () => {
       onClick={() => navigate('/page/api-test')}
       className={'flex w-full items-center rounded-lg px-4 py-2 hover:bg-surface-2'}
     >
-      APITest
+      API Test
     </button>
   );
 };
@@ -171,7 +172,19 @@ export const DesignSpec = () => {
       onClick={() => navigate('page/colors')}
       className={'flex w-full items-center rounded-lg px-4 py-2 hover:bg-surface-2'}
     >
-      Design Specs
+      Color Palette
+    </button>
+  );
+};
+
+export const AllIcons = () => {
+  const navigate = useNavigate();
+  return (
+    <button
+      onClick={() => navigate('page/all-icons')}
+      className={'flex w-full items-center rounded-lg px-4 py-2 hover:bg-surface-2'}
+    >
+      All Icons
     </button>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx → frontend/appflowy_tauri/src/appflowy_app/components/tests/AllIcons.tsx

@@ -1,10 +1,10 @@
 import AddSvg from '$app/components/_shared/svg/AddSvg';
-import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg';
-import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
 import { ArrowLeftSvg } from '$app/components/_shared/svg/ArrowLeftSvg';
 import { ArrowRightSvg } from '$app/components/_shared/svg/ArrowRightSvg';
 import { BoardSvg } from '$app/components/_shared/svg/BoardSvg';
 import { CheckboxSvg } from '$app/components/_shared/svg/CheckboxSvg';
+import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg';
+import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
 import { ClockSvg } from '$app/components/_shared/svg/ClockSvg';
 import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
 import { CopySvg } from '$app/components/_shared/svg/CopySvg';
@@ -20,6 +20,7 @@ import { EyeClosedSvg } from '$app/components/_shared/svg/EyeClosedSvg';
 import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
 import { FilterSvg } from '$app/components/_shared/svg/FilterSvg';
 import { GridSvg } from '$app/components/_shared/svg/GridSvg';
+import { GroupByFieldSvg } from '$app/components/_shared/svg/GroupByFieldSvg';
 import { HideMenuSvg } from '$app/components/_shared/svg/HideMenuSvg';
 import { InformationSvg } from '$app/components/_shared/svg/InformationSvg';
 import { LogoutSvg } from '$app/components/_shared/svg/LogoutSvg';
@@ -32,19 +33,17 @@ import { ShowMenuSvg } from '$app/components/_shared/svg/ShowMenuSvg';
 import { SingleSelectTypeSvg } from '$app/components/_shared/svg/SingleSelectTypeSvg';
 import { SkipLeftSvg } from '$app/components/_shared/svg/SkipLeftSvg';
 import { SkipRightSvg } from '$app/components/_shared/svg/SkipRightSvg';
-import { SortSharp } from '@mui/icons-material';
 import { SortSvg } from '$app/components/_shared/svg/SortSvg';
 import { TextTypeSvg } from '$app/components/_shared/svg/TextTypeSvg';
 import { TrashSvg } from '$app/components/_shared/svg/TrashSvg';
 import { UrlTypeSvg } from '$app/components/_shared/svg/UrlTypeSvg';
-import { GroupByFieldSvg } from '$app/components/_shared/svg/GroupByFieldSvg';
 
-export const TestColors = () => {
+export const AllIcons = () => {
   return (
     <div className={'p-8'}>
-      <h1 className={'mb-4 text-2xl'}>Icons</h1>
+      <h1 className={'mb-12 text-2xl'}>Icons</h1>
       <div className={'mb-8'}>
-        <div className={'flex flex-wrap items-center gap-4'}>
+        <div className={'flex flex-wrap items-center gap-8'}>
           <i className={'h-5 w-5'} title={'AddSvg'}>
             <AddSvg></AddSvg>
           </i>
@@ -164,45 +163,6 @@ export const TestColors = () => {
           </i>
         </div>
       </div>
-      <h1 className={'mb-4 text-2xl'}>Colors</h1>
-      <h2 className={'mb-4'}>Main</h2>
-      <div className={'mb-8 flex flex-wrap items-center'}>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-accent'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-hovered'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-secondary'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-selector'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-alert'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-warning'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-main-success'}></div>
-      </div>
-      <h2 className={'mb-4'}>Tint</h2>
-      <div className={'mb-8 flex flex-wrap items-center'}>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-1'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-2'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-3'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-4'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-5'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-6'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-7'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-8'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-tint-9'}></div>
-      </div>
-      <h2 className={'mb-4'}>Shades</h2>
-      <div className={'mb-8 flex flex-wrap items-center'}>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-1'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-2'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-3'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-4'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-5'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-shade-6'}></div>
-      </div>
-      <h2 className={'mb-4'}>Surface</h2>
-      <div className={'mb-8 flex flex-wrap items-center'}>
-        <div className={'m-2 h-[100px] w-[100px] bg-surface-1'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-surface-2'}></div>
-        <div className={'m-2 h-[100px] w-[100px] bg-surface-3'}></div>
-        <div className={'bg-surface-4 m-2 h-[100px] w-[100px]'}></div>
-      </div>
     </div>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/tests/ColorPalette.tsx

@@ -0,0 +1,45 @@
+export const ColorPalette = () => {
+  return (
+    <div className={'p-8'}>
+      <h1 className={'mb-4 text-2xl'}>Colors</h1>
+      <h2 className={'mb-4'}>Main</h2>
+      <div className={'mb-8 flex flex-wrap items-center'}>
+        <div title={'main-accent'} className={'m-2 h-[100px] w-[100px] bg-main-accent'}></div>
+        <div title={'main-hovered'} className={'m-2 h-[100px] w-[100px] bg-main-hovered'}></div>
+        <div title={'main-secondary'} className={'m-2 h-[100px] w-[100px] bg-main-secondary'}></div>
+        <div title={'main-selector'} className={'m-2 h-[100px] w-[100px] bg-main-selector'}></div>
+        <div title={'main-alert'} className={'m-2 h-[100px] w-[100px] bg-main-alert'}></div>
+        <div title={'main-warning'} className={'m-2 h-[100px] w-[100px] bg-main-warning'}></div>
+        <div title={'main-success'} className={'m-2 h-[100px] w-[100px] bg-main-success'}></div>
+      </div>
+      <h2 className={'mb-4'}>Tint</h2>
+      <div className={'mb-8 flex flex-wrap items-center'}>
+        <div title={'tint-1'} className={'m-2 h-[100px] w-[100px] bg-tint-1'}></div>
+        <div title={'tint-2'} className={'m-2 h-[100px] w-[100px] bg-tint-2'}></div>
+        <div title={'tint-3'} className={'m-2 h-[100px] w-[100px] bg-tint-3'}></div>
+        <div title={'tint-4'} className={'m-2 h-[100px] w-[100px] bg-tint-4'}></div>
+        <div title={'tint-5'} className={'m-2 h-[100px] w-[100px] bg-tint-5'}></div>
+        <div title={'tint-6'} className={'m-2 h-[100px] w-[100px] bg-tint-6'}></div>
+        <div title={'tint-7'} className={'m-2 h-[100px] w-[100px] bg-tint-7'}></div>
+        <div title={'tint-8'} className={'m-2 h-[100px] w-[100px] bg-tint-8'}></div>
+        <div title={'tint-9'} className={'m-2 h-[100px] w-[100px] bg-tint-9'}></div>
+      </div>
+      <h2 className={'mb-4'}>Shades</h2>
+      <div className={'mb-8 flex flex-wrap items-center'}>
+        <div title={'shade-1'} className={'m-2 h-[100px] w-[100px] bg-shade-1'}></div>
+        <div title={'shade-2'} className={'m-2 h-[100px] w-[100px] bg-shade-2'}></div>
+        <div title={'shade-3'} className={'m-2 h-[100px] w-[100px] bg-shade-3'}></div>
+        <div title={'shade-4'} className={'m-2 h-[100px] w-[100px] bg-shade-4'}></div>
+        <div title={'shade-5'} className={'m-2 h-[100px] w-[100px] bg-shade-5'}></div>
+        <div title={'shade-6'} className={'m-2 h-[100px] w-[100px] bg-shade-6'}></div>
+      </div>
+      <h2 className={'mb-4'}>Surface</h2>
+      <div className={'mb-8 flex flex-wrap items-center'}>
+        <div title={'surface-1'} className={'m-2 h-[100px] w-[100px] bg-surface-1'}></div>
+        <div title={'surface-2'} className={'m-2 h-[100px] w-[100px] bg-surface-2'}></div>
+        <div title={'surface-3'} className={'m-2 h-[100px] w-[100px] bg-surface-3'}></div>
+        <div title={'surface-4'} className={'bg-surface-4 m-2 h-[100px] w-[100px]'}></div>
+      </div>
+    </div>
+  );
+};