add user name to logout form.

Canadian-Geospatial-Platform · Jul 20, 2023 · 4e337fc · 4e337fc
1 parent fc89ee3
commit 4e337fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/signin/headerwidget/headerwidget.scss b/src/components/signin/headerwidget/headerwidget.scss
@@ -1,16 +1,20 @@
-.dropdown ul li{
-color: black;
-list-style-type: none;  
-z-index: 1000;
-position: absolute;
+.dropdown ul {
 right: 0;
 top: auto;
-background-color: white;
-width: 10rem;
+position: absolute;
+margin-top: 0.5rem;
 border-style: solid;
 border-width: 0.1rem;
 box-shadow: 0.1rem 0.1rem;
-margin-top: 0.5rem;
+width: 10rem;
+background-color: white;
+padding: 0;
+}
+
+.dropdown ul li{
+color: black;
+list-style-type: none;  
+z-index: 1000;
 }
 
 #loginWidget .userIcon{

diff --git a/src/components/signin/headerwidget/headerwidget.tsx b/src/components/signin/headerwidget/headerwidget.tsx
@@ -1,5 +1,4 @@
 import './headerwidget.scss';
-import AccountIcon from '@material-ui/icons/AccountBox';
 import React, { useEffect, useState } from "react";
 import { getIdToken, requireLogin, logout } from '../utils/authorization';
 import { parseJwt } from '../utils/parse-jwt';
@@ -21,7 +20,7 @@ export default function HeaderWidget(): JSX.Element {
     } else {
         loginButton = <div id="loginWidget" className="dropdown"><button className="userIcon" onClick={() => {set_showMenu(!showMenu)}} style={{
             "padding": '0.55em 1em',
-    }}>{loggedInMessage.charAt(0)}</button>{showMenu ? <ul><li><button onClick={logout}>{t('nav.logout')}</button></li></ul> : ""}</div>
+    }}>{loggedInMessage.charAt(0)}</button>{showMenu ? <ul><li><button>{loggedInMessage}</button></li><li><button onClick={logout}>{t('nav.logout')}</button></li></ul> : ""}</div>
     }
 
     useEffect(() => {