Alignment Icons and Disabled Control State (#6459)

We currently use the same icons in the new inspector controls for
alignment, for both absolute elements and elements inside layouts. The
new design proposal is to use a slightly different icon in those
controls when a a flex child or grid child is selected, so you can
anticipate that it will be setting justifySelf or alignSelf, not top and
left.

To prepare for this:

- I'm uploading new icons to use for justify/alignSelf for grid and flex
children
- renaming the existing icons to a more appropriate "justify" and
"align", and updating the names of their instances in code
- adjusting the chain control component to have a visible disabled state

<img width="892" alt="Screenshot 2024-10-02 at 5 05 14 PM"
src="https://github.com/user-attachments/assets/b48d214d-4da0-48ef-916e-92a632f18da6">

When options are disabled, they will look like the ones on the right:

![02-29-iyzv3-qjigv](https://github.com/user-attachments/assets/cb9a24bb-1d81-433b-91bd-312d5b9ceec1)

---------

Co-authored-by: Federico Ruggi <1081051+ruggi@users.noreply.github.com>

editor/src/components/inspector/alignment-buttons.tsx

@@ -184,19 +184,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'left',
-            icon: { category: 'inspector', type: 'justifySelf-start' },
+            icon: { category: 'inspector', type: 'justify-start' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'hcenter',
-            icon: { category: 'inspector', type: 'justifySelf-center' },
+            icon: { category: 'inspector', type: 'justify-center' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'right',
-            icon: { category: 'inspector', type: 'justifySelf-end' },
+            icon: { category: 'inspector', type: 'justify-end' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
@@ -213,19 +213,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'top',
-            icon: { category: 'inspector', type: 'alignSelf-start' },
+            icon: { category: 'inspector', type: 'align-start' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'vcenter',
-            icon: { category: 'inspector', type: 'alignSelf-center' },
+            icon: { category: 'inspector', type: 'align-center' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'bottom',
-            icon: { category: 'inspector', type: 'alignSelf-end' },
+            icon: { category: 'inspector', type: 'align-end' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },

editor/src/components/inspector/controls/option-chain-control.tsx

@@ -90,6 +90,7 @@ export const OptionChainControl: React.FunctionComponent<
               icon: option.icon,
               iconComponent: option.iconComponent,
               labelInner: option.label,
+              disabled: option.disabled,
             }}
             value={props.value === option.value}
             // eslint-disable-next-line react/jsx-no-bind

editor/src/components/inspector/controls/option-control.tsx

@@ -15,6 +15,7 @@ export interface DEPRECATEDOptionControlOptions extends DEPRECATEDGenericControl
   tooltip?: string
   width?: number
   height?: number
+  disabled?: boolean
 }
 
 export const OptionControl: React.FunctionComponent<
@@ -101,26 +102,26 @@ export const OptionControl: React.FunctionComponent<
               isChecked && props.controlStatus === 'overridden'
                 ? colorTheme.brandNeonPink.value
                 : colorTheme.fg1.value,
-            filter: props.controlStatus == 'disabled' ? 'grayscale(0)' : undefined,
-            opacity: props.controlStatus == 'disabled' ? undefined : isChecked ? 1 : 0.4,
+            filter: props.controlStatus === 'disabled' ? 'grayscale(0)' : undefined,
+            opacity: props.controlStatus === 'disabled' ? undefined : isChecked ? 1 : 0.7,
             // If part of a option chain control:
             '.option-chain-control-container &': {
               boxShadow: 'none !important',
               borderRadius: 2,
-              opacity: isChecked ? 1 : 0.4,
+              opacity: controlOptions.disabled ? 0.2 : isChecked ? 1 : 0.7,
               '&:hover': {
-                opacity: props.controlStatus == 'disabled' ? undefined : 1,
+                opacity: controlOptions.disabled ? undefined : 1,
                 color:
                   isChecked && props.controlStatus === 'overridden'
                     ? colorTheme.brandNeonPink.value
                     : colorTheme.fg1.value,
               },
             },
             '&:hover': {
-              opacity: props.controlStatus == 'disabled' ? undefined : 1,
+              opacity: props.controlStatus === 'disabled' ? undefined : 1,
             },
             '.control-option-icon-component': {
-              opacity: 0.4,
+              opacity: 0.7,
             },
             '&:hover .control-option-icon-component': {
               opacity: 1,