Fix transaction preview formatting

src/app/components/ResponsiveGridRow/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ResponsiveGridRow /> should render component 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <span
+      class="c1"
+    >
+      Type
+    </span>
+  </div>
+  <div
+    class="c2"
+  >
+    transfer
+  </div>
+</div>
+`;

src/app/components/ResponsiveGridRow/__tests__/index.test.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import { ResponsiveGridRow } from '..'
+
+describe('<ResponsiveGridRow />', () => {
+  it('should render component', () => {
+    const { container } = render(<ResponsiveGridRow label="Type" value="transfer" />)
+
+    expect(container).toMatchSnapshot()
+  })
+})

src/app/components/ResponsiveGridRow/index.tsx

@@ -1,23 +1,18 @@
-/**
- *
- * ResponsiveGridRow
- *
- */
 import { Box, Text } from 'grommet'
 import React, { memo } from 'react'
 
-interface Props {
-  label: string | React.ReactNode
-  value: string | React.ReactNode
+interface ResponsiveGridRowProps {
+  label: React.ReactNode
+  value: React.ReactNode
 }
 
-export const ResponsiveGridRow = memo((props: Props) => {
+export const ResponsiveGridRow = memo(({ label, value }: ResponsiveGridRowProps) => {
   return (
     <>
       <Box>
-        <Text weight="bold">{props.label}</Text>
+        <Text weight="bold">{label}</Text>
       </Box>
-      <Box>{props.value}</Box>
+      <Box direction="row">{value}</Box>
     </>
   )
 })

src/app/components/TransactionTypeFormatter/index.tsx

@@ -1,12 +1,7 @@
-/**
- *
- * TransactionTypeFormatter
- *
- */
 import { NewTransactionType } from 'app/state/transaction/types'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Text } from 'grommet'
+import { Box, Text } from 'grommet'
 
 interface Props {
   type: NewTransactionType
@@ -24,9 +19,9 @@ export const TransactionTypeFormatter = memo((props: Props) => {
 
   const typeMessage = typeMap[type]
   return (
-    <>
+    <Box>
       <Text>{type}</Text>
       <Text size="small">({typeMessage})</Text>
-    </>
+    </Box>
   )
 })