From 15daa47b1fe80a2bfb2cfb66474aeeff38e8090d Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 18 Apr 2024 11:21:22 +0200
Subject: [PATCH] fix: Make colon in advanced section look more aligned (#3196)

## Description

<img width="233" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/e4368482-cce2-4784-b0bf-d65a30cde9ff">

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 .../panels/pages/custom-metadata.tsx            |  2 +-
 .../sidebar-left/panels/pages/page-settings.tsx |  4 ++--
 .../style-panel/sections/advanced/advanced.tsx  |  4 ++--
 .../app/builder/features/topbar/add-domain.tsx  |  2 +-
 .../src/components/label.stories.tsx            |  2 +-
 packages/design-system/src/components/label.tsx | 17 ++++++-----------
 .../src/components/section-title.tsx            |  4 ++--
 7 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/apps/builder/app/builder/features/sidebar-left/panels/pages/custom-metadata.tsx b/apps/builder/app/builder/features/sidebar-left/panels/pages/custom-metadata.tsx
index c51a4276c3..b5adba6b6b 100644
--- a/apps/builder/app/builder/features/sidebar-left/panels/pages/custom-metadata.tsx
+++ b/apps/builder/app/builder/features/sidebar-left/panels/pages/custom-metadata.tsx
@@ -146,7 +146,7 @@ const MetadataItem = (props: {
 export const CustomMetadata = (props: CustomMetadataProps) => {
   return (
     <Grid gap={2} css={{ my: theme.spacing[5], mx: theme.spacing[8] }}>
-      <Label sectionTitle>Custom Metadata</Label>
+      <Label text="title">Custom Metadata</Label>
       <Text color="subtle">
         Use this section to input metadata for the document, which will be used
         to generate{" "}
diff --git a/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx b/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx
index 153136eb27..a86d110748 100644
--- a/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx
+++ b/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx
@@ -767,7 +767,7 @@ const FormFields = ({
          */}
         <Grid gap={2} css={{ my: theme.spacing[5], mx: theme.spacing[8] }}>
           <Grid gap={2}>
-            <Label sectionTitle>Search</Label>
+            <Label text="title">Search</Label>
             <Text color="subtle">
               Optimize the way this page appears in search engine results pages.
             </Text>
@@ -961,7 +961,7 @@ const FormFields = ({
          * ----------------------========<<<Social Sharing>>>>========----------------------
          */}
         <Grid gap={2} css={{ my: theme.spacing[5], mx: theme.spacing[8] }}>
-          <Label htmlFor={fieldIds.socialImageAssetId} sectionTitle>
+          <Label htmlFor={fieldIds.socialImageAssetId} text="title">
             Social Image
           </Label>
           <Text color="subtle">
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
index 7ad85f34dd..9db4bef928 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState } from "react";
-import { Box, Flex, theme } from "@webstudio-is/design-system";
+import { Box, Flex, Text } from "@webstudio-is/design-system";
 import { properties as propertiesData } from "@webstudio-is/css-data";
 import { useStore } from "@nanostores/react";
 import type { StyleProperty } from "@webstudio-is/css-engine";
@@ -126,7 +126,7 @@ export const Section = ({ currentStyle, ...props }: SectionProps) => {
                 style={currentStyle}
                 onReset={() => deleteProperty(property)}
               />
-              <Box css={{ p: theme.spacing[2], pt: 0 }}>:</Box>
+              <Text>:</Text>
               <CssValueInputContainer
                 variant="chromeless"
                 size="1"
diff --git a/apps/builder/app/builder/features/topbar/add-domain.tsx b/apps/builder/app/builder/features/topbar/add-domain.tsx
index c512e7eda6..8a87a750e2 100644
--- a/apps/builder/app/builder/features/topbar/add-domain.tsx
+++ b/apps/builder/app/builder/features/topbar/add-domain.tsx
@@ -89,7 +89,7 @@ export const AddDomain = ({
       >
         {isOpen && (
           <>
-            <Label htmlFor={id} sectionTitle>
+            <Label htmlFor={id} text="title">
               New Domain
             </Label>
             <InputField
diff --git a/packages/design-system/src/components/label.stories.tsx b/packages/design-system/src/components/label.stories.tsx
index 5608c5f10f..f4affbb127 100644
--- a/packages/design-system/src/components/label.stories.tsx
+++ b/packages/design-system/src/components/label.stories.tsx
@@ -63,7 +63,7 @@ const LabelStory: ComponentStory<typeof Label> = ({
       <StorySection title="Section title">
         <StoryGrid horizontal>
           {colors.map((color) => (
-            <Label key={color} color={color} sectionTitle>
+            <Label key={color} color={color} text="title">
               {color}
             </Label>
           ))}
diff --git a/packages/design-system/src/components/label.tsx b/packages/design-system/src/components/label.tsx
index c48051b32e..366a95fb18 100644
--- a/packages/design-system/src/components/label.tsx
+++ b/packages/design-system/src/components/label.tsx
@@ -29,6 +29,7 @@ const StyledLabel = styled(RadixLabel, {
   boxSizing: "border-box",
   flexShrink: 0,
   py: theme.spacing[1],
+  px: theme.spacing[2],
   border: "1px solid transparent",
   borderRadius: theme.borderRadius[3],
   transition: "200ms color, 200ms background-color",
@@ -57,13 +58,10 @@ const StyledLabel = styled(RadixLabel, {
       default: {
         color: theme.colors.foregroundMain,
         "&:hover": {
-          px: theme.spacing[3],
-          mx: `calc(${theme.spacing[3]} * -1)`,
           backgroundColor: theme.colors.backgroundHover,
         },
       },
       preset: {
-        px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundPresetMain,
         color: theme.colors.foregroundMain,
         "&:hover": {
@@ -71,7 +69,6 @@ const StyledLabel = styled(RadixLabel, {
         },
       },
       local: {
-        px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundLocalMain,
         color: theme.colors.foregroundLocalMain,
         "&:hover": {
@@ -79,7 +76,6 @@ const StyledLabel = styled(RadixLabel, {
         },
       },
       overwritten: {
-        px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundOverwrittenMain,
         color: theme.colors.foregroundOverwrittenMain,
         "&:hover": {
@@ -87,7 +83,6 @@ const StyledLabel = styled(RadixLabel, {
         },
       },
       remote: {
-        px: theme.spacing[3],
         backgroundColor: theme.colors.backgroundRemoteMain,
         color: theme.colors.foregroundRemoteMain,
         "&:hover": {
@@ -104,20 +99,20 @@ const StyledLabel = styled(RadixLabel, {
         flexGrow: 1,
       },
     },
-    sectionTitle: {
-      true: textVariants.titles,
-      false: textVariants.labelsSentenceCase,
+    text: {
+      title: textVariants.titles,
+      sentence: textVariants.labelsSentenceCase,
     },
   },
 
   defaultVariants: {
-    sectionTitle: false,
+    text: "sentence",
   },
 });
 
 type Props = {
   color?: (typeof labelColors)[number];
-  sectionTitle?: boolean;
+  text?: "title" | "sentence";
   disabled?: boolean;
   truncate?: boolean;
   children: ReactNode;
diff --git a/packages/design-system/src/components/section-title.tsx b/packages/design-system/src/components/section-title.tsx
index 7d05dcdc7f..9cea259d67 100644
--- a/packages/design-system/src/components/section-title.tsx
+++ b/packages/design-system/src/components/section-title.tsx
@@ -184,7 +184,7 @@ export const SectionTitleLabel = forwardRef(
       css,
       children,
       ...props
-    }: Omit<ComponentProps<typeof Label>, "truncate" | "sectionTitle">,
+    }: Omit<ComponentProps<typeof Label>, "truncate" | "text">,
     ref: Ref<HTMLLabelElement>
   ) => {
     const { state } = useContext(context);
@@ -198,7 +198,7 @@ export const SectionTitleLabel = forwardRef(
     return (
       <Label
         truncate
-        sectionTitle
+        text="title"
         {...props}
         color={color}
         css={{