fix: Styled components organization. (#77)

* Split loading overlay to other component. * Organize styles of landing page. * Organize styles of search result page. * Organize styles of ShareButton. * Organize styles of Navbar. * Organize styles of GetApp button.
Taiwan-Ebook-Lover · Jun 8, 2022 · 9785b02 · 9785b02
1 parent c100a21
commit 9785b02
Show file tree

Hide file tree

Showing 16 changed files with 405 additions and 359 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,11 @@
-import Box from '@components/Box';
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Routes from '@routes';
+import FullSizeLoading from '@components/FullSizeLoading';
 import { FunctionComponent, Suspense } from 'react';
 import { useThemeSwitcher } from 'react-css-theme-switcher';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
+import Routes from './routes';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,21 +17,6 @@ const queryClient = new QueryClient({
   },
 });
 
-const SuspenseLoading: FunctionComponent = () => {
-  return (
-    <Box
-      height="100vh"
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" style={{ fontSize: 24 }} />
-      <Box mt="1rem">Loading...</Box>
-    </Box>
-  );
-};
-
 const App: FunctionComponent = () => {
   const { status } = useThemeSwitcher();
 
@@ -43,7 +26,7 @@ const App: FunctionComponent = () => {
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <BrowserRouter>
-          <Suspense fallback={<SuspenseLoading />}>
+          <Suspense fallback={<FullSizeLoading />}>
             <Routes />
           </Suspense>
         </BrowserRouter>

diff --git a/src/components/FullSizeLoading/index.tsx b/src/components/FullSizeLoading/index.tsx
@@ -0,0 +1,21 @@
+import Box from '@components/Box';
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FunctionComponent } from 'react';
+
+const FullSizeLoading: FunctionComponent = () => {
+  return (
+    <Box
+      height="100%"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" style={{ fontSize: 24 }} />
+      <Box mt="1rem">Loading...</Box>
+    </Box>
+  );
+};
+
+export default FullSizeLoading;
diff --git a/src/components/GetApp/index.tsx b/src/components/GetApp/index.tsx
@@ -1,10 +1,9 @@
 import appStoreBadge from '@assets/images/storeBadge/app-store-badge.svg';
 import googlePlayBadge from '@assets/images/storeBadge/play-store-badge.svg';
-import { breakpoints } from '@assets/themes/globalTheme';
 import Box from '@components/Box';
-import { Button, Modal } from 'antd';
+import { Modal } from 'antd';
 import { FunctionComponent, useState } from 'react';
-import styled from 'styled-components';
+import { GetAppButton, PlatformBadge } from './styles';
 
 export interface GetAppProps {
   textcolor?: 'grey' | 'white';
@@ -15,28 +14,6 @@ export enum PlatformType {
   IOS,
 }
 
-const StyledBadge = styled.img`
-  cursor: pointer;
-  max-height: 5rem;
-
-  & + & {
-    margin: 1.5rem 0 0 0;
-  }
-
-  @media (min-width: ${breakpoints.md}) {
-    max-height: 2.5rem;
-
-    & + & {
-      margin: 0 0 0 0.5rem;
-    }
-  }
-`;
-
-const StyledGetAppButton = styled(Button)<GetAppProps>`
-  color: ${({ textcolor }) =>
-    textcolor === 'grey' ? 'var(--gray-7)' : 'var(--gray-1)'} !important;
-`;
-
 const links: Record<PlatformType, string> = {
   [PlatformType.ANDROID]:
     'https://play.google.com/store/apps/details?id=liou.rayyuan.ebooksearchtaiwan',
@@ -49,8 +26,8 @@ const openLink = (platform: PlatformType) => {
 
 const Badges = () => (
   <>
-    <StyledBadge src={appStoreBadge} alt="App Store" onClick={() => openLink(PlatformType.IOS)} />
-    <StyledBadge
+    <PlatformBadge src={appStoreBadge} alt="App Store" onClick={() => openLink(PlatformType.IOS)} />
+    <PlatformBadge
       src={googlePlayBadge}
       alt="Google Play Store"
       onClick={() => openLink(PlatformType.ANDROID)}
@@ -67,9 +44,9 @@ const GetApp: FunctionComponent<GetAppProps> = ({ textcolor = 'grey' }) => {
         <Badges />
       </Box>
       <Box display={['block', null, null, 'none']} height="2.5rem">
-        <StyledGetAppButton type="text" textcolor={textcolor} onClick={() => setModalOpen(true)}>
+        <GetAppButton type="text" textcolor={textcolor} onClick={() => setModalOpen(true)}>
           Get App
-        </StyledGetAppButton>
+        </GetAppButton>
       </Box>
       <Modal
         title="Get App"

diff --git a/src/components/GetApp/styles.ts b/src/components/GetApp/styles.ts
@@ -0,0 +1,26 @@
+import { breakpoints } from '@assets/themes/globalTheme';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { GetAppProps } from '.';
+
+export const PlatformBadge = styled.img`
+  cursor: pointer;
+  max-height: 5rem;
+
+  & + & {
+    margin: 1.5rem 0 0 0;
+  }
+
+  @media (min-width: ${breakpoints.md}) {
+    max-height: 2.5rem;
+
+    & + & {
+      margin: 0 0 0 0.5rem;
+    }
+  }
+`;
+
+export const GetAppButton = styled(Button)<GetAppProps>`
+  color: ${({ textcolor }) =>
+    textcolor === 'grey' ? 'var(--gray-7)' : 'var(--gray-1)'} !important;
+`;
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,44 +1,12 @@
 import ebookLogo from '@assets/images/logo/ebook-logo.svg';
-import { breakpoints } from '@assets/themes/globalTheme';
 import Box from '@components/Box';
 import FilterDrawer from '@components/FilterDrawer';
 import GetApp from '@components/GetApp';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from 'antd';
 import { FunctionComponent, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-
-const StyledNavbar = styled.header`
-  padding: 1rem;
-  display: flex;
-  background-color: var(--primary-color);
-  color: var(--gray-1);
-  z-index: 100;
-  box-shadow: 0px 0.25rem 0.25rem rgba(0, 0, 0, 0.3);
-`;
-
-const StyledLogo = styled.img`
-  height: 2.5rem;
-  margin: 0 0.5rem;
-  cursor: pointer;
-`;
-
-const StyledTitle = styled.span`
-  font-size: 1.5rem;
-  font-weight: 300;
-  line-height: 1.5;
-  display: none;
-
-  @media (min-width: ${breakpoints.md}) {
-    display: inline;
-  }
-`;
-
-const StyledSearchButton = styled(Button)`
-  color: var(--gray-1) !important;
-`;
+import { Logo, NavbarWrapper, SearchButton, Title } from './styles';
 
 export interface NavbarProps {
   onConfirm?: () => void;
@@ -55,7 +23,7 @@ const Navbar: FunctionComponent<NavbarProps> = ({ onConfirm }) => {
 
   return (
     <>
-      <StyledNavbar>
+      <NavbarWrapper>
         <Box
           flex="2"
           display="flex"
@@ -68,24 +36,24 @@ const Navbar: FunctionComponent<NavbarProps> = ({ onConfirm }) => {
             alignItems="center"
             justifyContent={['center', null, null, 'flex-start']}
           >
-            <StyledLogo src={ebookLogo} onClick={() => navigate('/')} />
-            <StyledTitle>台灣電子書搜尋</StyledTitle>
+            <Logo src={ebookLogo} onClick={() => navigate('/')} />
+            <Title>台灣電子書搜尋</Title>
           </Box>
           <Box
             flex="1"
             display={['flex', null, null, 'none']}
             alignItems="center"
             justifyContent="flex-start"
           >
-            <StyledSearchButton type="text" onClick={() => setDrawerVisible(true)}>
+            <SearchButton type="text" onClick={() => setDrawerVisible(true)}>
               <FontAwesomeIcon icon={faSearch} style={{ fontSize: '1.5rem' }} />
-            </StyledSearchButton>
+            </SearchButton>
           </Box>
         </Box>
         <Box flex="1" display="flex" justifyContent="flex-end">
           <GetApp textcolor="white" />
         </Box>
-      </StyledNavbar>
+      </NavbarWrapper>
       <FilterDrawer visible={drawerVisible} onConfirm={onFormConfirm} onClose={onFormConfirm} />
     </>
   );

diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
@@ -0,0 +1,33 @@
+import { breakpoints } from '@assets/themes/globalTheme';
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const NavbarWrapper = styled.header`
+  padding: 1rem;
+  display: flex;
+  background-color: var(--primary-color);
+  color: var(--gray-1);
+  z-index: 100;
+  box-shadow: 0px 0.25rem 0.25rem rgba(0, 0, 0, 0.3);
+`;
+
+export const Logo = styled.img`
+  height: 2.5rem;
+  margin: 0 0.5rem;
+  cursor: pointer;
+`;
+
+export const Title = styled.span`
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1.5;
+  display: none;
+
+  @media (min-width: ${breakpoints.md}) {
+    display: inline;
+  }
+`;
+
+export const SearchButton = styled(Button)`
+  color: var(--gray-1) !important;
+`;
diff --git a/src/components/ShareButton/ShareModal.tsx b/src/components/ShareButton/ShareModal.tsx
@@ -19,54 +19,7 @@ import {
   TelegramShareButton,
   TwitterShareButton,
 } from 'react-share';
-import styled from 'styled-components';
-
-const StyledShareButtonWrapper = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 2rem;
-  font-size: 1.2rem;
-
-  & > button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.8rem !important;
-    border-radius: 0.5rem;
-    transition-duration: 0.3s;
-    transition-property: background-color, opacity;
-
-    &[aria-label] {
-      border: 1px solid var(--gray-5) !important;
-      background-color: var(--gray-1) !important;
-
-      &:hover {
-        background-color: var(--gray-4) !important;
-      }
-
-      & > [data-icon] {
-        font-size: 2rem;
-        margin-right: 0.7rem;
-      }
-    }
-  }
-`;
-
-const StyledCopyButton = styled.button`
-  grid-column: 1 / 3;
-  background-color: var(--primary-color);
-  cursor: pointer;
-  color: var(--gray-1);
-  border: none;
-
-  &:hover {
-    opacity: 0.8;
-  }
-
-  & > [data-icon] {
-    margin-right: 0.5rem;
-  }
-`;
+import { CopyButton, ShareButtonWrapper } from './styles';
 
 export interface ShareModalProps {
   open: boolean;
@@ -88,7 +41,7 @@ const ShareModal: FunctionComponent<ShareModalProps> = ({ open, onCancel, url, c
 
   return (
     <Modal title="分享" visible={open} centered footer={null} onCancel={onCancel}>
-      <StyledShareButtonWrapper>
+      <ShareButtonWrapper>
         <FacebookShareButton url={url}>
           <FontAwesomeIcon icon={faFacebook} style={{ color: '#2e89ff' }} />
           Facebook
@@ -113,11 +66,11 @@ const ShareModal: FunctionComponent<ShareModalProps> = ({ open, onCancel, url, c
           <FontAwesomeIcon icon={faTwitter} style={{ color: '#1d9bf0' }} />
           Twitter
         </TwitterShareButton>
-        <StyledCopyButton onClick={copy}>
+        <CopyButton onClick={copy}>
           <FontAwesomeIcon icon={faLink} />
           複製連結
-        </StyledCopyButton>
-      </StyledShareButtonWrapper>
+        </CopyButton>
+      </ShareButtonWrapper>
     </Modal>
   );
 };