Added faq page

harmony-one · Oct 30, 2020 · f5774ce · f5774ce
1 parent e139f5b
commit f5774ce
Show file tree

Hide file tree

Showing 6 changed files with 401 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,8 @@ import { Explorer } from './pages/Explorer';
 import { MintTokens } from './pages/MintTokens';
 import { Tokens } from './pages/Tokens';
 import { InfoModal } from './components/InfoModal';
+import { FAQPage } from './pages/FAQ';
+import { InfoPage } from './pages/Info';
 
 export const App: React.FC = () => (
   <Providers>
@@ -18,6 +20,8 @@ export const App: React.FC = () => (
           <Route exact path="/get-tokens" component={MintTokens} />
         ) : null}
         <Route exact path="/tokens" component={Tokens} />
+        <Route exact path="/faq" component={FAQPage} />
+        <Route exact path="/info" component={InfoPage} />
         <Route exact path="/explorer" component={Explorer} />
         <Route exact path="/:token" component={EthBridge} />
         <Route

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -9,7 +9,6 @@ import { useStores } from '../../stores';
 import * as styles from './styles.styl';
 import cn from 'classnames';
 import { TOKEN } from '../../stores/interfaces';
-import { Info } from '../Info';
 // import { formatWithTwoDecimals } from '../../utils';
 
 const MainLogo = styled.img`
@@ -30,6 +29,8 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
     const isExplorer = history.location.pathname === '/explorer';
     const isTokens = history.location.pathname === '/tokens';
     const isGetTokens = history.location.pathname === '/get-tokens';
+    const isFaq = history.location.pathname === '/faq';
+    const isInfo = history.location.pathname === '/info';
 
     const goToBridge = () => {
       if (exchange.operation && exchange.operation.id) {
@@ -103,7 +104,9 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
             <Box
               className={cn(
                 styles.itemToken,
-                !isExplorer && !isGetTokens && !isTokens ? styles.selected : '',
+                !isInfo && !isFaq && !isExplorer && !isGetTokens && !isTokens
+                  ? styles.selected
+                  : '',
               )}
               onClick={goToBridge}
             >
@@ -132,28 +135,19 @@ export const Head: React.FC<IStyledChildrenProps<BoxProps>> = withTheme(
             </Box>
 
             <Box
-              className={cn(styles.itemToken)}
-              onClick={() => {
-                actionModals.open(
-                  () => <Info title="Ethereum <> Harmony Bridge" />,
-                  {
-                    title: '',
-                    applyText: 'Got it',
-                    closeText: '',
-                    noValidation: true,
-                    width: '1000px',
-                    showOther: true,
-                    onApply: () => {
-                      user.setInfoReading();
-                      return Promise.resolve();
-                    },
-                  },
-                );
-              }}
+              className={cn(styles.itemToken, isInfo ? styles.selected : '')}
+              onClick={() => routing.push('/info')}
             >
               <Text>Info</Text>
             </Box>
 
+            <Box
+              className={cn(styles.itemToken, isFaq ? styles.selected : '')}
+              onClick={() => routing.push('/faq')}
+            >
+              <Text>FAQ</Text>
+            </Box>
+
             {/*<Box*/}
             {/*  direction="column"*/}
             {/*  align="center"*/}

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -8,9 +8,11 @@ export const Info = ({ title }: { title: string }) => (
     className={styles.infoContainer}
     pad={{ horizontal: 'large', top: 'large' }}
   >
-    <Box direction="row" justify="center" margin={{ bottom: 'medium' }}>
-      <Title>{title}</Title>
-    </Box>
+    {title ? (
+      <Box direction="row" justify="center" margin={{ bottom: 'medium' }}>
+        <Title>{title}</Title>
+      </Box>
+    ) : null}
     <div>
       <p>
         <b>You can use this bridge to</b>

diff --git a/src/pages/FAQ/faq-styles.styl b/src/pages/FAQ/faq-styles.styl
@@ -0,0 +1,42 @@
+.faqContainer {
+  .item {
+    margin-bottom 15px;
+
+    .label {
+    }
+
+    .textContainer {
+      // margin-top -10px
+      margin-left 30px
+
+      .text {
+        color black
+        line-height 25px
+        margin 5px 0
+
+        ul {
+          list-style none
+          padding-left 20px
+
+          li {
+            margin 7px 0
+          }
+        }
+
+        p {
+          margin 0
+          padding 0
+        }
+
+        span {
+          color: #47b8eb
+        }
+
+        a {
+          color #47b8eb
+          text-decoration-color #47b8eb
+        }
+      }
+    }
+  }
+}