chore(web): UI updates (#805)

reearth · Nov 10, 2023 · 621416a · 621416a
1 parent 0e75fa8
commit 621416a
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 39 deletions.
diff --git a/web/src/beta/components/Resizable/index.tsx b/web/src/beta/components/Resizable/index.tsx
@@ -106,14 +106,14 @@ const MinimizedWrapper = styled.div<Pick<Props, "direction">>`
   display: flex;
   flex-direction: ${({ direction }) => (direction === "horizontal" ? "column" : "row")};
   align-items: center;
-  width: ${({ direction }) => (direction === "horizontal" ? null : `24px`)};
-  height: ${({ direction }) => (direction === "vertical" ? null : `24px`)};
-  background: ${({ theme }) => theme.bg[2]};
+  width: ${({ direction }) => (direction === "horizontal" ? null : `20px`)};
+  height: ${({ direction }) => (direction === "vertical" ? null : `20px`)};
+  background: ${({ theme }) => theme.bg[0]};
   cursor: pointer;
   transition: background 0.3s;
 
   :hover {
-    background: ${({ theme }) => theme.bg[3]};
+    background: ${({ theme }) => theme.bg[1]};
   }
 `;
 export default Resizable;
diff --git a/web/src/beta/features/Editor/BottomPanel/index.tsx b/web/src/beta/features/Editor/BottomPanel/index.tsx
@@ -30,14 +30,15 @@ export default BottomPanel;
 
 const Wrapper = styled.div`
   height: 100%;
+  border-left: 1px solid ${({ theme }) => theme.outline.weakest};
+  border-right: 1px solid ${({ theme }) => theme.outline.weakest};
 `;
 
 const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
   height: 28px;
   padding: 0 8px;
-  border-radius: 4px 4px 0 0;
   background: ${({ theme }) => theme.bg[2]};
 `;
 

diff --git a/web/src/beta/features/Editor/SecondaryNav/index.tsx b/web/src/beta/features/Editor/SecondaryNav/index.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { ReactNode } from "react";
 
-export const SECONDARY_NAVBAR_HEIGHT = 52;
+export const SECONDARY_NAVBAR_HEIGHT = 51.5;
 
 type Props = {
   className?: string;
@@ -15,7 +15,7 @@ const VisualizerNav: React.FC<Props> = ({ className, children }) => {
 export default VisualizerNav;
 
 const Wrapper = styled.div`
-  border-radius: 4px 4px 0 0;
   background: ${({ theme }) => theme.bg[0]};
   height: ${SECONDARY_NAVBAR_HEIGHT}px;
+  border-top: 0.5px solid ${({ theme }) => theme.outline.weaker};
 `;
diff --git a/web/src/beta/features/Editor/SidePanel/index.tsx b/web/src/beta/features/Editor/SidePanel/index.tsx
@@ -45,11 +45,7 @@ const Wrapper = styled.div<{ location: "left" | "right" }>`
   height: 100%;
   box-sizing: border-box;
   gap: 4px;
-  padding: 2px 4px;
-
-  // for Resizable gutter width
-  ${({ location }) => location === "left" && `padding-right: 0;`}
-  ${({ location }) => location === "right" && `padding-left: 0;`}
+  background: ${({ theme }) => theme.bg[1]};
 `;
 
 const Section = styled.div<{ maxHeight?: CSSProperties["maxHeight"] }>`
@@ -67,10 +63,8 @@ const Card = styled.div`
 `;
 
 const Title = styled(Text)`
-  background: ${({ theme }) => theme.bg[2]};
-  padding: 4px 8px;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  background: ${({ theme }) => theme.bg[1]};
+  padding: 8px;
 `;
 
 const ActionArea = styled.div`

diff --git a/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyle.tsx b/web/src/beta/features/Editor/tabs/map/BottomPanel/LayerStyle.tsx
@@ -110,7 +110,7 @@ const AdjustableButtonStyled = styled.button`
   height: 100%;
 
   border-radius: 6px;
-  border: 1px solid ${({ theme }) => theme.secondary.main};
+  border: 1px solid ${({ theme }) => theme.outline.weak};
   background: ${({ theme }) => theme.bg[1]};
 
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);

diff --git a/web/src/beta/features/Navbar/LeftSection/index.tsx b/web/src/beta/features/Navbar/LeftSection/index.tsx
@@ -79,7 +79,7 @@ const Wrapper = styled.div`
 
 const StyledLink = styled(Link)`
   display: flex;
-  margin-right: 19px;
+  margin-right: 10px;
   color: ${props => props.theme.content.main};
   text-decoration: none;
   &:hover {

diff --git a/web/src/beta/features/Navbar/index.tsx b/web/src/beta/features/Navbar/index.tsx
@@ -85,7 +85,5 @@ const Wrapper = styled.div`
   height: ${NAVBAR_HEIGHT}px;
   gap: 24px;
   background: ${({ theme }) => theme.bg[0]};
-  border-bottom: 0.5px solid ${({ theme }) => theme.outline.weak};
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   z-index: 1;
 `;
diff --git a/web/src/beta/features/Notification/hooks.ts b/web/src/beta/features/Notification/hooks.ts
@@ -45,19 +45,9 @@ export default () => {
     [notification?.type, errorHeading, warningHeading, noticeHeading],
   );
 
-  const resetNotification = useCallback(() => {
-    setTimeout(() => {
-      setNotification(undefined);
-    }, 3000);
-  }, [setNotification]);
-
-  const setModal = useCallback(
-    (show: boolean) => {
-      changeVisibility(show);
-      if (!show) resetNotification();
-    },
-    [resetNotification],
-  );
+  const setModal = useCallback((show: boolean) => {
+    changeVisibility(show);
+  }, []);
 
   useEffect(() => {
     if (!error) return;

diff --git a/web/src/beta/features/Notification/index.tsx b/web/src/beta/features/Notification/index.tsx
@@ -64,22 +64,26 @@ const StyledNotificationBanner = styled.div<{
   margin-left: auto;
   margin-right: auto;
   width: 312px;
-  padding: 8px 12px;
+  padding: 4px 8px;
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
   background-color: ${({ type, theme }) =>
     type === "error"
-      ? theme.classic.notification.errorBg
+      ? theme.dangerous.main
       : type === "warning"
-      ? theme.classic.notification.warningBg
+      ? theme.warning.main
       : type === "success"
-      ? theme.classic.notification.successBg
-      : theme.classic.notification.infoBg};
-  color: ${({ theme }) => theme.classic.notification.text};
+      ? theme.select.strong
+      : theme.secondary.main};
+  color: ${({ theme }) => theme.content.main};
   z-index: ${({ theme, visible }) => (visible ? theme.classic.zIndexes.notificationBar : 0)};
   opacity: ${({ visible }) => (visible ? "1" : "0")};
   transition: all 0.5s;
   pointer-events: ${({ visible }) => (visible ? "auto" : "none")};
+
+  :hover {
+    padding: 8px 12px;
+  }
 `;
 
 const HeadingArea = styled.div`