pool+ui: add "preview" badge to Pool page title and nav menu

Author: jamaljsr

app/src/components/base/shared.tsx

@@ -25,18 +25,27 @@ export const Pill = styled.span`
   border-radius: 40px;
 `;
 
-export const Badge = styled.span`
+export const Badge = styled.span<{ muted?: boolean }>`
   display: inline-block;
   margin-left: 10px;
   font-family: ${props => props.theme.fonts.open.light};
   font-size: ${props => props.theme.sizes.xxs};
+  font-weight: 700;
   color: ${props => props.theme.colors.pink};
   border: 1px solid ${props => props.theme.colors.pink};
   border-radius: 4px;
   padding: 3px 5px 5px;
   text-transform: lowercase;
   line-height: 1;
   letter-spacing: 1.8px;
+
+  ${props =>
+    props.muted &&
+    `
+    color: ${props.theme.colors.gray};
+    border: 1px solid ${props.theme.colors.gray};
+
+  `}
 `;
 
 export const Section = styled.section`

app/src/components/layout/NavMenu.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { HeaderFour } from 'components/base';
+import { Badge, HeaderFour } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -18,7 +18,7 @@ const Styled = {
     font-size: ${props => props.theme.sizes.xs};
     margin-right: -17px;
 
-    span {
+    > span {
       display: block;
       height: 50px;
       line-height: 50px;
@@ -34,7 +34,7 @@ const Styled = {
       }
     }
 
-    &.active span {
+    &.active > span {
       border-left: 3px solid ${props => props.theme.colors.offWhite};
       background-color: ${props => props.theme.colors.blue};
 
@@ -45,19 +45,28 @@ const Styled = {
   `,
 };
 
-const NavItem: React.FC<{ page: string; onClick: () => void }> = observer(
-  ({ page, onClick }) => {
-    const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
-    const { router } = useStore();
-    const className = router.location.pathname === `/${page}` ? 'active' : '';
+const NavItem: React.FC<{
+  page: string;
+  preview?: boolean;
+  onClick: () => void;
+}> = observer(({ page, preview, onClick }) => {
+  const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
+  const { router } = useStore();
+  const className = router.location.pathname === `/${page}` ? 'active' : '';
 
-    return (
-      <Styled.NavItem className={className}>
-        <span onClick={onClick}>{l(page)}</span>
-      </Styled.NavItem>
-    );
-  },
-);
+  return (
+    <Styled.NavItem className={className}>
+      <span onClick={onClick}>
+        {l(page)}
+        {preview && (
+          <sup>
+            <Badge muted>{l('common.preview')}</Badge>
+          </sup>
+        )}
+      </span>
+    </Styled.NavItem>
+  );
+});
 
 const NavMenu: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
@@ -70,7 +79,7 @@ const NavMenu: React.FC = () => {
       <Nav>
         <NavItem page="loop" onClick={appView.goToLoop} />
         <NavItem page="history" onClick={appView.goToHistory} />
-        <NavItem page="pool" onClick={appView.goToPool} />
+        <NavItem page="pool" preview onClick={appView.goToPool} />
         <NavItem page="settings" onClick={appView.goToSettings} />
       </Nav>
     </>

app/src/components/pool/PoolPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Column, Row } from 'components/base';
+import { Badge, Column, Row } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
 import { styled } from 'components/theme';
 import AccountSection from './AccountSection';
@@ -52,11 +52,20 @@ const PoolPage: React.FC = () => {
     };
   }, [accountStore, orderStore, batchStore]);
 
+  const title = (
+    <>
+      {l('pageTitle')}
+      <sup>
+        <Badge muted>{l('common.preview')}</Badge>
+      </sup>
+    </>
+  );
+
   const { Wrapper, Row, Col } = Styled;
   return (
     <Wrapper>
       <PageHeader
-        title={l('pageTitle')}
+        title={title}
         exportTip={l('exportTip')}
         onExportClick={orderStore.exportLeases}
       />

app/src/i18n/locales/en-US.json

@@ -14,6 +14,7 @@
   "common.weeks_plural": "weeks",
   "common.months": "month",
   "common.months_plural": "months",
+  "common.preview": "preview",
   "enums.BalanceMode.receive": "Receiving",
   "enums.BalanceMode.send": "Sending",
   "enums.BalanceMode.routing": "Routing",