@nyris/nyris-webapp 0.3.57 → 0.3.59

package/build/static/media/arrow_down.f417689ce292978a8292a7f00407fdd5.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.65944 10.4215C8.28211 10.7525 7.71789 10.7525 7.34056 10.4215L3.3956 6.96105C3.18599 6.77719 3.18599 6.45088 3.3956 6.26702C3.56978 6.11423 3.83022 6.11423 4.0044 6.26702L7.34056 9.19348C7.71789 9.52446 8.28211 9.52446 8.65944 9.19348L11.9956 6.26702C12.1698 6.11423 12.4302 6.11423 12.6044 6.26702C12.814 6.45088 12.814 6.77719 12.6044 6.96105L8.65944 10.4215Z" fill="#currentColor"/>
-</svg>

package/build/static/media/arrow_left.73d03a534eaf9b99ab196e0fb67da602.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.07845 9.15944C5.74747 8.78211 5.74747 8.21789 6.07845 7.84056L9.53895 3.8956C9.72281 3.68599 10.0491 3.68599 10.233 3.8956C10.3858 4.06978 10.3858 4.33022 10.233 4.5044L7.30652 7.84056C6.97554 8.21789 6.97554 8.78211 7.30652 9.15944L10.233 12.4956C10.3858 12.6698 10.3858 12.9302 10.233 13.1044C10.0491 13.314 9.72281 13.314 9.53895 13.1044L6.07845 9.15944Z" fill="#2B2C46"/>
-</svg>

package/build/static/media/arrow_right.59a4594a3a1657037537dbae1eee0251.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.92155 9.15944C10.2525 8.78211 10.2525 8.21789 9.92155 7.84056L6.46105 3.8956C6.27719 3.68599 5.95088 3.68599 5.76702 3.8956C5.61423 4.06978 5.61423 4.33022 5.76702 4.5044L8.69348 7.84056C9.02446 8.21789 9.02446 8.78211 8.69348 9.15944L5.76702 12.4956C5.61423 12.6698 5.61423 12.9302 5.76702 13.1044C5.95088 13.314 6.27719 13.314 6.46105 13.1044L9.92155 9.15944Z" fill="#2B2C46"/>
-</svg>

package/build/static/media/arrow_up.85dbe70bc51ec32c8894a06499330f14.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.65944 6.57845C8.28211 6.24747 7.71789 6.24747 7.34056 6.57845L3.3956 10.0389C3.18599 10.2228 3.18599 10.5491 3.3956 10.733C3.56978 10.8858 3.83022 10.8858 4.0044 10.733L7.34056 7.80652C7.71789 7.47554 8.28211 7.47554 8.65944 7.80652L11.9956 10.733C12.1698 10.8858 12.4302 10.8858 12.6044 10.733C12.814 10.5491 12.814 10.2228 12.6044 10.0389L8.65944 6.57845Z" fill="currentColor"/>
-</svg>

