Merge pull request #6213 from weseek/imprv/update-notification-icon

imprv: update subscribe button icon on Navbar

packages/app/src/components/BookmarkButtons.tsx

@@ -55,7 +55,7 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
         type="button"
         id="bookmark-button"
         onClick={handleClick}
-        className={`btn btn-bookmark border-0
+        className={`shadow-none btn btn-bookmark border-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
@@ -67,7 +67,12 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
 
       { !hideTotalNumber && (
         <>
-          <button type="button" id="po-total-bookmarks" className={`btn btn-bookmark border-0 total-bookmarks ${props.isBookmarked ? 'active' : ''}`}>
+          <button
+            type="button"
+            id="po-total-bookmarks"
+            className={`shadow-none btn btn-bookmark border-0
+              total-bookmarks ${props.isBookmarked ? 'active' : ''}`}
+          >
             {bookmarkCount ?? 0}
           </button>
           { bookmarkedUsers != null && (

packages/app/src/components/LikeButtons.tsx

@@ -51,7 +51,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`btn btn-like border-0
+        className={`shadow-none btn btn-like border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
@@ -63,7 +63,12 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
 
       { !hideTotalNumber && (
         <>
-          <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
+          <button
+            type="button"
+            id="po-total-likes"
+            className={`shadow-none btn btn-like border-0
+              total-likes ${isLiked ? 'active' : ''}`}
+          >
             {sumOfLikers}
           </button>
           <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">

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

@@ -155,12 +155,10 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
       {revisionId != null && (
-        <span>
-          <SubscribeButton
-            status={pageInfo.subscriptionStatus}
-            onClick={subscribeClickhandler}
-          />
-        </span>
+        <SubscribeButton
+          status={pageInfo.subscriptionStatus}
+          onClick={subscribeClickhandler}
+        />
       )}
       {revisionId != null && (
         <LikeButtons

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-eye-slash' : 'fa fa-eye';
-
   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' : 'fa-bell-slash-o'}`}></i>
       </button>
 
       <UncontrolledTooltip placement="top" target="subscribe-button" fade={false}>

packages/app/src/components/User/SeenUserInfo.tsx

@@ -24,7 +24,7 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
 
   return (
     <div className="grw-seen-user-info">
-      <button type="button" id="btn-seen-user" className="btn btn-seen-user border-0">
+      <button type="button" id="btn-seen-user" className="shadow-none btn btn-seen-user border-0">
         <span className="mr-1 footstamp-icon">
           <FootstampIcon />
         </span>

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

@@ -7,7 +7,6 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
-  box-shadow: none !important;
 }
 
 .btn.btn-bookmark {
@@ -19,7 +18,6 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
-  box-shadow: none !important;
 }
 
 .btn.btn-subscribe {
@@ -31,6 +29,7 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
+  width: 44px;
 }
 
 .btn.btn-seen-user {
@@ -48,7 +47,6 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
-  box-shadow: none !important;
 }
 
 .btn-copy,