From 79fd0d3842233e7f9df3345cffacbf2d27e14bad Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Wed, 31 Aug 2022 15:10:35 +0300
Subject: [PATCH] fix button color

---
 apps/designer/app/designer/designer.tsx       | 34 +++++++++----------
 .../panels/asset-manager/asset-info.tsx       |  4 +--
 .../design-system/src/components/button.tsx   |  2 +-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index 586a7218ef..da6d5b07e9 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -1,10 +1,11 @@
 import { useCallback } from "react";
-import {
-  useSubscribe,
-  usePublish,
-  type Publish,
-} from "@webstudio-is/react-sdk";
+import { useSubscribe, usePublish, type Publish } from "~/shared/pubsub";
+import { type Project } from "@webstudio-is/prisma-client";
 import type { Config } from "~/config";
+import type {
+  HoveredInstanceData,
+  SelectedInstanceData,
+} from "~/shared/canvas-components";
 import { Box, Flex, Grid, type CSS } from "@webstudio-is/design-system";
 import interStyles from "~/shared/font-faces/inter.css";
 import { SidebarLeft } from "./features/sidebar-left";
@@ -28,6 +29,7 @@ import {
   CanvasIframe,
 } from "./features/workspace";
 import { usePublishShortcuts } from "./shared/shortcuts";
+import { type SyncStatus } from "~/shared/sync";
 import {
   useIsPreviewMode,
   useRootInstance,
@@ -36,7 +38,6 @@ import {
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
 import { PANEL_WIDTH } from "./shared/constants";
-import * as db from "~/shared/db";
 
 export const links = () => {
   return [
@@ -47,22 +48,25 @@ export const links = () => {
 
 const useSubscribeRootInstance = () => {
   const [, setValue] = useRootInstance();
-  useSubscribe("loadRootInstance", setValue);
+  useSubscribe<"loadRootInstance">("loadRootInstance", setValue);
 };
 
 const useSubscribeSelectedInstanceData = () => {
   const [, setValue] = useSelectedInstanceData();
-  useSubscribe("selectInstance", setValue);
+  useSubscribe<"selectInstance", SelectedInstanceData>(
+    "selectInstance",
+    setValue
+  );
 };
 
 const useSubscribeHoveredInstanceData = () => {
   const [, setValue] = useHoveredInstanceData();
-  useSubscribe("hoverInstance", setValue);
+  useSubscribe<"hoverInstance", HoveredInstanceData>("hoverInstance", setValue);
 };
 
 const useSubscribeSyncStatus = () => {
   const [, setValue] = useSyncStatus();
-  useSubscribe("syncStatus", setValue);
+  useSubscribe<"syncStatus", SyncStatus>("syncStatus", setValue);
 };
 
 const useNavigatorLayout = () => {
@@ -202,13 +206,7 @@ const NavigatorPanel = ({ publish, isPreviewMode }: NavigatorPanelProps) => {
 
   return (
     <SidePanel gridArea="navigator" isPreviewMode={isPreviewMode}>
-      <Box
-        css={{
-          borderRight: "1px solid $slate7",
-          width: PANEL_WIDTH,
-          height: "100%",
-        }}
-      >
+      <Box css={{ borderRight: "1px solid $slate7", width: PANEL_WIDTH }}>
         <Navigator publish={publish} isClosable={false} />
       </Box>
     </SidePanel>
@@ -217,7 +215,7 @@ const NavigatorPanel = ({ publish, isPreviewMode }: NavigatorPanelProps) => {
 
 type DesignerProps = {
   config: Config;
-  project: db.project.Project;
+  project: Project;
 };
 
 export const Designer = ({ config, project }: DesignerProps) => {
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
index 7c2ce184f3..e6ba92fc23 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
@@ -74,7 +74,7 @@ export const AssetInfo = ({
     <>
       <Header title="Asset Details" onClose={onClose} />
       <Box css={{ p: "$2 $3" }}>
-        <Grid columns={2} align="center">
+        <Grid columns={2} align="center" gap={2}>
           <Box css={{ width: 100 }}>
             <Filename name={name} />
           </Box>
@@ -85,7 +85,7 @@ export const AssetInfo = ({
         </Grid>
       </Box>
       <Box css={{ p: "$2 $3" }}>
-        <Grid columns={2}>
+        <Grid columns={2} gap={2} align="center">
           <Flex align="center" css={{ gap: "$1" }}>
             <SizeIcon />
             <Text variant="label">
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index 19c85ef6d3..997902f82e 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -126,7 +126,7 @@ export const Button = styled("button", {
       },
       red: {
         backgroundColor: "$loContrast",
-        boxShadow: "inset 0 0 0 1px $colors$slate7",
+        boxShadow: "inset 0 0 0 1px $colors$red11",
         color: "$red11",
         "@hover": {
           "&:hover": {