Buttons styles

pioneer/packages/joy-forum/src/EditCategory.tsx

@@ -152,7 +152,7 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='description' name='description' disabled={isSubmitting} rows={3} placeholder={`Describe your ${categoryWord}. You can use Markdown.`} />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
           label={isNew

pioneer/packages/joy-forum/src/EditReply.tsx

@@ -122,7 +122,7 @@ const InnerForm = (props: FormProps) => {
 
       <LabelledField {...props}>
         <FormActionsContainer>
-          <div>
+          <div style={{ display: 'flex' }}>
             <TxButton
               type='submit'
               label={isNew

pioneer/packages/joy-forum/src/EditThread.tsx

@@ -183,7 +183,7 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='text' name='text' disabled={isSubmitting} rows={5} placeholder='Type here. You can use Markdown.' />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
           label={isNew

pioneer/packages/joy-forum/src/ForumSudo.tsx

@@ -112,7 +112,7 @@ const InnerForm = (props: FormProps) => {
         <Field component={SudoInputAddress} id='sudo' name='sudo' disabled={isSubmitting} />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
           label={isNotSet

pioneer/packages/joy-forum/src/Moderate.tsx

@@ -104,7 +104,7 @@ const InnerForm = (props: FormProps) => {
         <Field component='textarea' id='rationale' name='rationale' disabled={isSubmitting} rows={5} placeholder='Type a retionale here. You can use Markdown.' />
       </LabelledField>
 
-      <LabelledField {...props}>
+      <LabelledField {...props} flex>
         <TxButton
           type='submit'
           label={'Moderate'}

pioneer/packages/joy-media/src/channels/EditChannel.tsx

@@ -179,7 +179,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
         {formFields()}
 
-        <LabelledField style={{ marginTop: '1rem' }} {...props}>
+        <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
           {renderMainButton()}
           <Button
             type='button'

pioneer/packages/joy-media/src/music/EditMusicAlbum.tsx

@@ -147,7 +147,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
       {tabs}
 
-      <LabelledField style={{ marginTop: '1rem' }} {...props}>
+      <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
         {renderMainButton()}
         <Button
           type='button'

pioneer/packages/joy-media/src/upload/UploadVideo.tsx

@@ -417,7 +417,7 @@ const InnerForm = (props: MediaFormProps<OuterProps, FormValues>) => {
 
     <Form className='ui form JoyForm EditMetaForm'>
       {tabs}
-      <LabelledField style={{ marginTop: '1rem' }} {...props}>
+      <LabelledField style={{ marginTop: '1rem' }} {...props} flex>
         {!entity
           ? renderTransactionButton()
           : renderUpdateEntityButton()

pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx

@@ -86,7 +86,7 @@ const DiscussionPostFormInner = (props: InnerProps) => {
           rows={5}
           placeholder='Content of the post...' />
       </LabelledField>
-      <LabelledField invisibleLabel {...props}>
+      <LabelledField invisibleLabel {...props} flex>
         <TxButton
           type='submit'
           label={isEditForm ? 'Update' : 'Add Post'}

pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx

@@ -76,9 +76,6 @@ const StyledGenericProposalForm = styled.div`
 
   .form-buttons {
     display: flex;
-    button {
-      margin-right: 0.5em;
-    }
   }
 
   .ui.dropdown .ui.avatar.image {
@@ -235,15 +232,14 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
               onClick={onTxButtonClick} // This replaces standard submit
             />
           ) : (
-            <Button type='submit' color='blue' loading={isSubmitting}>
+            <Button type='submit' size='large' color='blue' loading={isSubmitting}>
               <Icon name='paper plane' />
               Submit
             </Button>
           )}
 
-          <Button type='button' color='grey' onClick={handleReset}>
-            <Icon name='times' />
-            Clear
+          <Button type='button' size='large' onClick={handleReset}>
+            Reset form
           </Button>
         </div>
       </Form>

pioneer/packages/joy-utils/src/react/components/forms.tsx

@@ -14,6 +14,7 @@ export type LabelledProps<FormValues> = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  flex?: boolean;
   errors: FormikErrors<FormValues>;
   touched: FormikTouched<FormValues>;
   isSubmitting: boolean;
@@ -22,7 +23,7 @@ export type LabelledProps<FormValues> = {
 export function LabelledField<FormValues> () {
   const LabelledFieldInner: React.FunctionComponent<LabelledProps<FormValues>> =
     (props: LabelledProps<FormValues>) => {
-      const { name, label, invisibleLabel = false, tooltip, required = false, touched, errors, children, style } = props;
+      const { name, label, invisibleLabel = false, tooltip, required = false, touched, errors, children, style, flex } = props;
 
       const hasError = name && touched[name] && errors[name];
 
@@ -30,7 +31,7 @@ export function LabelledField<FormValues> () {
 
       const fieldWithError =
         <>
-          <div>{children}</div>
+          <div style={{ display: flex ? 'flex' : 'block' }}>{children}</div>
           {name && hasError && <div className='ui pointing red label'>{errors[name]}</div>}
         </>;