updated naming convention

src/components/Dataform/index.jsx

@@ -60,7 +60,7 @@ const DataForm = memo(() => {
   return (
     <div
       className={classNames(
-        "w-full p-[17px_15px] mobileMode:p-[17px_40px] overflow-y-scroll",
+        "w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll",
         {
           "opacity-50": isDraggingFile,
         }

src/components/FileItem/index.jsx

@@ -117,7 +117,7 @@ const FileItem = React.memo((props) => {
       >
         {/* <ContextMenu parent={props.metadata.parent} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/> */}
         <td className="p-5">
-          <div className="flex items-center fileTextXL:w-[560px] w-[60px] xxs:w-[160px] xs:w-[260px] fileTextXSM:w-[460px] fileTextLG:w-[440px] fileTextMD:w-[240px] mobileMode:w-[160px]">
+          <div className="flex items-center fileTextXL:w-[560px] w-[60px] xxs:w-[160px] xs:w-[260px] fileTextXSM:w-[460px] fileTextLG:w-[440px] fileTextMD:w-[240px] desktopMode:w-[160px]">
             <span className="inline-flex items-center mr-[15px] max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
               <div
                 className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"

src/components/Header/index.tsx

@@ -20,7 +20,7 @@ const Header = () => {
   return (
     <header id="header">
       <div className="px-6 flex justify-between min-h-[68px] items-center py-[15px]">
-        <div className="items-center w-[260px] hidden mobileMode:flex">
+        <div className="items-center w-[260px] hidden desktopMode:flex">
           <a
             className="inline-flex items-center justify-center cursor-pointer"
             onClick={() => navigate("/")}
@@ -28,7 +28,7 @@ const Header = () => {
             <img className="w-[35px]" src="/images/icon.png" alt="logo" />
           </a>
         </div>
-        <div className="items-center flex mobileMode:hidden mr-4">
+        <div className="items-center flex desktopMode:hidden mr-4">
           <a className="inline-flex items-center justify-center cursor-pointer">
             <MenuIcon
               id="menu-icon"
@@ -38,7 +38,7 @@ const Header = () => {
           </a>
         </div>
         <SearchBar />
-        <div className="justify-end w-[260px] hidden mobileMode:flex">
+        <div className="justify-end w-[260px] hidden desktopMode:flex">
           <div>
             <div>
               <a

src/components/LeftSection/index.jsx

@@ -77,9 +77,9 @@ const LeftSection = (props) => {
     <div
       ref={wrapperRef}
       className={classNames(
-        "p-6 fixed mobileMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 mt-[9px] animate-movement",
+        "p-6 fixed desktopMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 mt-[9px] animate-movement",
         {
-          "-left-[270px] mobileMode:left-0": !leftSectionOpen,
+          "-left-[270px] desktopMode:left-0": !leftSectionOpen,
           "left-0": leftSectionOpen,
         }
       )}
@@ -140,7 +140,7 @@ const LeftSection = (props) => {
             </li>
           </ul>
         </div>
-        <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md block mobileMode:hidden mb-1">
+        <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md block desktopMode:hidden mb-1">
           <ul className="m-0 list-none p-0 cursor-pointer ">
             <li>
               <a

src/components/Medias/index.tsx

@@ -27,7 +27,7 @@ const Medias = memo(() => {
   }, [reachedIntersect, initialLoad, isFetchingNextPage]);
 
   return (
-    <div className="w-full p-[17px_15px] mobileMode:p-[17px_40px] overflow-y-scroll">
+    <div className="w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll">
       <div
         className={classNames(
           "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[10px]"

src/components/RightSection/index.tsx

@@ -82,7 +82,7 @@ const RightSection = memo(() => {
   return (
     <div
       className={classNames(
-        "!hidden mobileMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
+        "!hidden desktopMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
         selectedItem.id === "" ? "flex justify-center items-center" : ""
       )}
     >

tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
       fileTextSM: "1000px",
       fileTextXSM: "900px",
       fileListShowDetails: "680px",
-      mobileMode: "1100px",
+      desktopMode: "1100px",
     },
   },
   plugins: [],