Merge pull request #321 from trezor/fix/signtx-modal-design

Fix/signtx modal design

src/components/modals/confirm/SignTx/index.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import icons from 'config/icons';
 import colors from 'config/colors';
-import { LINE_HEIGHT, FONT_SIZE } from 'config/variables';
+import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 import P from 'components/Paragraph';
 import Icon from 'components/Icon';
@@ -21,7 +21,6 @@ type Props = {
 
 const Wrapper = styled.div`
     width: 390px;
-    padding: 12px 10px;
 `;
 
 const Header = styled.div`
@@ -32,20 +31,34 @@ const Content = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
     background: ${colors.MAIN};
     padding: 24px 48px;
+    border-radius: 4px;
 `;
 
 const StyledP = styled(P)`
+    padding-bottom: 20px;
+    color: ${colors.TEXT};
+    font-size: ${FONT_SIZE.BASE};
+    &:last-child {
+        padding-bottom: 0px;
+    }
+`;
+
+const Address = styled(StyledP)`
     word-wrap: break-word;
-    padding: 5px 0;
     line-height: ${LINE_HEIGHT.SMALL};
 `;
 
 const Label = styled.div`
-    padding-top: 5px;
+    padding-bottom: 6px;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_SECONDARY};
 `;
 
+const FeeLevelName = styled(StyledP)`
+    padding-bottom: 0px;
+`;
+
 const ConfirmSignTx = (props: Props) => {
     const {
         amount,
@@ -64,11 +77,12 @@ const ConfirmSignTx = (props: Props) => {
             </Header>
             <Content>
                 <Label>Send</Label>
-                <P>{`${amount} ${currency}` }</P>
+                <StyledP>{`${amount} ${currency}` }</StyledP>
                 <Label>To</Label>
-                <StyledP>{ address }</StyledP>
+                <Address>{ address }</Address>
                 <Label>Fee</Label>
-                <P>{ selectedFeeLevel.label }</P>
+                <FeeLevelName>{selectedFeeLevel.value}</FeeLevelName>
+                <StyledP>{ selectedFeeLevel.label }</StyledP>
             </Content>
         </Wrapper>
     );