@trtc/calls-uikit-react 4.1.0

package/src/Components/components/base/hooks/useDrag.ts

@@ -0,0 +1,96 @@
+/* eslint-disable no-param-reassign */
+
+import { useEffect, useState } from 'react';
+/*
+ * @drag: 添加拖拽事件的元素（支持传入元素的drager，id，class等）必填参数
+ * @draggerBox: 被拖拽的整体元素（支持传入元素的dragger，id，class等）可选参数
+ * @container: 可拖拽的区域（支持传入元素的dragger，id，class等）可选参数
+ * @maring: 离外部元素的间隔 可选参数
+ */
+export default function useDrag({
+  dragger, draggerBox = dragger, container = document.body, maring = [0, 0, 0, 0],
+}) {
+  const [translateX, setTranslateX] = useState(0); // 水平方向偏移量
+  const [translateY, setTranslateY] = useState(0); // 垂直方向偏移量
+
+  useEffect(() => {
+    if (!dragger) return;
+    if (!draggerBox) return;
+    if (!container) return;
+    dragger = typeof dragger === 'string' ? document.querySelector(dragger) : dragger; // 根据传入的值类型，去查找使用元素
+    draggerBox = typeof draggerBox === 'string' ? document.querySelector(draggerBox) : draggerBox;
+    container = typeof container === 'string' ? document.querySelector(container) : container;
+
+    const {
+      left: containerL,
+      top: containerT,
+      right: containerR,
+      bottom: containerB,
+    } = container.getBoundingClientRect(); // 获取可拖拽区域边界位置
+
+    const onMouseDown = (event) => {
+      const initMouseX = event.clientX; // 元素初始水平坐标值
+      const initMouseY = event.clientY;// 元素初始垂直坐标
+
+      const {
+        left: boxL,
+        top: boxT,
+        right: boxR,
+        bottom: boxB,
+      } = draggerBox.getBoundingClientRect(); // 获取拖拽实体的位置
+
+      let deltaMouseX; // 实际水平偏移量
+      let deltaMouseY; // 实际垂直增量值
+
+      const onMouseMove = (e: MouseEvent) => {
+        const moveMouseX = e.clientX; // 元素移动后水平坐标值
+        const moveMouseY = e.clientY; // 元素移动后垂直坐标值
+
+        let deltaX = moveMouseX - initMouseX; // 当前移动水平相对移动距离
+        let deltaY = moveMouseY - initMouseY; // 当前移动垂直相对移动距离
+
+        if (boxL + deltaX < containerL + maring[0]) {
+          // 当元素左边框+水平相对移动距离 < 可拖拽区域左边界+左边距时 （说明元素已经超出左侧边界）
+
+          deltaX = containerL + maring[0] - boxL;
+        }
+
+        if (boxR + deltaX > containerR - maring[1]) {
+          // 当元素右边框+水平相对移动距离 > 可拖拽区域右边界+右边距时 （说明元素已经超出右侧边界）
+          deltaX = containerR - maring[1] - boxR;
+        }
+
+        if (boxB + deltaY > containerB - maring[2]) {
+          // 当元素下边框+垂直相对移动距离 > 可拖拽区域下边界+下边距时 （说明元素已经超出下侧边界）
+          deltaY = containerB - maring[2] - boxB;
+        }
+
+        if (boxT + deltaY < containerT + maring[3]) {
+          // 当元素上边框+垂直相对移动距离 < 可拖拽区域上边界+上边距时 （说明元素已经超出上侧边界）
+          deltaY = containerT + maring[3] - boxT;
+        }
+
+        deltaMouseX = deltaX + translateX; // 实际水平偏移量
+        deltaMouseY = deltaY + translateY; // 实际垂直偏移量
+
+        dragger.style.top = '100px';
+        dragger.style.transform = `translate(${deltaMouseX}px, ${deltaMouseY}px)`;
+      };
+
+      const onMouseUp = () => {
+        setTranslateX(deltaMouseX); // 保存上次水平偏移量
+        setTranslateY(deltaMouseY); // 保存上次垂直偏移量
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+      };
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('touchmove', onMouseMove);
+      window.addEventListener('touchup', onMouseUp);
+    };
+    dragger.addEventListener('touchstart', onMouseDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => dragger.removeEventListener('mouseup', onMouseDown);
+  }, [dragger, draggerBox, container, maring]);
+}

package/src/Components/components/base/hooks/useListenerEvent.ts

@@ -0,0 +1,37 @@
+/**
+* @function Add an event listener to the target element
+* @description Add an event listener to the target element
+* @param {HTMLElement} The element that needs to be monitored, if empty, defaults to window.document
+* @param {String} event name
+* @param {Function} Callback
+* @param {Object} Options for listening to events
+* @return {void} Returns the function to stop listening
+* @example
+*   useListenEvent(btnEl, 'click', () => { console.log('click btn');});
+*/
+export function useListenEvent(event: string, handler: Function, options: object): () => any;
+export function useListenEvent(
+  target: HTMLElement, event: string, handler: Function, options: object,
+): () => any;
+export function useListenEvent(...args: any[]) {
+  let target = window?.document;
+  let event = '';
+  let handler = () => {};
+  let options = {};
+
+  if (typeof args[0] === 'string') {
+    [event, handler, options] = args;
+  } else {
+    [target, event, handler, options] = args;
+  }
+
+  if (!target) {
+    return;
+  }
+
+  target?.addEventListener(event, handler, options);
+
+  return () => {
+    target?.removeEventListener(event, handler, options);
+  };
+}

package/src/Components/components/base/hooks/useMutationObserver.ts

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from 'react';
+
+const DEFAULT_OPTIONS = {
+  debounceTime: 0,
+  config: {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true,
+  } as MutationObserverInit,
+};
+
+export default function useMutationObservable(
+  targetEl: HTMLElement | null,
+  cb: MutationCallback,
+  options = DEFAULT_OPTIONS,
+) {
+  const observeRef = useRef(null);
+  useEffect(() => {
+    if (!cb || typeof cb !== 'function') return;
+    const { debounceTime } = options;
+    observeRef.current = new MutationObserver(cb);
+  }, [cb, options]);
+
+  useEffect(() => {
+    if (!targetEl || !targetEl?.nodeType) return;
+    const { config } = options;
+    try {
+      observeRef.current.observe(targetEl, config);
+    } catch (e) {
+      console.error(e);
+    }
+
+    return () => {
+      observeRef.current.disconnect();
+    };
+  }, [targetEl, options]);
+}

package/src/Components/components/base/hooks/useOnClickOutSide.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useListenEvent } from './useListenerEvent';
+
+export default function useOnClickOutSide(targetEls: any[], handler: () => any) {
+  let stop = () => {};
+
+  useEffect(() => {
+    const listener = (event: Event) => {
+      const targets = targetEls.map((targetEl) => targetEl?.current);
+      const paths = event.composedPath();
+      const rs = [];
+      for (let i = 0; i < targets.length; i++) {
+        rs[i] = paths.includes(targets[i]);
+      }
+      if (rs.every((item) => !item)) {
+        handler();
+      }
+    };
+    stop = useListenEvent('click', listener, { passive: true });
+    return () => {
+      stop?.();
+    };
+  }, [targetEls, handler]);
+}

