- {status === 'download-progress' && `Downloading update... ${Math.round(downloadProgress)}%`}
- {status === 'checking' && `Verifying update...`}
- {status === 'error' &&
- error && (
-
- {'Error during update. Please download again.'}
-
-
-
-
- )}
- {status === 'check-success' && (
-
- {'Update ready to install. '}
- {'install now'}
-
+ {Icon && (
+
+ {/* $FlowFixMe let me do my stuff, flow */}
+
+
+ )}
+ {message}
+ {Right && (
+
+
+
)}
)
}
}
+const IconContainer = styled.div`
+ margin-right: 15px;
+ display: flex;
+ align-items: center;
+`
+
const Container = styled(Box).attrs({
+ horizontal: true,
+ align: 'center',
py: '8px',
px: 3,
bg: p => (p.status === 'error' ? 'alertRed' : 'wallet'),
@@ -56,20 +122,19 @@ const Container = styled(Box).attrs({
mt: -20,
mb: 20,
fontSize: 4,
+ ff: 'Open Sans|SemiBold',
})`
border-radius: ${radii[1]}px;
`
-const DownloadLink = styled.span`
+const FakeLink = styled.span`
color: white;
text-decoration: underline;
cursor: pointer;
`
-const ErrorContainer = styled.div`
- margin-top: 10px;
- font-family: monospace;
- font-size: 10px;
+const RightContainer = styled.div`
+ margin-left: auto;
`
export default withUpdaterContext(UpdaterTopBanner)
diff --git a/src/components/Updater/UpdateDot.js b/src/components/Updater/UpdateDot.js
index 01a34bb5..65a81a98 100644
--- a/src/components/Updater/UpdateDot.js
+++ b/src/components/Updater/UpdateDot.js
@@ -1,7 +1,7 @@
// @flow
import React from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled from 'styled-components'
import { colors } from 'styles/theme'
@@ -13,15 +13,6 @@ type Props = {
context: UpdaterContextType,
}
-const rotate = keyframes`
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-`
-
const getColor = ({ status }: { status: UpdateStatus }) =>
status === 'error' ? colors.alertRed : colors.wallet
@@ -36,53 +27,11 @@ const Dot = styled.div`
border-radius: 50%;
`
-const Spinner = styled.div`
- opacity: 0.5;
- position: absolute;
- top: -3px;
- left: -3px;
- animation: ${rotate} 1.5s linear infinite;
- width: 14px;
- height: 14px;
-
- &:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- width: 4px;
- height: 4px;
- background-color: ${colors.wallet};
- border-radius: 50%;
- }
-
- &:after {
- content: '';
- position: absolute;
- width: 4px;
- height: 4px;
- background-color: ${colors.wallet};
- border-radius: 50%;
- }
-`
-
function UpdateDot(props: Props) {
const { context } = props
const { status } = context
if (!VISIBLE_STATUS.includes(status)) return null
- const showSpinner = status === 'download-progress' || status === 'checking'
- return (
-