fix: swap button positions

GetStream · Dec 15, 2023 · 6a5c05c · 6a5c05c
1 parent d23e221
commit 6a5c05c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx b/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, MouseEventHandler, useCallback } from 'react';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
 import { MenuToggle } from '../Menu';
 
@@ -22,8 +23,24 @@ export const EndCallMenu = ({
   const { t } = useI18n();
   return (
     <div className="str-video__end-call__confirmation">
+      <Restricted requiredGrants={[OwnCapability.END_CALL]}>
+        <button
+          className="str-video__button str-video__end-call__end"
+          type="button"
+          data-testid="end-call-for-all-button"
+          onClick={handleEndCall}
+        >
+          <Icon
+            className="str-video__button__icon str-video__end-call__end-icon"
+            icon="call-end"
+          />
+          {t('End call for all')}
+        </button>
+      </Restricted>
       <button
         className="str-video__button str-video__end-call__leave"
+        type="button"
+        data-testid="leave-call-button"
         onClick={handleLeave}
       >
         <Icon
@@ -32,17 +49,6 @@ export const EndCallMenu = ({
         />
         {t('Leave call')}
       </button>
-
-      <button
-        className="str-video__button str-video__end-call__end"
-        onClick={handleEndCall}
-      >
-        <Icon
-          className="str-video__button__icon str-video__end-call__end-icon"
-          icon="call-end"
-        />
-        {t('End call for all')}
-      </button>
     </div>
   );
 };

diff --git a/packages/styling/src/CallControls/CancelCallButton.scss b/packages/styling/src/CallControls/CancelCallButton.scss
@@ -6,6 +6,9 @@
 
     padding: var(--str-video__spacing-sm);
     gap: var(--str-video__spacing-md);
+
+    display: flex;
+    flex-direction: column;
   }
 
   &__leave,
@@ -20,7 +23,6 @@
 
   &__leave {
     background-color: var(--str-video__button-primary-base);
-    margin-bottom: var(--str-video__spacing-sm);
     border: 1px solid transparent;
 
     &:hover {