package/build/static/media/home.9ffb65a9c0be8fc5a502ba05cf5f719c.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="22" viewBox="0 0 22 21" style="enable-background:new 0 0 22 20.28;" xmlns="http://www.w3.org/2000/svg">
-  <path class="st3" d="M 10.959 1.845 C 11.109 1.845 11.266 1.886 11.408 1.96 L 19.66 6.661 C 19.935 6.825 20.101 7.112 20.101 7.424 L 20.101 15.776 C 20.101 16.111 19.91 16.415 19.61 16.562 L 15.912 18.384 C 15.787 18.449 15.646 18.474 15.513 18.474 C 15.347 18.474 15.189 18.433 15.048 18.343 C 14.782 18.178 14.624 17.9 14.624 17.596 L 14.624 10.041 L 10.959 7.957 L 7.294 10.041 L 7.294 17.605 C 7.294 17.908 7.136 18.196 6.87 18.351 C 6.728 18.441 6.562 18.483 6.405 18.483 C 6.272 18.483 6.13 18.449 6.006 18.392 L 2.307 16.57 C 2.008 16.415 1.817 16.111 1.817 15.776 L 1.817 7.424 C 1.817 7.112 1.983 6.817 2.265 6.661 L 10.519 1.96 C 10.651 1.886 10.801 1.845 10.959 1.845 M 10.959 0.205 C 10.51 0.205 10.069 0.32 9.679 0.541 L 1.426 5.242 C 0.645 5.693 0.155 6.529 0.155 7.424 L 0.155 15.776 C 0.155 16.735 0.695 17.596 1.568 18.031 L 5.266 19.852 C 5.615 20.025 6.014 20.115 6.405 20.115 C 6.878 20.115 7.343 19.984 7.742 19.738 C 8.499 19.278 8.956 18.474 8.956 17.596 L 8.956 10.984 L 10.959 9.844 L 12.962 10.984 L 12.962 17.596 C 12.962 18.474 13.41 19.278 14.175 19.738 C 14.583 19.984 15.039 20.115 15.522 20.115 C 15.912 20.115 16.311 20.025 16.66 19.852 L 20.359 18.031 C 21.231 17.605 21.771 16.735 21.771 15.776 L 21.771 7.424 C 21.771 6.529 21.281 5.693 20.492 5.242 L 12.239 0.541 C 11.848 0.32 11.408 0.205 10.959 0.205 Z" fill="currentColor"  transform="matrix(0.999999, 0.00121, -0.00121, 0.999999, 0.012302, -0.013258)"/>
-</svg>

package/build/static/media/icon_camera_mobile.6772053c4dfef487255649d2a05cc9d4.svg

@@ -1,3 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 24C28 24.5523 27.5523 25 27 25H1C0.447715 25 0 24.5523 0 24V7C0 6.44772 0.447715 6 1 6H7.46L9.17 3.45C9.35398 3.17061 9.66548 3.00173 10 3H18C18.3345 3.00173 18.646 3.17061 18.83 3.45L20.54 6H27C27.5523 6 28 6.44772 28 7V24ZM2 23H26V8H20C19.6655 7.99827 19.354 7.82939 19.17 7.55L17.46 5H10.54L8.83 7.55C8.64602 7.82939 8.33452 7.99827 8 8H2V23ZM14 21C10.6863 21 8 18.3137 8 15C8 11.6863 10.6863 9 14 9C17.3137 9 20 11.6863 20 15C20 18.3137 17.3137 21 14 21ZM14 11C11.7909 11 10 12.7909 10 15C10 17.2091 11.7909 19 14 19C16.2091 19 18 17.2091 18 15C18 12.7909 16.2091 11 14 11Z" fill="currentColor"/>
-</svg>

package/build/static/media/reverse_camera.cee0200b151941cc83c182167a85d667.svg

@@ -1,5 +0,0 @@
-<svg width="55" height="56" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle opacity="0.6" cx="27.5" cy="28" r="27" fill="#2B2C46"/>
-<circle cx="27.5" cy="28" r="25.92" stroke="white" stroke-width="3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.276 23.5276L20.0465 25.1191L15.5975 27.2727L13.5 22.94L15.0914 22.1696L15.7765 23.5846C16.5115 21.6558 17.725 19.9218 19.3162 18.561C21.56 16.6421 24.4242 15.5852 27.381 15.5852C30.3379 15.5852 33.2022 16.6421 35.4462 18.5609C37.6654 20.4586 39.1501 23.0816 39.6269 25.9468L37.8828 26.237C37.4742 23.7814 36.2007 21.5325 34.2971 19.9047C32.3731 18.2594 29.9169 17.3533 27.381 17.3533C24.8452 17.3533 22.3891 18.2594 20.4653 19.9047C19.0307 21.1316 17.9543 22.7115 17.336 24.4668L19.276 23.5276ZM39.0725 28.6991L41.5 32.8558L39.9732 33.7475L39.0672 32.1959C38.3417 34.2126 37.0971 36.0268 35.4456 37.4392C33.2015 39.358 30.3374 40.4148 27.381 40.4148C24.4246 40.4148 21.5607 39.358 19.3168 37.4391C17.0981 35.5416 15.6133 32.9186 15.136 30.0535L16.88 29.763C17.2891 32.2187 18.5627 34.4676 20.466 36.0954C22.3899 37.7407 24.8456 38.6468 27.381 38.6468C29.9165 38.6468 32.3725 37.7407 34.2965 36.0954C35.6707 34.9203 36.7164 33.4214 37.3458 31.7549L35.6958 32.7185L34.8042 31.1917L39.0725 28.6991Z" fill="white"/>
-</svg>

