From d9c50e4adebe1d9e89091f47764d81bb39390ee7 Mon Sep 17 00:00:00 2001
From: kreafox <krisztina.n.elekes@gmail.com>
Date: Wed, 7 Oct 2020 13:34:01 +0300
Subject: [PATCH] Fix icons styling

---
 src/StyleWrapper/StyleWrapperView.jsx |  2 +-
 src/Widgets/Size.jsx                  | 12 ++++++-----
 src/Widgets/TextAlign.jsx             | 30 ++++++++++++++-------------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
index 0e976b7..7fe7fea 100644
--- 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
index d1886c9..1d5a6b2 100644
--- 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
index 7bbf6dd..9740272 100644
--- 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>
   );
 };