chore: electron default window height

refactor: modal background overlay rgba change
refactor: fix transitions on all relevant components

app/components/loading-screen.js

@@ -64,12 +64,13 @@ export class LoadingScreen extends PureComponent<Props, State> {
         <Transition
           native
           items={start}
-          enter={[{ height: 'auto' }]}
-          leave={{ height: 0 }}
+          enter={[{ height: 'auto', opacity: 1 }]}
+          leave={{ height: 0, opacity: 0 }}
           from={{
             position: 'absolute',
             overflow: 'hidden',
             height: 0,
+            opacity: 0,
           }}
         >
           {() => props => (

app/components/modal.js

@@ -13,7 +13,7 @@ const ModalWrapper = styled.div`
   top: 0;
   left: 0;
   z-index: 10;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.5);
 `;
 
 const ChildrenWrapper = styled.div`

app/components/wallet-address.js

@@ -67,6 +67,8 @@ const RevealsMain = styled.div`
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
+  height: ${props => (props.isVisible ? '178px' : 0)}
+  transition: all 0.25s ease-in-out;
 
   & > div {
     top: 0;
@@ -92,7 +94,7 @@ export class WalletAddress extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = { isVisible: props.isVisible };
+    this.state = { isVisible: Boolean(props.isVisible) };
   }
 
   show = () => this.setState(() => ({ isVisible: true }));
@@ -121,17 +123,20 @@ export class WalletAddress extends PureComponent<Props, State> {
             isVisible={isVisible}
           />
         </AddressWrapper>
-        <RevealsMain>
+        <RevealsMain isVisible={isVisible}>
           <Transition
             native
             items={isVisible}
-            enter={[{ height: 'auto' }]}
-            leave={{ height: 0 }}
+            enter={[{
+              height: 'auto',
+              opacity: 1,
+            }]}
+            leave={{ height: 0, opacity: 0 }}
             from={{
-              // TODO: fix this
-              // position: 'absolute',
-              // overflow: 'hidden',
-              // height: 0,
+              position: 'absolute',
+              overflow: 'hidden',
+              opacity: 0,
+              height: 0,
             }}
           >
             {show => show && (props => (

app/views/receive.js

@@ -97,10 +97,7 @@ export class ReceiveView extends PureComponent<Props, State> {
           alignItems='center'
           justifyContent='space-between'
         >
-          <WalletAddress
-            address={address}
-            isVisible
-          />
+          <WalletAddress address={address} />
         </Row>
         <Row>
           <ShowMoreButton
@@ -127,17 +124,14 @@ export class ReceiveView extends PureComponent<Props, State> {
         <Transition
           native
           items={showAdditionalOptions}
-          leave={{ height: 0 }}
+          enter={[{ height: 'auto', opacity: 1 }]}
+          leave={{ height: 0, opacity: 0 }}
           from={{
             position: 'absolute',
-            // TODO: fix this as we need the overflow but need the
-            // overflow: 'hidden',
+            overflow: 'hidden',
             height: 0,
+            opacity: 0,
           }}
-          enter={[{
-            height: 'auto',
-            width: 'auto',
-          }]}
         >
           {show => show && (props => (
             <animated.div style={props}>

app/views/send.js

@@ -258,7 +258,7 @@ export class SendView extends PureComponent<Props, State> {
     if (field === 'to') {
       // eslint-disable-next-line max-len
       this.setState(() => ({ [field]: value }),
-        () => validateAddress({ address: value }) );
+        () => validateAddress({ address: value }));
     } else {
       this.setState(() => ({ [field]: value }));
     }
@@ -517,16 +517,18 @@ export class SendView extends PureComponent<Props, State> {
             <Transition
               native
               items={showFee}
-              leave={{ height: 0 }}
+              enter={[{
+                height: 'auto',
+                opacity: 1,
+                overflow: 'visible',
+              }]}
+              leave={{ height: 0, opacity: 0 }}
               from={{
                 position: 'absolute',
                 overflow: 'hidden',
+                opacity: 0,
                 height: 0,
               }}
-              enter={[{
-                height: 'auto',
-                width: 'auto',
-              }]}
             >
               {show => show && (props => (
                 <animated.div style={props}>

config/electron.js

@@ -53,7 +53,7 @@ const createWindow = () => {
 
   mainWindow = new BrowserWindow({
     width: 1000,
-    height: 600,
+    height: 660,
     transparent: false,
     frame: true,
     resizable: true,