Present the correct signing data in the signing page (#1055)

* make signing data box multiline/scrollable

* make the box height more responsive

* set the min-height for the signing data box

* fix paddinds + eslint

packages/extension-ui/src/Popup/Signing/Bytes.tsx

@@ -1,6 +1,8 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ThemeProps } from '../../types';
+
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -33,14 +35,14 @@ function Bytes ({ bytes, className, url }: Props): React.ReactElement<Props> {
         </tr>
         <tr>
           <td className='label'>{t<string>('bytes')}</td>
-          <td className='data'>{text}</td>
+          <td className='data pre'><div>{text}</div></td>
         </tr>
       </tbody>
     </table>
   );
 }
 
-export default styled(Bytes)`
+export default styled(Bytes)(({ theme }: ThemeProps) => `
   border: 0;
   display: block;
   font-size: 0.75rem;
@@ -53,11 +55,24 @@ export default styled(Bytes)`
     text-overflow: ellipsis;
     vertical-align: middle;
     width: 100%;
+    padding: 0.15rem;
 
-    pre {
-      font-family: inherit;
-      font-size: 0.75rem;
-      margin: 0;
+    &.pre {
+      padding: 0px;
+      
+      div {
+        padding: 0.15rem;
+        font-family: inherit;
+        font-size: 0.75rem;
+        margin: 0;
+        white-space: pre;
+        overflow: auto;
+        max-height: calc(100vh - 480px);
+        min-height: ${theme.boxLineHeight};
+        border: 1px solid ${theme.boxBorderColor};
+        background: ${theme.boxBackground};
+        line-height: ${theme.boxLineHeight};
+      }
     }
   }
 
@@ -68,4 +83,4 @@ export default styled(Bytes)`
     vertical-align: middle;
     white-space: nowrap;
   }
-`;
+`);

packages/extension-ui/src/components/Address.tsx

@@ -306,7 +306,7 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
 }
 
 export default styled(Address)(({ theme }: ThemeProps) => `
-  background: ${theme.accountBackground};
+  background: ${theme.boxBackground};
   border: 1px solid ${theme.boxBorderColor};
   box-sizing: border-box;
   border-radius: 4px;

packages/extension-ui/src/components/themes.ts

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 const darkTheme = {
-  accountBackground: '#1A1B20',
   accountDotsIconColor: '#8E8E8E',
   addAccountImageBackground: '#1A1B20',
   backButtonBackground: '#3A3B41',
@@ -11,7 +10,9 @@ const darkTheme = {
   background: '#26272C',
   bodyColor: '#20222A',
   borderRadius: '4px',
+  boxBackground: '#1A1B20',
   boxBorderColor: '#303030',
+  boxLineHeight: '1rem',
   boxMargin: '0.75rem 0',
   boxPadding: '0 0.25rem',
   boxShadow: 'rgba(0, 0, 0, 0.86)',
@@ -50,13 +51,13 @@ export declare type Theme = typeof darkTheme;
 
 const lightTheme: Theme = {
   ...darkTheme,
-  accountBackground: '#FFFFFF',
   addAccountImageBackground: '#FFF',
   backButtonBackground: '#D7D7D7',
   backButtonBackgroundHover: '#d7d7d7ad',
   backButtonTextColor: '#454545',
   background: '#FAFAFA',
   bodyColor: '#FFFFFF',
+  boxBackground: '#FFFFFF',
   boxBorderColor: '#DADFEA',
   boxShadow: 'rgba(0, 0, 0, 0.3)',
   buttonBackgroundDanger: '#DC2222',