From f7fd587db93f62edb20613adff41226db7a8d399 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 15 Aug 2022 14:03:32 +0200
Subject: [PATCH 1/2] add header to assets

---
 .../sidebar-left/panels/asset-manager.tsx     | 32 ++++++++++++-------
 .../panels/components/add-an-asset-form.tsx   |  6 +++-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx
index 82d0e7f4d7..1cf4ecffb6 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx
@@ -5,7 +5,8 @@ import { useActionData } from "@remix-run/react";
 import { AssetManagerThumbnail } from "./components/thumbnail";
 
 import { AddAnAssetForm } from "./components/add-an-asset-form";
-import { Asset } from "../types";
+import { Asset, TabName } from "../types";
+import { Header } from "../lib/header";
 
 export const useAssetsState = (baseAssets: Array<Asset>) => {
   const imageChanges = useActionData();
@@ -41,22 +42,31 @@ export const useAssetsState = (baseAssets: Array<Asset>) => {
 
 export const TabContent = ({
   assets: baseAssets,
+  onSetActiveTab,
 }: {
+  onSetActiveTab: (tabName: TabName) => void;
   assets: Array<Asset>;
 }) => {
   const { assets, onUploadAsset } = useAssetsState(baseAssets);
   return (
-    <Flex gap="3" direction="column" css={{ padding: "$1" }}>
-      <Flex justify="between" align="center">
-        <Heading>Assets</Heading>
-        <AddAnAssetForm onSubmit={onUploadAsset} />
+    <>
+      <Header
+        title="Assets"
+        onClose={() => {
+          onSetActiveTab("none");
+        }}
+      />
+      <Flex gap="3" direction="column" css={{ padding: "$1" }}>
+        <Flex justify="end">
+          <AddAnAssetForm onSubmit={onUploadAsset} />
+        </Flex>
+        <Grid columns={2} gap={2}>
+          {assets.map((asset) => (
+            <AssetManagerThumbnail key={asset.id} {...asset} />
+          ))}
+        </Grid>
       </Flex>
-      <Grid columns={2} gap={2}>
-        {assets.map((asset) => (
-          <AssetManagerThumbnail key={asset.id} {...asset} />
-        ))}
-      </Grid>
-    </Flex>
+    </>
   );
 };
 
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx
index ebf8f82f81..7cde03d2b7 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx
@@ -58,7 +58,11 @@ export const AddAnAssetForm = ({
         ref={inputRef}
         style={{ display: "none" }}
       />
-      <Button type="button" onClick={() => inputRef?.current?.click()}>
+      <Button
+        variant="blue"
+        type="button"
+        onClick={() => inputRef?.current?.click()}
+      >
         Upload Image
       </Button>
     </Form>

From f3d8f2a1b7c38f559c23bffccc19b3fa57faae3a Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 15 Aug 2022 14:07:35 +0200
Subject: [PATCH 2/2] move files

---
 .../{components => asset-manager}/add-an-asset-form.tsx      | 0
 .../features/sidebar-left/panels/asset-manager/index.ts      | 2 ++
 .../panels/{components => asset-manager}/thumbnail.tsx       | 0
 .../{components => asset-manager}/uploading-animation.tsx    | 0
 .../sidebar-left/panels/{asset-manager.tsx => assets.tsx}    | 5 ++---
 .../app/designer/features/sidebar-left/panels/index.ts       | 2 +-
 6 files changed, 5 insertions(+), 4 deletions(-)
 rename apps/designer/app/designer/features/sidebar-left/panels/{components => asset-manager}/add-an-asset-form.tsx (100%)
 create mode 100644 apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts
 rename apps/designer/app/designer/features/sidebar-left/panels/{components => asset-manager}/thumbnail.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{components => asset-manager}/uploading-animation.tsx (100%)
 rename apps/designer/app/designer/features/sidebar-left/panels/{asset-manager.tsx => assets.tsx} (90%)

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts
new file mode 100644
index 0000000000..08bac23073
--- /dev/null
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts
@@ -0,0 +1,2 @@
+export * from "./add-an-asset-form";
+export * from "./thumbnail";
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/uploading-animation.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/uploading-animation.tsx
similarity index 100%
rename from apps/designer/app/designer/features/sidebar-left/panels/components/uploading-animation.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/asset-manager/uploading-animation.tsx
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/assets.tsx
similarity index 90%
rename from apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx
rename to apps/designer/app/designer/features/sidebar-left/panels/assets.tsx
index 1cf4ecffb6..77463386cb 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/assets.tsx
@@ -1,10 +1,9 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { Flex, Grid, Heading } from "@webstudio-is/design-system";
+import { Flex, Grid } from "@webstudio-is/design-system";
 import { useEffect, useState } from "react";
 import { useActionData } from "@remix-run/react";
-import { AssetManagerThumbnail } from "./components/thumbnail";
+import { AssetManagerThumbnail, AddAnAssetForm } from "./asset-manager";
 
-import { AddAnAssetForm } from "./components/add-an-asset-form";
 import { Asset, TabName } from "../types";
 import { Header } from "../lib/header";
 
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/index.ts b/apps/designer/app/designer/features/sidebar-left/panels/index.ts
index ae8625e821..cd3ca14046 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/index.ts
+++ b/apps/designer/app/designer/features/sidebar-left/panels/index.ts
@@ -1,5 +1,5 @@
 import * as components from "./components";
 import * as navigator from "./navigator";
-import * as assetManager from "./asset-manager";
+import * as assetManager from "./assets";
 
 export const panels = { components, navigator, assetManager } as const;