header: fixes tooltip issues and refactors the component

components/core/ApplicationControlMenu.js

@@ -1,18 +1,26 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
+import * as OldSVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
+import { Tooltip } from "react-tippy";
 
 import Dismissible from "~/components/core/Dismissible";
 
-const STYLES_AVATAR = css`
+const STYLES_ANCHOR = css`
+  position: relative;
+`;
+
+const STYLES_BUTTON = css`
+  background-color: ${Constants.system.black};
+  color: ${Constants.system.white};
   display: inline-flex;
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
   background-size: cover;
   background-position: 50% 50%;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  position: relative;
-  background-color: ${Constants.system.black};
-  color: ${Constants.system.white};
   transition: 100ms ease all;
   align-items: center;
   justify-content: center;
@@ -22,17 +30,6 @@ const STYLES_AVATAR = css`
   }
 `;
 
-const STYLES_AVATAR_ONLINE = css`
-  height: 16px;
-  width: 16px;
-  background-color: ${Constants.system.green};
-  border: 2px solid ${Constants.system.white};
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  border-radius: 16px;
-`;
-
 export default class ApplicationControlMenu extends React.Component {
   state = {};
 
@@ -51,27 +48,32 @@ export default class ApplicationControlMenu extends React.Component {
   };
 
   render() {
+    const title = this.state.visible ? "Close menu" : "Open settings menu";
+
     return (
       <Dismissible
-        css={STYLES_AVATAR}
+        css={STYLES_ANCHOR}
         captureResize={false}
         captureScroll={true}
         enabled={this.state.visible}
         onOutsideRectEvent={this._handleHide}
-        onClick={this._handleClick}
-        style={{
-          ...this.props.style,
-          width: `${this.props.size}px`,
-          height: `${this.props.size}px`,
-          borderRadius: `${this.props.size}px`,
-          backgroundImage: `url('${this.props.url}')`,
-          cursor: this.props.onClick ? "pointer" : this.props.style,
-          backgroundColor: this.state.visible ? Constants.system.brand : null,
-        }}
+        style={this.props.style}
       >
-        {this.props.icon ? this.props.icon : null}
+        <Tooltip animation="fade" animateFill={false} title={title}>
+          <span
+            onClick={this._handleClick}
+            css={STYLES_BUTTON}
+            style={{
+              backgroundColor: this.state.visible
+                ? Constants.system.brand
+                : null,
+            }}
+          >
+            <OldSVG.ChevronDown height="20px" />
+          </span>
+        </Tooltip>
+
         {this.state.visible ? this.props.popover : null}
-        {this.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
       </Dismissible>
     );
   }

components/core/ApplicationHeader.js

@@ -186,27 +186,22 @@ export default class ApplicationHeader extends React.Component {
             </a>
           </Tooltip>
 
-          <Tooltip animation="fade" animateFill={false} title="Settings Menu">
-            <ApplicationControlMenu
-              style={{ marginLeft: 12 }}
-              onClick={() => {}}
-              size={36}
-              icon={<OldSVG.ChevronDown height="20px" />}
-              popover={
-                <System.PopoverNavigation
-                  style={{ right: 0, top: "48px", cursor: "pointer" }}
-                  onNavigateTo={this.props.onNavigateTo}
-                  onAction={this.props.onAction}
-                  onSignOut={this.props.onSignOut}
-                  navigation={[
-                    { text: "Profile & account settings", value: 13 },
-                    { text: "Filecoin settings", value: 14 },
-                    { text: "Sign out", value: 0, action: "SIGN_OUT" },
-                  ]}
-                />
-              }
-            />
-          </Tooltip>
+          <ApplicationControlMenu
+            style={{ marginLeft: 12 }}
+            popover={
+              <System.PopoverNavigation
+                style={{ right: 0, top: "48px", cursor: "pointer" }}
+                onNavigateTo={this.props.onNavigateTo}
+                onAction={this.props.onAction}
+                onSignOut={this.props.onSignOut}
+                navigation={[
+                  { text: "Profile & account settings", value: 13 },
+                  { text: "Filecoin settings", value: 14 },
+                  { text: "Sign out", value: 0, action: "SIGN_OUT" },
+                ]}
+              />
+            }
+          />
         </div>
       </header>
     );

scenes/SceneFilesFolder.js

@@ -68,7 +68,7 @@ export default class SceneFilesFolder extends React.Component {
 
     const data = {
       columns: [
-        { key: "name", name: "File", type: "FILE_LINK", width: "328px" },
+        { key: "name", name: "Data", type: "FILE_LINK", width: "328px" },
         {
           key: "size",
           name: "Size",