apotdevin · apotdevin · Apr 16, 2020 · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020
diff --git a/Dockerfile b/Dockerfile
@@ -1,20 +1,17 @@
-FROM node:11-alpine
+FROM node:12-alpine
 
 # Create app directory
 WORKDIR /usr/src/app
 
-RUN apk update && apk upgrade \
-    && apk --no-cache add --virtual builds-deps build-base python \
-    && npm install node-gyp node-pre-gyp
-
 # Install app dependencies
 COPY package.json /usr/src/app/
-RUN npm install --only=prod
-RUN npm install cross-env
+COPY yarn.lock /usr/src/app/
+RUN yarn --production=true
+RUN yarn add cross-env
 
 # Bundle app source
 COPY . /usr/src/app
-RUN npm run build
+RUN yarn build
 EXPOSE 3000
 
-CMD [ "npm", "start" ]
+CMD [ "yarn", "start" ]
diff --git a/next.config.js b/next.config.js
@@ -14,6 +14,7 @@ module.exports = withBundleAnalyzer({
   publicRuntimeConfig: {
     nodeEnv: process.env.NODE_ENV || 'development',
     apiUrl: `${process.env.BASE_PATH || ''}/api/v1`,
+    apiBaseUrl: `${process.env.API_BASE_URL || ''}/api/v1`,
     basePath: process.env.BASE_PATH || '',
     npmVersion: process.env.npm_package_version || '0.0.0',
   },

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.4",
+    "@apollo/react-hooks": "^3.1.5",
     "apollo-boost": "^0.4.7",
     "apollo-server-micro": "^2.12.0",
     "base64url": "^3.0.1",
@@ -29,14 +29,14 @@
     "graphql-iso-date": "^3.6.1",
     "graphql-rate-limit": "^2.0.1",
     "graphql-tag": "^2.10.3",
-    "intersection-observer": "^0.7.0",
+    "intersection-observer": "^0.8.0",
     "isomorphic-unfetch": "^3.0.0",
     "ln-service": "^47.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "micro-cors": "^0.1.1",
-    "next": "^9.3.4",
-    "next-with-apollo": "^5.0.0",
+    "next": "^9.3.5",
+    "next-with-apollo": "^5.0.1",
     "numeral": "^2.0.6",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
@@ -47,7 +47,7 @@
     "react-spinners": "^0.8.1",
     "react-spring": "^8.0.27",
     "react-toastify": "^5.5.0",
-    "react-tooltip": "^4.2.2",
+    "react-tooltip": "^4.2.3",
     "styled-components": "^5.1.0",
     "styled-react-modal": "^2.0.1",
     "styled-theming": "^2.2.0",
@@ -61,7 +61,7 @@
     "@babel/core": "^7.9.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@next/bundle-analyzer": "^9.3.4",
+    "@next/bundle-analyzer": "^9.3.5",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addon-viewport": "^5.3.18",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -21,6 +21,7 @@ import {
 } from '../src/components/stateViews/StateCards';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import Head from 'next/head';
 
 toast.configure({ draggable: false });
 
@@ -30,7 +31,7 @@ const Wrapper: React.FC = ({ children }) => {
   const { theme } = useSettings();
   const { loggedIn } = useAccount();
   const { pathname } = useRouter();
-  const { connected, loading, error } = useConnectionState();
+  const { loading, error } = useConnectionState();
 
   const isInArray = withoutGrid.includes(pathname);
 
@@ -64,13 +65,18 @@ class MyApp extends App<any> {
   render() {
     const { Component, pageProps, apollo } = this.props;
     return (
-      <ApolloProvider client={apollo}>
-        <ContextProvider>
-          <Wrapper>
-            <Component {...pageProps} />
-          </Wrapper>
-        </ContextProvider>
-      </ApolloProvider>
+      <>
+        <Head>
+          <title>ThunderHub - Lightning Node Manager</title>
+        </Head>
+        <ApolloProvider client={apollo}>
+          <ContextProvider>
+            <Wrapper>
+              <Component {...pageProps} />
+            </Wrapper>
+          </ContextProvider>
+        </ApolloProvider>
+      </>
     );
   }
 }

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -37,7 +37,6 @@ export default class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <title>ThunderHub - Lightning Node Manager</title>
           <meta
             name="viewport"
             content="initial-scale=1.0, width=device-width"

diff --git a/pages/api/v1.tsx b/pages/api/v1.tsx
@@ -5,7 +5,7 @@ import getConfig from 'next/config';
 import Cors from 'micro-cors';
 
 const { publicRuntimeConfig } = getConfig();
-const { apiUrl } = publicRuntimeConfig;
+const { apiBaseUrl } = publicRuntimeConfig;
 
 const cors = Cors({
   origin: true,
@@ -19,7 +19,7 @@ const apolloServer = new ApolloServer({
   },
 });
 
-const handler = apolloServer.createHandler({ path: apiUrl });
+const handler = apolloServer.createHandler({ path: apiBaseUrl });
 
 export const config = {
   api: {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,14 +4,15 @@ import { useAccount } from '../src/context/AccountContext';
 import { SessionLogin } from '../src/views/login/SessionLogin';
 import { useRouter } from 'next/router';
 import { HomePageView } from '../src/views/homepage/HomePage';
+import { appendBasePath } from '../src/utils/basePath';
 
 const ContextApp: React.FC = () => {
   const { push } = useRouter();
   const { loggedIn, admin, viewOnly, sessionAdmin } = useAccount();
 
   if (loggedIn) {
     if (admin === '' || viewOnly !== '' || sessionAdmin !== '') {
-      push('/home');
+      push(appendBasePath('/home'));
     }
   }
 

diff --git a/public/static/images/MoshingDoodle.svg b/public/static/images/MoshingDoodle.svg
diff --git a/src/components/auth/index.tsx b/src/components/auth/index.tsx
@@ -12,6 +12,7 @@ import { useStatusDispatch } from '../../context/StatusContext';
 import { useRouter } from 'next/router';
 import { toast } from 'react-toastify';
 import { LoadingCard } from '../loading/LoadingCard';
+import { appendBasePath } from '../../utils/basePath';
 
 const PasswordInput = dynamic(() => import('./views/Password'), {
   ssr: false,
@@ -114,7 +115,7 @@ export const Auth = ({ type, status, callback, setStatus }: AuthProps) => {
     dispatchState({ type: 'disconnected' });
     changeAccount(id);
 
-    push('/');
+    push(appendBasePath('/'));
   };
 
   const handleSave = () => {
@@ -143,7 +144,7 @@ export const Auth = ({ type, status, callback, setStatus }: AuthProps) => {
       dispatchState({ type: 'disconnected' });
       changeAccount(id);
 
-      push('/');
+      push(appendBasePath('/'));
     }
   };
 

diff --git a/src/components/buttons/colorButton/ColorButton.tsx b/src/components/buttons/colorButton/ColorButton.tsx
@@ -10,14 +10,17 @@ import {
   colorButtonBorderTwo,
   hoverTextColor,
   themeColors,
+  mediaWidths,
 } from '../../../styles/Themes';
 import { ChevronRight } from '../../generic/Icons';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 
 interface GeneralProps {
   fullWidth?: boolean;
+  mobileFullWidth?: boolean;
   buttonWidth?: string;
   withMargin?: string;
+  mobileMargin?: string;
 }
 
 const GeneralButton = styled.button`
@@ -35,6 +38,29 @@ const GeneralButton = styled.button`
   margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
   width: ${({ fullWidth, buttonWidth }: GeneralProps) =>
     fullWidth ? '100%' : buttonWidth ? buttonWidth : 'auto'};
+
+  @media (${mediaWidths.mobile}) {
+    ${({ withMargin, mobileMargin }) =>
+      mobileMargin
+        ? css`
+            margin: ${mobileMargin};
+          `
+        : withMargin
+        ? css`
+            margin: ${withMargin};
+          `
+        : '0'};
+    ${({ fullWidth, mobileFullWidth }) =>
+      mobileFullWidth
+        ? css`
+            width: 100%;
+          `
+        : fullWidth
+        ? css`
+            width: 100%;
+          `
+        : ''};
+  }
 `;
 
 const StyledArrow = styled.div`
@@ -97,8 +123,10 @@ export interface ColorButtonProps {
   arrow?: boolean;
   onClick?: any;
   withMargin?: string;
+  mobileMargin?: string;
   withBorder?: boolean;
   fullWidth?: boolean;
+  mobileFullWidth?: boolean;
   width?: string;
 }
 
@@ -110,16 +138,20 @@ export const ColorButton = ({
   selected,
   arrow,
   withMargin,
+  mobileMargin,
   withBorder,
   fullWidth,
+  mobileFullWidth,
   width,
   onClick,
 }: ColorButtonProps) => {
   if (disabled && !loading) {
     return (
       <DisabledButton
         withMargin={withMargin}
+        mobileMargin={mobileMargin}
         fullWidth={fullWidth}
+        mobileFullWidth={mobileFullWidth}
         buttonWidth={width}
       >
         {children}
@@ -132,7 +164,9 @@ export const ColorButton = ({
     return (
       <DisabledButton
         withMargin={withMargin}
+        mobileMargin={mobileMargin}
         fullWidth={fullWidth}
+        mobileFullWidth={mobileFullWidth}
         buttonWidth={width}
       >
         <ScaleLoader height={16} color={themeColors.blue2} />
@@ -146,8 +180,10 @@ export const ColorButton = ({
       selected={selected}
       onClick={onClick}
       withMargin={withMargin}
+      mobileMargin={mobileMargin}
       withBorder={withBorder}
       fullWidth={fullWidth}
+      mobileFullWidth={mobileFullWidth}
       buttonWidth={width}
     >
       {children}

diff --git a/src/components/buttons/secureButton/LoginModal.tsx b/src/components/buttons/secureButton/LoginModal.tsx
@@ -12,10 +12,9 @@ import styled from 'styled-components';
 import { useAccount } from '../../../context/AccountContext';
 import { saveSessionAuth } from '../../../utils/auth';
 import { useSettings } from '../../../context/SettingsContext';
-import { textColorMap, mediaDimensions } from '../../../styles/Themes';
+import { textColorMap } from '../../../styles/Themes';
 import { ColorButton } from '../colorButton/ColorButton';
 import { Input } from '../../input/Input';
-import { useSize } from '../../../hooks/UseSize';
 
 const RadioText = styled.div`
   margin-left: 10px;
@@ -43,7 +42,6 @@ export const LoginModal = ({
   callback,
   variables,
 }: LoginProps) => {
-  const { width } = useSize();
   const { theme } = useSettings();
 
   const [pass, setPass] = useState<string>('');
@@ -84,7 +82,8 @@ export const LoginModal = ({
       <ResponsiveLine>
         <Sub4Title>Password:</Sub4Title>
         <Input
-          withMargin={width <= mediaDimensions.mobile ? '0' : '0 0 0 16px'}
+          withMargin={'0 0 0 16px'}
+          mobileMargin={'0'}
           type={'password'}
           onChange={e => setPass(e.target.value)}
         />

diff --git a/src/components/buttons/secureButton/SecureButton.tsx b/src/components/buttons/secureButton/SecureButton.tsx
@@ -11,6 +11,7 @@ interface SecureButtonProps extends ColorButtonProps {
   variables: {};
   color?: string;
   withMargin?: string;
+  mobileMargin?: string;
   arrow?: boolean;
 }
 

diff --git a/src/components/connectionCheck/ConnectionCheck.tsx b/src/components/connectionCheck/ConnectionCheck.tsx
@@ -6,10 +6,8 @@ import {
 import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../context/AccountContext';
 import { GET_CAN_CONNECT } from '../../graphql/query';
-import { useRouter } from 'next/router';
 
 export const ConnectionCheck = () => {
-  const { push } = useRouter();
   const { connected } = useConnectionState();
   const dispatch = useConnectionDispatch();
 
@@ -20,10 +18,6 @@ export const ConnectionCheck = () => {
     cert,
   };
 
-  // useEffect(() => {
-  //   !loggedIn && push('/');
-  // }, [loggedIn]);
-
   const { data, loading } = useQuery(GET_CAN_CONNECT, {
     variables: { auth },
     skip: connected || !loggedIn,

diff --git a/src/components/generic/Styled.tsx b/src/components/generic/Styled.tsx
@@ -28,6 +28,7 @@ export const CardTitle = styled.div`
 export interface CardProps {
   bottom?: string;
   cardPadding?: string;
+  mobileCardPadding?: string;
 }
 
 export const Card = styled.div`
@@ -38,6 +39,19 @@ export const Card = styled.div`
   border: 1px solid ${cardBorderColor};
   margin-bottom: ${({ bottom }: CardProps) => (bottom ? bottom : '25px')};
   width: 100%;
+
+  @media (${mediaWidths.mobile}) {
+    ${({ cardPadding, mobileCardPadding }) =>
+      mobileCardPadding
+        ? css`
+            margin: ${mobileCardPadding};
+          `
+        : cardPadding
+        ? css`
+            margin: ${cardPadding};
+          `
+        : ''};
+  }
 `;
 
 interface SeparationProps {