feat(webapp): change design of connect wallet button

edenia · May 12, 2023 · b30ec97 · b30ec97
1 parent 4abed8e
commit b30ec97
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 58 deletions.
diff --git a/webapp/src/components/Header/AuthButton.js b/webapp/src/components/Header/AuthButton.js
@@ -1,68 +1,58 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Button } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import AccountIcon from '@mui/icons-material/AccountCircle'
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 import ExitIcon from '@mui/icons-material/ExitToApp'
 
-import Tooltip from 'components/Tooltip'
-
 import useAuthBottonState from './useAuthBottonState'
 
+const LogOutButton = ({ handleSignOut, classes }) => {
+  return (
+    <div className={classes.logoutContainer}>
+      <ExitIcon onClick={handleSignOut} className={classes.loginBtn} />
+    </div>
+  )
+}
+
 const AuthButton = ({ classes }) => {
   const { t } = useTranslation()
   const [{ state }, { handleCloseMenu, handleSignOut, login }] =
     useAuthBottonState()
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  const handlePopoverOpen = (target) => {
-    setAnchorEl(target)
-  }
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null)
-  }
-
-  const openPopOver = (event) => {
-    handlePopoverOpen(event.target)
-  }
 
   return (
     <React.Fragment>
       <div className={classes.authBox}>
         {state?.ual?.activeUser ? (
           <>
-            <Tooltip 
-              anchorEl={anchorEl}
-              open={anchorEl !== null}
-              hideCloseButton
-              onClose={handlePopoverClose}
-            >
+            <div className={classes.accountContainer}>
+              <AccountIcon className={classes.userBtn} />
+              <Typography component="span" variant="h5">
+                {state?.ual?.accountName || ''}
+              </Typography>
+            </div>
+            <LogOutButton handleSignOut={handleSignOut} classes={classes} />
+          </>
+        ) : (
+          <>
+            <div className={classes.accountContainer}>
               <Button
-                startIcon={<ExitIcon />}
-                onClick={handleSignOut}
+                onClick={() => login('anchor')}
                 className={classes.loginBtn}
               >
-                {t('logout')}
+                <AccountBalanceWalletIcon />
+                <Typography component="span" variant="h5">
+                  {t('connectWallet')}
+                </Typography>
               </Button>
-            </Tooltip> 
-            <Button className={classes.userBtn} startIcon={<AccountIcon />} onClick={openPopOver}>
-              {state?.ual?.accountName || ''}
-            </Button>
+            </div>
+            <div className={classes.mobileHidden}>
+              <LogOutButton handleSignOut={handleSignOut} classes={classes} />
+            </div>
           </>
-        ) : (
-          <Button
-            onClick={() => {
-              login('anchor')
-              handlePopoverClose()
-            }}
-            className={classes.loginBtn}
-            startIcon={<AccountBalanceWalletIcon />}
-          >
-            {t('connectWallet')}
-          </Button>
         )}
       </div>
       <Menu

diff --git a/webapp/src/components/Header/styles.js b/webapp/src/components/Header/styles.js
@@ -25,7 +25,7 @@ export default (theme) => ({
     width: '145px',
     marginTop: theme.spacing(2),
     [theme.breakpoints.down('sm')]: {
-      width: '110px',
+      width: '100%',
     },
   },
   appBar: {
@@ -44,9 +44,33 @@ export default (theme) => ({
   userBox: {
     display: 'flex',
     alignItems: 'center',
+    gap: theme.spacing(2),
     '& button': {
       color: '#757575',
     },
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+      maxWidth: '250px',
+      gap: 0,
+      justifyContent: 'space-between',
+    }
+  },
+  accountContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    lineHeight: '16px !important',
+    textAlign: 'center',
+    letterSpacing: '1px !important',
+    padding: theme.spacing(0, 2, 0),
+    '& span': {
+      paddingLeft: theme.spacing(1),
+      [theme.breakpoints.down('sm')]: {
+        fontSize: '1rem',
+      },
+    }
   },
   iconsHeader: {
     display: 'flex',
@@ -82,14 +106,15 @@ export default (theme) => ({
     },
   },
   loginBtn: {
-    fontStyle: 'normal',
-    lineHeight: '16px !important',
+    color: 'white !important',
+    cursor: 'pointer',
+  },
+  logoutContainer: {
+    display: 'flex',
     alignItems: 'center',
     textAlign: 'center',
-    letterSpacing: '1px !important',
-    textTransform: 'capitalize !important',
-    fontWeight: '600 !important',
-    color: '#757575 !important',
+    padding: theme.spacing(2),
+    borderLeft: '0.8px solid white',
   },
   userBtn: {
     textTransform: 'lowercase !important',
@@ -101,7 +126,17 @@ export default (theme) => ({
       marginRight: theme.spacing(1),
     },
   },
-  authBox: { display: 'flex', alignItems: 'center', textAlign: 'center' },
+  authBox: { 
+    display: 'flex', 
+    alignItems: 'center', 
+    textAlign: 'center',
+    background: '#1675CA',
+    borderRadius: '10px',
+    transition: 'ease-in-out background 2s',
+    '&:hover': {
+      background: 'rgb(22, 117, 202, 0.8)',
+    }
+  },
   cardShadow: {
     '& .MuiPaper-root': {
       boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -15,9 +15,7 @@
     "color": "Color",
     "producers": "Producers",
     "producer": "Producer",
-    "login": "Login",
     "connectWallet": "Connect Wallet",
-    "logout": "Logout",
     "keys": "Keys",
     "download": "Download",
     "healthStatus": "Health Status",
@@ -171,7 +169,7 @@
   "nodesRoute": {},
   "nodesDistributionRoute": {},
   "accountsRoute": {
-    "loginBeforeUseAction": "Please login before execute an action",
+    "loginBeforeUseAction": "Please connect the wallet before execute an action",
     "unknownError": "Unknown error processing action",
     "notFound": "not found",
     "successMessage": "Success transaction",
@@ -181,7 +179,7 @@
   },
   "bpJsonRoute": {
     "loadText": "Loading node information . . .",
-    "notLogin": "Please log in to use this tool.",
+    "notLogin": "Please connect the wallet to use this tool.",
     "notRegisterNode": "You must have an account registered as an active node to use this tool.",
     "bpjsonInconsistency": "The bp.json on chain and of chain does not match, review it and make the necessary changes"
   },

diff --git a/webapp/src/language/en.lacchain.json b/webapp/src/language/en.lacchain.json
@@ -66,7 +66,7 @@
     "entityType2": "Non-Partner"
   },
   "lacchainManagement": {
-    "loginWarning": "Please login with your LACChain account to use this feature.",
+    "loginWarning": "Please log in with your LACChain account to use this feature.",
     "noneActionWarning": "There is no actions available for your account.",
     "setentinfoTitle": "Set Entity Info",
     "setentinfoTooltip": "Set on-chain information for your LACChain entity.",

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -15,9 +15,7 @@
     "color": "Color",
     "producers": "Productores",
     "producer": "Productor",
-    "login": "Ingresar",
-    "connectWallet": "Connect Wallet",
-    "logout": "Salir",
+    "connectWallet": "Conectar Wallet",
     "keys": "Llaves",
     "download": "Descargar",
     "healthStatus": "Salud del nodo",
@@ -177,7 +175,7 @@
   "nodesRoute": {},
   "nodesDistributionRoute": {},
   "accountsRoute": {
-    "loginBeforeUseAction": "Inicie sesión antes de ejecutar una acción",
+    "loginBeforeUseAction": "Conecte la wallet antes de ejecutar una acción",
     "unknownError": "Error desconocido al procesar la acción",
     "notFound": "no encontrada",
     "successMessage": "Transacción exitosa",
@@ -187,7 +185,7 @@
   },
   "bpJsonRoute": {
     "loadText": "Cargando información del nodo . . .",
-    "notLogin": "Por favor, inicie sesión para utilizar esta herramienta.",
+    "notLogin": "Por favor, conecte la wallet para utilizar esta herramienta.",
     "notRegisterNode": "Debe tener una cuenta registrada como un nodo activo para usar esta herramienta.",
     "bpjsonInconsistency": "El bp.json on chain y en of chain no coincide revisalo y realiza los cambios necesarios"
   },