From 300c7c254a62bd3d62702776090e53af5feb628f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <andrerfneves@protonmail.com>
Date: Wed, 23 Jan 2019 22:13:08 -0500
Subject: [PATCH] refactor: isSyncing and user-select cleaning UI

---
 app/components/status-pill.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/components/status-pill.js b/app/components/status-pill.js
index 235f50a..5deed09 100644
--- a/app/components/status-pill.js
+++ b/app/components/status-pill.js
@@ -43,6 +43,7 @@ const StatusPillLabel = styled(TextComponent)`
   text-transform: uppercase;
   font-size: 10px;
   padding-top: 1px;
+  user-select: none;
 `;
 
 type Props = {};
@@ -51,7 +52,7 @@ type State = {
   type: string,
   icon: string,
   progress: number,
-  isSynching: boolean,
+  isSyncing: boolean,
 };
 
 export class StatusPill extends Component<Props, State> {
@@ -61,7 +62,7 @@ export class StatusPill extends Component<Props, State> {
     type: 'synching',
     icon: syncIcon,
     progress: 0,
-    isSynching: true,
+    isSyncing: true,
   };
 
   componentDidMount() {
@@ -89,7 +90,7 @@ export class StatusPill extends Component<Props, State> {
       ...(newProgress > 99.99 ? {
         type: 'ready',
         icon: readyIcon,
-        isSynching: false,
+        isSyncing: false,
       } : {}),
     });
 
@@ -100,13 +101,13 @@ export class StatusPill extends Component<Props, State> {
 
   render() {
     const {
-      type, icon, progress, isSynching,
+      type, icon, progress, isSyncing,
     } = this.state;
-    const showPercent = isSynching ? `(${progress.toFixed(2)}%)` : '';
+    const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
 
     return (
       <Wrapper>
-        <Icon src={icon} animated={isSynching} />
+        <Icon src={icon} animated={isSyncing} />
         <StatusPillLabel value={`${type} ${showPercent}`} />
       </Wrapper>
     );