Fix voter screens

src/components/BlurActionSheet.tsx

@@ -1,17 +1,17 @@
-import React, { memo, useCallback, useMemo, useRef, useState } from 'react'
-import {
-  BottomSheetModal,
-  BottomSheetModalProvider,
+import React, { memo, useCallback, useMemo, useRef } from 'react'
+import BottomSheet, {
+  BottomSheetBackdrop,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet'
-import { LayoutChangeEvent } from 'react-native'
 import { Edge } from 'react-native-safe-area-context'
 import { useAsync } from 'react-async-hook'
 import { Portal } from '@gorhom/portal'
-import { useColors, useOpacity } from '@theme/themeHooks'
-import CustomBlurBackdrop from './CustomBlurBackdrop'
+import { ThemeProvider } from '@shopify/restyle'
+import { lightTheme } from '@theme/theme'
+import { useTranslation } from 'react-i18next'
 import SafeAreaBox from './SafeAreaBox'
-import { wh } from '../utils/layout'
+import HeliumBottomSheet from './HeliumBottomSheet'
+import Text from './Text'
 
 type Props = {
   title: string
@@ -21,10 +21,8 @@ type Props = {
 }
 
 const BlurActionSheet = ({ title, open, children, onClose }: Props) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null)
-  const [contentHeight, setContentHeight] = useState(0)
-  const { backgroundStyle } = useOpacity('gray.700', 0.4)
-  const colors = useColors()
+  const bottomSheetModalRef = useRef<BottomSheet>(null)
+  const { t } = useTranslation()
 
   const handleOnClose = useCallback(() => {
     if (onClose) {
@@ -34,62 +32,54 @@ const BlurActionSheet = ({ title, open, children, onClose }: Props) => {
 
   useAsync(async () => {
     if (open) {
-      await bottomSheetModalRef.current?.present()
+      await bottomSheetModalRef.current?.expand()
     } else {
-      await bottomSheetModalRef.current?.dismiss()
+      await bottomSheetModalRef.current?.close()
     }
   }, [open])
 
-  const snapPoints = useMemo(() => {
-    let maxHeight: number | string = '75%'
-    if (contentHeight > 0) {
-      maxHeight = Math.min(wh * 0.75, contentHeight)
-    }
-
-    return [maxHeight]
-  }, [contentHeight])
-
   const renderBackdrop = useCallback(
     (props) => (
-      <CustomBlurBackdrop
+      <BottomSheetBackdrop
         onPress={handleOnClose}
         title={title}
         disappearsOnIndex={-1}
         appearsOnIndex={0}
-        opacity={0.6}
+        opacity={1}
         {...props}
-      />
+      >
+        <SafeAreaBox flex={1}>
+          <Text
+            variant="textLgSemibold"
+            color="primaryText"
+            marginTop="xl"
+            textAlign="center"
+          >
+            {t('blurActionSheet.selectAnOption')}
+          </Text>
+        </SafeAreaBox>
+      </BottomSheetBackdrop>
     ),
-    [handleOnClose, title],
+    [handleOnClose, title, t],
   )
 
   const safeEdges = useMemo(() => ['bottom'] as Edge[], [])
 
-  const handleContentLayout = useCallback((e: LayoutChangeEvent) => {
-    setContentHeight(e.nativeEvent.layout.height + 40)
-  }, [])
-
   return (
     <Portal>
-      <BottomSheetModalProvider>
-        <BottomSheetModal
-          ref={bottomSheetModalRef}
-          index={0}
-          snapPoints={snapPoints}
-          backdropComponent={renderBackdrop}
-          backgroundStyle={backgroundStyle}
-          onDismiss={handleOnClose}
-          handleIndicatorStyle={{
-            backgroundColor: colors.primaryText,
-          }}
-        >
+      <HeliumBottomSheet
+        ref={bottomSheetModalRef}
+        index={-1}
+        backdropComponent={renderBackdrop}
+      >
+        <ThemeProvider theme={lightTheme}>
           <BottomSheetScrollView>
-            <SafeAreaBox edges={safeEdges} onLayout={handleContentLayout}>
+            <SafeAreaBox edges={safeEdges} padding="xl" marginTop="xl">
               {children}
             </SafeAreaBox>
           </BottomSheetScrollView>
-        </BottomSheetModal>
-      </BottomSheetModalProvider>
+        </ThemeProvider>
+      </HeliumBottomSheet>
     </Portal>
   )
 }

src/components/ListItem.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import CheckMarkFill from '@assets/images/checkmarkFill.svg'
 import { useColors } from '@theme/themeHooks'
-import { Color } from '@theme/theme'
+import { Color, Theme } from '@theme/theme'
 import { Insets } from 'react-native'
+import { BoxProps } from '@shopify/restyle'
 import Box from './Box'
 import Text from './Text'
-import { TouchableOpacityBoxProps } from './TouchableOpacityBox'
 import TouchableContainer from './TouchableContainer'
 
 export const LIST_ITEM_HEIGHT = 70
@@ -21,7 +21,7 @@ export type ListItemProps = {
   hasDivider?: boolean
   hasPressedState?: boolean
   hitSlop?: Insets
-} & TouchableOpacityBoxProps
+} & BoxProps<Theme>
 
 const ListItem = ({
   Icon,

src/components/Pill.tsx

@@ -14,6 +14,7 @@ type Color =
   | 'iotGreen'
   | 'mobileBlue'
   | 'hntBlue'
+  | 'quinary'
 export const Pill = memo(
   ({
     text,
@@ -50,24 +51,29 @@ export const Pill = memo(
         text: 'orange.500',
       },
       black: {
-        background: 'black',
+        background: 'base.black',
         text: 'base.white',
-        border: 'black',
+        border: 'base.black',
       },
       hntBlue: {
-        background: 'hntBlue',
+        background: 'purple.500',
         text: 'base.white',
-        border: 'black',
+        border: 'purple.500',
       },
       iotGreen: {
         background: 'iotGreen',
         text: 'base.white',
-        border: 'black',
+        border: 'iotGreen',
       },
       mobileBlue: {
-        background: 'mobileBlue',
+        background: 'blue.600',
         text: 'base.white',
-        border: 'black',
+        border: 'blue.600',
+      },
+      quinary: {
+        background: 'fg.quinary-400',
+        text: 'primaryBackground',
+        border: 'fg.quinary-400',
       },
     }
     return (
@@ -93,11 +99,11 @@ export const Pill = memo(
 
         {text ? (
           <Text
-            variant="textSmRegular"
             ml="2"
             mr="2"
             color={colorDefs[color].text as any}
             {...textProps}
+            variant="textSmSemibold"
           >
             {text}
           </Text>

src/components/SegmentedControl.tsx

@@ -84,14 +84,14 @@ const SegmentedItem = ({
     >
       {option.Icon && (
         <option.Icon
-          color={selected ? primaryBackground : colors['fg.quinary-400']}
+          color={selected ? primaryBackground : colors['text.disabled']}
           {...option.iconProps}
         />
       )}
       <Text
         variant="textLgSemibold"
         fontSize={17}
-        color={selected ? 'primaryBackground' : 'fg.quinary-400'}
+        color={selected ? 'primaryBackground' : 'text.disabled'}
         textAlign="center"
       >
         {option.label}
@@ -162,13 +162,8 @@ const SegmentedControl = forwardRef(
     }, [leftPosition, itemWidth, hasTouched])
 
     return (
-      <Box borderRadius="4xl" alignItems="center">
-        <Box
-          borderRadius="4xl"
-          {...boxProps}
-          flexDirection="row"
-          position="relative"
-        >
+      <Box borderRadius="4xl" alignItems="center" {...boxProps}>
+        <Box borderRadius="4xl" flexDirection="row" position="relative">
           <ReAnimatedBox
             position="absolute"
             width={itemWidth}

src/components/Select.tsx

@@ -55,20 +55,32 @@ export const Select: React.FC<SelectProps> = ({
         open={filtersOpen}
         onClose={() => setFiltersOpen(false)}
       >
-        <>
-          {options.map((option) => (
-            <ListItem
-              key={option.value}
-              title={option.label}
-              onPress={() => {
-                onValueChange(option.value)
-                setFiltersOpen(false)
-              }}
-              selected={value === option.value}
-              hasPressedState={false}
-            />
-          ))}
-        </>
+        <Box marginTop="6xl">
+          {options.map((option, index) => {
+            const borderTopStartRadius = index === 0 ? 'xl' : 'none'
+            const borderTopEndRadius = index === 0 ? 'xl' : 'none'
+            const borderBottomStartRadius =
+              index === options.length - 1 ? 'xl' : 'none'
+            const borderBottomEndRadius =
+              index === options.length - 1 ? 'xl' : 'none'
+
+            return (
+              <ListItem
+                key={option.value}
+                title={option.label}
+                onPress={() => {
+                  onValueChange(option.value)
+                  setFiltersOpen(false)
+                }}
+                selected={value === option.value}
+                borderTopStartRadius={borderTopStartRadius}
+                borderTopEndRadius={borderTopEndRadius}
+                borderBottomStartRadius={borderBottomStartRadius}
+                borderBottomEndRadius={borderBottomEndRadius}
+              />
+            )
+          })}
+        </Box>
       </BlurActionSheet>
     </>
   )

src/features/account/AccountActionBar.tsx

@@ -143,9 +143,9 @@ const AccountActionBar = ({
         >
           <FabButton
             icon="swaps"
-            backgroundColor="orange.300"
+            backgroundColor="primaryText"
             backgroundColorOpacityPressed={0.4}
-            iconColor="orange.700"
+            iconColor="primaryBackground"
             title={compact || maxCompact ? undefined : t('accountView.swaps')}
             onPress={handleAction('swaps')}
             width={maxCompact ? 47.5 : undefined}
@@ -173,9 +173,9 @@ const AccountActionBar = ({
         >
           <FabButton
             icon="airdrop"
-            backgroundColor="violet.300"
+            backgroundColor="primaryText"
             backgroundColorOpacityPressed={0.4}
-            iconColor="violet.700"
+            iconColor="primaryBackground"
             title={
               compact || maxCompact ? undefined : t('airdropScreen.airdrop')
             }

src/features/governance/GovernanceWrapper.tsx

@@ -90,7 +90,7 @@ export const GovernanceWrapper: React.FC<
     <ReAnimatedBox entering={FadeIn} paddingHorizontal="5">
       <Box flex={1}>
         <Box flexDirection="column" height="100%">
-          <Box mt="6" mb="6">
+          <Box mt="6xl">
             <NetworkTabs />
           </Box>
           {loading ? (