diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
index e0bdfb30b8..5d6650e7b2 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx
@@ -3,6 +3,10 @@ import ObjectID from "bson-objectid";
import { ChangeEvent, useRef } from "react";
import { Button } from "@webstudio-is/design-system";
import { Asset, UploadingAsset } from "@webstudio-is/asset-uploader";
+import { UploadIcon } from "@webstudio-is/icons";
+import { Box } from "@webstudio-is/design-system";
+import { Flex } from "@webstudio-is/design-system";
+import { Text } from "@webstudio-is/design-system";
const readImages = async (fileList: FileList) => {
const images = [];
@@ -61,8 +65,12 @@ export const AddAnAssetForm = ({
variant="blue"
type="button"
onClick={() => inputRef?.current?.click()}
+ size={2}
>
- Upload Image
+
+
+ Upload
+
);
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
index d8b05875e5..e57c7603ba 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-manager.tsx
@@ -56,7 +56,11 @@ export const TabContent = ({
onSetActiveTab("none");
}}
/>
-
+
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
index c3666c31a5..7fee61ba3d 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-thumbnail.tsx
@@ -70,6 +70,9 @@ export const AssetThumbnail = (asset: Asset | UploadingAsset) => {
"&:hover button": {
opacity: 1,
+ "path, circle": {
+ stroke: "$slate11",
+ },
},
}}
>
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx
index de28640353..6adb521185 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-tooltip.tsx
@@ -46,8 +46,17 @@ export const AssetTooltip = ({
top: "$1",
right: "$1",
cursor: "pointer",
- color: "$hiContrast",
transition: "opacity 100ms ease",
+
+ "svg path": {
+ fill: "$loContrast",
+ },
+
+ "&:hover": {
+ "svg path, svg circle": {
+ stroke: "$hiContrast",
+ },
+ },
}}
>
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index 01bed7974d..eb0394f82d 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -7,6 +7,7 @@ export const Button = styled("button", {
boxSizing: "border-box",
border: "none",
userSelect: "none",
+ transition: "all 200ms ease-out",
"&::before": {
boxSizing: "border-box",
},
@@ -83,24 +84,24 @@ export const Button = styled("button", {
},
},
blue: {
- backgroundColor: "$blue2",
- boxShadow: "inset 0 0 0 1px $colors$blue7",
- color: "$blue11",
+ backgroundColor: "$blue10",
+ color: "$loContrast",
"@hover": {
"&:hover": {
- boxShadow: "inset 0 0 0 1px $colors$blue8",
+ backgroundColor: "$loContrast",
+ color: "$blue10",
+ boxShadow: "inset 0 0 0 1.5px $colors$blue10",
},
},
"&:active": {
- backgroundColor: "$blue3",
- boxShadow: "inset 0 0 0 1px $colors$blue8",
+ boxShadow: "inset 0 0 0 1.5px $colors$blue8",
},
"&:focus": {
- boxShadow: "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8",
+ boxShadow:
+ "inset 0 0 0 1.5px $colors$blue8, 0 0 0 1.5px $colors$blue8",
},
'&[data-state="open"]': {
- backgroundColor: "$blue4",
- boxShadow: "inset 0 0 0 1px $colors$blue8",
+ boxShadow: "inset 0 0 0 1.5px $colors$blue8",
},
},
green: {
diff --git a/packages/icons/src/gear.tsx b/packages/icons/src/gear.tsx
new file mode 100644
index 0000000000..2891dc56d7
--- /dev/null
+++ b/packages/icons/src/gear.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const GearIcon = React.forwardRef(
+ ({ color = "currentColor", ...props }, forwardedRef) => {
+ return (
+
+ );
+ }
+);
+
+GearIcon.displayName = "GearIcon";
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index cab70530d6..de149e8eda 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -14,3 +14,5 @@ export { AspectRatioIcon } from "./aspect-ratio";
export * from "./cloud";
export { TrashIcon } from "./trash";
export { SizeIcon } from "./size";
+export { UploadIcon } from "./upload";
+export { GearIcon } from "./gear";
diff --git a/packages/icons/src/upload.tsx b/packages/icons/src/upload.tsx
new file mode 100644
index 0000000000..ed7eb93d64
--- /dev/null
+++ b/packages/icons/src/upload.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "./types";
+
+export const UploadIcon = React.forwardRef(
+ ({ color = "currentColor", ...props }, forwardedRef) => {
+ return (
+
+ );
+ }
+);
+
+UploadIcon.displayName = "UploadIcon";