Dialogs: Fix notification when joining; Management / Invites: Colored icons (#1958)

src/components/main/Dialogs.tsx

@@ -66,9 +66,11 @@ const Dialogs: FC<StateProps> = ({ dialogs }) => {
       acceptInviteConfirmation({
         hash,
       });
-      showNotification({
-        message: isChannel ? lang('RequestToJoinChannelSentDescription') : lang('RequestToJoinGroupSentDescription'),
-      });
+      if (isRequestNeeded) {
+        showNotification({
+          message: isChannel ? lang('RequestToJoinChannelSentDescription') : lang('RequestToJoinGroupSentDescription'),
+        });
+      }
       closeModal();
     };
 

src/components/right/management/ManageInvites.tsx

@@ -224,6 +224,25 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
     return text;
   };
 
+  const getInviteIconClass = (invite: ApiExportedInvite) => {
+    const {
+      usage = 0, usageLimit, isRevoked, expireDate,
+    } = invite;
+    if (isRevoked) {
+      return 'link-status-icon-gray';
+    }
+    if (usageLimit && usage < usageLimit) {
+      return 'link-status-icon-green';
+    }
+    if (expireDate) {
+      const diff = (expireDate - getServerTime(serverTimeOffset)) * 1000;
+      if (diff <= 0) {
+        return 'link-status-icon-red';
+      }
+    }
+    return 'link-status-icon-blue';
+  };
+
   const prepareContextActions = (invite: ApiExportedInvite) => {
     const actions = [];
     actions.push({
@@ -318,7 +337,7 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
           {(!temporalInvites || !temporalInvites.length) && <NothingFound text="No links found" key="nothing" />}
           {temporalInvites?.map((invite) => (
             <ListItem
-              icon="link"
+              leftElement={<i className={`icon-link link-status-icon ${getInviteIconClass(invite)}`} />}
               secondaryIcon="more"
               multiline
               // eslint-disable-next-line react/jsx-no-bind
@@ -347,7 +366,7 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
             </ListItem>
             {revokedExportedInvites?.map((invite) => (
               <ListItem
-                icon="link"
+                leftElement={<i className={`icon-link link-status-icon ${getInviteIconClass(invite)}`} />}
                 secondaryIcon="more"
                 multiline
                 // eslint-disable-next-line react/jsx-no-bind

src/components/right/management/Management.scss

@@ -206,6 +206,36 @@
     margin-bottom: 0.5rem;
   }
 
+  .ListItem-button {
+    align-items: center;
+  }
+
+  .link-status-icon {
+    display: block;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    padding: 0.5rem;
+    position: static !important;
+    color: white !important;
+    margin-right: 1rem !important;
+
+    &-gray {
+      background-color: #707579;
+    }
+
+    &-green {
+      background-color: #4fae4e;
+    }
+
+    &-red {
+      background-color: #e17076;
+    }
+
+    &-blue {
+      background-color: #3390ec;
+    }
+  }
+
   .invite-title {
     white-space: nowrap;
   }