Merge pull request #21 from HORNET-Storage/ui-fix/send-panel

UI-fix: send panel

Author: f7f376a1fcd0d0e11a10ed1b6577c9

.env.development

@@ -1,7 +1,7 @@
 REACT_APP_BASE_URL=http://localhost:9002
 # REACT_APP_BASE_URL=https://11561ba2d27f.ngrok.app
 REACT_APP_ASSETS_BUCKET=http://localhost
-REACT_APP_DEMO_MODE=false
+REACT_APP_DEMO_MODE=true
 
 # more info https://create-react-app.dev/docs/advanced-configuration
 ESLINT_NO_DEV_ERRORS=true

src/components/layouts/main/MainContent/MainContent.tsx

@@ -4,6 +4,7 @@ import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout';
 
 interface HeaderProps {
   $isTwoColumnsLayout: boolean;
+  $isDesktop: boolean;
 }
 
 export default styled(BaseLayout.Content)<HeaderProps>`
@@ -13,9 +14,14 @@ export default styled(BaseLayout.Content)<HeaderProps>`
   flex-direction: column;
   justify-content: space-between;
 
+  ${(props) =>
+    props?.$isDesktop &&
+    css`
+      z-index: 105;
+    `}
+
   @media only screen and ${media.md} {
-    padding: ${LAYOUT.desktop.paddingVertical} 1.8rem 0
-      ${LAYOUT.desktop.paddingHorizontal};
+    padding: ${LAYOUT.desktop.paddingVertical} 1.8rem 0 ${LAYOUT.desktop.paddingHorizontal};
   }
 
   @media only screen and ${media.xl} {

src/components/layouts/main/MainLayout/MainLayout.tsx

@@ -74,6 +74,7 @@ const MainLayout: React.FC = () => {
           style={isDesktop ? { overflowY: 'hidden' } : { overflowY: 'auto' }}
           id="main-content"
           $isTwoColumnsLayout={isTwoColumnsLayout}
+          $isDesktop={isDesktop}
         >
           <div>
             <Outlet />

src/components/nft-dashboard/Balance/Balance.styles.ts

@@ -1,6 +1,6 @@
 import { BaseTypography } from '@app/components/common/BaseTypography/BaseTypography';
 import { FONT_FAMILY, FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
-import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch';
+import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import styled from 'styled-components';
 
 export const TitleText = styled(BaseTypography.Title)`
@@ -48,3 +48,7 @@ export const LabelSpan = styled.span`
   color: #fff; // Adjust color based on your theme
   font-size: 1rem; // Adjust size as needed
 `;
+export const BalanceButtonsContainers = styled(BaseRow)`
+  width: 100%;
+  padding: 0 1rem;
+`

src/components/nft-dashboard/Balance/Balance.tsx

@@ -66,13 +66,14 @@ export const Balance: React.FC = () => {
                 </BaseCol>
               </BaseRow>
             </BaseCol>
-
-            <BaseCol span={24}>
-              <TopUpBalanceButton />
-            </BaseCol>
-            <BaseCol span={24}>
-              <SendButton />
-            </BaseCol>
+            <S.BalanceButtonsContainers gutter={[0,20]}>
+              <BaseCol span={24}>
+                <SendButton />
+              </BaseCol>
+              <BaseCol span={24}>
+                <TopUpBalanceButton />
+              </BaseCol>
+            </S.BalanceButtonsContainers>
           </BaseRow>
         </NFTCard>
       </BaseCol>

src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
@@ -13,7 +13,13 @@ export const TextRow = styled.div`
   gap: 1rem;
 `;
 
-export const SubCard = styled(BaseCard)`
+export const SubCard = styled(BaseCard)<{ $isMobile?: boolean }>`
+  width: 30%;
+  ${(props) =>
+    props.$isMobile &&
+    css`
+      width: 100%;
+    `}
   background-color: var(--additional-background-color);
   cursor: pointer;
   box-shadow: 0px 0px 10px 0px var(--shadow-color);
@@ -44,13 +50,15 @@ export const SubCardHeader = styled.span`
 `;
 
 export const InputHeader = styled.span`
-  font-size: 1.3rem;
+  font-size: 1.5rem;
 `;
 
 export const SubCardAmount = styled.span`
   font-size: 1.5rem;
 `;
 export const SubCardContent = styled.div`
+  font-size: 1.3rem;
+  height: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: column;
@@ -127,7 +135,6 @@ export const RateValue = styled.span`
   color: green;
 `;
 export const RBFWrapper = styled.div`
-
   display: flex;
   flex-direction: row;
   gap: 1rem;