fix userprofile loader and button (#618)

* position loader

* style profile button

src/Components/AuthNav.jsx

@@ -1,17 +1,25 @@
 import React from 'react'
 import {useAuth0} from '@auth0/auth0-react'
-import {CircularProgress} from '@material-ui/core'
 import LoginButton from './LoginButton'
 import UserProfile from './UserProfile'
+import Loader from './Loader'
+import {TooltipIconButton} from './Buttons'
 
 
 const AuthNav = () => {
   const {isLoading, isAuthenticated} = useAuth0()
 
   if (isLoading) {
-    return <CircularProgress/>
+    return (
+      <TooltipIconButton
+        title={'Log in with GitHub'}
+        icon={<Loader/>}
+        onClick={() => {
+          return undefined
+        }}
+      />
+    )
   }
-
   return isAuthenticated ?
     <UserProfile/> :
     <LoginButton/>

src/Components/UserProfile.jsx

@@ -25,7 +25,18 @@ const UserProfile = ({size = 'medium'}) => {
 
   return isAuthenticated && (
     <>
-      <IconButton className={'no-hover'} {...bindTrigger(popupState)}>
+      <IconButton
+        className={'no-hover'}
+        {...bindTrigger(popupState)}
+        sx={{
+          'width': '50px',
+          'height': '50px',
+          'border': 'none',
+          '&.Mui-selected, &.Mui-selected:hover': {
+            opacity: .8,
+          },
+        }}
+      >
         <Avatar
           alt={user.name}
           src={user.picture}