package/src/Components/components/base/util/index.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+// Used to determine whether dom can be used
+export const canUseDocument = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+export function getRefDom(domRef: React.RefObject<any>) {
+  if (domRef?.current && typeof domRef.current === 'object' && 'currentElement' in domRef.current) {
+    return domRef.current.currentElement;
+  }
+  return domRef?.current;
+}
+
+export function toggleScreen(domID: string) {
+  const elem = document.getElementById(domID) as HTMLElement;
+  if (!document.fullscreenElement && elem) {
+    elem.requestFullscreen().catch((err) => {
+      console.error(
+        `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`,
+      );
+    });
+  } else {
+    document.exitFullscreen();
+  }
+}
+
+export function noop() {}

package/src/Components/components/common/ButtonPanel/ButtonPanel.tsx

@@ -0,0 +1,127 @@
+import React, {
+  useMemo,
+  useContext,
+  useState,
+  useEffect,
+} from 'react';
+import {
+  CallRole,
+  CallStatus,
+  CallMediaType,
+  TUIGlobal,
+  TUIStore,
+  StoreName,
+  NAME,
+} from '../../../../TUICallService';
+import { ButtonPanelConfig } from './config';
+import ButtonPanelH5 from './ButtonPanelH5/ButtonPanelH5';
+import ButtonPanelPC from './ButtonPanelPC/ButtonPanelPC';
+import BackgroundBlur from './button/BackgroundBlur';
+import { CallInfoContext, IsClickableContext, UserInfoContext } from '../../../context';
+import { deepClone } from '../../../util';
+import useCustomButtonUIConfig from '../../../hooks/useCustomButtonUIConfig';
+import { modify, add } from '../../../util/uiDesign';
+
+const isMobile = !TUIGlobal.isPC;
+
+export default function ButtonPanel() {
+  const {
+    callStatus, isGroupCall, callRole, callType, isShowEnableVirtualBackground,
+  } = useContext(CallInfoContext);
+  const { localUserInfo } = useContext(UserInfoContext);
+  const customButtonUIConfig = useCustomButtonUIConfig();
+  const [
+    isClickable,
+    setIsClickable,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_CLICKABLE));
+  const IsClickableContextValue = useMemo(() => isClickable, [isClickable]);
+  const handleIsClickableChange = (value) => {
+    setIsClickable(value);
+  };
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      { [NAME.IS_CLICKABLE]: handleIsClickableChange },
+      { notifyRangeWhenWatch: NAME.MYSELF },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        { [NAME.IS_CLICKABLE]: handleIsClickableChange },
+      );
+    };
+  }, []);
+  const setVirtualBackgroundConfig = (config) => {
+    const newButtonPanelConfig = deepClone(config);
+    add(newButtonPanelConfig, 'pc.singleCall.video.calling[0][2]', { component: BackgroundBlur, props: {} });
+    add(newButtonPanelConfig, 'pc.singleCall.video.accept[0][1]', { component: BackgroundBlur, props: {} });
+    add(newButtonPanelConfig, 'pc.singleCall.video.connected[0][3]', { component: BackgroundBlur, props: {} });
+    add(newButtonPanelConfig, 'pc.groupCall.video.calling[0][2]', { component: BackgroundBlur, props: {} });
+    add(newButtonPanelConfig, 'pc.groupCall.video.connected[0][2]', { component: BackgroundBlur, props: {} });
+    return newButtonPanelConfig;
+  };
+  const setCloseCameraConfig = (config, isVideoAvailable, isShowVirtualBackgroundIcon) => {
+    const newConfig = deepClone(config);
+    if (isVideoAvailable) {
+      modify(newConfig, 'h5.singleCall.video.connected[1][2].props.show', true);
+      if (isShowVirtualBackgroundIcon) {
+        setVirtualBackgroundConfig(newConfig);
+      }
+    } else {
+      modify(newConfig, 'h5.singleCall.video.connected[1][2].props.show', false);
+      if (isShowVirtualBackgroundIcon) {
+        modify(newConfig, 'pc.singleCall.video.connected[0][3].props.show', false);
+        modify(newConfig, 'pc.groupCall.video.connected[0][2].props.show', false);
+      }
+    }
+    return newConfig;
+  };
+  const buttons = useMemo(() => {
+    let newButtonPanelConfig = deepClone(ButtonPanelConfig);
+
+    if (isShowEnableVirtualBackground) {
+      newButtonPanelConfig = setVirtualBackgroundConfig(ButtonPanelConfig);
+    }
+
+    if (callStatus === CallStatus.CONNECTED) {
+      newButtonPanelConfig = setCloseCameraConfig(
+        newButtonPanelConfig,
+        localUserInfo?.isVideoAvailable,
+        isShowEnableVirtualBackground,
+      );
+    }
+
+    customButtonUIConfig?.forEach((item) => {
+      const { path, value } = item;
+      modify(newButtonPanelConfig, path, value);
+    });
+
+    const platform = TUIGlobal.isPC ? 'pc' : 'h5';
+    const callScene = isGroupCall ? 'groupCall' : 'singleCall';
+    const mediaType = callType === CallMediaType.AUDIO ? 'audio' : 'video';
+    const status = callStatus === CallStatus.CALLING
+      ? callRole === CallRole.CALLER ? 'calling' : 'accept'
+      : callStatus;
+    const rs = newButtonPanelConfig?.[platform]?.[callScene]?.[mediaType]?.[status] || [];
+    if (rs.length === 1) {
+      rs.unshift([]);
+    }
+
+    return rs;
+  }, [
+    isGroupCall,
+    callType,
+    callStatus,
+    callRole,
+    isShowEnableVirtualBackground,
+    customButtonUIConfig,
+    localUserInfo?.isVideoAvailable,
+  ]);
+
+  return (
+    <IsClickableContext.Provider value={IsClickableContextValue}>
+      {isMobile ? <ButtonPanelH5 buttons={buttons} /> : <ButtonPanelPC buttons={buttons} />}
+    </IsClickableContext.Provider>
+  );
+}

