From 70090ab3924d04910a4dc7943cc2314bd2271942 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Mon, 27 Jan 2020 11:39:27 +0000
Subject: [PATCH] Property Pane UI Styles

---
 app/client/src/pages/Editor/Popper.tsx        | 27 +++++++++++++++++--
 app/client/src/pages/Editor/Sidebar.tsx       |  2 +-
 app/client/src/pages/Editor/routes.tsx        |  3 +--
 .../src/pages/common/ProtectedRoute.tsx       |  5 +++-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/client/src/pages/Editor/Popper.tsx b/app/client/src/pages/Editor/Popper.tsx
index 9e39540d58..2ab58b080e 100644
--- a/app/client/src/pages/Editor/Popper.tsx
+++ b/app/client/src/pages/Editor/Popper.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { createPortal } from "react-dom";
 import PopperJS from "popper.js";
 import PaneWrapper from "pages/common/PaneWrapper";
-
+import { getColorWithOpacity } from "constants/DefaultTheme";
 type PopperProps = {
   isOpen: boolean;
   targetNode?: Element;
@@ -15,8 +15,31 @@ const PopperWrapper = styled(PaneWrapper)`
   z-index: 3;
   max-height: ${props => props.theme.propertyPane.height}px;
   width: ${props => props.theme.propertyPane.width}px;
-  margin: ${props => props.theme.spaces[6]}px;
+  margin: ${props => props.theme.spaces[2]}px;
+  box-shadow: 0px 0px 10px ${props => props.theme.colors.paneCard};
+  border: ${props => props.theme.spaces[5]}px solid
+    ${props => props.theme.colors.paneBG};
+  border-right: 0;
   overflow-y: auto;
+  padding: 0 ${props => props.theme.spaces[5]}px 0 0;
+
+  scrollbar-color: ${props => props.theme.colors.paneCard}
+    ${props => props.theme.colors.paneBG};
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px
+      ${props => getColorWithOpacity(props.theme.colors.paneBG, 0.3)};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${props => props.theme.colors.paneCard};
+    outline: 1px solid ${props => props.theme.paneText};
+    border-radius: ${props => props.theme.radii[1]}px;
+  }
 `;
 
 /* eslint-disable react/display-name */
diff --git a/app/client/src/pages/Editor/Sidebar.tsx b/app/client/src/pages/Editor/Sidebar.tsx
index 3205f6b985..960ec700d8 100644
--- a/app/client/src/pages/Editor/Sidebar.tsx
+++ b/app/client/src/pages/Editor/Sidebar.tsx
@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   grid-template-columns: 1fr 4fr;
   width: ${props => props.theme.sidebarWidth};
   box-shadow: 0px 1px 3px ${props => props.theme.colors.paneBG};
-  z-index: 13;
+  z-index: 2;
 `;
 
 const NavBar = styled.div`
diff --git a/app/client/src/pages/Editor/routes.tsx b/app/client/src/pages/Editor/routes.tsx
index 368865aaba..89d66a75f1 100644
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@@ -24,7 +24,7 @@ const Wrapper = styled.div<{ isVisible: boolean; showOnlySidebar?: boolean }>`
   height: calc(100vh - ${props => props.theme.headerHeight});
   background-color: ${props =>
     props.isVisible ? "rgba(0, 0, 0, 0.26)" : "transparent"};
-  z-index: ${props => (props.isVisible ? 10 : -1)};
+  z-index: ${props => (props.isVisible ? 2 : -1)};
   transition-property: z-index;
   transition-delay: ${props => (props.isVisible ? "0" : "0.25s")};
 `;
@@ -37,7 +37,6 @@ const DrawerWrapper = styled.div<{
   width: ${props => (props.showOnlySidebar ? "0px" : "75%")};
   height: 100%;
   box-shadow: -1px 2px 3px 0px ${props => props.theme.colors.paneBG};
-  transform: translateX(${props => (props.isVisible ? `0` : `-80vw`)});
   transition: 0.25s;
 `;
 
diff --git a/app/client/src/pages/common/ProtectedRoute.tsx b/app/client/src/pages/common/ProtectedRoute.tsx
index 5876b5b5d1..247bbdff55 100644
--- a/app/client/src/pages/common/ProtectedRoute.tsx
+++ b/app/client/src/pages/common/ProtectedRoute.tsx
@@ -5,7 +5,7 @@ import { useSelector } from "store";
 import { hasAuthExpired } from "utils/storage";
 import { User } from "constants/userConstants";
 import { setCurrentUserDetails } from "actions/userActions";
-
+import { useShowPropertyPane } from "utils/hooks/dragResizeHooks";
 export const checkAuth = (dispatch: any, currentUser?: User) => {
   return hasAuthExpired().then(hasExpired => {
     if (!currentUser || hasExpired) {
@@ -15,6 +15,9 @@ export const checkAuth = (dispatch: any, currentUser?: User) => {
 };
 
 export const WrappedComponent = (props: any) => {
+  const showPropertyPane = useShowPropertyPane();
+  showPropertyPane();
+
   const dispatch = useDispatch();
   const currentUser = useSelector(state => state.ui.users.current);
   checkAuth(dispatch, currentUser);