Conversation details: Unblock option for groups, update unblock style

_locales/en/messages.json

@@ -5742,6 +5742,10 @@
     "message": "Block group",
     "description": "This is a button to block a group"
   },
+  "ConversationDetailsActions--unblock-group": {
+    "message": "Unblock group",
+    "description": "This is a button to unblock a group"
+  },
   "ConversationDetailsActions--leave-group-must-choose-new-admin": {
     "message": "Before you leave, you must choose at least one new admin for this group.",
     "description": "Shown if, before leaving a group, you need to choose an admin"
@@ -5758,6 +5762,16 @@
     "message": "Leave",
     "description": "This is the modal button to confirm leaving a group"
   },
+  "ConversationDetailsActions--unblock-group-modal-title": {
+    "message": "Unblock the \"$groupName$\" Group?",
+    "description": "This is the modal title for confirming unblock of a group",
+    "placeholders": {
+      "groupName": {
+        "content": "$1",
+        "example": "Our Conversation"
+      }
+    }
+  },
   "ConversationDetailsActions--block-group-modal-title": {
     "message": "Block and Leave the \"$groupName$\" Group?",
     "description": "This is the modal title for confirming blocking a group",
@@ -5776,6 +5790,14 @@
     "message": "Block",
     "description": "This is the modal button to confirm blocking a group"
   },
+  "ConversationDetailsActions--unblock-group-modal-content": {
+    "message": "Your contacts will be able add you to this group.",
+    "description": "This is the modal content for confirming unblock of a group"
+  },
+  "ConversationDetailsActions--unblock-group-modal-confirm": {
+    "message": "Unblock",
+    "description": "This is the modal button to confirm unblock of a group"
+  },
   "ConversationDetailsHeader--members": {
     "message": "$number$ members",
     "description": "This is the number of members in a group",

stylesheets/components/ConversationDetails.scss

@@ -123,6 +123,9 @@
   &__block-group {
     color: $color-accent-red;
   }
+  &__unblock-group {
+    color: $color-accent-blue;
+  }
 
   &__tabs {
     display: flex;
@@ -414,6 +417,12 @@
           background-color: $color-accent-red;
         }
       }
+      &--unblock {
+        &::after {
+          -webkit-mask: url(../images/icons/v2/block-24.svg) no-repeat center;
+          background-color: $color-accent-blue;
+        }
+      }
 
       &--verify {
         &::after {

ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx

@@ -30,7 +30,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   onLeave: action('onLeave'),
   onUnblock: action('onUnblock'),
   i18n,
-  isBlocked: false,
+  isBlocked: isBoolean(overrideProps.isBlocked),
   isGroup: true,
 });
 
@@ -50,6 +50,20 @@ LeftTheGroup.story = {
   name: 'Left the group',
 };
 
+export const BlockedAndLeftTheGroup = (): JSX.Element => {
+  const props = createProps({
+    left: true,
+    isBlocked: true,
+    conversationTitle: '😸 Cat Snaps',
+  });
+
+  return <ConversationDetailsActions {...props} />;
+};
+
+BlockedAndLeftTheGroup.story = {
+  name: 'Blocked and left the group',
+};
+
 export const CannotLeaveBecauseYouAreTheLastAdmin = (): JSX.Element => {
   const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
 

ts/components/conversation/conversation-details/ConversationDetailsActions.tsx

@@ -38,6 +38,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
 }) => {
   const [confirmLeave, gLeave] = useState<boolean>(false);
   const [confirmGroupBlock, gGroupBlock] = useState<boolean>(false);
+  const [confirmGroupUnblock, gGroupUnblock] = useState<boolean>(false);
   const [confirmDirectBlock, gDirectBlock] = useState<boolean>(false);
   const [confirmDirectUnblock, gDirectUnblock] = useState<boolean>(false);
 
@@ -82,7 +83,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
   }
 
   let blockNode: ReactNode;
-  if (isGroup) {
+  if (isGroup && !isBlocked) {
     blockNode = (
       <PanelRow
         disabled={cannotLeaveBecauseYouAreLastAdmin}
@@ -100,6 +101,23 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
         }
       />
     );
+  } else if (isGroup && isBlocked) {
+    blockNode = (
+      <PanelRow
+        onClick={() => gGroupUnblock(true)}
+        icon={
+          <ConversationDetailsIcon
+            ariaLabel={i18n('ConversationDetailsActions--unblock-group')}
+            icon={IconType.unblock}
+          />
+        }
+        label={
+          <div className="ConversationDetails__unblock-group">
+            {i18n('ConversationDetailsActions--unblock-group')}
+          </div>
+        }
+      />
+    );
   } else {
     const label = isBlocked
       ? i18n('MessageRequests--unblock')
@@ -108,9 +126,22 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
       <PanelRow
         onClick={() => (isBlocked ? gDirectUnblock(true) : gDirectBlock(true))}
         icon={
-          <ConversationDetailsIcon ariaLabel={label} icon={IconType.block} />
+          <ConversationDetailsIcon
+            ariaLabel={label}
+            icon={isBlocked ? IconType.unblock : IconType.block}
+          />
+        }
+        label={
+          <div
+            className={
+              isBlocked
+                ? 'ConversationDetails__unblock-group'
+                : 'ConversationDetails__block-group'
+            }
+          >
+            {label}
+          </div>
         }
-        label={<div className="ConversationDetails__block-group">{label}</div>}
       />
     );
   }
@@ -134,7 +165,6 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
         {leaveGroupNode}
         {blockNode}
       </PanelSection>
-
       {confirmLeave && (
         <ConfirmationDialog
           actions={[
@@ -174,6 +204,26 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
           {i18n('ConversationDetailsActions--block-group-modal-content')}
         </ConfirmationDialog>
       )}
+      {confirmGroupUnblock && (
+        <ConfirmationDialog
+          actions={[
+            {
+              text: i18n(
+                'ConversationDetailsActions--unblock-group-modal-confirm'
+              ),
+              action: onUnblock,
+              style: 'affirmative',
+            },
+          ]}
+          i18n={i18n}
+          onClose={() => gGroupUnblock(false)}
+          title={i18n('ConversationDetailsActions--unblock-group-modal-title', [
+            conversationTitle,
+          ])}
+        >
+          {i18n('ConversationDetailsActions--unblock-group-modal-content')}
+        </ConfirmationDialog>
+      )}
 
       {confirmDirectBlock && (
         <ConfirmationDialog
@@ -193,7 +243,6 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
           {i18n('MessageRequests--block-direct-confirm-body')}
         </ConfirmationDialog>
       )}
-
       {confirmDirectUnblock && (
         <ConfirmationDialog
           actions={[

ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx

@@ -9,6 +9,7 @@ import { bemGenerator } from './util';
 
 export enum IconType {
   'block' = 'block',
+  'unblock' = 'unblock',
   'color' = 'color',
   'down' = 'down',
   'invites' = 'invites',