package/src/Components/components/common/ButtonPanel/ButtonPanelH5/ButtonPanelH5.module.scss

@@ -0,0 +1,67 @@
+@use "../../../../style/theme/util" as *;
+@import '../../../../style/common/var.scss';
+
+.button-panel-h5-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  box-sizing: border-box;
+  bottom: 0;
+  width: 100%;
+  height: 14%;
+  border-radius: 10px 10px 0 0;
+  z-index: 5;
+  transition-property: width,height,left,top;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+
+  &.groupcall {
+    background: none;
+    &.show-panel-background {
+      @include theme() {
+        background-color: get(gray-dark-3);
+      }
+    }
+  }
+
+  &.open {
+    height: 27%;
+  }
+
+  .singlecall-panel {
+    width: 72%;
+    max-width: 400px;
+    position: absolute;
+    bottom: 6vh;
+  }
+
+  .groupcall-panel {
+    width: 72%;
+    position: absolute;
+    top: 6%;
+
+    &.close {
+      top: 27%;
+      margin-left: 9.3vw;
+    }
+  }
+
+  .toggle-panel-btn {
+    position: absolute;
+    left: 8.2vw;
+    bottom: 6vh;
+    z-index: 1;
+
+    &.close {
+      width: 8vw !important;
+      height: 8vw !important;
+      top: 32%;
+
+      :global(.#{prefix}-icon) {
+        width: 8vw !important;
+        height: 8vw !important;
+      }
+    }
+  }
+}