package/src/App.tsx

@@ -1,18 +0,0 @@
-import 'react-app-polyfill/ie11';
-import 'react-app-polyfill/stable';
-import React from 'react';
-import 'typeface-roboto';
-import 'index.css';
-
-import { useMediaQuery } from 'react-responsive';
-import AppMD from 'page/landingPage/AppMD';
-import AppMobile from 'page/landingPage/AppMobile';
-
-function App(): JSX.Element {
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-  let SelectedApp: any = isMobile ? AppMobile : AppMD;
-
-  return <SelectedApp />;
-}
-
-export default App;

package/src/components/AppMobile.tsx

@@ -1,117 +0,0 @@
-import React, { ReactNode, useState } from 'react';
-import HeaderMobile from './HeaderMobile';
-import {
-  setPreFilterDropdown,
-  setImageCaptureHelpModal,
-} from 'Store/search/Search';
-import { isUndefined } from 'lodash';
-import ImageCaptureHelpModal from './ImageCaptureHelpModal';
-import MobilePostFilter from './MobilePostFilter';
-import PreFilterComponent from './pre-filter';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { AppState } from 'types';
-import FooterMobile from './FooterMobile';
-
-function AppMobile({ children }: { children: ReactNode }) {
-  const dispatch = useAppDispatch();
-  const { search } = useAppSelector<AppState>((state: any) => state);
-  const { preFilterDropdown, imageCaptureHelpModal } = search;
-  const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
-
-  return (
-    <>
-      <div className="wrap-mobile">
-        <div className="box-header-mobile-main">
-          <HeaderMobile
-            onToggleFilterMobile={(show: boolean) => {
-              setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexGrow: 1,
-            flexDirection: 'column',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            height: '100%',
-            backgroundColor: '#fff',
-          }}
-        >
-          {children}
-        </div>
-        <div
-          className="footer-wrap-main"
-          style={{
-            zIndex: 999,
-          }}
-        >
-          <FooterMobile />
-        </div>
-      </div>
-      <div
-        className={`box-filter ${isOpenFilter ? 'open' : 'close'} `}
-        style={{
-          top: '0px',
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-        }}
-      >
-        <MobilePostFilter
-          onApply={() => {
-            setOpenFilter(!isOpenFilter);
-          }}
-        />
-      </div>
-
-      {preFilterDropdown && (
-        <div
-          className={`box-filter open`}
-          style={{
-            top: '0px',
-            height: '100%',
-            width: '100%',
-            zIndex: 999,
-            position: 'absolute',
-          }}
-        >
-          <div style={{ width: '100%' }} className={'wrap-filter-desktop'}>
-            <div className={'bg-white box-filter-desktop isMobile'}>
-              <PreFilterComponent
-                handleClose={() =>
-                  dispatch(setPreFilterDropdown(!preFilterDropdown))
-                }
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {imageCaptureHelpModal && (
-        <div
-          className={`box-filter open`}
-          style={{
-            top: '0px',
-            width: '100%',
-            zIndex: 100,
-            position: 'absolute',
-          }}
-        >
-          <div style={{ width: '100%' }} className={'wrap-filter-desktop'}>
-            <div className={'bg-white box-filter-desktop isMobile'}>
-              <ImageCaptureHelpModal
-                handleClose={() =>
-                  dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal))
-                }
-              />
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-export default AppMobile;

package/src/components/FooterMobile.tsx

@@ -1,230 +0,0 @@
-import { Button } from '@material-ui/core';
-import React, { useState } from 'react';
-import { ReactComponent as IconCameraMobile } from 'common/assets/icons/icon_camera_mobile.svg';
-import CameraCustom from './drawer/cameraCustom';
-import { ReactComponent as Home } from 'common/assets/icons/home.svg';
-import { useHistory } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
-import { ReactComponent as IconLogout } from 'common/assets/icons/logout.svg';
-import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
-import { ReactComponent as PoweredByNyrisImage } from 'common/assets/images/powered_by_nyris.svg';
-
-import {
-  reset,
-  setImageCaptureHelpModal,
-  setPreFilter,
-} from 'Store/search/Search';
-import { useAuth0 } from '@auth0/auth0-react';
-import DefaultModal from './modal/DefaultModal';
-
-interface Props {
-  onLoadingMobile?: any;
-}
-
-function FooterMobile(props: Props): JSX.Element {
-  const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
-  const history = useHistory();
-  const {
-    search: { imageCaptureHelpModal },
-  } = useAppSelector(state => state);
-  const dispatch = useAppDispatch();
-
-  const { settings } = useAppSelector(state => state);
-  const { user, isAuthenticated, logout } = useAuth0();
-  const auth0 = settings.auth0;
-
-  const [showLogoutModal, setShowLogoutModal] = useState(false);
-
-  return (
-    <>
-      <DefaultModal
-        openModal={showLogoutModal}
-        handleClose={() => {
-          setShowLogoutModal(false);
-        }}
-      >
-        <div
-          style={{
-            backgroundColor: 'white',
-            width: '360px',
-            padding: '24px',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-            }}
-            onClick={() => setShowLogoutModal(false)}
-          >
-            <CloseIcon
-              width={'16px'}
-              height={'16px'}
-              fontSize={'16px'}
-              color="black"
-            />
-          </div>
-          <p style={{ fontSize: '36px', fontWeight: 'bold', color: '#2B2C46' }}>
-            Logout
-          </p>
-          <p style={{ fontSize: '13px', color: '#2B2C46', paddingTop: '16px' }}>
-            Are you sure you want to log out? Your session will be securely
-            closed.
-          </p>
-          <p style={{ fontSize: '13px', color: '#2B2C46', paddingTop: '16px' }}>
-            Email
-          </p>
-          <div
-            style={{
-              backgroundColor: '#FAFAFA',
-              height: '32px',
-              paddingLeft: '16px',
-              paddingRight: '16px',
-              marginTop: '8px',
-            }}
-          >
-            {user?.email}
-          </div>
-          <div style={{ display: 'flex', width: '100%', marginTop: '16px' }}>
-            <div
-              style={{
-                width: '50%',
-                backgroundColor: '#2B2C46',
-                color: 'white',
-                padding: '16px',
-              }}
-              onClick={() => {
-                logout({
-                  logoutParams: { returnTo: window.location.origin },
-                });
-              }}
-            >
-              Confirm log out
-            </div>
-          </div>
-        </div>
-      </DefaultModal>
-      {history.location?.pathname === '/' && settings.showPoweredByNyris && (
-        <div
-          style={{
-            backgroundColor: '#fff',
-            display: 'flex',
-            justifyContent: 'center',
-            padding: '16px 0px 16px 0px',
-          }}
-        >
-          <PoweredByNyrisImage
-            style={{ cursor: 'pointer' }}
-            onClick={() => {
-              window.open('https://www.nyris.io', '_blank');
-            }}
-            color="#AAABB5"
-          />
-        </div>
-      )}
-      <div
-        className="box-footer-mobile"
-        style={{
-          paddingLeft: '16px',
-          paddingRight: '16px',
-          height: '64px',
-          display: 'flex',
-          position: 'relative',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <a
-          style={{
-            width: '48px',
-            height: '48px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '100%',
-            backgroundColor:
-              history.location.pathname === '/' && !imageCaptureHelpModal
-                ? `#E0E0E0`
-                : '',
-          }}
-          href="/"
-          className="nav-link p-0 menu-children rounded-0"
-          onClick={() => {
-            dispatch(reset(''));
-            dispatch(setPreFilter({}));
-            dispatch(setImageCaptureHelpModal(false));
-          }}
-        >
-          <Home
-            color={
-              history.location.pathname === '/' && !imageCaptureHelpModal
-                ? '#2B2C46'
-                : '#AAABB5'
-            }
-          />
-        </a>
-        {history.location?.pathname !== '/' && !imageCaptureHelpModal && (
-          <div className="box-icon-camera-mobile">
-            <Button
-              onClick={() => {
-                setOpenModalCamera(!isOpenModalCamera);
-              }}
-            >
-              <IconCameraMobile color="#55566B" />
-            </Button>
-          </div>
-        )}
-        <div style={{ display: 'flex', gap: '24px' }}>
-          {history.location?.pathname !== '/' && (
-            <div
-              style={{
-                width: '48px',
-                height: '48px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '100%',
-                backgroundColor: imageCaptureHelpModal ? `#E0E0E0` : '',
-              }}
-              onClick={() => {
-                dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal));
-              }}
-            >
-              <IconInfo
-                fontSize={24}
-                width={24}
-                height={24}
-                color={imageCaptureHelpModal ? '#2B2C46' : '#AAABB5'}
-              />
-            </div>
-          )}
-          {auth0.enabled && isAuthenticated && (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              onClick={() => {
-                setShowLogoutModal(true);
-              }}
-            >
-              <IconLogout fontSize={24} width={24} height={24} />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="box-screenshot-camera">
-        <CameraCustom
-          isToggle={isOpenModalCamera}
-          onToggleModal={() => {
-            setOpenModalCamera(!isOpenModalCamera);
-          }}
-        />
-      </div>
-    </>
-  );
-}
-
-export default FooterMobile;

package/src/components/ImagePreviewMobile.tsx

@@ -1,237 +0,0 @@
-// @ts-nocheck
-import React, { memo, useState } from 'react';
-import { Typography, Hidden } from '@material-ui/core';
-import { RectCoords } from '@nyris/nyris-api';
-import { Preview } from '@nyris/nyris-react-components';
-import { DEFAULT_REGION } from '../constants';
-import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { ReactComponent as ArrowUp } from 'common/assets/icons/arrow_up.svg';
-import { ReactComponent as ArrowDown } from 'common/assets/icons/arrow_down.svg';
-import { ReactComponent as Trash } from 'common/assets/icons/trash.svg';
-import { useQuery } from 'hooks/useQuery';
-import {
-  reset,
-  setSearchResults,
-  updateStatusLoading,
-} from 'Store/search/Search';
-import { useHistory } from 'react-router-dom';
-import { find } from 'services/image';
-import { isEmpty } from 'lodash';
-
-function ImagePreviewMobileComponent({
-  requestImage,
-  imageSelection,
-  debouncedOnImageSelectionChange,
-  filteredRegions,
-  showAdjustInfo,
-  showAdjustInfoBasedOnConfidence,
-  ...rest
-}: {
-  requestImage: any;
-  imageSelection: any;
-
-  debouncedOnImageSelectionChange: any;
-  filteredRegions: any;
-  showAdjustInfoBasedOnConfidence: any;
-  showAdjustInfo: any;
-}) {
-  const { t } = useTranslation();
-  const [editActive, setEditActive] = useState(false);
-  const settings = useAppSelector(state => state.settings);
-  const { preFilter } = useAppSelector(state => state.search);
-  const isAlgoliaEnabled = settings.algolia?.enabled;
-  const query = useQuery();
-  const dispatch = useAppDispatch();
-  const history = useHistory();
-
-  const handleArrowClick = () => {
-    setEditActive(s => !s);
-  };
-
-  const searchQuery = query.get('query') || '';
-
-  const onImageRemove = () => {
-    if (!searchQuery) {
-      dispatch(reset(''));
-      history.push('/');
-    }
-    dispatch(reset(''));
-
-    if (!isAlgoliaEnabled) {
-      let payload: any;
-      let filters: any[] = [];
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter),
-        },
-      ];
-      if (searchQuery || requestImage) {
-        dispatch(updateStatusLoading(true));
-        find({
-          settings,
-          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-          text: searchQuery,
-        })
-          .then((res: any) => {
-            res?.results.forEach((item: any) => {
-              filters.push({
-                sku: item.sku,
-                score: item.score,
-              });
-            });
-            payload = {
-              ...res,
-              filters,
-            };
-
-            dispatch(setSearchResults(payload));
-            dispatch(updateStatusLoading(false));
-          })
-          .catch((e: any) => {
-            console.log('error input search', e);
-            dispatch(updateStatusLoading(false));
-          });
-      } else {
-        dispatch(setSearchResults([]));
-      }
-    }
-  };
-
-  return (
-    <div
-      className="col-left"
-      style={{
-        backgroundColor: '#5D5D63',
-        marginBottom: '15px',
-      }}
-    >
-      <div>
-        <div className="box-preview">
-          <div>
-            <div
-              className="preview-item"
-              style={{
-                backgroundColor: 'transparent',
-              }}
-            >
-              <Preview
-                key={requestImage?.id}
-                onSelectionChange={(r: RectCoords) => {
-                  debouncedOnImageSelectionChange(r);
-                }}
-                image={requestImage?.canvas}
-                selection={imageSelection || DEFAULT_REGION}
-                regions={filteredRegions}
-                minWidth={
-                  Math.min(80 * (requestImage?.canvas?.width / requestImage?.canvas?.height), 200)
-                }
-                minHeight={80}
-                maxWidth={255}
-                maxHeight={255}
-                dotColor={editActive ? '#FBD914' : ''}
-                minCropWidth={editActive ? 30 : 5}
-                minCropHeight={editActive ? 30 : 5}
-                rounded={false}
-                expandAnimation={editActive}
-                shrinkAnimation={!editActive}
-                onExpand={() => {
-                  setEditActive(true);
-                }}
-                showGrip={editActive}
-                draggable={editActive ? true : false}
-              />
-            </div>
-          </div>
-
-          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-            <div
-              style={{
-                backgroundColor: '#3E36DC',
-                display: 'flex',
-                columnGap: '6px',
-                padding: '5px',
-                width: 'fit-content',
-                minWidth: '180px',
-                marginTop: 'auto',
-                position: 'absolute',
-                bottom: -25,
-                borderRadius: '16px',
-                zIndex: 1000,
-              }}
-            >
-              <IconInfo color="white" />
-              <Typography
-                style={{
-                  fontSize: 10,
-                  color: '#fff',
-                }}
-              >
-                {showAdjustInfo
-                  ? t('Crop the image for better results')
-                  : 'Crop the image for better results'}
-              </Typography>
-            </div>
-          )}
-        </div>
-        <>
-          <Hidden>
-            <div
-              style={{
-                position: 'absolute',
-                left: '15px',
-                top: '25px',
-                padding: '4px',
-              }}
-              onClick={onImageRemove}
-            >
-              <div
-                style={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
-                }}
-              >
-                <Trash color="white" fill="white" />
-              </div>
-            </div>
-          </Hidden>
-
-          <Hidden mdUp>
-            <div
-              className="slideDown"
-              style={{
-                position: 'absolute',
-                bottom: '25px',
-                right: '20px',
-              }}
-              onClick={handleArrowClick}
-            >
-              <div
-                style={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
-                  backgroundColor: 'white',
-                }}
-              >
-                {editActive && <ArrowUp color="black" />}
-                {!editActive && <ArrowDown color="black" fill="black" />}
-              </div>
-            </div>
-          </Hidden>
-        </>
-      </div>
-    </div>
-  );
-}
-const ImagePreviewMobile = memo(ImagePreviewMobileComponent);
-export default ImagePreviewMobile;