nav: add Lightning Terminal to the sidebar

Author: jamaljsr

app/src/__tests__/components/history/HistoryPage.spec.tsx

@@ -21,16 +21,6 @@ describe('HistoryPage', () => {
     expect(getByText('Loop History')).toBeInTheDocument();
   });
 
-  it('should display the back link', () => {
-    const { getByText } = render();
-    expect(getByText('Lightning Loop')).toBeInTheDocument();
-  });
-
-  it('should display the back icon', () => {
-    const { getByText } = render();
-    expect(getByText('arrow-left.svg')).toBeInTheDocument();
-  });
-
   it('should display the export icon', () => {
     const { getByText } = render();
     expect(getByText('download.svg')).toBeInTheDocument();
@@ -45,12 +35,6 @@ describe('HistoryPage', () => {
     expect(getByText('Updated')).toBeInTheDocument();
   });
 
-  it('should navigate back to the Loop Page', () => {
-    const { getByText } = render();
-    fireEvent.click(getByText('arrow-left.svg'));
-    expect(store.router.location.pathname).toBe('/loop');
-  });
-
   it('should export channels', () => {
     const { getByText } = render();
     fireEvent.click(getByText('download.svg'));

app/src/components/auth/AuthPage.tsx

@@ -82,8 +82,8 @@ const AuthPage: React.FC = () => {
     <Background gradient>
       <Wrapper>
         <Logo />
-        <Title>{l('lightning')}</Title>
-        <Title>{l('terminal')}</Title>
+        <Title>{l('common.lightning')}</Title>
+        <Title>{l('common.terminal')}</Title>
         <Subtitle>{l('subtitle')}</Subtitle>
         <Form onSubmit={handleSubmit}>
           <Input

app/src/components/common/PageHeader.tsx

@@ -14,7 +14,6 @@ const Styled = {
   Left: styled.span<{ sidebar?: boolean }>`
     flex: 1;
     text-align: left;
-    padding-left: ${props => (props.sidebar ? '0' : '40px')};
   `,
   Center: styled.span`
     flex: 1;

app/src/components/history/HistoryPage.tsx

@@ -14,17 +14,12 @@ const Styled = {
 
 const HistoryPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
-  const { uiStore, swapStore } = useStore();
+  const { swapStore } = useStore();
 
   const { Wrapper } = Styled;
   return (
     <Wrapper>
-      <PageHeader
-        title={l('pageTitle')}
-        backText={l('backText')}
-        onBackClick={uiStore.goToLoop}
-        onExportClick={swapStore.exportSwaps}
-      />
+      <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
       <HistoryList />
     </Wrapper>
   );

app/src/components/layout/Brand.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
+import { usePrefixedTranslation } from 'hooks';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.div`
+    display: flex;
+    align-items: center;
+  `,
+  Logo: styled(LogoImage)`
+    color: ${props => props.theme.colors.offWhite};
+    height: 35px;
+    margin-left: 10px;
+    margin-right: 5px;
+  `,
+  BrandName: styled.div`
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+    span:first-of-type {
+      font-family: ${props => props.theme.fonts.open.regular};
+      font-size: ${props => props.theme.sizes.xs};
+      text-transform: uppercase;
+      letter-spacing: 5px;
+    }
+
+    span:last-of-type {
+      font-family: ${props => props.theme.fonts.work.semiBold};
+      font-size: ${props => props.theme.sizes.m};
+      text-transform: uppercase;
+      letter-spacing: 3px;
+    }
+  `,
+};
+
+const Brand: React.FC = () => {
+  const { l } = usePrefixedTranslation('common');
+
+  const { Wrapper, Logo, BrandName } = Styled;
+  return (
+    <Wrapper>
+      <Logo />
+      <BrandName>
+        <span>{l('lightning')}</span>
+        <span>{l('terminal')}</span>
+      </BrandName>
+    </Wrapper>
+  );
+};
+
+export default Brand;

app/src/components/layout/Layout.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'store';
 import { Background, Menu } from 'components/base';
 import { styled } from 'components/theme';
+import Brand from './Brand';
 import Sidebar from './Sidebar';
 
 interface CollapsedProps {
@@ -17,13 +18,18 @@ const Styled = {
     width: 100%;
     margin: 0 auto;
   `,
-  Hamburger: styled.span<CollapsedProps>`
-    display: inline-block;
+  Header: styled.div<CollapsedProps>`
+    display: flex;
+    align-items: center;
     position: ${props => (props.collapsed ? 'absolute' : 'fixed')};
     top: 35px;
     margin-left: 10px;
     z-index: 2;
     padding: 4px;
+  `,
+  Hamburger: styled.span`
+    display: inline-block;
+    height: 36px;
 
     &:hover {
       color: ${props => props.theme.colors.blue};
@@ -64,16 +70,16 @@ const Styled = {
 export const Layout: React.FC = ({ children }) => {
   const { settingsStore } = useStore();
 
-  const { Container, Hamburger, Aside, Content } = Styled;
+  const { Container, Header, Hamburger, Aside, Content } = Styled;
   return (
     <Background>
       <Container>
-        <Hamburger
-          collapsed={!settingsStore.sidebarVisible}
-          onClick={settingsStore.toggleSidebar}
-        >
-          <Menu size="large" />
-        </Hamburger>
+        <Header collapsed={!settingsStore.sidebarVisible}>
+          <Hamburger onClick={settingsStore.toggleSidebar}>
+            <Menu size="large" />
+          </Hamburger>
+          <Brand />
+        </Header>
         <Aside collapsed={!settingsStore.sidebarVisible}>
           <Sidebar />
         </Aside>

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

@@ -2,11 +2,11 @@
   "common.loop": "Loop",
   "common.loopIn": "Loop In",
   "common.loopOut": "Loop Out",
+  "common.lightning": "Lightning",
+  "common.terminal": "Terminal",
   "enums.BalanceMode.receive": "Receiving",
   "enums.BalanceMode.send": "Sending",
   "enums.BalanceMode.routing": "Routing",
-  "cmps.auth.AuthPage.lightning": "Lightning",
-  "cmps.auth.AuthPage.terminal": "Terminal",
   "cmps.auth.AuthPage.subtitle": "Efficiently manage Lightning node liquidity",
   "cmps.auth.AuthPage.passLabel": "Enter your password in the field above",
   "cmps.auth.AuthPage.submitBtn": "Submit",