Fix swap ledger button styles

Emurgo · Sep 23, 2024 · b01f5c1 · b01f5c1
1 parent a5bd9c1
commit b01f5c1
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 53 deletions.
diff --git a/apps/wallet-mobile/.storybook/decorators/index.ts b/apps/wallet-mobile/.storybook/decorators/index.ts
@@ -1,3 +1,4 @@
+export {ThemeProvider} from '@yoroi/theme'
 export * from './modals'
 export * from './navigation'
 export * from './query'

diff --git a/apps/wallet-mobile/src/components/Button/Button.stories.tsx b/apps/wallet-mobile/src/components/Button/Button.stories.tsx
@@ -1,63 +1,92 @@
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
+import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {ScrollView, StyleSheet, View, ViewProps} from 'react-native'
 
 import icon from '../../assets/img/icon/dashboard.png'
 import {Icon} from '../Icon'
 import {Button} from './Button'
 
-storiesOf('Button', module).add('default', () => (
-  <ScrollView>
-    <Row>
-      <Button onPress={() => action('onPress')()} title="Submit" />
-    </Row>
-
-    <Row>
-      <Button block onPress={() => action('onPress')()} title="submit" />
-    </Row>
-
-    <Row>
-      <Button block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
-    </Row>
-
-    <Row>
-      <Button outlineOnLight block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
-    </Row>
-
-    <Row>
-      <Button outlineOnLight block onPress={() => action('onPress')()} title="Submit" />
-    </Row>
-
-    <Row>
-      <Button outlineShelley withoutBackground shelleyTheme block onPress={() => action('onPress')()} title="Submit" />
-    </Row>
-
-    <Row>
-      <Button block shelleyTheme iconImage={icon} onPress={() => action('onPress')()} title="Submit, with image" />
-    </Row>
-
-    <Row>
-      <Button
-        block
-        shelleyTheme
-        startContent={<Icon.Plus size={24} color="white" />}
-        onPress={() => action('onPress')()}
-        title="Submit, with start content"
-      />
-    </Row>
-
-    <Row>
-      <Button
-        block
-        shelleyTheme
-        endContent={<Icon.Plus size={24} color="white" />}
-        onPress={() => action('onPress')()}
-        title="Submit, with end content"
-      />
-    </Row>
-  </ScrollView>
-))
+storiesOf('Button', module).add('default', () => {
+  const {color, isDark, selectThemeName} = useTheme()
+
+  return (
+    <ScrollView style={{backgroundColor: color.bg_color_max}}>
+      <Row>
+        <Button
+          onPress={() => {
+            selectThemeName(isDark ? 'default-light' : 'default-dark')
+          }}
+          title="Toggle theme"
+        />
+      </Row>
+
+      <Row>
+        <Button onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button block onPress={() => action('onPress')()} title="submit" />
+      </Row>
+
+      <Row>
+        <Button block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button outlineOnLight block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button outlineOnLight block shelleyTheme disabled onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button block outlineShelley outlineOnLight disabled onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button outlineOnLight block onPress={() => action('onPress')()} title="Submit" />
+      </Row>
+
+      <Row>
+        <Button
+          outlineShelley
+          withoutBackground
+          shelleyTheme
+          block
+          onPress={() => action('onPress')()}
+          title="Submit"
+        />
+      </Row>
+
+      <Row>
+        <Button block shelleyTheme iconImage={icon} onPress={() => action('onPress')()} title="Submit, with image" />
+      </Row>
+
+      <Row>
+        <Button
+          block
+          shelleyTheme
+          startContent={<Icon.Plus size={24} color="white" />}
+          onPress={() => action('onPress')()}
+          title="Submit, with start content"
+        />
+      </Row>
+
+      <Row>
+        <Button
+          block
+          shelleyTheme
+          endContent={<Icon.Plus size={24} color="white" />}
+          onPress={() => action('onPress')()}
+          title="Submit, with end content"
+        />
+      </Row>
+    </ScrollView>
+  )
+})
 
 const Row = (props: ViewProps) => <View {...props} style={styles.row} />
 

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/LedgerTransportSwitch.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/LedgerTransportSwitch.tsx
@@ -30,7 +30,7 @@ const LedgerTransportSwitchView = ({onSelectUSB, onSelectBLE}: Props) => {
         <Text style={styles.paragraph}>{strings.bluetoothExplanation}</Text>
 
         <Button
-          outlineShelley
+          outlineOnLight
           onPress={() => request()}
           title={strings.bluetoothButton}
           testID="connectWithBLEButton"
@@ -41,7 +41,7 @@ const LedgerTransportSwitchView = ({onSelectUSB, onSelectBLE}: Props) => {
         <Text style={styles.paragraph}>{strings.usbExplanation}</Text>
 
         <Button
-          outlineShelley
+          outlineOnLight
           onPress={onSelectUSB}
           title={strings.usbButton}
           disabled={!isUSBSupported || !HARDWARE_WALLETS.LEDGER_NANO.ENABLE_USB_TRANSPORT}