feat: generic user profile [EP-2502]

natgeosociety · Sep 24, 2020 · 07dbe36 · 07dbe36
1 parent fc2726b
commit 07dbe36
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@kunukn/react-collapse": "^2.2.9",
     "@loadable/component": "^5.6.1",
-    "@natgeosociety/marapp-uikit": "^1.0.8",
+    "@natgeosociety/marapp-uikit": "^1.0.10",
     "assert": "^2.0.0",
     "axios": "^0.18.0",
     "axios-cache-adapter": "^2.3.0",

diff --git a/packages/earth-admin/src/components/user-menu/component.tsx b/packages/earth-admin/src/components/user-menu/component.tsx
@@ -33,7 +33,7 @@ const Dropdown: any = Keyframes.Spring({
 export default function UserMenuComponent() {
   const [showDrop, setShowDrop] = useState(false);
 
-  const { userData, logout } = useContext(Auth0Context);
+  const { userData, logout, isAuthenticated } = useContext(Auth0Context);
 
   const menuRef = React.useRef(null);
 
@@ -54,11 +54,15 @@ export default function UserMenuComponent() {
 
   return (
     <div className="marapp-qa-useraccount ng-user-account" ref={menuRef}>
-      <button className="ng-unstyled" onClick={(e) => toggleDrop(e)}>
-        {userData.picture && (
-          <img className="ng-user-profile" src={userData.picture} alt={userData.name} />
+      <button
+        className="ng-user-profile ng-background-ultraltgray ng-color-black"
+        onClick={(e) => toggleDrop(e)}
+      >
+        {isAuthenticated ? (
+          <i className="ng-icon-account" />
+        ) : (
+          <i className="ng-icon-account-outline" />
         )}
-        {!userData.picture && <i className="ng-icon ng-icon-user" />}
       </button>
       <Dropdown native={true} state={`${showDrop}`}>
         {({ x, ...props }) => (

diff --git a/packages/earth-admin/src/components/user-menu/styles.scss b/packages/earth-admin/src/components/user-menu/styles.scss
@@ -26,7 +26,7 @@
   z-index: 10000;
   button {
     border: 0;
-    background: none;
+    // background: none;
     &:focus {
       outline: none;
     }

diff --git a/packages/earth-map/src/components/user-menu/component.tsx b/packages/earth-map/src/components/user-menu/component.tsx
@@ -57,11 +57,15 @@ export default function UserMenuComponent() {
 
   return (
     <div className="marapp-qa-useraccount ng-user-account" ref={menuRef}>
-      <button className="ng-unstyled" onClick={(e) => toggleDrop(e)}>
-        {userData.picture && (
-          <img className="ng-user-profile" src={userData.picture} alt={userData.name} />
+      <button
+        className="ng-user-profile ng-background-ultraltgray ng-color-black"
+        onClick={(e) => toggleDrop(e)}
+      >
+        {isAuthenticated ? (
+          <i className="ng-icon-account" />
+        ) : (
+          <i className="ng-icon-account-outline" />
         )}
-        {!userData.picture && <i className="ng-icon-menu" />}
       </button>
       <Dropdown native={true} state={`${showDrop}`}>
         {({ x, ...props }) => (

diff --git a/yarn.lock b/yarn.lock
@@ -2743,10 +2743,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@natgeosociety/marapp-uikit@^1.0.8":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@natgeosociety/marapp-uikit/-/marapp-uikit-1.0.8.tgz#cdd72cee945f59328e42a12f33891a0be622e178"
-  integrity sha512-KaM+haRVuLwfqaegtKONTjBbxT3uxdjxwlp6COR0ymxci9cmOSQ5QrUD6Jr/HlnSRElx4gft0ArnfvFg3/+RJw==
+"@natgeosociety/marapp-uikit@^1.0.10":
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/@natgeosociety/marapp-uikit/-/marapp-uikit-1.0.10.tgz#39034d9cb3df41aa87db2d2190ad482597277257"
+  integrity sha512-NRIl75Gnexz/txP6FwSd0+FsRHfO+l4/WGSaN1H+oex0oq4Tjl6HygW4HZ8cwpSbZJfeDMNMr8CWlXTrZ1ra2w==
   dependencies:
     countup.js "1.8.5"
     jquery "2.2.1"