diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 50f4ef57d12a..03eae924f2fa 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -7357,6 +7357,10 @@
"messageformat": "Approve all members",
"description": "Call History > Call Link Details > Approve All Members > Label"
},
+ "icu:CallLinkDetails__SettingTooltip--disabled-for-active-call": {
+ "messageformat": "This setting can't be changed while the call is active",
+ "description": "Call History > Call Link Details > Approve All Members > Tooltip when disabled due to active call"
+ },
"icu:CallLinkDetails__CopyLink": {
"messageformat": "Copy link",
"description": "Call History > Call Link Details > Copy Link Button"
@@ -7385,6 +7389,10 @@
"messageformat": "Delete",
"description": "Call History > Call Link Details > Delete Link Modal > Delete Button"
},
+ "icu:CallLinkDetails__DeleteLinkTooltip--disabled-for-active-call": {
+ "messageformat": "This link can't be deleted while the call is active",
+ "description": "Call History > Call Link Details > Delete Link Button > Tooltip when disabled due to active call"
+ },
"icu:CallLinkEditModal__Title": {
"messageformat": "Call link details",
"description": "Call Link Edit Modal > Title"
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index e1f6e7630a87..f53de25bc17a 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -974,3 +974,50 @@ $rtl-icon-map: (
}
}
}
+
+@mixin button-active-call {
+ $background: $color-accent-green;
+
+ @include font-body-2-bold;
+ @include rounded-corners;
+
+ display: flex;
+ width: auto;
+ align-items: center;
+ background-color: $background;
+ color: $color-white;
+ outline: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ user-select: none;
+
+ &:before {
+ $icon-size: 16px;
+
+ @include color-svg(
+ '../images/icons/v3/video/video-compact-fill.svg',
+ $color-white
+ );
+ content: '';
+ display: block;
+ height: $icon-size;
+ margin-inline-end: 4px;
+ min-width: $icon-size;
+ width: $icon-size;
+ }
+
+ &:not(:disabled) {
+ &:hover {
+ @include any-theme {
+ background-color: darken($background, 16%);
+ }
+ }
+
+ &:focus {
+ @include keyboard-mode {
+ background-color: darken($background, 16%);
+ }
+ }
+ }
+}
diff --git a/stylesheets/components/CallLinkDetails.scss b/stylesheets/components/CallLinkDetails.scss
index d6ee4855b024..ff5e7f879cfd 100644
--- a/stylesheets/components/CallLinkDetails.scss
+++ b/stylesheets/components/CallLinkDetails.scss
@@ -46,6 +46,10 @@
font-weight: 600;
}
+.CallLinkDetails__HeaderButton--active-call {
+ @include button-active-call;
+}
+
.CallLinkDetails__DeleteLink {
// Override the default icon color
.ConversationDetails-icon__icon--trash::after {
@@ -59,3 +63,19 @@
color: $color-accent-red;
}
}
+
+.CallLinkDetails__DeleteLink--disabled-for-active-call {
+ .ConversationDetails-icon__icon--trash::after {
+ @include any-theme {
+ background-color: $color-gray-45;
+ }
+ }
+ .ConversationDetails-panel-row__label {
+ color: $color-gray-45;
+ }
+}
+
+.CallLinkDetails__ApproveAllMembersDisabledTooltip,
+.CallLinkDetails__DeleteLinkTooltip {
+ @include tooltip;
+}
diff --git a/stylesheets/components/CallsTab.scss b/stylesheets/components/CallsTab.scss
index 06fcee9ab412..921591403f28 100644
--- a/stylesheets/components/CallsTab.scss
+++ b/stylesheets/components/CallsTab.scss
@@ -356,53 +356,10 @@
}
.CallsNewCall__ItemActionButton--join-call {
- $background: $color-accent-green;
-
- @include font-body-2-bold;
- @include rounded-corners;
-
- display: flex;
- width: auto;
+ @include button-active-call;
height: 26px;
padding-block: 4px;
padding-inline: 10px;
- align-items: center;
- background-color: $background;
- color: $color-white;
- outline: none;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- user-select: none;
-
- &:before {
- $icon-size: 16px;
-
- @include color-svg(
- '../images/icons/v3/video/video-compact-fill.svg',
- $color-white
- );
- content: '';
- display: block;
- height: $icon-size;
- margin-inline-end: 4px;
- min-width: $icon-size;
- width: $icon-size;
- }
-
- &:not(:disabled) {
- &:hover {
- @include any-theme {
- background-color: darken($background, 16%);
- }
- }
-
- &:focus {
- @include keyboard-mode {
- background-color: darken($background, 16%);
- }
- }
- }
}
.CallsNewCall__ItemActionButton--join-call-disabled {
diff --git a/ts/components/CallLinkDetails.stories.tsx b/ts/components/CallLinkDetails.stories.tsx
index 0662457c2bbd..38797634ca13 100644
--- a/ts/components/CallLinkDetails.stories.tsx
+++ b/ts/components/CallLinkDetails.stories.tsx
@@ -23,7 +23,9 @@ export default {
i18n,
callHistoryGroup: getFakeCallLinkHistoryGroup(),
callLink: FAKE_CALL_LINK_WITH_ADMIN_KEY,
- hasActiveCall: false,
+ isAnybodyInCall: false,
+ isInCall: false,
+ isInAnotherCall: false,
onDeleteCallLink: action('onDeleteCallLink'),
onOpenCallLinkAddNameModal: action('onOpenCallLinkAddNameModal'),
onStartCallLinkLobby: action('onStartCallLinkLobby'),
@@ -36,10 +38,39 @@ export function Admin(args: CallLinkDetailsProps): JSX.Element {
return