clean code

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -155,7 +155,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
       {revisionId != null && (
-        <div className="btn-group" role="group" aria-label="Subscribe buttons">
+        <div>
           <SubscribeButton
             status={pageInfo.subscriptionStatus}
             onClick={subscribeClickhandler}

packages/app/src/components/SubscribeButton.tsx

@@ -18,9 +18,6 @@ const SubscribeButton: FC<Props> = (props: Props) => {
 
   const isSubscribing = status === SubscriptionStatusType.SUBSCRIBE;
 
-  const buttonClass = `${isSubscribing ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`;
-  const iconClass = isSubscribing === false ? 'fa fa-bell-slash-o' : 'fa fa-bell-o';
-
   const getTooltipMessage = useCallback(() => {
     if (isGuestUser) {
       return 'Not available for guest';
@@ -38,9 +35,10 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         type="button"
         id="subscribe-button"
         onClick={props.onClick}
-        className={`btn btn-subscribe border-0 ${buttonClass}`}
+        className={`shadow-none btn btn-subscribe border-0
+          ${isSubscribing ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className={iconClass}></i>
+        <i className={`fa ${isSubscribing ? 'fa-bell-o' : 'fa-bell-slash-o'}`}></i>
       </button>
 
       <UncontrolledTooltip placement="top" target="subscribe-button" fade={false}>

packages/app/src/styles/atoms/_buttons.scss

@@ -32,7 +32,6 @@
     background-color: transparent;
   }
   width: 44px;
-  box-shadow: none !important;
 }
 
 .btn.btn-seen-user {