Cosmetics

eea · Nov 9, 2020 · 38dd486 · 38dd486
1 parent e4a5c66
commit 38dd486
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx
@@ -64,16 +64,16 @@ const Edit = (props) => {
   };
   const counterComponent = 
     (props.data.maxChars ?
-      (<p style={counterStyle}>
+      (<p style={counterStyle} className="counter">
         {
           props.data.maxChars ?
             props.data.maxChars - charCount < 0 ?
             (<>
-              {`${charCount - props.data.maxChars} characters over the limit`}
+              <span>{`${charCount - props.data.maxChars} characters over the limit`}</span>
               <Icon name={dissatisfiedSVG} size="24px" />
             </>) :
             (<>
-              {`${props.data.maxChars - charCount } characters remaining out of ${props.data.maxChars}`}
+              <span>{`${props.data.maxChars - charCount } characters remaining out of ${props.data.maxChars}`}</span>
               <Icon name={delightedSVG} size="24px" />
             </>) :
             charCount

diff --git a/src/components/manage/Blocks/Group/Schema.js b/src/components/manage/Blocks/Group/Schema.js
@@ -56,6 +56,7 @@ const Schema = {
       title: 'Maximum Characters',
       description: "The maximum number of characters.",
       type: 'integer',
+      factory: "Integer",
     },
     required: {
       title: 'Required',

diff --git a/src/components/manage/Blocks/Group/editor.less b/src/components/manage/Blocks/Group/editor.less
@@ -13,4 +13,11 @@
         padding-top: 1rem;
         padding-bottom: .1rem;
     }
+    .counter {
+        display: grid;
+        grid-template-columns: 98% auto;
+        grid-gap: .5em;
+        align-items: center;
+        font-size: 85%;
+    }
 }