Merge pull request #49 from tracking-exposed/a-bit-of-UX-review

A bit of ux review
tracking-exposed · May 28, 2017 · 887cc82 · 887cc82
2 parents 80418fb + b9e2a58
commit 887cc82
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 25 deletions.
diff --git a/manifest.json b/manifest.json
@@ -18,7 +18,6 @@
   },
 
   "permissions": [
-    "tabs",
     "storage",
     "cookies",
     "http://localhost:8000/",

diff --git a/src/chrome/popup/components/infoBox.js b/src/chrome/popup/components/infoBox.js
@@ -41,8 +41,8 @@ const InfoBox = React.createClass({
                             free, open source code</a> everyone can audit.
                         </li>
                         <li>
-                            Here you have <a href={realitylink} target="_blank">
-                            your data</a>, available to be downloaded or consulted (is a work in progress!). It contains what Facebook is showing you. In the 2017 will be improved with new visualizations and will become private. 
+                            <b>Access to <a href={realitylink} target="_blank">
+                            your data</a></b>, available to be downloaded or consulted (is a work in progress!). It contains what Facebook is showing you. In the 2017 will be improved with new visualizations and functionalities. 
                         </li>
                     </ul>
                 </CardText>

diff --git a/src/chrome/popup/components/settings.js b/src/chrome/popup/components/settings.js
@@ -32,8 +32,9 @@ export default class Settings extends React.Component {
                                                           settings: {$set: settings},
                                                           reloadBrowser: {$set: true}})));
 
-        chrome.tabs.query({url: 'https://*.facebook.com/*'},
-                          tabs => tabs.forEach(tab => chrome.tabs.reload(tab.id)));
+        chrome.tabs.reload();
+        /* chrome.tabs.query({url: 'https://*.facebook.com/*'},
+                          tabs => tabs.forEach(tab => chrome.tabs.reload(tab.id))); */
     }
 
     resetSettings () {

diff --git a/src/components/onboardingBox.js b/src/components/onboardingBox.js
@@ -9,24 +9,24 @@ const OnboardingBox = React.createClass({
             <div className='fbtrex--onboarding'>
                 <div className='fbtrex--onboarding-box'>
                     <h1>Yay!! Welcome to facebook.tracking.exposed!</h1>
-                    <p>This is awesome, thanks for contributing. One last thing before we start. We need you to post your public key, so we can associate it with your contributions. Copy and paste the following message as new <strong>public post</strong>:</p>
+                    <p>We need you to post your public key, copy and paste the following message as new <strong>public post</strong>. After a minute you an safely delete it.</p>
                     <p className='fbtrex--copypaste'>
                       Personalisation Algorithms are a collective issue, and can
                       only be collectively addressed; today I am joining
                       https://facebook.tracking.exposed and this technical
                       this message is necessary to link my account to the following key: {publicKey}
                     </p>
                     <p className='fbtrex--note'>
-                      If you do not want to show this message on your wall for whatever reason, we understand; just wait a minute and then you can safely delete it. After we retrieve your key this box will disappear. 
+                      We need you to post this key so we can associate it with yout contributions. After you post the key above, this post will disappear.
                       If something does not work, contact us on our <a href="https://www.facebook.com/personalizationalgorithm">facebook page</a> or open an <a href="https://github.com/tracking-exposed/web-extension/issues"> issue on github</a>.
                     </p>
                     <p>
-                        <button className='fbtrex--onboarding-toggle'>Close box.</button>
+                        <button className='fbtrex--onboarding-toggle'>Reduce box.</button>
                     </p>
                 </div>
 
                 <div className='fbtrex--onboarding-collapsed fbtrex--hide'>
-                    facebook.tracking.exposed onboarding is not completed yet. <button className='fbtrex--onboarding-toggle'>More info.</button>
+                    facebook.tracking.exposed onboarding is not completed yet. <button className='fbtrex--onboarding-toggle'>Reopen box.</button>
                 </div>
             </div>
         );

diff --git a/src/components/visualFeedback.js b/src/components/visualFeedback.js
@@ -11,27 +11,29 @@ const VisualFeedback = React.createClass({
         var message;
 
         const actionLink = `https://facebook.tracking.exposed/realitycheck/${config.userId}/data`;
-        const actionText = '⦑ Last activities ⦒';
+        const actionText = 'Your data';
 
         if (isPublic) {
             badge = '✔';
             message = 'This post has been recorded';
         } else {
             badge = '⛔️';
-            message = 'The content of this post will be kept private.';
+            message = 'This post will be kept private';
         }
 
         return (
             <div className={classNames('fbtrex--visual-feedback', { 'fbtrex--visibility-public': isPublic, 'fbtrex--less-info': config.settings.lessInfo })}>
-                <h1>
-                    <img src={logo} />
-                    facebook.tracking.exposed
-                </h1>
                 <span className='fbtrex--badge'>
                     {badge}
                 </span>
                 <span className='fbtrex--message'>
-                    {message} <a target='_blank' href={actionLink}>{actionText}</a>
+                    {message} 
+                </span>
+                <span className='fbtrex--logo'>
+                    <img src={logo} />
+                </span>
+                <span className='fbtrex--message'>
+                    <a target='_blank' href={actionLink}>{actionText}</a>
                 </span>
             </div>
         );

diff --git a/styles/app.scss b/styles/app.scss
@@ -5,5 +5,5 @@
 @import 'visualDebug';
 
 div[role="banner"] {
-    background-color: green !important;
+    background-color: #93c993 !important;
 }
diff --git a/styles/visualFeedback.scss b/styles/visualFeedback.scss
@@ -3,21 +3,23 @@
     padding: 6px 12px;
     background-color: #f6f7f9;
 
-    h1 {
-        img {
-            vertical-align: middle;
-            margin: 0 4px 2px 0;
-        }
-
-        margin-bottom: 10px
+    img {
+        vertical-align: middle;
+        margin: 0 4px 2px 0;
     }
 
     .fbtrex--badge {
         color: red;
-        margin-right: 6px;
+        margin-left: 6px;
     }
 
     .fbtrex--message {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    .fbtrex--logo {
+        margin-left: 40px;
     }
 
     &.fbtrex--less-info {