diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js index 90316be5..dcd04586 100644 --- a/browser/components/RealtimeNotification.js +++ b/browser/components/RealtimeNotification.js @@ -37,7 +37,7 @@ class RealtimeNotification extends React.Component { render () { const { notifications } = this.state const link = notifications.length > 0 - ? this.handleLinkClick(e)} > {notifications[0].text} @@ -45,7 +45,7 @@ class RealtimeNotification extends React.Component { : '' return ( -
{link}
+
{link}
) } } diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index c6942f67..9b1643ba 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -1,2 +1,35 @@ -.realtime-notification - font-size 1em +.notification-area + z-index 1000 + font-size 12px + position absolute + bottom 0px + background-color #EBEBEB + width 100vw + height 30px + text-align center + +.notification-link + text-decoration none + color #282A36 + border 1px solid #6FA8E6 + background-color alpha(#6FA8E6, 0.2) + padding 3px 9px + border-radius 2px + position absolute + bottom 4px + margin-left -10% + transition 0.2s + &:hover + color #1378BD + +body[data-theme="dark"] + .notification-area + background-color #1E2124 + + .notification-link + color #fff + border 1px solid alpha(#5CB85C, 0.6) + background-color alpha(#5CB85C, 0.2) + transition 0.2s + &:hover + color #5CB85C \ No newline at end of file diff --git a/browser/finder/NoteDetail.styl b/browser/finder/NoteDetail.styl index e46f291a..060902af 100644 --- a/browser/finder/NoteDetail.styl +++ b/browser/finder/NoteDetail.styl @@ -2,6 +2,7 @@ .root absolute top bottom left right + bottom 30px left $note-detail-left-margin right $note-detail-right-margin height 100% diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 90824eae..e233755d 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -28,7 +28,7 @@ width 100% resize none border 1px solid $ui-borderColor - padding 10px + padding 2px 5px line-height 1.6 background-color $ui-noteDetail-backgroundColor @@ -57,9 +57,10 @@ .override absolute bottom left + bottom 30px left 60px height 23px - z-index 1 + z-index 101 button navButtonColor() height 24px diff --git a/browser/main/Main.js b/browser/main/Main.js index c5a86135..ed5904d5 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -14,6 +14,7 @@ import InitModal from 'browser/main/modals/InitModal' import mixpanel from 'browser/main/lib/mixpanel' import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig' import eventEmitter from 'browser/main/lib/eventEmitter' +import RealtimeNotification from 'browser/components/RealtimeNotification' function focused () { mixpanel.track('MAIN_FOCUSED') @@ -255,6 +256,7 @@ class Main extends React.Component { ignorePreviewPointerEvents={this.state.isRightSliderFocused} /> + ) } diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 8dd8dc99..df8df627 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -3,6 +3,8 @@ .root absolute bottom left right height $statusBar-height + bottom 16px + z-index 100 background-color $ui-noteDetail-backgroundColor display flex diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js index fe074353..c1ec0e71 100644 --- a/browser/main/StatusBar/index.js +++ b/browser/main/StatusBar/index.js @@ -2,7 +2,6 @@ import React, { PropTypes } from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './StatusBar.styl' import ZoomManager from 'browser/main/lib/ZoomManager' -import RealtimeNotification from 'browser/components/RealtimeNotification' const electron = require('electron') const { remote, ipcRenderer } = electron @@ -60,10 +59,6 @@ class StatusBar extends React.Component { {Math.floor(config.zoom * 100)}% - - {status.updateReady ?