Fix icons styling

eea · Oct 7, 2020 · d9c50e4 · d9c50e4
1 parent 65945e5
commit d9c50e4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -28,7 +28,7 @@ export default (props) => {
         'block align',
         style?.cssClass,
         {
-          center: !Boolean(align),
+          left: !Boolean(align),
         },
         align,
       )}

diff --git a/src/Widgets/Size.jsx b/src/Widgets/Size.jsx
@@ -15,11 +15,13 @@ const SizeWidget = (props) => {
   const { id, onChange, value } = props;
   return (
     <FormFieldWrapper {...props}>
-      <ImageSizeWidget
-        onChangeBlock={(id, { size }) => onChange(id, size)}
-        data={{ size: value }}
-        block={id}
-      />
+      <div className="align-tools">
+        <ImageSizeWidget
+          onChangeBlock={(id, { size }) => onChange(id, size)}
+          data={{ size: value }}
+          block={id}
+        />
+      </div>
     </FormFieldWrapper>
   );
 };

diff --git a/src/Widgets/TextAlign.jsx b/src/Widgets/TextAlign.jsx
@@ -18,22 +18,24 @@ export default (props) => {
   const { value, onChange, id } = props;
   return (
     <FormFieldWrapper {...props}>
-      <Button.Group>
+      <div className="align-tools">
         {VALUE_MAP.map(([name, icon]) => (
-          <Button
-            icon
-            basic
-            compact
-            active={value === name}
-            aria-label={name}
-            onClick={() => {
-              onChange(id, name);
-            }}
-          >
-            <Icon name={icon} size="24px" />
-          </Button>
+          <Button.Group>
+            <Button
+              icon
+              basic
+              compact
+              active={value === name}
+              aria-label={name}
+              onClick={() => {
+                onChange(id, name);
+              }}
+            >
+              <Icon name={icon} size="24px" />
+            </Button>
+          </Button.Group>
         ))}
-      </Button.Group>
+      </div>
     </FormFieldWrapper>
   );
 };