app: switch the app background to lightningBlack

app/src/App.scss

@@ -87,6 +87,7 @@
 html,
 body,
 #root {
-  background-color: #252f4a;
+  // matches theme.colors.lightningBlack, which is not reachable from scss
+  background-color: #101727;
   width: 100%;
 }

app/src/components/base/shared.tsx

@@ -9,7 +9,7 @@ export const Background = styled.div<{ gradient?: boolean }>`
   height: 100%;
   color: ${props => props.theme.colors.white};
   background: ${props =>
-    props.gradient ? props.theme.colors.gradient : props.theme.colors.blue};
+    props.gradient ? props.theme.colors.gradient : props.theme.colors.lightningBlack};
   font-family: ${props => props.theme.fonts.open.regular};
   font-size: ${props => props.theme.sizes.m};
 `;

app/src/components/layout/Layout.tsx

@@ -100,12 +100,16 @@ const Styled = {
     left: 0;
     height: 100%;
     z-index: 1;
-    background-color: ${props => props.theme.colors.darkBlue};
+    background-color: ${props => props.theme.colors.lightningBlack};
     overflow: hidden;
 
-    /* change sidebar dimensions based on collapsed toggle */
+    /* change sidebar dimensions based on collapsed toggle. the edge which separates
+       the sidebar from the page is dropped while collapsed, since it would otherwise
+       remain as a line down the left of the window */
     width: ${props => (props.collapsed ? '0' : `${SIDEBAR_WIDTH}px`)};
     padding: ${props => (props.collapsed ? '0' : '0 15px')};
+    border-right: ${props =>
+      props.collapsed ? 'none' : `1px solid ${props.theme.colors.overlay}`};
     transition: all 0.2s;
 
     /* set a width on the child to improve the collapse animation */

app/src/components/layout/NavMenu.tsx

@@ -32,7 +32,7 @@ const Styled = {
 
       &:hover {
         text-decoration: none;
-        border-left: 3px solid ${props => props.theme.colors.pink};
+        border-left: 3px solid ${props => props.theme.colors.lightBlue};
         background-color: ${props => props.theme.colors.overlay};
       }
     }
@@ -42,7 +42,7 @@ const Styled = {
       background-color: ${props => props.theme.colors.blue};
 
       &:hover {
-        border-left: 3px solid ${props => props.theme.colors.pink};
+        border-left: 3px solid ${props => props.theme.colors.lightBlue};
       }
     }
   `,

app/src/components/theme.tsx

@@ -47,6 +47,7 @@ const theme: Theme = {
     lightningRed: '#EF4444',
     lightningGray: '#B9BDC5',
     lightningNavy: '#1D253A',
+    lightningBlack: '#101727',
     iris: '#5D5FEF',
   },
   breakpoints: {

app/src/emotion-theme.d.ts

@@ -43,6 +43,7 @@ declare module '@emotion/react' {
       lightningRed: string;
       lightningGray: string;
       lightningNavy: string;
+      lightningBlack: string;
       iris: string;
     };
     breakpoints: {

docs/release-notes/release-notes-0.17.1.md

@@ -84,6 +84,12 @@
   helping operators avoid over-provisioning custodial accounts beyond what the
   node can actually pay out. It defaults to off to preserve existing behaviour.
 
+* [General UI improvements](https://github.com/lightninglabs/lightning-terminal/pull/1368):
+  The sidebar is now pinned to the left edge of the window, collapses on smaller
+  screens instead of covering the page, and no longer shifts the content when it
+  is toggled. The Home page has been simplified, the Home and auth pages reflow
+  down to mobile widths, and the app background is now black.
+
 ### Technical and Architectural Updates
 
 * [Report litd's own version for `litd