package/src/Components/components/common/ButtonPanel/ButtonPanelH5/ButtonPanelH5.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/no-array-index-key */
+import React, {
+  CSSProperties, useContext, useEffect, useState,
+} from 'react';
+import Button from '../../../base/Button';
+import Col from '../../../base/Grid/Col';
+import Row from '../../../base/Grid/Row';
+import Icon from '../../../base/Icon/Icon';
+import { classNames } from '../../../../util/classnames';
+import { clearPropsValues } from '../../../../util/index';
+import { CallInfoContext, FocusItemContext } from '../../../../context';
+import { TButtons } from '../../../../const/common';
+import UpSrc from '../../../../assets/button/mobile/up.svg';
+import DownSrc from '../../../../assets/button/mobile/down.svg';
+import buttonPanelH5Style from './ButtonPanelH5.module.scss';
+
+interface IButtonPanelH5Props {
+  buttons?: TButtons;
+  style?: CSSProperties;
+}
+export default function ButtonPanelH5(props: IButtonPanelH5Props) {
+  const { buttons = [] } = props;
+  const { isGroupCall } = useContext(CallInfoContext);
+  const { focusItem } = useContext(FocusItemContext);
+  const [isPanelOpen, setIsPanelOpen] = useState(true);
+  useEffect(() => {
+    setIsPanelOpen(focusItem === null);
+  }, [focusItem, setIsPanelOpen]);
+  const [showBtnPanelBackground, setShowBtnPanelBackground] = useState(false);
+  useEffect(() => {
+    if (focusItem !== null && !showBtnPanelBackground) {
+      setShowBtnPanelBackground(true);
+    }
+  }, [focusItem, showBtnPanelBackground]);
+  const classnames = classNames([
+    buttonPanelH5Style['button-panel-h5-container'],
+    {
+      [buttonPanelH5Style.open]: isPanelOpen,
+      [buttonPanelH5Style.groupcall]: isGroupCall,
+      [buttonPanelH5Style['show-panel-background']]: showBtnPanelBackground,
+    },
+  ]);
+
+  const renderOpenButtonPanel = () => buttons.map((itemArr, rowIndex) => {
+    const filterItemArr = rowIndex === 0
+      ? itemArr.filter((item) => item?.props?.show !== false)
+      : itemArr;
+    const renderButtonPanelCol = () => filterItemArr.map((item, index) => {
+      const justify = filterItemArr.length > 2
+        ? index === 0 ? 'start' : index === filterItemArr.length - 1 ? 'end' : 'center'
+        : 'center';
+      // eslint-disable-next-line no-shadow
+      const { component, props } = item;
+      const customStyle: { visibility?: any} = {};
+      if (props?.show === false) {
+        if (rowIndex === 0) {
+          return;
+        }
+        customStyle.visibility = 'hidden';
+      }
+      const size = 12 / filterItemArr.length;
+      const newProps = clearPropsValues(props, 'show');
+      // @ts-ignore
+      const ButtonComp = React.createElement(component, { isMobile: true, ...newProps });
+      return (
+        <Col
+          key={`col-${index}`}
+          style={{ overflow: 'visible', ...props?.style, ...customStyle }}
+          span={size}
+          justify={justify}
+        >
+          {ButtonComp}
+        </Col>
+      );
+    });
+
+    return (
+      <Row
+        key={`row-${rowIndex}`}
+        style={{ marginTop: rowIndex === 1 ? '2.4vh' : 0 }}
+      >
+        {renderButtonPanelCol()}
+      </Row>
+    );
+  });
+  const toggleBtnPanel = () => {
+    setIsPanelOpen(!isPanelOpen);
+  };
+  const renderTogglePanelBtn = () => {
+    const toggleBtnPanelIcon = isPanelOpen
+      ? <Icon url={DownSrc} />
+      : <Icon url={UpSrc} />;
+    return (
+      <Button
+        className={classNames([
+          buttonPanelH5Style['toggle-panel-btn'],
+          { [buttonPanelH5Style.close]: !isPanelOpen },
+        ])}
+        icon={toggleBtnPanelIcon}
+        onClick={toggleBtnPanel}
+      />
+    );
+  };
+  const renderCloseButtonPanel = () => {
+    const rs = buttons.flat();
+    const renderButtonPanelCol = () => rs.map((item, index) => {
+      const { component, props: buttonProps } = item;
+      if (buttonProps?.show === false) {
+        return;
+      }
+      // @ts-ignore
+      const ButtonComp = React.createElement(component, { isMobile: true, size: 'small', showText: false });
+      const size = 12 / rs.length;
+      return (
+        <Col
+          key={index}
+          style={{ overflow: 'visible' }}
+          span={size}
+        >
+          {ButtonComp}
+        </Col>
+      );
+    });
+
+    return <Row>{renderButtonPanelCol()}</Row>;
+  };
+  const renderButtonPanel = () => {
+    if (isGroupCall && !isPanelOpen) {
+      return renderCloseButtonPanel();
+    }
+
+    return renderOpenButtonPanel();
+  };
+
+  return (
+    <div className={classnames}>
+      {showBtnPanelBackground && renderTogglePanelBtn()}
+      <div
+        className={classNames([
+          {
+            [buttonPanelH5Style['groupcall-panel']]: isGroupCall,
+            [buttonPanelH5Style['singlecall-panel']]: !isGroupCall,
+            [buttonPanelH5Style.close]: !isPanelOpen,
+          },
+        ])}
+      >
+        {renderButtonPanel()}
+      </div>
+    </div>
+  );
+}

