ui: fix menu icon overlap when sidebar is collapsed

Author: jamaljsr

app/src/components/loop/processing/ProcessingSwaps.tsx

@@ -10,14 +10,15 @@ import { styled } from 'components/theme';
 import ProcessingSwapRow from './ProcessingSwapRow';
 
 const Styled = {
-  Wrapper: styled.section`
+  Wrapper: styled.section<{ sidebar?: boolean }>`
     display: flex;
     flex-direction: column;
     min-height: 360px;
     padding: 40px;
     background-color: ${props => props.theme.colors.darkBlue};
     border-radius: 35px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
+    margin-left: ${props => (props.sidebar ? '0' : '40px')};
   `,
   Header: styled.div`
     display: flex;
@@ -41,11 +42,11 @@ const Styled = {
 
 const ProcessingSwaps: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.processing.ProcessingSwaps');
-  const { swapStore, uiStore } = useStore();
+  const { swapStore, uiStore, settingsStore } = useStore();
 
   const { Wrapper, Header, Content, Complete, ConfirmAnimation } = Styled;
   return (
-    <Wrapper>
+    <Wrapper sidebar={settingsStore.sidebarVisible}>
       <Header>
         <HeaderFour>{l('title')}</HeaderFour>
         <Tip overlay={l('minimizeTip')}>

app/src/components/loop/swap/SwapWizard.tsx

@@ -11,13 +11,14 @@ import SwapProcessingStep from './SwapProcessing';
 import SwapReviewStep from './SwapReviewStep';
 
 const Styled = {
-  Wrapper: styled.section`
+  Wrapper: styled.section<{ sidebar?: boolean }>`
     display: flex;
     min-height: 360px;
     padding: 30px;
     background-color: ${props => props.theme.colors.darkBlue};
     border-radius: 35px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
+    margin-left: ${props => (props.sidebar ? '0' : '40px')};
   `,
   Nav: styled.div`
     width: 36px;
@@ -33,7 +34,7 @@ const Styled = {
 const SwapWizard: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.swap.SwapWizard');
 
-  const { buildSwapStore } = useStore();
+  const { buildSwapStore, settingsStore } = useStore();
 
   let cmp: ReactNode;
   switch (buildSwapStore.currentStep) {
@@ -52,7 +53,7 @@ const SwapWizard: React.FC = () => {
 
   const { Wrapper, Nav, Content } = Styled;
   return (
-    <Wrapper>
+    <Wrapper sidebar={settingsStore.sidebarVisible}>
       <Nav>
         <Tip overlay={l('backTip')}>
           <ArrowLeft onClick={buildSwapStore.goToPrevStep} />