feat(ui): switch to dark theme and fix style issues

.rescriptsrc.js

@@ -1,4 +1,4 @@
-// const darkTheme = require('./src/theme');
+const darkThemeVars = require('antd/dist/dark-theme');
 
 const getLessLoader = (test, withModules) => {
   return {
@@ -20,9 +20,12 @@ const getLessLoader = (test, withModules) => {
         options: {
           javascriptEnabled: true,
           modifyVars: {
-            '@primary-color': '#fa8c16',
+            hack: `true;@import "${require.resolve(
+              'antd/lib/style/color/colorPalette.less',
+            )}";`,
+            ...darkThemeVars,
+            '@primary-color': '#d46b08',
           },
-          // modifyVars: darkTheme,
         },
       },
     ],
@@ -31,7 +34,7 @@ const getLessLoader = (test, withModules) => {
 
 module.exports = [
   config => {
-    // set target on webpack config to support electrong
+    // set target on webpack config to support electron
     config.target = 'electron-renderer';
     // add support for hot reload of hooks
     config.resolve.alias['react-dom'] = '@hot-loader/react-dom';

src/components/common/StatusTag.tsx

@@ -11,7 +11,7 @@ const statusColors = {
   [Status.Starting]: 'blue',
   [Status.Started]: 'green',
   [Status.Stopping]: 'blue',
-  [Status.Stopped]: 'gray',
+  [Status.Stopped]: 'rgba(255, 255, 255, 0.25)',
   [Status.Error]: 'red',
 };
 

src/components/designer/NetworkDesigner.tsx

@@ -5,7 +5,7 @@ import { useDebounce } from 'hooks';
 import { useStoreActions, useStoreState } from 'store';
 import { Network } from 'types';
 import { Loader } from 'components/common';
-import { Link, NodeInner, Port, Ports } from './custom';
+import { CanvasOuter, Link, NodeInner, Port, Ports } from './custom';
 import {
   ChangeBackendModal,
   CreateInvoiceModal,
@@ -53,6 +53,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
         chart={chart}
         config={{ snapToGrid: true }}
         Components={{
+          CanvasOuter,
           NodeInner,
           Link,
           Port,

src/components/designer/SidebarCard.tsx

@@ -5,9 +5,8 @@ export default styled(Card)`
   position: absolute;
   top: 16px;
   bottom: 16px;
-  right: 16px;
+  right: 0;
   width: 360px;
-  background-color: #fff;
-  border-radius: 4px;
+  border-radius: 2px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 `;

src/components/designer/custom/CanvasOuter.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { ICanvasOuterDefaultProps } from '@mrblenny/react-flow-chart';
+
+const CanvasOuter = styled.div<ICanvasOuterDefaultProps>`
+  position: relative;
+  background-size: 20px 20px;
+  background-image: linear-gradient(90deg, hsla(0, 0%, 25%, 0.05) 1px, transparent 0),
+    linear-gradient(180deg, hsla(0, 0%, 25%, 0.05) 1px, transparent 0);
+  width: 100%;
+  overflow: hidden;
+  cursor: not-allowed;
+`;
+
+export default CanvasOuter;

src/components/designer/custom/Link.tsx

@@ -23,7 +23,7 @@ export const generateCurvePath = (startPos: IPosition, endPos: IPosition): strin
   const curveX = isHorizontal ? curve : 0;
   const curveY = isHorizontal ? 0 : curve;
 
-  // add 0.001 to the last point's coords to workaround gradients dissappearing
+  // add 0.001 to the last point's coords to workaround gradients disappearing
   // when rendered as a straight line. See https://stackoverflow.com/a/34687362
   return `M${start.x},${start.y} C ${start.x + curveX},${start.y + curveY} ${end.x -
     curveX},${end.y - curveY} ${end.x + 0.001},${end.y + 0.001}`;
@@ -44,7 +44,7 @@ const CustomLink: React.FC<ILinkDefaultProps> = ({
 
   // memoize these calculations for a bit of perf
   const { leftStop, rightStop, leftColor, rightColor } = useMemo(() => {
-    const [blue, green, orange, gray] = ['#6495ED', '#52c41a', '#fa8c16', 'lightgray'];
+    const [blue, green, orange, gray] = ['#6495ED', '#52c41a', '#fa8c16', '#1b1b1b'];
     // use two stops in the middle to keep a small gradient in between
     let [leftStop, rightStop] = [45, 55];
     // default colors to gray for backend nodes

src/components/designer/custom/NodeInner.tsx

@@ -6,6 +6,9 @@ import { Loader, StatusBadge } from 'components/common';
 
 const Styled = {
   Node: styled.div<{ size?: ISize }>`
+    border: 1px solid #232323;
+    border-radius: 2px;
+    background-color: #141414;
     padding: 20px;
     font-weight: bold;
     display: flex;

src/components/designer/custom/Port.tsx

@@ -3,11 +3,12 @@ import styled from '@emotion/styled';
 import { IPortDefaultProps } from '@mrblenny/react-flow-chart';
 import { Tooltip } from 'antd';
 
-const Outer = styled.div`
+const Outer = styled.div<{ type: string }>`
   width: 18px;
   height: 18px;
+  ${props => props.type && `border-${props.type}: 2px solid #232323;`}
   border-radius: 50%;
-  background: white;
+  background: #141414;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -32,7 +33,7 @@ const CustomPort: React.FC<IPortDefaultProps> = ({
   isLinkSelected,
   isLinkHovered,
 }) => {
-  let color = 'grey';
+  let color = '#383838';
   let tip = '';
   if (port.properties) {
     color = port.properties.initiator ? '#52c41a' : '#6495ED';
@@ -40,7 +41,7 @@ const CustomPort: React.FC<IPortDefaultProps> = ({
   }
   return (
     <Tooltip title={tip}>
-      <Outer>
+      <Outer type={port.type}>
         <Inner color={color} active={isLinkSelected || isLinkHovered} />
       </Outer>
     </Tooltip>

src/components/designer/custom/index.ts

@@ -1,3 +1,4 @@
+export { default as CanvasOuter } from './CanvasOuter';
 export { default as Link } from './Link';
 export { default as NodeInner } from './NodeInner';
 export { default as Port } from './Port';

src/components/designer/default/DefaultSidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { CloudSyncOutlined } from '@ant-design/icons';
 import styled from '@emotion/styled';
 import { Button, Switch } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
@@ -83,7 +84,12 @@ const DefaultSidebar: React.FC<Props> = ({ network }) => {
         />
       ))}
       {showAll && (
-        <Styled.UpdatesButton type="link" block icon="cloud-sync" onClick={toggleModal}>
+        <Styled.UpdatesButton
+          type="link"
+          block
+          icon={<CloudSyncOutlined />}
+          onClick={toggleModal}
+        >
           {l('checkUpdates')}
         </Styled.UpdatesButton>
       )}

src/components/designer/default/DraggableNode.tsx

@@ -6,9 +6,9 @@ const Styled = {
   Node: styled.div`
     display: flex;
     justify-content: space-between;
-    border: 1px solid #e8e8e8;
+    border: 1px solid #303030;
     border-radius: 4px;
-    box-shadow: 4px 2px 9px rgba(0, 0, 0, 0.1);
+    box-shadow: 4px 2px 9px rgba(100, 100, 100, 0.1);
     cursor: move;
     overflow: hidden;
     transition: all 0.3s ease-out;

src/components/home/DetectDockerModal.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useAsyncCallback } from 'react-async-hook';
+import { AppleOutlined, DownloadOutlined, WindowsOutlined } from '@ant-design/icons';
 import styled from '@emotion/styled';
 import { Button, Modal, Result } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
@@ -34,11 +35,11 @@ export const dockerLinks: Record<PolarPlatform, Record<string, string>> = {
   unknown: {},
 };
 
-const buttonIcons: Record<PolarPlatform, string> = {
-  mac: 'apple',
-  windows: 'windows',
-  linux: 'download',
-  unknown: 'download',
+const buttonIcons: Record<PolarPlatform, ReactNode> = {
+  mac: <AppleOutlined />,
+  windows: <WindowsOutlined />,
+  linux: <DownloadOutlined />,
+  unknown: <DownloadOutlined />,
 };
 
 const DetectDockerModal: React.FC = () => {

src/components/layouts/AppLayout.tsx

@@ -41,6 +41,7 @@ const Styled = {
     display: flex;
     justify-content: space-between;
     padding: 0 5px;
+    background: rgba(43, 43, 43, 0.25);
   `,
 };
 

src/components/network/NetworkView.tsx

@@ -26,8 +26,9 @@ const Styled = {
     height: 100%;
   `,
   PageHeader: styled(PageHeader)`
-    border: 1px solid rgb(235, 237, 240);
-    background-color: #fff;
+    border: 1px solid #303030;
+    border-radius: 2px;
+    background-color: #141414;
     margin-bottom: 10px;
     flex: 0;
   `,

src/components/network/NewNetwork.tsx

@@ -9,8 +9,7 @@ import { HOME } from 'components/routing';
 
 const Styled = {
   PageHeader: styled(PageHeader)`
-    border: 1px solid rgb(235, 237, 240);
-    background-color: #fff;
+    border: 1px solid #303030;
     margin-bottom: 10px;
     flex: 0;
   `,

src/components/routing/Switch.tsx

@@ -16,6 +16,7 @@ const Styled = {
       padding: 16px 16px 0;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
+      background: rgba(43, 43, 43, 0.25);
     }
   `,
 };

src/components/terminal/themes/nord.ts

@@ -20,13 +20,18 @@ const colors = {
   nord15: '#B48EAD',
 };
 
+const custom = {
+  softForeground: '#ffffffbf',
+  darkBackground: '#2b2b2b40',
+};
+
 const nord: ITheme = {
   /** The default foreground color */
-  foreground: colors.nord4,
+  foreground: custom.softForeground,
   /** The default background color */
-  background: colors.nord0,
+  background: custom.darkBackground,
   /** The cursor color */
-  cursor: colors.nord4,
+  cursor: custom.softForeground,
   /** The accent color of the cursor (fg color for a block cursor) */
   cursorAccent: colors.nord3,
   /** The selection background color (can be transparent) */

src/index.tsx

@@ -31,9 +31,19 @@ const Root: React.FC = () => (
           height: 100vh;
         }
 
+        //--- antd overrides ---
+        .ant-form-item-label {
+          margin-bottom: 5px;
+        }
+
         .ant-form-item-with-help {
           margin-bottom: 12px;
         }
+
+        .ant-alert-info {
+          background-color: #111b26;
+          border: 1px solid #153450;
+        }
       `}
     />
     <App />