2.1.13

src/components/ConnectNode/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { Link, useNavigate } from 'react-router-dom';
 import { toHexMD5, generateBase64Jazz } from '../../utils/functions';
 
 // Components
@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: row;
   gap: 10px;
-  height: 59px;
+  height: 54px;
   width: 240px;
   border-radius: 0;
   div {

src/components/Modal/node/PingModal.tsx

@@ -23,6 +23,7 @@ export const PingModal = (props: PingModalProps) => {
   const dispatch = useAppDispatch();
   const loginData = useAppSelector((selector) => selector.auth.loginData);
   const aliases = useAppSelector((store) => store.node.aliases.data);
+  const pinging = useAppSelector((store) => store.node.pinging);
   const peerIdToAliasLink = useAppSelector((store) => store.node.links.peerIdToAlias);
   const [peerId, set_peerId] = useState<string>(props.peerId ? props.peerId : '');
   const [openModal, set_OpenModal] = useState(false);
@@ -123,8 +124,8 @@ export const PingModal = (props: PingModalProps) => {
           )
         }
         onClick={peerId ? handlePing : handleOpenModal}
-        disabled={props.disabled}
-        pending={disableButton}
+        disabled={props.disabled || pinging[peerId]}
+        pending={disableButton || pinging[peerId] }
       />
       <SDialog
         open={openModal}

src/components/NotificationBar/index.tsx

@@ -19,8 +19,8 @@ import { useAppDispatch, useAppSelector } from '../../store';
 import { appActions } from '../../store/slices/app';
 
 const Container = styled.div`
-  height: 59px;
-  width: 59px;
+  height: 54px;
+  width: 54px;
   border-left: 1px lightgray solid;
   border-right: 1px lightgray solid;
 `;

src/components/Overlays/LoadingOverlay.tsx

@@ -42,7 +42,7 @@ const css = `
 
   @media screen and (min-width: 500px) {
     .drawerOpen .Overlay {
-      margin-left: 240px;
+      margin-left: 220px;
       width: calc( 100% - 240px - 32px);
     }
 

src/future-hopr-lib-components/Layout/drawer.tsx

@@ -17,13 +17,13 @@ import { ApplicationMapType } from '../../router';
 import Details from '../../components/InfoBar/details';
 import { rounder2 } from '../../utils/functions';
 
-const drawerWidth = 240;
-const minDrawerWidth = 56;
+export const drawerWidth = 190;
+export const minDrawerWidth = 46;
 
 const StyledDrawer = styled(MuiDrawer)`
   .MuiDrawer-paper {
     box-sizing: border-box;
-    padding-top: 59px;
+    padding-top: 54px;
     transition: width 0.4s ease-out;
     overflow-x: hidden;
     scrollbar-width: none;
@@ -81,24 +81,38 @@ const StyledDrawer = styled(MuiDrawer)`
 const StyledListSubheader = styled(ListSubheader)`
   align-items: center;
   display: flex;
-  height: 64px;
+  height: 42px;
   letter-spacing: 0.2px;
+  font-size: 13px;
   user-select: none;
   color: #777;
+  justify-content: center;
+  .MuiListItemIcon-root {
+    min-width: 34px;
+    &.NavigationDrawerClosed{
+      padding-left: 10px;
+    }
+  }
+
 `;
 
 const StyledListItemButton = styled(ListItemButton)`
-  height: 48px;
+  height: 38px;
   fill: rgba(0, 0, 0, 0.54);
   width: 100%;
   padding-right: 10px;
+  padding-left: 12px;
   .MuiListItemIcon-root {
-    min-width: 48px;
+    min-width: 40px;
     svg {
-      width: 24px;
-      height: 24px;
+      width: 22px;
+      height: 22px;
     }
   }
+  .MuiTypography-root {
+    font-size: 12.5px;
+    white-space: nowrap;
+  }
   &.Mui-selected {
     color: #0000b4;
     fill: #0000b4;
@@ -125,7 +139,7 @@ const SListItemIcon = styled(ListItemIcon)`
 `;
 
 const Numbers = styled.div`
-  font-size: 11px;
+  font-size: 10px;
   background-color: #ddeaff;
   padding: 3px;
 `;
@@ -201,14 +215,17 @@ const Drawer = ({
               <List
                 subheader={
                   openedNavigationDrawer ? (
-                    <StyledListSubheader className="StyledListSubheader">{group.groupName}</StyledListSubheader>
+                    <StyledListSubheader className="StyledListSubheader">
+                      <SListItemIcon className="SListItemIcon GroupIcon">{group.icon}</SListItemIcon>
+                      {group.groupName}
+                      </StyledListSubheader>
                   ) : (
                     <Tooltip
                       title={`Group: ${group.groupName.toLowerCase()}`}
                       placement="right"
                     >
                       <StyledListSubheader className="StyledListSubheader">
-                        <SListItemIcon className="SListItemIcon GroupIcon">{group.icon}</SListItemIcon>
+                        <SListItemIcon className={`SListItemIcon GroupIcon NavigationDrawerClosed`}>{group.icon}</SListItemIcon>
                       </StyledListSubheader>
                     </Tooltip>
                   )

src/future-hopr-lib-components/Layout/index.tsx

@@ -17,6 +17,8 @@ import { ApplicationMapType } from '../../router';
 import { useAppSelector } from '../../store';
 import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../utils/localStorage';
 
+import { drawerWidth, minDrawerWidth } from './drawer';
+
 const SLayout = styled.div`
   &.webapp {
     .Section.full-height-min {
@@ -32,12 +34,12 @@ type ContentType = {
 };
 
 const Content = styled.div<ContentType>`
-  margin-top: 60px;
+  margin-top: 55px;
   margin-left: 0;
 
   transition: margin-left 0.4s ease-out;
   @media (min-width: 500px) {
-    margin-left: ${(props) => (props.openedNavigationDrawer ? '240px' : '56px')};
+    margin-left: ${(props) => (props.openedNavigationDrawer ? `${drawerWidth}px` : `${minDrawerWidth}px`)};
   }
 
   ${(props) =>

src/future-hopr-lib-components/Navbar/navBar.tsx

@@ -16,7 +16,7 @@ interface AppBarProps extends MuiAppBarProps {
 
 const AppBar = styled(({ tallerNavBarOnMobile, webapp, ...rest }: AppBarProps) => <MuiAppBar {...rest} />)`
   background: white;
-  height: 60px;
+  height: 55px;
   border-bottom: 1px lightgray solid;
   box-shadow: unset;
   z-index: 1201;

src/future-hopr-lib-components/Section/index.tsx

@@ -59,7 +59,6 @@ const SSection = styled.section`
 `;
 
 const Content = styled.div`
-  max-width: 1098px;
   margin: auto;
   display: flex;
   flex-direction: column;

src/pages/node/info/index.tsx

@@ -228,6 +228,7 @@ function InfoPage() {
                 const w = window.open(externalUrl, '_blank');
                 w && w.focus();
               }}
+              style={{paddingTop: '2px'}}
             />
           </>
         }

src/store/slices/node/actionsAsync.ts

@@ -1444,24 +1444,29 @@ export const createAsyncReducer = (builder: ActionReducerMapBuilder<typeof initi
     state.messages.isDeleting = false;
   });
   // pingNode
+  builder.addCase(pingNodeThunk.pending, (state, action) => {
+    if (action.meta.arg.apiEndpoint !== state.apiEndpoint) return;
+    const peerId = action.meta.arg.peerId
+    if(peerId && !state.pinging[peerId]){
+      state.pinging[peerId] = true;
+    }
+  });
   builder.addCase(pingNodeThunk.fulfilled, (state, action) => {
     if (action.meta.arg.apiEndpoint !== state.apiEndpoint) return;
-    if (action.payload) {
-      const pingExists = state.pings.findIndex((ping) => ping.peerId === action.payload?.peerId);
-
-      if (pingExists) {
-        state.pings[pingExists] = {
-          latency: action.payload.latency,
-          peerId: action.payload.peerId,
-          reportedVersion: action.payload.reportedVersion,
-        };
-      } else {
-        state.pings.push({
-          latency: action.payload.latency,
-          peerId: action.payload.peerId,
-          reportedVersion: action.payload.reportedVersion,
-        });
-      }
+    const peerId = action.meta.arg.peerId;
+    if(peerId && state.pinging[peerId]){
+      const next = {...state.pinging}
+      delete next[peerId]
+      state.pinging = next;
+    }
+  });
+  builder.addCase(pingNodeThunk.rejected, (state, action) => {
+    if (action.meta.arg.apiEndpoint !== state.apiEndpoint) return;
+    const peerId = action.meta.arg.peerId;
+    if(peerId && state.pinging[peerId]){
+      const next = {...state.pinging}
+      delete next[peerId]
+      state.pinging = next;
     }
   });
   // deleteToken

src/store/slices/node/initialState.ts

@@ -179,7 +179,9 @@ type InitialState = {
   tokens: { data: GetTokenResponseType[]; isFetching: boolean };
   version: { data: string | null; isFetching: boolean };
   transactions: { data: string[]; isFetching: boolean };
-  pings: (PingPeerResponseType & { peerId: string })[];
+  pinging: {
+    [peerId: string]: true
+  };
   metrics: {
     data: {
       raw: string | null;
@@ -342,7 +344,7 @@ export const initialState: InitialState = {
     data: [],
     isFetching: false,
   },
-  pings: [],
+  pinging: {},
   metrics: {
     data: {
       raw: null,