Decrease size of buttons and align color input

sass/common/colors.scss

@@ -11,6 +11,7 @@ $gray-060: #3e3e3e;
 $gray-070: #484848;
 $gray-080: #525252;
 $gray-090: #5c5c5c;
+$gray-095: #605e5c;
 $gray-100: #676767;
 $gray-110: #717171;
 $gray-120: #7c7c7c;

sass/components/canvas/attribute_editor.scss

@@ -1033,13 +1033,13 @@
           border-radius: 2px;
           flex-shrink: 0;
           display: inline-block;
-          width: $line-height - 4px;
-          height: $line-height - 4px;
+          width: $line-height - 2px;
+          height: $line-height - 2px;
           vertical-align: top;
           margin: 5px;
           margin-right: 8px;
           margin-top: 34px;
-          border: 1px solid $gray-080;
+          border: 1px solid $gray-095;
         }
       }
 
@@ -1708,16 +1708,20 @@
           flex-direction: row;
 
           .el-color-item {
+            $border-width: 1px;
             cursor: pointer;
             border-radius: 2px;
             flex-shrink: 0;
             display: inline-block;
-            width: $line-height;
-            height: $line-height;
+            width: $line-height - $border-width - $border-width;
+            height: $line-height - $border-width - $border-width;
+            max-width: $line-height - $border-width - $border-width;
+            max-height: $line-height - $border-width - $border-width;
             vertical-align: top;
-            margin-top: 23px;
+            margin-top: 24px;
             margin-left: 8px;
             border: 1px solid $gray-200;
+            border-radius: 2px;
           }
         }
 

src/app/views/fluentui_tool_bar.tsx

@@ -29,6 +29,7 @@ import {
 } from "@fluentui/react";
 import { getSVGIcon } from "../resources";
 import { EditorType } from "../stores/app_store";
+import { defultBindButtonSize } from "./panels/widgets/controls/fluentui_customized_components";
 const theme = getTheme();
 
 export const FluentUIToolbar: React.FC<{
@@ -733,9 +734,6 @@ export class MultiObjectButton extends ContextedComponent<
         }}
       >
         <IconButton
-          style={{
-            stroke: theme.palette.themePrimary,
-          }}
           split={true}
           menuProps={{
             items: this.props.tools.map((tool, index) => {

src/app/views/panels/widgets/controls/collapsiblePanel.tsx

@@ -72,6 +72,7 @@ export const CollapsiblePanel: React.FunctionComponent<{
         compact={true}
         styles={{
           ...groupStyles,
+          groupIsDropping: {},
         }}
       />
     </FluentGroupedList>

src/app/views/panels/widgets/controls/fluentui_customized_components.tsx

@@ -10,17 +10,14 @@ import {
   IGroupHeaderStyles,
   ILabelStyles,
   IRenderFunction,
-  IStyle,
   IStyleFunctionOrObject,
   ITextFieldProps,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
   Label,
 } from "@fluentui/react";
 import styled from "styled-components";
 
 export const FluentButton = styled.div<{ marginTop?: string }>`
-  margin-top: ${({ marginTop }) => marginTop || "24px"};
+  margin-top: ${({ marginTop }) => marginTop || "23.5px"};
   display: inline-block;
   padding: 0px 4px 0px 0px;
   button {
@@ -90,7 +87,7 @@ export const NestedChartButtonsWrapper = styled.div`
 
 export const FluentGroupedList = styled.div`
   .charticulator__widget-collapsible-panel-item {
-    margin-left: 15px;
+    margin-left: 25px;
     margin-right: 15px;
     min-width: 270px;
   }
@@ -98,6 +95,10 @@ export const FluentGroupedList = styled.div`
   .ms-List-surface .ms-List-cell .ms-List-cell:last-child {
     margin-bottom: 5px;
   }
+
+  .ms-List-surface .ms-List-cell .ms-List-cell\ {
+    min-height: 24px;
+  }
 `;
 
 export const defultBindButtonSize = {

src/app/views/panels/widgets/fluentui_manager.tsx

@@ -582,6 +582,12 @@ export class FluentUIWidgetManager
                 style={{
                   stroke: `${theme.palette.themePrimary} !important`,
                 }}
+                styles={{
+                  label: null,
+                  root: {
+                    ...defultBindButtonSize,
+                  },
+                }}
                 title={options.labels[index]}
                 checked={option === (this.getPropertyValue(property) as string)}
                 onClick={() => {
@@ -613,6 +619,9 @@ export class FluentUIWidgetManager
                 label={options.label}
                 styles={{
                   label: defaultLabelStyle,
+                  root: {
+                    ...defultComponentsHeight,
+                  },
                 }}
                 onChange={(event, v) => {
                   this.emitSetProperty(property, v);
@@ -632,7 +641,11 @@ export class FluentUIWidgetManager
             title={options.label}
             label={options.label}
             styles={{
+              ...defultBindButtonSize,
               label: defaultLabelStyle,
+              root: {
+                ...defultBindButtonSize,
+              },
             }}
             text={options.label}
             ariaLabel={options.label}
@@ -887,6 +900,12 @@ export class FluentUIWidgetManager
       >
         <FluentButton marginTop={"0px"}>
           <IconButton
+            styles={{
+              root: {
+                ...defultBindButtonSize,
+              },
+              label: null,
+            }}
             key={property.property}
             checked={this.getPropertyValue(property) != null}
             iconProps={{