Rename BadgeTab and correct behaviour between selected and unselected…

… tab
CirclesUBI · Feb 22, 2023 · 93c15c0 · 93c15c0
1 parent 927d050
commit 93c15c0
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 25 deletions.
diff --git a/src/components/ActivityStreamWithTabs.js b/src/components/ActivityStreamWithTabs.js
@@ -7,7 +7,7 @@ import { generatePath, useHistory } from 'react-router-dom';
 import { ACTIVITIES_PATH } from '~/routes';
 
 import ActivityStream from '~/components/ActivityStream';
-import BadgeCircle from '~/components/BadgeCircle';
+import BadgeTab from '~/components/BadgeTab';
 import TabNavigation from '~/components/TabNavigation';
 import TabNavigationAction from '~/components/TabNavigationAction';
 import core from '~/services/core';
@@ -117,12 +117,8 @@ const ActivityStreamWithTabs = ({ basePath = ACTIVITIES_PATH }) => {
       <TabNavigation value={selectedCategory} onChange={handleFilterSelection}>
         <TabNavigationAction
           icon={
-            <BadgeCircle
-              badgeContent={
-                selectedCategory != QUERY_FILTER_MAP.transfers
-                  ? newActivities[QUERY_FILTER_MAP.transfers]
-                  : null
-              }
+            <BadgeTab
+              badgeContent={newActivities[QUERY_FILTER_MAP.transfers]}
               icon={IconTransactions}
               isActive
             />
@@ -132,12 +128,8 @@ const ActivityStreamWithTabs = ({ basePath = ACTIVITIES_PATH }) => {
         />
         <TabNavigationAction
           icon={
-            <BadgeCircle
-              badgeContent={
-                selectedCategory != QUERY_FILTER_MAP.connections
-                  ? newActivities[QUERY_FILTER_MAP.connections]
-                  : null
-              }
+            <BadgeTab
+              badgeContent={newActivities[QUERY_FILTER_MAP.connections]}
               icon={IconConnections}
               isActive
             />

diff --git a/src/components/BadgeCircle.js → src/components/BadgeTab.js b/src/components/BadgeCircle.js → src/components/BadgeTab.js
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const BadgeCircle = ({
+const BadgeTab = ({
   badgeContent,
   icon,
   color = 'primary',
@@ -45,12 +45,12 @@ const BadgeCircle = ({
   );
 };
 
-BadgeCircle.propTypes = {
+BadgeTab.propTypes = {
   badgeContent: PropTypes.number,
   color: PropTypes.string,
   icon: PropTypes.any,
   isActive: PropTypes.bool,
   overlap: PropTypes.string,
 };
 
-export default BadgeCircle;
+export default BadgeTab;
diff --git a/src/components/Finder.js b/src/components/Finder.js
@@ -15,7 +15,7 @@ import { generatePath, useHistory } from 'react-router-dom';
 import { SEARCH_PATH } from '~/routes';
 
 import TourWebOfTrustSVG from '%/images/web-of-trust.svg';
-import BadgeCircle from '~/components/BadgeCircle';
+import BadgeTab from '~/components/BadgeTab';
 import Button from '~/components/Button';
 import Input from '~/components/Input';
 import ProfileMini from '~/components/ProfileMini';
@@ -355,7 +355,7 @@ const FinderFilter = ({ filterResults, selectedFilter, onChange }) => {
     >
       <TabNavigationAction
         icon={
-          <BadgeCircle
+          <BadgeTab
             badgeContent={filterResults[FILTER_DIRECT].length}
             icon={IconTrustedDirectly}
             isActive={selectedFilter === FILTER_DIRECT}
@@ -366,7 +366,7 @@ const FinderFilter = ({ filterResults, selectedFilter, onChange }) => {
       />
       <TabNavigationAction
         icon={
-          <BadgeCircle
+          <BadgeTab
             badgeContent={filterResults[FILTER_INDIRECT].length}
             icon={IconFollow}
             isActive={selectedFilter === FILTER_INDIRECT}
@@ -377,7 +377,7 @@ const FinderFilter = ({ filterResults, selectedFilter, onChange }) => {
       />
       <TabNavigationAction
         icon={
-          <BadgeCircle
+          <BadgeTab
             badgeContent={filterResults[FILTER_EXTERNAL].length}
             icon={IconWorld}
             isActive={selectedFilter === FILTER_EXTERNAL}

diff --git a/src/components/TabNavigation.js b/src/components/TabNavigation.js
@@ -11,9 +11,6 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.custom.colors.fountainBlue,
       height: '1px',
     },
-    '& .MuiTab-textColorInherit': {
-      opacity: '1',
-    },
   },
 }));
 

diff --git a/src/views/Profile.js b/src/views/Profile.js
@@ -15,7 +15,7 @@ import { Redirect, generatePath, useParams } from 'react-router-dom';
 import { DASHBOARD_PATH, PROFILE_PATH } from '~/routes';
 
 import Avatar from '~/components/Avatar';
-import BadgeCircle from '~/components/BadgeCircle';
+import BadgeTab from '~/components/BadgeTab';
 import Button from '~/components/Button';
 import ButtonBack from '~/components/ButtonBack';
 import ButtonSend from '~/components/ButtonSend';
@@ -230,7 +230,7 @@ const ProfileContent = ({ address, deploymentStatus, trustStatus }) => {
         />
         <TabNavigationAction
           icon={
-            <BadgeCircle
+            <BadgeTab
               badgeContent={mutualyTrusted}
               icon={IconTrustMutual}
               isActive={selectedPanel === PANEL_TRUST}