cleanup & minor style adaption

3 files changed, 11 insertions, 27 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 7e33d694c..3ee3155be 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -64,7 +64,7 @@ export default class ServiceWebview extends Component {
     let statusBar = null;
     if (this.state.statusBarVisible) {
       statusBar = (
-        <StatusBarTargetUrl position="bottom" text={this.state.targetUrl} />
+        <StatusBarTargetUrl text={this.state.targetUrl} />
       );
     }
 
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 1c8dce0f7..b7b198f42 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
+import Appear from '../ui/effects/Appear';
+
 @observer
 export default class StatusBarTargetUrl extends Component {
   static propTypes = {
-    // eslint-disable-next-line
     className: PropTypes.string,
-    position: PropTypes.string,
     text: PropTypes.string,
   };
 
@@ -21,22 +21,20 @@ export default class StatusBarTargetUrl extends Component {
   render() {
     const {
       className,
-      position,
       text,
     } = this.props;
 
     return (
-      <div
+      <Appear
         className={classnames({
           'status-bar-target-url': true,
-          [`status-bar-target-url--${position}`]: true,
           [`${className}`]: true,
         })}
       >
         <div className="status-bar-target-url__content">
           {text}
         </div>
-      </div>
+      </Appear>
     );
   }
 }
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss
index 9a45314fb..95970750c 100644
--- a/src/styles/status-bar-target-url.scss
+++ b/src/styles/status-bar-target-url.scss
@@ -1,33 +1,19 @@
 @import './config.scss';
 
 .status-bar-target-url {
-  // width: 100%;
   height: auto;
   background: $theme-gray-lighter;
-  padding: 2px 20px 2px 10px;
+  padding: 4px;
   position: absolute;
-  // z-index: 100;
   box-shadow: 0 0 8px rgba(black, 0.2);
-
+  font-size: 12px;
   color: $theme-gray-dark;
+  order: 10;
+  bottom: 0;
+  right: 0;
+  border-top-left-radius: 5px;
 
   .status-bar-target-url__content {
     height: auto;
-
-    .mdi {
-      margin-right: 5px;
-    }
-  }
-
-  &.status-bar-target-url--bottom {
-    order: 10;
-    bottom: 0;
-    border-top-right-radius: 5px;
-  }
-
-  &.status-bar-target-url--top {
-    order: 10;
-    top: 0;
-    border-bottom-right-radius: 5px;
   }
 }