change and remove button component old

yorkie-team · Jun 24, 2024 · 49f0e41 · 49f0e41
1 parent cf38969
commit 49f0e41
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 537 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,7 +35,7 @@ import {
 import { useAppSelector } from 'app/hooks';
 import { DocumentDetail } from 'features/documents';
 import { selectPreferences } from 'features/users/usersSlice';
-import { TestPage, ButtonView, PopoverView, DropdownView, InputView, BreadcrumbView, ModalView } from 'test';
+import { TestPage, PopoverView, DropdownView, InputView, BreadcrumbView, ModalView } from 'test';
 
 function App() {
   const { theme } = useAppSelector(selectPreferences);
@@ -67,7 +67,6 @@ function App() {
         {process.env.NODE_ENV === 'development' && (
           <Route path="/test" element={<TestPage />}>
             <Route path="/test" element={<Navigate to="./button" />} />
-            <Route path="/test/button" element={<ButtonView />} />
             <Route path="/test/popover" element={<PopoverView />} />
             <Route path="/test/dropdown" element={<DropdownView />} />
             <Route path="/test/input" element={<InputView />} />

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
diff --git a/src/components/Button/ButtonBox.tsx b/src/components/Button/ButtonBox.tsx
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -15,7 +15,6 @@
  */
 
 export * from './Icons/Icon';
-export * from './Button/Button';
 export * from './CopyButton/CopyButton';
 export * from './Input/InputTextBox';
 export * from './Input/InputTextField';

diff --git a/src/features/documents/DocumentDetail.tsx b/src/features/documents/DocumentDetail.tsx
@@ -19,7 +19,8 @@ import { fromUnixTime, format } from 'date-fns';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
 import { selectDocumentDetail, getDocumentAsync, removeDocumentByAdminAsync } from './documentsSlice';
-import { Icon, Button, CodeBlock, CopyButton, Popover, Dropdown } from 'components';
+import { Button } from 'yorkie-ui';
+import { Icon, CodeBlock, CopyButton, Popover, Dropdown } from 'components';
 
 export function DocumentDetail() {
   const navigate = useNavigate();
@@ -89,12 +90,14 @@ export function DocumentDetail() {
         <div className="box_right">
           <Button
             icon={<Icon type="codeSnippet" />}
+            position="start"
             color="toggle"
             onClick={() => SetViewType('code')}
             className={viewType === 'code' ? 'is_active' : ''}
           />
           <Button
             icon={<Icon type="branch" />}
+            position="start"
             color="toggle"
             onClick={() => SetViewType('tree')}
             className={viewType === 'tree' ? 'is_active' : ''}
@@ -103,7 +106,13 @@ export function DocumentDetail() {
             <CopyButton value={document?.snapshot || ''} timeout={1000}>
               {({ copied, copy }) => (
                 <>
-                  <Button icon={<Icon type="copy" />} color="toggle" outline onClick={copy} />
+                  <Button
+                    icon={<Icon type="copy" />}
+                    position="start"
+                    color="toggle"
+                    variant="outline"
+                    onClick={copy}
+                  />
                   {copied && (
                     <div className="toast_box shadow_l">
                       <Icon type="check" />

diff --git a/src/pages/CommunityPage.tsx b/src/pages/CommunityPage.tsx
@@ -17,7 +17,8 @@
 import React from 'react';
 import { PageTemplate } from './PageTemplate';
 import { ReactComponent as CommunitySVG } from 'assets/icons/community_help.svg';
-import { Button, Icon } from 'components';
+import { Button } from 'yorkie-ui';
+import { Icon } from 'components';
 
 export function CommunityPage() {
   return (
@@ -27,33 +28,36 @@ export function CommunityPage() {
       </div>
       <h2 className="title">Join our community</h2>
       <p className="desc">
-        If you have any questions along the way,<br className="br_mo" /> please don’t hesitate to ask us<br className="br_tablet" /> through our<br className="br_mo" /><br className="br_pc" />
-        channels.<br className="br_mo_xs" /> You can sign up for our Discord or<br className="br_mo" /> raise GitHub<br className="br_tablet" /> discussions.
+        If you have any questions along the way,
+        <br className="br_mo" /> please don’t hesitate to ask us
+        <br className="br_tablet" /> through our
+        <br className="br_mo" />
+        <br className="br_pc" />
+        channels.
+        <br className="br_mo_xs" /> You can sign up for our Discord or
+        <br className="br_mo" /> raise GitHub
+        <br className="br_tablet" /> discussions.
       </p>
-      <Button.Box>
-        <Button
-          icon={<Icon type="discord" />}
-          href="https://discord.gg/MVEAwz9sBy"
-          className="gray50"
-          as="a"
-          outline
-          target="_blank"
-          rel="noreferrer"
-        >
-          Discord
-        </Button>
-        <Button
-          icon={<Icon type="github" />}
-          href="https://github.com/yorkie-team/dashboard/issues"
-          className="gray50"
-          as="a"
-          outline
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub
-        </Button>
-      </Button.Box>
+      <Button
+        icon={<Icon type="discord" />}
+        href="https://discord.gg/MVEAwz9sBy"
+        className="gray50"
+        as="link"
+        variant="outline"
+        rel="noreferrer"
+      >
+        Discord
+      </Button>
+      <Button
+        icon={<Icon type="github" />}
+        href="https://github.com/yorkie-team/dashboard/issues"
+        className="gray50"
+        as="link"
+        variant="outline"
+        rel="noreferrer"
+      >
+        GitHub
+      </Button>
     </PageTemplate>
   );
 }
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
@@ -17,48 +17,65 @@
 import React from 'react';
 import { PageTemplate } from './PageTemplate';
 import { ReactComponent as NotFoundSVG } from 'assets/icons/error_404.svg';
-import { Button, Icon } from 'components';
+import { Button, Icon, Box, Heading, Text, Flex, IconDiscord, IconGitHub, IconBackHome, Container } from 'yorkie-ui';
 
 export function NotFoundPage() {
   return (
     <PageTemplate className="error_page" contentClassName="error_404">
-      <div className="img_box">
-        <NotFoundSVG />
-      </div>
-      <h2 className="title">
-        Oops! Wait a minute... <br />
-        Yorkie ate your request
-      </h2>
-      <p className="desc">
-        The page you are looking for might be<br className="br_mo" /> removed or is temporarily unavailable.
-      </p>
-      <Button.Box>
-        <Button icon={<Icon type="backHome" />} href="/" className="orange_0" as="link">
-          Back to Home
-        </Button>
-        <Button
-          icon={<Icon type="discord" />}
-          href="https://discord.gg/MVEAwz9sBy"
-          className="gray50"
-          as="a"
-          outline
-          target="_blank"
-          rel="noreferrer"
-        >
-          Discord
-        </Button>
-        <Button
-          icon={<Icon type="github" />}
-          href="https://github.com/yorkie-team/dashboard/issues"
-          className="gray50"
-          as="a"
-          outline
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub
-        </Button>
-      </Button.Box>
+      <Container
+        paddingBlock={{ base: '6', lg: '20' }}
+        margin="auto"
+        paddingInline={{ base: '6', lg: '0' }}
+        width={{ sm: 'breakpoint-sm', md: 'breakpoint-md', lg: 'breakpoint-lg', xl: 'breakpoint-xl' }}
+      >
+        <Flex flexDirection={{ base: 'column', lg: 'row' }} justifyContent="space-evenly">
+          <Heading as="h2" fontSize="3xl" display="none">
+            404 : not found
+          </Heading>
+          <div>
+            <NotFoundSVG />
+          </div>
+          <Box>
+            <Text fontSize="4xl" fontWeight="semibold">
+              Oops! Wait a minute... <br />
+              Yorkie ate your request
+            </Text>
+            <Text marginBlock="10">
+              The page you are looking for might be
+              <br className="br_mo" /> removed or is temporarily unavailable.
+            </Text>
+            <Flex gap="6" flexDirection={{ base: 'column', lg: 'row' }}>
+              <Button as="link" href="/" position="start" icon={<Icon icon={<IconBackHome />} />}>
+                Back to home
+              </Button>
+              <Button
+                as="link"
+                href="https://discord.gg/MVEAwz9sBy"
+                background="grey.a9"
+                variant="outline"
+                position="start"
+                stroke="neutral.11"
+                className="fillSVG"
+                icon={<IconDiscord />}
+              >
+                Discord
+              </Button>
+              <Button
+                as="link"
+                href="https://github.com/yorkie-team/dashboard/issues"
+                background="grey.a9"
+                stroke="neutral.11"
+                className="fillSVG"
+                variant="outline"
+                position="start"
+                icon={<IconGitHub />}
+              >
+                GitHub
+              </Button>
+            </Flex>
+          </Box>
+        </Flex>
+      </Container>
     </PageTemplate>
   );
 }