fix: alter position of receive modal in extension view, #4165

leather-io · Oct 11, 2023 · 0243608 · 0243608
1 parent 9036f3b
commit 0243608
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/app/components/drawer/components/drawer-header.tsx b/src/app/components/drawer/components/drawer-header.tsx
@@ -1,5 +1,4 @@
-import { Box, Flex } from '@stacks/ui';
-import { styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
 import { ArrowLeftIcon } from '@app/components/icons/arrow-left-icon';
@@ -29,22 +28,15 @@ export function DrawerHeader({
   const [isHovered, bind] = useHover();
 
   return (
-    <Flex
-      pb="base"
-      justifyContent="space-between"
-      alignItems="center"
-      pt="loose"
-      px="loose"
-      {...bind}
-    >
+    <Flex justifyContent="space-between" alignItems="center" py="space.04" px="space.04" {...bind}>
       {enableGoBack ? (
         <HeaderActionButton
           icon={<ArrowLeftIcon />}
           isWaitingOnPerformedAction={isWaitingOnPerformedAction}
           onAction={onGoBack}
         />
       ) : (
-        <Box size="36px" />
+        <Box width="36px" height="36px" />
       )}
       {icon && icon}
       {title && <styled.h1 textStyle="heading.05">{title}</styled.h1>}

diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
@@ -119,6 +119,7 @@ export function TextInputField({
           ref={inputRef || ref}
           _disabled={{ bg: color('bg') }}
           _focus={{ border: 'none' }}
+          _placeholder={{ color: 'colors.accent.text-subdued' }}
           autoComplete="off"
           border="none"
           data-testid={dataTestId}

diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx
@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Box, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -62,7 +63,13 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
     );
 
   return (
-    <BaseDrawer title="" isShowing onClose={() => navigate('../')}>
+    <BaseDrawer
+      position={['absolute', 'fixed']}
+      top={[token('spacing.space.07'), 0]}
+      title=""
+      isShowing
+      onClose={() => navigate('../')}
+    >
       <Box mx="space.06">
         <styled.h1 mb="space.05" textStyle="heading.03">
           {title}