Cleanup status display with address (#1097)

packages/ui-app/src/Status/index.tsx

@@ -6,6 +6,7 @@ import { I18nProps } from '../types';
 import { QueueStatus, QueueTx, QueueTx$Status } from './types';
 
 import React from 'react';
+import styled from 'styled-components';
 import { Method } from '@polkadot/types';
 
 import AddressMini from '../AddressMini';
@@ -18,6 +19,75 @@ type Props = I18nProps & {
   txqueue?: Array<QueueTx>
 };
 
+const Wrapper = styled.div`
+  display: inline-block;
+  position: fixed;
+  right: 0.25rem;
+  top: 0.25rem;
+  width: 20rem;
+  z-index: 1001;
+
+  .item {
+    display: block;
+    text-align: right;
+
+    > .wrapper > .container {
+      align-items: center;
+      background: #00688b;
+      border-radius: $small-corner;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.25rem;
+      padding: 0 0.5rem;
+      text-align: center;
+      opacity: 0.95;
+      vertical-align: middle;
+
+      .desc {
+        flex: 1;
+        padding: 0.5rem 1rem;
+
+        .status {
+          font-weight: 700;
+        }
+      }
+
+      .short {
+        font-size: 2.5rem;
+        padding: 0.5rem;
+
+        i.icon {
+          line-height: 1;
+        }
+      }
+    }
+
+    &.cancelled > .wrapper > .container {
+      background: #cd9b1d
+    }
+
+    &.event > .wrapper > .container {
+      background: teal;
+    }
+
+    &.completed > .wrapper > .container,
+    &.finalized > .wrapper > .container,
+    &.sent > .wrapper > .container,
+    &.success > .wrapper > .container {
+      background: green;
+    }
+
+    &.dropped > .wrapper > .container,
+    &.error > .wrapper > .container,
+    &.invalid > .wrapper > .container,
+    &.usurped > .wrapper > .container {
+      background: red;
+    }
+  }
+`;
+
 class Status extends React.PureComponent<Props> {
   render () {
     const { stqueue = [], txqueue = [] } = this.props;
@@ -31,10 +101,10 @@ class Status extends React.PureComponent<Props> {
     }
 
     return (
-      <div className='ui--Status'>
+      <Wrapper className='ui--Status'>
         {alltx.map(this.renderItem)}
         {allst.map(this.renderStatus)}
-      </div>
+      </Wrapper>
     );
   }
 

packages/ui-app/src/Tooltip.tsx

@@ -46,6 +46,7 @@ export default class Tooltip extends React.PureComponent<Props> {
 
   render () {
     const { children, trigger, delayShow, effect, place, className } = this.props;
+
     return ReactDOM.createPortal(
       <ReactTooltip
         id={trigger}
@@ -56,6 +57,7 @@ export default class Tooltip extends React.PureComponent<Props> {
       >
         {children}
       </ReactTooltip>,
-      this.tooltipContainer);
+      this.tooltipContainer
+    );
   }
 }

packages/ui-app/src/styles/components.css

@@ -326,89 +326,11 @@ header .ui--Button-Group {
   }
 }
 
-
 .ui--Static {
   overflow: hidden;
   word-break: break-all;
 }
 
-.ui--Status {
-  display: inline-block;
-  position: fixed;
-  right: 0.25rem;
-  top: 0.25rem;
-  width: 20rem;
-  z-index: 1001;
-
-  .ui--IdentityIcon {
-    margin-left: 0 !important;
-  }
-
-  .item {
-    display: block;
-    text-align: right;
-
-    > .wrapper > .container {
-      align-items: center;
-      background: #00688b;
-      border-radius: $small-corner;
-      color: white;
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 0.25rem;
-      padding: 0 0.5rem;
-      text-align: center;
-      opacity: 0.95;
-      vertical-align: middle;
-
-      .desc {
-        flex: 1;
-        padding: 0.5rem 1rem;
-
-        .status {
-          font-weight: 700;
-        }
-      }
-
-      .short {
-        font-size: 2.5rem;
-        padding: 0.5rem;
-
-        i.icon {
-          line-height: 1;
-        }
-      }
-    }
-
-    &.cancelled > .wrapper > .container {
-      background: #cd9b1d
-    }
-
-    &.event > .wrapper > .container {
-      background: teal;
-    }
-
-    &.completed > .wrapper > .container,
-    &.finalized > .wrapper > .container,
-    &.sent > .wrapper > .container,
-    &.success > .wrapper > .container {
-      background: green;
-    }
-
-    &.dropped > .wrapper > .container,
-    &.error > .wrapper > .container,
-    &.invalid > .wrapper > .container,
-    &.usurped > .wrapper > .container {
-      background: red;
-    }
-  }
-}
-
-.ui.tiny.progress {
-  font-size: .5rem;
-}
-
 .ui--Tooltip {
   text-align: center;
   z-index: 1002;

packages/ui-app/src/styles/semantic.css

@@ -129,8 +129,14 @@
   display: flex !important;
 }
 
-.ui.progress .bar {
-  min-width: 0 !important;
+.ui.progress {
+  &.tiny {
+    font-size: .5rem;
+  }
+
+  .bar {
+    min-width: 0 !important;
+  }
 }
 
 .ui.secondary.vertical.menu > .item {