package/src/Components/components/common/ButtonPanel/ButtonPanelPC/ButtonPanelPC.module.scss

@@ -0,0 +1,9 @@
+.button-panel-pc-container {
+  position: absolute;
+  width: 55%;
+  margin: 0 auto;
+  bottom: 6%;
+  left: 50%;
+  z-index: 2;
+  transform: translateX(-50%);
+}

package/src/Components/components/common/ButtonPanel/ButtonPanelPC/ButtonPanelPC.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import Col from '../../../base/Grid/Col';
+import Row from '../../../base/Grid/Row';
+import { TButtons } from '../../../../const/common';
+import { clearPropsValues } from '../../../../util/index';
+import buttonPanelPCStyle from './ButtonPanelPC.module.scss';
+
+interface IButtonPanelPCProps {
+  buttons?: TButtons;
+}
+
+export default function ButtonPanelPC(props: IButtonPanelPCProps) {
+  const { buttons = [] } = props;
+
+  const renderButtonPanel = () => buttons.map((itemArr, rowIndex) => {
+    const renderButtonPanelCol = () => itemArr.map((item, index) => {
+      const { component, props: buttonProps } = item;
+      if (buttonProps?.show === false) {
+        return;
+      }
+      const newProps = clearPropsValues(props, 'show');
+      // @ts-ignore
+      const ButtonComp = React.createElement(component, { ...newProps });
+      const size = Math.floor(12 / itemArr.length);
+      return <Col key={index} style={{ justifyContent: 'center' }} span={size}>{ButtonComp}</Col>;
+    });
+
+    return <Row key={rowIndex}>{renderButtonPanelCol()}</Row>;
+  });
+  return <div className={buttonPanelPCStyle['button-panel-pc-container']}>{renderButtonPanel()}</div>;
+}

