onboarding fix position of "pin extension" in arc browser (#1437)

rainbow-me · Mar 29, 2024 · 6c26604 · 6c26604
1 parent a72bd79
commit 6c26604
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/design-system/styles/core.css.ts b/src/design-system/styles/core.css.ts
@@ -438,7 +438,7 @@ const boxBaseProperties = defineProperties({
     bottom: positionSpace,
     cursor: cursorOpts,
     display: ['none', 'flex', 'block', 'inline'],
-    flexDirection: ['row', 'column', 'column-reverse'],
+    flexDirection: ['row', 'column', 'column-reverse', 'row-reverse'],
     flexWrap: ['wrap'],
     flexBasis: ['0'],
     flexGrow: ['0', '1'],

diff --git a/src/entries/popup/pages/walletReady/index.tsx b/src/entries/popup/pages/walletReady/index.tsx
@@ -30,17 +30,20 @@ const PinToToolbar = () => {
       position="fixed"
       borderRadius="16px"
       style={{
-        ...(!isArc && {
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-          right: isBrave ? '144px' : '104px',
-        }),
+        ...(isArc
+          ? { top: '8px', left: '8px' }
+          : {
+              borderTopLeftRadius: 0,
+              borderTopRightRadius: 0,
+              right: isBrave ? '144px' : '104px',
+              top: '0',
+            }),
         maxWidth: '152px',
-        top: isArc ? '95px' : '0',
       }}
       paddingHorizontal="12px"
       paddingVertical="16px"
       display="flex"
+      flexDirection={isArc ? 'row-reverse' : 'row'}
       gap="12px"
       background="surfacePrimaryElevated"
       borderColor="buttonStrokeSecondary"
@@ -50,7 +53,7 @@ const PinToToolbar = () => {
         {i18n.t('wallet_ready.pin_rainbow_to_your_toolbar')}
       </Text>
       <Symbol
-        symbol={isArc ? 'arrow.right' : 'arrow.up'}
+        symbol={isArc ? 'arrow.left' : 'arrow.up'}
         color="purple"
         size={14}
         weight="bold"