mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
fix: separate icons page
This commit is contained in:
ascarbek
parent
68bfa0b9cd
commit
73c4a33191
@ -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 />} />
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user