Fix TerminalSelectorView theming (#316)

src/common/components/BackwardBox.tsx

@@ -10,10 +10,10 @@ export function BackwardBox({ onClick }: BackwardButtonProps) {
         <Flex>
             <IconButton
                 aria-label="Back"
+                colorScheme="brand"
                 fontSize={24}
                 icon={<ChevronLeftIcon />}
                 size="sm"
-                variant="ghost"
                 onClick={onClick}
             />
         </Flex>

src/components/ViewContainer/TerminalSelectorView/ServiceProvidersGrid/ServiceProviderPane.tsx

@@ -26,6 +26,7 @@ const PaneContainer = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
 `;
 
 const PaneLabel = styled.p`
@@ -39,6 +40,7 @@ const PaneLabel = styled.p`
     line-height: 20px;
     margin: 0;
     user-select: none;
+    color: ${({ theme }) => theme.font.primaryColor};
 `;
 
 const PaneLogoContainer = styled.div`

src/components/ViewContainer/TerminalSelectorView/ServiceProvidersGrid/ServiceProvidersGrid.tsx

@@ -10,6 +10,7 @@ import { TerminalSelectorItem } from '../../types';
 
 const GridContainer = styled.div`
     height: 312px;
+    width: 100%;
 `;
 
 const Grid = styled.div`

src/components/ViewContainer/TerminalSelectorView/TerminalSelectorView.tsx

@@ -1,8 +1,10 @@
+import { Flex, VStack, Text } from '@chakra-ui/react';
 import { useContext } from 'react';
 
+import { BackwardBox } from 'checkout/components';
+import { LocaleContext, ViewModelContext } from 'checkout/contexts';
+
 import { ServiceProvidersGrid } from './ServiceProvidersGrid';
-import { LocaleContext, ViewModelContext } from '../../../common/contexts';
-import { ChevronButton, HeaderWrapper, Title } from '../../../components/legacy';
 
 export function TerminalSelectorView() {
     const { l } = useContext(LocaleContext);
@@ -18,13 +20,14 @@ export function TerminalSelectorView() {
     }
 
     return (
-        <>
-            <HeaderWrapper>
-                {hasBackward && <ChevronButton type="left" onClick={backward} />}
-
-                <Title>{l[`form.header.${view.category}.label`]}</Title>
-            </HeaderWrapper>
+        <VStack align="stretch" spacing={5}>
+            <Flex alignItems="center" direction="row">
+                {hasBackward && <BackwardBox onClick={backward} />}
+                <Text color="bodyText" fontWeight="medium" textAlign="center" width="full">
+                    {l[`form.header.${view.category}.label`]}
+                </Text>
+            </Flex>
             <ServiceProvidersGrid items={view.items} onPaneClick={forward} />
-        </>
+        </VStack>
     );
 }