[DDW-581] Loading component

input-output-hk · Feb 26, 2019 · 646dba5 · 646dba5
1 parent 07931e0
commit 646dba5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 28 deletions.
diff --git a/source/renderer/app/assets/images/ada-logo.inline.svg b/source/renderer/app/assets/images/ada-logo.inline.svg
diff --git a/source/renderer/app/components/loading/Loading.js b/source/renderer/app/components/loading/Loading.js
@@ -100,7 +100,6 @@ type State = {
 };
 
 type Props = {
-  currencyIcon: string,
   apiIcon: string,
   cardanoNodeState: ?CardanoNodeState,
   hasBeenConnected: boolean,
@@ -343,7 +342,6 @@ export default class Loading extends Component<Props, State> {
     const { intl } = this.context;
     const {
       cardanoNodeState,
-      currencyIcon,
       apiIcon,
       isConnected,
       isSynced,
@@ -379,7 +377,6 @@ export default class Loading extends Component<Props, State> {
     ]);
 
     const daedalusLoadingLogo = daedalusLogo;
-    const currencyLoadingLogo = currencyIcon;
     const apiLoadingLogo = apiIcon;
 
     const canReportConnectingIssue = (
@@ -429,7 +426,9 @@ export default class Loading extends Component<Props, State> {
           </div>
         )}
         <div className={styles.logos}>
-          <SVGInline svg={currencyLoadingLogo} className={currencyLogoStyles} />
+          <p className={currencyLogoStyles}>
+            &#8371;
+          </p>
           <SVGInline svg={daedalusLoadingLogo} className={daedalusLogoStyles} />
           <SVGInline svg={apiLoadingLogo} className={apiLogoStyles} />
         </div>

diff --git a/source/renderer/app/components/loading/Loading.scss b/source/renderer/app/components/loading/Loading.scss
@@ -90,7 +90,11 @@
   color: var(--theme-syncing-text-color);
 }
 
-.ada-logo,
+.ada-logo {
+  font-family: var(--font-light);
+  font-size: 64px;
+  opacity: .5;
+}
 .ada-apiLogo {
   & > svg {
     display: block;
@@ -105,10 +109,6 @@ $cardanoLogoWidth: 86px;
 }
 
 $adaLogoWidth: 43px;
-.ada-logo > svg {
-  width: $adaLogoWidth;
-  margin: 3px ($cardanoLogoWidth - $adaLogoWidth) / 2 0; // Visually align in the middle + Needs to be the same dimension as the apiLogo
-}
 
 .daedalusLogo {
   & > svg {
@@ -119,15 +119,21 @@ $adaLogoWidth: 43px;
 }
 
 .connectingLogo {
+  color: var(--theme-icon-connecting-logo-color);
   & > svg path {
     fill: var(--theme-icon-connecting-logo-color);
   }
 }
 
-.syncingLogo svg path {
-  fill: var(--theme-icon-syncing-logo-color);
+.syncingLogo {
+  color: var(--theme-icon-syncing-logo-color);
+  & svg path {
+    fill: var(--theme-icon-syncing-logo-color);
+  }
 }
 
+
+
 .linkNewWindow {
   display: inline-block;
   width: 12px;

diff --git a/source/renderer/app/containers/LoadingPage.js b/source/renderer/app/containers/LoadingPage.js
@@ -4,7 +4,6 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import CenteredLayout from '../components/layout/CenteredLayout';
 import Loading from '../components/loading/Loading';
-import adaLogo from '../assets/images/ada-logo.inline.svg';
 import cardanoLogo from '../assets/images/cardano-logo.inline.svg';
 import type { InjectedProps } from '../types/injectedPropsType';
 import { generateFileNameWithTimestamp } from '../../../common/utils/files';
@@ -63,7 +62,6 @@ export default class LoadingPage extends Component<InjectedProps> {
     return (
       <CenteredLayout>
         <Loading
-          currencyIcon={adaLogo}
           apiIcon={cardanoLogo}
           cardanoNodeState={cardanoNodeState}
           isConnected={isConnected}