Mobile - Fix some UI bugs on Invest Dashboard (#3059)

IX-Swap · Jan 9, 2025 · 46972f1 · 46972f1
1 parent 85bff5a
commit 46972f1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/components/LaunchpadIssuance/utils/Dialog.tsx b/src/components/LaunchpadIssuance/utils/Dialog.tsx
@@ -26,11 +26,10 @@ export const IssuanceDialog: React.FC<React.PropsWithChildren<Props>> = (props)
     <Portal>
       <DialogWrapper onScroll={(e) => e.stopPropagation()}>
         <OuterContainer>
-
-        {/* <CloseIcon style={{ position: 'absolute', right: '20px', top: '100px', color: 'black' }} data-testid="cross"   onClick={props.onClose!} /> */}
+          {/* <CloseIcon style={{ position: 'absolute', right: '20px', top: '100px', color: 'black' }} data-testid="cross"   onClick={props.onClose!} /> */}
 
           <DialogCloseButton onClick={props.onClose}>
-            <X  size={20} />
+            <X size={20} />
           </DialogCloseButton>
 
           <DialogContainer width={props.width} height={props.height} padding={props.padding}>
@@ -103,6 +102,10 @@ const DialogContainer = styled.div<{ height?: string; width?: string; padding?:
 
   max-height: 100vh;
   overflow-y: scroll;
+
+  @media (max-width: 720px) {
+    width: 360px;
+  }
 `
 
 const Content = styled.div`

diff --git a/src/components/LaunchpadOffer/InvestDialog/utils/ConvertationField.tsx b/src/components/LaunchpadOffer/InvestDialog/utils/ConvertationField.tsx
@@ -326,11 +326,13 @@ const ConvertationArrow = styled.div`
   transform: translate(-50%, -50%);
   display: grid;
   place-content: center;
-  width: 48px;
-  height: 48px;
-  background: ${(props) => props.theme.launchpad.colors.foreground};
-  border: 8px solid ${(props) => props.theme.launchpad.colors.background};
+  width: 42px;
+  height: 42px;
+  background-color: rgb(249, 249, 249);
+  border-color: rgb(255, 255, 255);
   border-radius: 16px;
+  border-style: solid;
+  border-width: 4px;
 `
 
 interface TokenOption {

diff --git a/src/components/LaunchpadOffer/InvestDialog/utils/InvestSuccessModal.tsx b/src/components/LaunchpadOffer/InvestDialog/utils/InvestSuccessModal.tsx
@@ -28,7 +28,7 @@ export const InvestSuccessModal = ({ show, onClose }: Props) => {
             </InnerCircle>
           </OuterCircle>
           <Title>Order Successful</Title>
-          <FilledButton width="384px" onClick={onClose} style={{ zIndex: 30 }}>
+          <FilledButton onClick={onClose} style={{ zIndex: 30, width: '100%' }}>
             <BtnLabel>Close</BtnLabel>
           </FilledButton>
         </Container>
@@ -92,5 +92,5 @@ const Wrapper = styled.div`
   }
   @media (max-width: ${MEDIA_WIDTHS.upToSmall}px) {
     padding: 20px;
-   }
+  }
 `
diff --git a/src/components/LaunchpadOffer/InvestDialog/utils/InvestTextField.tsx b/src/components/LaunchpadOffer/InvestDialog/utils/InvestTextField.tsx
@@ -89,7 +89,7 @@ const FieldContainer = styled.div`
 const FieldInputContainer = styled.div<Pick<StylingProps, 'padding' | 'height'> & { hasCaption: boolean }>`
   position: relative;
   display: grid;
-  grid-template-columns: minmax(60%, 1fr) auto;
+  grid-template-columns: minmax(46%, 1fr) auto;
 
   ${(props) =>
     props.hasCaption &&
@@ -115,7 +115,7 @@ const FieldInputContainer = styled.div<Pick<StylingProps, 'padding' | 'height'>
 
   max-width: 100%;
 
-  height: ${(props) => props.height ?? '60px'};
+  height: ${(props) => props.height ?? '80px'};
 
   padding: ${(props) => props.padding ?? '0.75rem 1.25rem'};