package/src/Components/components/common/ButtonPanel/button/Accept/Accept.module.scss

@@ -0,0 +1,7 @@
+@use "../../../../../style/theme/util" as *;
+
+.accept-icon-container {
+  @include theme() {
+    background-color: get(button-color-accept);
+  }
+}

package/src/Components/components/common/ButtonPanel/button/Accept/Accept.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '../../../../base/Button';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../../TUICallService';
+import Icon from '../../../../base/Icon/Icon';
+import useTranslate from '../../../../../hooks/useTranslate';
+import { classNames } from '../../../../../util/classnames';
+import AcceptSrc from '../../../../../assets/button/accept.svg';
+import { classPrefix } from '../../../../base/common';
+import commonStyle from '../common.module.scss';
+import acceptStyle from './Accept.module.scss';
+
+interface IAcceptProps {
+  isMobile?: boolean;
+}
+
+export default function Accept(props: IAcceptProps) {
+  const { t } = useTranslate();
+  const handleClick = () => TUICallKitAPI.accept();
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    acceptStyle['accept-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+    },
+  ]);
+  const AcceptIcon = <Icon className={commonStyle['btn-icon']} url={AcceptSrc} />;
+  return (
+    <Button
+      className={commonStyle[`${classPrefix}-btn`]}
+      icon={AcceptIcon}
+      iconClassName={iconClassName}
+      onClick={handleClick}
+      {...props}
+    >
+      {t('accept')}
+    </Button>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/Accept/index.ts

@@ -0,0 +1,3 @@
+import Accept from './Accept';
+
+export default Accept;

package/src/Components/components/common/ButtonPanel/button/BackgroundBlur/BackgroundBlur.module.scss

@@ -0,0 +1,15 @@
+@use "../../../../../style/theme/util" as *;
+@import "../../../../../style/common/var.scss";
+
+.background-blur-icon-container {
+  
+  @include theme() {
+    background-color: get(white-1);  
+  }
+  &.close {
+    
+    @include theme() {
+      background-color: get(black-5);
+    }
+  }
+}