experimental: add more hints about css variables (#4282)

Ref #3399 Added a few hints ![Screenshot 2024-10-14 at 16 12 07](https://github.com/user-attachments/assets/4a7cf0f8-9cd1-408a-9c16-6cb6c8d77970) ![Screenshot 2024-10-14 at 16 08 04](https://github.com/user-attachments/assets/7d4be8b3-596a-4d07-9761-0677f1acd40b) ![Screenshot 2024-10-14 at 16 07 56](https://github.com/user-attachments/assets/73facdda-724c-4ef8-935e-69cbd0775d6c)
webstudio-is · Oct 14, 2024 · 0e71255 · 0e71255
1 parent 11f5450
commit 0e71255
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx b/apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx
@@ -10,6 +10,7 @@ import {
   ScrollArea,
   SmallIconButton,
   styled,
+  Text,
   theme,
   toast,
   Tooltip,
@@ -26,7 +27,11 @@ import {
   WsComponentMeta,
 } from "@webstudio-is/react-sdk";
 import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
-import { EyeconClosedIcon, EyeconOpenIcon } from "@webstudio-is/icons";
+import {
+  EyeconClosedIcon,
+  EyeconOpenIcon,
+  InfoCircleIcon,
+} from "@webstudio-is/icons";
 import {
   $dragAndDropState,
   $editingItemSelector,
@@ -476,6 +481,21 @@ export const NavigatorTree = () => {
               onClick: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
               onFocus: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
             }}
+            action={
+              <Tooltip
+                variant="wrapped"
+                side="bottom"
+                disableHoverableContent={true}
+                content={
+                  <Text>
+                    Variables defined on Global Root are available on every
+                    instance on every page.
+                  </Text>
+                }
+              >
+                <InfoCircleIcon />
+              </Tooltip>
+            }
           >
             <TreeNodeLabel prefix={<MetaIcon icon={rootMeta.icon} />}>
               {rootMeta.label}

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -157,7 +157,7 @@ const AdvancedSearch = ({
       itemToString={(item) => item?.label ?? ""}
       getItemProps={() => ({ text: "sentence" })}
       getDescription={(item) => {
-        let description = `Unknown CSS property.`;
+        let description = `Create CSS variable.`;
         if (item && item.value in propertyDescriptions) {
           description =
             propertyDescriptions[
@@ -201,7 +201,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
       }}
       content={
         <PropertyInfo
-          title={label}
+          title={property.startsWith("--") ? "CSS Variable" : label}
           description={description}
           styles={[styleDecl]}
           onReset={() => {