@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <Dialog
+      v-model="showApplyUserList"
+      :title="t('Member Onstage Application')"
+      :modal="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :before-close="hideApplyList"
+      width="500px"
+      :append-to-room-container="true"
+    >
+      <div v-if="applyToAnchorUserCount" class="apply-list">
+        <div class="apply-list-title">
+          <span class="apply-list-name">{{ t('Members') }}</span>
+          <span class="apply-list-operate">{{ t('Operate') }}</span>
+        </div>
+        <div v-for="item in applyToAnchorList" :key="item.userId" class="apply-item">
+          <div class="user-info">
+            <Avatar class="avatar-url" :img-src="item.avatarUrl"></Avatar>
+            <span class="user-name" :title="item.userName || item.userId">{{ item.userName || item.userId }}</span>
+          </div>
+          <div class="control-container">
+            <tui-button size="default" class="agree" @click="handleUserApply(item.userId, true)">
+              {{ t('Agree to the stage') }}
+            </tui-button>
+            <tui-button size="default" class="reject" @click="handleUserApply(item.userId, false)">
+              {{ t('Reject') }}
+            </tui-button>
+          </div>
+        </div>
+      </div>
+      <div v-else class="apply-nobody">
+        <svg-icon :icon="ApplyStageLabelIcon"></svg-icon>
+        <span class="apply-text">{{ t('Currently no member has applied to go on stage') }}</span>
+      </div>
+      <template #footer>
+        <tui-button
+          size="default"
+          :disabled="applyToAnchorUserCount === 0"
+          @click="handleAllUserApply(true)"
+        >
+          {{ t('Agree All') }}
+        </tui-button>
+        <tui-button
+          class="cancel-button"
+          size="default"
+          :disabled="applyToAnchorUserCount === 0"
+          @click="handleAllUserApply(false)"
+        >
+          {{ t('Reject All') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ApplyStageLabelIcon from '../../../common/icons/ApplyStageLabelIcon.vue';
+import useMasterApplyControl from '../../../../hooks/useMasterApplyControl';
+import Avatar from '../../../common/Avatar.vue';
+import Dialog from '../../../common/base/Dialog/index.vue';
+import SvgIcon from '../../../common/base/SvgIcon.vue';
+import TuiButton from '../../../common/base/Button.vue';
+
+const {
+  t,
+  showApplyUserList,
+  hideApplyList,
+  applyToAnchorUserCount,
+  applyToAnchorList,
+  handleAllUserApply,
+  handleUserApply,
+} = useMasterApplyControl();
+</script>
+
+<style lang="scss" scoped>
+.apply-control-container {
+  position: relative;
+}
+.cancel-button {
+  margin-left: 10px;
+  background-color: #f0f3fa;
+  border: 1px solid #f0f3fa;
+  color: #4f586b;
+  &:hover {
+    background-color: #f0f3fa;
+    border: 1px solid #f0f3fa;
+  }
+}
+.apply-list {
+  height: 290px;
+  overflow: scroll;
+  margin-top: 4px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .apply-list-title {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #f0f3fa;
+    padding-bottom: 10px;
+    .apply-list-name,
+    .apply-list-operate {
+      width: calc(100% - 310px);
+      color: #4f586b;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px;
+    }
+  }
+  .apply-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 48px;
+    margin-top: 8px;
+    border-bottom: 1px solid #f0f3fa;
+    .user-info {
+      width: calc(100% - 176px);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .avatar-url {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+      .user-name {
+        font-weight: 400;
+        font-size: 14px;
+        color: #4f586b;
+        line-height: 22px;
+        margin-left: 12px;
+        max-width: 180px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+    .control-container {
+      display: flex;
+      justify-content: space-between;
+      .agree,
+      .reject {
+        padding: 2px 12px;
+      }
+      .reject {
+        margin-left: 8px;
+        background-color: #f0f3fa;
+        border: 1px solid #f0f3fa;
+        color: #4f586b;
+      }
+    }
+  }
+}
+.apply-nobody {
+  height: 290px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  .apply-text {
+    color: #8f9ab2;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    margin-top: 10px;
+  }
+}
+</style>

package/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue

@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div class="apply-control-container">
+      <icon-button
+        :title="iconTitle"
+        :icon="iconName"
+        @click-icon="toggleApplySpeech"
+      />
+      <div v-if="showMemberApplyAttention" class="attention member-attention">
+        <span :class="isMobile ? 'mobile-info' : 'info'">{{ t('Please raise your hand to apply') }}</span>
+        <svg-icon :icon="CloseIcon" class="close" @click="hideApplyAttention"></svg-icon>
+      </div>
+    </div>
+    <Dialog
+      v-model="showDialog"
+      :title="currentDialogTitle"
+      :modal="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="500px"
+      :append-to-room-container="true"
+      :confirm-button="currentDialogInfo.confirmButtonText"
+      :cancel-button="currentDialogInfo.cancelButtonText"
+      @confirm="currentDialogInfo.handleConfirm"
+      @cancel="currentDialogInfo.handleCancel"
+    >
+      <span>{{ currentDialogInfo.content }}</span>
+      <template #footer>
+        <tui-button size="default" @click="currentDialogInfo.handleConfirm">
+          {{ currentDialogInfo.confirmButtonText }}
+        </tui-button>
+        <tui-button class="cancel-button" size="default" type="primary" @click="currentDialogInfo.handleCancel">
+          {{ currentDialogInfo.cancelButtonText }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, watch, onBeforeUnmount, computed } from 'vue';
+import { isMobile } from '../../../utils/environment';
+import IconButton from '../../common/base/IconButton.vue';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import StepDownIcon from '../../common/icons/StepDownIcon.vue';
+import ApplyStageIcon from '../../common/icons/ApplyStageIcon.vue';
+import CancelStageIcon from '../../common/icons/CancelStageIcon.vue';
+import CloseIcon from '../../common/icons/CloseIcon.vue';
+import Dialog from '../../common/base/Dialog/index.vue';
+import TUIMessage from '../../common/base/Message/index';
+import { MESSAGE_DURATION } from '../../../constants/message';
+import { useBasicStore } from '../../../stores/basic';
+import { useRoomStore } from '../../../stores/room';
+import { useI18n } from '../../../locales';
+import { storeToRefs } from 'pinia';
+import useGetRoomEngine from '../../../hooks/useRoomEngine';
+import logger from '../../../utils/common/logger';
+import TUIRoomEngine, { TUIRoomEvents, TUIRequest, TUIRequestAction, TUIRequestCallbackType, TUIRole, TUIErrorCode } from '@tencentcloud/tuiroom-engine-electron';
+import TuiButton from '../../common/base/Button.vue';
+
+const roomEngine = useGetRoomEngine();
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+const roomStore = useRoomStore();
+const { lang } = storeToRefs(basicStore);
+const { localUser, isGeneralUser, isAdmin } = storeToRefs(roomStore);
+
+const isApplyingOnSeat: Ref<Boolean> = ref(false);
+const showMemberApplyAttention: Ref<boolean> = ref(true);
+const iconName = ref();
+const iconTitle: Ref<string> = ref('');
+const applyToAnchorRequestId: Ref<string> = ref('');
+const inviteToAnchorRequestId: Ref<string> = ref('');
+const showDialog: Ref<boolean> = ref(false);
+const currentDialogTitle: Ref<string> = ref('');
+const currentConfirmButton: Ref<string> = ref('');
+type DialogType = 'inviteDialog' | 'leaveSeatDialog';
+const currentDialogType: Ref<DialogType> = ref('inviteDialog');
+
+watch([localUser, isApplyingOnSeat, lang], ([localUser, isApplyingOnSeat]) => {
+  if (localUser.onSeat) {
+    iconName.value = StepDownIcon;
+    iconTitle.value = t('Step down');
+    hideApplyAttention();
+  } else {
+    if (isApplyingOnSeat) {
+      iconName.value = CancelStageIcon;
+      iconTitle.value = t('Cancel Apply');
+    } else {
+      iconName.value = ApplyStageIcon;
+      iconTitle.value = t('Apply for the stage');
+    }
+  }
+}, { immediate: true, deep: true });
+
+async function toggleApplySpeech() {
+  hideApplyAttention();
+  if (localUser.value.onSeat) {
+    handleStepDownDialogVisible();
+  } else {
+    isApplyingOnSeat.value ? cancelSeatApplication() : sendSeatApplication();
+  }
+};
+
+const inviteDialogInfo = {
+  content: t('You can turn on the microphone and camera once you are on stage'),
+  confirmButtonText: t('Agree to the stage'),
+  cancelButtonText: t('Reject'),
+  handleConfirm: () => handleInvite(true),
+  handleCancel: () => handleInvite(false),
+};
+
+const leaveSeatDialogInfo = computed(() => ({
+  content: (localUser.value.userRole === TUIRole.kAdministrator ? t('To go on stage again, a new application needs to be initiated') : t('To go on stage again, you need to reapply and wait for the roomOwner/administrator to approve')),
+  confirmButtonText: t('Step down'),
+  cancelButtonText: t('Cancel'),
+  handleConfirm: () => leaveSeat(),
+  handleCancel: () => handleStepDownDialogVisible(),
+}));
+
+const currentDialogInfo = computed(() => (currentDialogType.value === 'inviteDialog'
+  ? inviteDialogInfo
+  : leaveSeatDialogInfo.value));
+
+/**
+ * Send a request to be on the stage
+**/
+async function sendSeatApplication() {
+  if (isAdmin.value) {
+    await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 });
+    TUIMessage({ type: 'success', message: t('Succeed on stage') });
+    return;
+  }
+  if (isGeneralUser.value) {
+    TUIMessage({
+      type: 'info',
+      message: `${t('The request to go on stage has been sent out, please wait for the roomOwner/administrator to approve it')}`,
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+  }
+  const request = await roomEngine.instance?.takeSeat({
+    seatIndex: -1,
+    timeout: 60,
+    requestCallback: (callbackInfo: { requestCallbackType: TUIRequestCallbackType }) => {
+      isApplyingOnSeat.value = false;
+      const { requestCallbackType } = callbackInfo;
+      switch (requestCallbackType) {
+        case TUIRequestCallbackType.kRequestAccepted:
+          TUIMessage({ type: 'success', message: t('Succeed on stage') });
+          break;
+        case TUIRequestCallbackType.kRequestRejected:
+          TUIMessage({ type: 'warning', message: t('Application to go on stage was rejected') });
+          break;
+        case TUIRequestCallbackType.kRequestTimeout:
+          TUIMessage({ type: 'warning', message: t('Failed to go on stage, invitation has timed out') });
+          break;
+      }
+    },
+  });
+  if (request && request.requestId) {
+    applyToAnchorRequestId.value = request.requestId;
+  }
+  isApplyingOnSeat.value = true;
+}
+
+/**
+ * Cancellation of application stage
+**/
+async function cancelSeatApplication() {
+  TUIMessage({
+    type: 'info',
+    message: `${t('Canceled application to go on stage')}`,
+    duration: MESSAGE_DURATION.NORMAL,
+  });
+  try {
+    await roomEngine.instance?.cancelRequest({ requestId: applyToAnchorRequestId.value });
+    isApplyingOnSeat.value = false;
+  } catch (error) {
+    logger.log('member cancelSpeechApplication', error);
+  }
+}
+
+/**
+ * User Down stage
+**/
+function handleStepDownDialogVisible() {
+  showDialog.value = !showDialog.value;
+  currentDialogType.value = 'leaveSeatDialog';
+  currentDialogTitle.value = t('Are you sure you want to step down');
+}
+
+async function leaveSeat() {
+  await roomEngine.instance?.leaveSeat();
+  showDialog.value = false;
+  if (roomStore.isCameraDisableForAllUser && isGeneralUser.value) {
+    roomStore.setCanControlSelfVideo(false);
+  }
+  if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) {
+    roomStore.setCanControlSelfAudio(false);
+  }
+}
+
+function hideApplyAttention() {
+  showMemberApplyAttention.value = false;
+}
+
+/**
+ * Handling host or administrator invitation to on-stage signalling
+**/
+async function onRequestReceived(eventInfo: { request: TUIRequest }) {
+  const { request: { userId, requestId, requestAction } } = eventInfo;
+  if (requestAction === TUIRequestAction.kRequestRemoteUserOnSeat) {
+    inviteToAnchorRequestId.value = requestId;
+    const userRole = roomStore.getUserRole(userId as string) === TUIRole.kRoomOwner ? t('RoomOwner') : t('Admin');
+    currentDialogTitle.value = t('Sb invites you to speak on stage', { role: userRole });
+    currentConfirmButton.value = t('Agree to the stage');
+    showDialog.value = true;
+    currentDialogType.value = 'inviteDialog';
+  }
+}
+
+/**
+   * The host canceled the invitation to the stage
+  **/
+function onRequestCancelled(eventInfo: { requestId: string; userId: string }) {
+  const { requestId } = eventInfo;
+  if (inviteToAnchorRequestId.value === requestId) {
+    inviteToAnchorRequestId.value = '';
+    showDialog.value = false;
+  }
+}
+
+/**
+ * User accepts/rejects the presenter's invitation
+**/
+async function handleInvite(agree: boolean) {
+  try {
+    await roomEngine.instance?.responseRemoteRequest({
+      requestId: inviteToAnchorRequestId.value,
+      agree,
+    });
+  } catch (error: any) {
+    if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
+      TUIMessage({ type: 'warning', message: t('The current number of people on stage has reached the limit') });
+    } else {
+      logger.error('Failure of a user to accept/reject a roomOwner invitation', error);
+    }
+  } finally {
+    showDialog.value = false;
+  }
+}
+
+/**
+ * Kicked off the stage by the host
+ */
+async function onKickedOffSeat() {
+  TUIMessage({
+    type: 'warning',
+    message: t('You have been invited by the host to step down, please raise your hand if you need to speak'),
+    duration: MESSAGE_DURATION.NORMAL,
+  });
+}
+
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.on(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+  roomEngine.instance?.on(TUIRoomEvents.onKickedOffSeat, onKickedOffSeat);
+});
+
+onBeforeUnmount(() => {
+  roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+  roomEngine.instance?.off(TUIRoomEvents.onKickedOffSeat, onKickedOffSeat);
+});
+</script>
+
+<style lang="scss" scoped>
+.apply-control-container {
+  position: relative;
+  .attention {
+    background: var(--active-color-1);
+    box-shadow: 0 4px 16px 0 rgba(47, 48, 164, 0.1);
+    position: absolute;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    bottom: 70px;
+    &::after {
+      content: '';
+      display: block;
+      border: 5px solid transparent;
+      border-top-color: var(--active-color-1);
+      position: absolute;
+      top: 100%;
+      left: 10%;
+      transform: translateX(-50%);
+    }
+  }
+  .member-attention {
+    padding: 12px;
+    .info, .mobile-info {
+      height: 20px;
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      white-space: nowrap;
+    }
+    .mobile-info {
+      min-width: 50vw;
+    }
+    .close {
+      cursor: pointer;
+      color: #ffffff;
+      padding-left: 12px;
+    }
+  }
+}
+.agree,
+.cancel {
+  padding: 14px;
+  width: 50%;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  justify-content: center;
+  color: var(--active-color-1);
+}
+.cancel {
+  color: var(--font-color-4);
+}
+.cancel-button {
+  margin-left: 20px;
+}
+</style>

package/src/TUIRoom/components/RoomFooter/AudioControl.vue

@@ -0,0 +1,187 @@
+<!--
+  * Name: IconButton
+  * @param name String required
+  * @param size String 'large'|'medium'|'small'
+  * Usage:
+  * Use <audio-control /> in the template
+  *
+-->
+<template>
+  <div>
+    <audio-media-control
+      :has-more="hasMore"
+      :is-muted="!localStream.hasAudioStream"
+      :is-disabled="isLocalAudioIconDisable"
+      :audio-volume="userVolumeObj[localStream.userId]"
+      @click="handleAudioMediaClick"
+    ></audio-media-control>
+    <Dialog
+      v-model="showRequestOpenMicDialog"
+      :title="t('Tips')"
+      :modal="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      width="500px"
+      :append-to-room-container="true"
+      :confirm-button="t('Turn on the microphone')"
+      :cancel-button="t('Keep it closed')"
+      @confirm="handleAccept"
+      @cancel="handleReject"
+    >
+      <span>{{ dialogContent }}</span>
+      <template #footer>
+        <tui-button
+          class="agree-button"
+          size="default"
+          @click="handleAccept"
+        >
+          {{ t('Turn on the microphone') }}
+        </tui-button>
+        <tui-button class="cancel-button" size="default" type="primary" @click="handleReject">
+          {{ t('Keep it closed') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, onUnmounted, computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import TUIMessage from '../common/base/Message/index';
+import Dialog from '../common/base/Dialog/index.vue';
+import { useRoomStore } from '../../stores/room';
+import { WARNING_MESSAGE, MESSAGE_DURATION } from '../../constants/message';
+import { useI18n } from '../../locales';
+import TUIRoomEngine, { TUIRoomEvents, TUIRequest, TUIRequestAction, TUIRole } from '@tencentcloud/tuiroom-engine-electron';
+import useRoomEngine from '../../hooks/useRoomEngine';
+import { isMobile, isWeChat } from '../../utils/environment';
+import TuiButton from '../common/base/Button.vue';
+import AudioMediaControl from '../common/AudioMediaControl.vue';
+import { useBasicStore } from '../../stores/basic';
+import TUIMessageBox from '../common/base/MessageBox/index';
+
+
+const roomEngine = useRoomEngine();
+
+const roomStore = useRoomStore();
+const basicStore = useBasicStore();
+
+const {
+  isAudience,
+  localStream,
+  isLocalAudioIconDisable,
+  isMicrophoneDisableForAllUser,
+  userVolumeObj,
+} = storeToRefs(roomStore);
+
+const emits = defineEmits(['click']);
+const hasMore = computed(() => !isMobile);
+const { t } = useI18n();
+const dialogContent: Ref<string> = ref('');
+
+function handleAudioMediaClick() {
+  emits('click');
+  toggleMuteAudio();
+}
+
+async function toggleMuteAudio() {
+  if (isLocalAudioIconDisable.value) {
+    let warningMessage = '';
+    if (isAudience.value) {
+      warningMessage = WARNING_MESSAGE.UNMUTE_LOCAL_MIC_FAIL_AUDIENCE;
+    } else if (isMicrophoneDisableForAllUser.value) {
+      warningMessage = WARNING_MESSAGE.UNMUTE_LOCAL_MIC_FAIL_MUTE_ALL;
+    }
+    TUIMessage({
+      type: 'warning',
+      message: t(warningMessage),
+      duration: MESSAGE_DURATION.NORMAL,
+    });
+    return;
+  }
+  if (localStream.value.hasAudioStream) {
+    await roomEngine.instance?.muteLocalAudio();
+    // If everyone is muted, the user will not be able to turn the microphone back on after voluntarily turning it off.
+    if (roomStore.isMicrophoneDisableForAllUser) {
+      roomStore.setCanControlSelfAudio(false);
+    }
+  } else {
+    const microphoneList = await roomEngine.instance?.getMicDevicesList();
+    const hasMicrophoneDevice = microphoneList.length > 0;
+    if (!hasMicrophoneDevice && !isWeChat) {
+      TUIMessageBox({
+        title: t('Note'),
+        message: t('Microphone not detected on current device'),
+        confirmButtonText: t('Sure'),
+      });
+      return;
+    }
+    // There is a microphone list and permissions
+    await roomEngine.instance?.unmuteLocalAudio();
+    if (!basicStore.isOpenMic) {
+      roomEngine.instance?.openLocalMicrophone();
+      basicStore.setIsOpenMic(true);
+    }
+  }
+}
+
+/**
+ * Handling host or administrator turn on/off microphone signalling
+**/
+const showRequestOpenMicDialog: Ref<boolean> = ref(false);
+const requestOpenMicRequestId: Ref<string> = ref('');
+async function onRequestReceived(eventInfo: { request: TUIRequest }) {
+  const { userId, requestAction, requestId } = eventInfo.request;
+  if (requestAction === TUIRequestAction.kRequestToOpenRemoteMicrophone) {
+    const userRole = roomStore.getUserRole(userId) === TUIRole.kRoomOwner ? t('RoomOwner') : t('Admin');
+    dialogContent.value = t('Sb invites you to turn on the microphone', { role: userRole });
+    requestOpenMicRequestId.value = requestId;
+    showRequestOpenMicDialog.value = true;
+  }
+}
+// Accept the host invitation and turn on the microphone
+async function handleAccept() {
+  roomStore.setCanControlSelfAudio(true);
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenMicRequestId.value,
+    agree: true,
+  });
+  requestOpenMicRequestId.value = '';
+  showRequestOpenMicDialog.value = false;
+}
+
+// keep mute
+async function handleReject() {
+  await roomEngine.instance?.responseRemoteRequest({
+    requestId: requestOpenMicRequestId.value,
+    agree: false,
+  });
+  requestOpenMicRequestId.value = '';
+  showRequestOpenMicDialog.value = false;
+}
+
+// Request canceled
+async function onRequestCancelled(eventInfo: { requestId: string }) {
+  const { requestId } = eventInfo;
+  if (requestOpenMicRequestId.value === requestId) {
+    showRequestOpenMicDialog.value = false;
+  }
+}
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.on(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+});
+
+onUnmounted(() => {
+  roomEngine.instance?.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
+  roomEngine.instance?.off(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.cancel-button {
+  margin-left: 20px;
+}
+</style>