refactor(responsive): 🎉 update responsive design

robolaunch · Aug 11, 2023 · a3416fb · a3416fb
1 parent 0bf614f
commit a3416fb
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 6 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1524,6 +1524,11 @@ video {
   cursor: pointer;
 }
 
+.select-none{
+  -webkit-user-select: none;
+          user-select: none;
+}
+
 .resize{
   resize: both;
 }

diff --git a/src/components/ActionCells/OrganizationActionCells.tsx b/src/components/ActionCells/OrganizationActionCells.tsx
@@ -39,7 +39,7 @@ export default function OrganizationActionCells({
           text={
             <BiPencil
               className={`${
-                envOnPremise ? "text-layer-light-500" : "text-red-600"
+                envOnPremise ? "text-layer-light-500" : "text-layer-primary-500"
               }`}
             />
           }

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -9,7 +9,7 @@ export default function Sidebar(): ReactElement {
 
   return (
     <Fragment>
-      <div className="fixed flex flex-col items-center gap-4 h-screen w-16 lg:w-20 py-2 bg-layer-light-50 shadow-2xl z-40 border-r border-layer-light-200 animate__animated animate__fadeInLeft">
+      <div className="fixed flex flex-col items-center gap-4 h-screen w-16 lg:w-20 py-2 bg-layer-light-50 shadow-2xl z-40 border-r border-layer-light-200 select-none animate__animated animate__fadeInLeft ">
         <Link to={`/`}>
           <img
             draggable="false"

diff --git a/src/components/SidebarLists/SidebarListItem.tsx b/src/components/SidebarLists/SidebarListItem.tsx
@@ -118,7 +118,7 @@ export default function SidebarListItem({
   return (
     <div
       key={name}
-      className={`flex cursor-pointer animate__animated animate__fadeIn  border rounded-lg hover:scale-[0.98] ${
+      className={`flex cursor-pointer animate__animated animate__fadeIn  border rounded-lg hover:scale-[0.98] select-none ${
         selected
           ? "bg-layer-light-100 border-layer-light-400 shadow"
           : "bg-layer-light-50 border-layer-light-200 shadow-sm"

diff --git a/src/components/SidebarMenuItem/SideBarMenuItem.tsx b/src/components/SidebarMenuItem/SideBarMenuItem.tsx
@@ -93,7 +93,7 @@ export default function SideBarMenuItem({
   return (
     <div
       onClick={() => !loading && !disabled && handleClick()}
-      className={`${activeSwitcher()} relative transition-500 p-2 rounded-md cursor-pointer hover:scale-90 animate__animated animate__fadeInLeft ${
+      className={`${activeSwitcher()} relative transition-500 p-2 rounded-md cursor-pointer hover:scale-90 select-none animate__animated animate__fadeInLeft ${
         (loading || disabled) && "!cursor-not-allowed"
       }`}
       onMouseEnter={() => !loading && !disabled && setIsHover(true)}

diff --git a/src/components/SidebarStaticItem/SidebarStaticItem.tsx b/src/components/SidebarStaticItem/SidebarStaticItem.tsx
@@ -18,7 +18,7 @@ export default function SidebarStaticItem({
   return (
     <Link
       to={to}
-      className={`transition-all duration-500 p-2 rounded-md cursor-pointer hover:scale-90 animate__animated animate__fadeInLeft relative ${
+      className={`transition-all duration-500 p-2 rounded-md cursor-pointer hover:scale-90 animate__animated animate__fadeInLeft relative select-none ${
         location?.pathname?.includes(to) &&
         "bg-layer-light-100 transition-all duration-500"
       }`}

diff --git a/src/layouts/SidebarContentLayout.tsx b/src/layouts/SidebarContentLayout.tsx
@@ -234,7 +234,7 @@ export default function SidebarContentLayout(): ReactElement {
 
   return (
     <div
-      className={`fixed flex flex-col justify-between left-16 lg:left-20 w-fill-available md:w-[40rem] h-full bg-layer-light-50 shadow-2xl animate__animated animate__fadeInLeftBig animate__fast z-[32] border-r border-layer-light-200 rounded-r-xl ${
+      className={`fixed flex flex-col justify-between left-16 lg:left-20 w-fill-available md:w-[40rem] h-full bg-layer-light-50 shadow-2xl animate__animated animate__fadeInLeftBig animate__fast z-[32] border-r border-layer-light-200 rounded-r-xl select-none ${
         url?.robotName || sidebarState?.isCreateMode ? "px-8 pt-8 pb-2" : "p-8"
       }`}
     >