Move seconding (#1968)

packages/app-democracy/src/Overview/Proposal.tsx

@@ -59,13 +59,11 @@ function Proposal (props: Props): React.ReactElement<Props> {
       className={className}
       idNumber={idNumber}
       proposal={value}
-      accessory={
-        <Seconding
-          depositors={depositors}
-          proposalId={idNumber}
-        />
-      }
     >
+      <Seconding
+        depositors={depositors}
+        proposalId={idNumber}
+      />
       {renderProposal(props)}
     </ActionItem>
   );

packages/app-democracy/src/Overview/Seconding.tsx

@@ -70,14 +70,14 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
           </Modal.Actions>
         </Modal>
       )}
-      <div className='ui--Row-buttons'>
+      <Button.Group>
         <Button
           isPrimary
           label={t('Second proposal')}
           icon='toggle off'
           onClick={_toggleSeconding}
         />
-      </div>
+      </Button.Group>
     </>
   );
 }

packages/react-components/src/ProposedAction.tsx

@@ -41,7 +41,7 @@ export const styles = `
 `;
 
 function ProposedAction (props: Props): React.ReactElement<Props> {
-  const { asInset, insetProps, isCollapsible, proposal, withLinks, expandNested } = props;
+  const { className, asInset, insetProps, isCollapsible, proposal, withLinks, expandNested } = props;
   const idNumber = typeof props.idNumber === 'string'
     ? props.idNumber
     : formatNumber(props.idNumber);
@@ -94,7 +94,7 @@ function ProposedAction (props: Props): React.ReactElement<Props> {
   }
 
   return (
-    <>
+    <div className={className}>
       <h3>{header}</h3>
       {isCollapsible
         ? (
@@ -111,7 +111,7 @@ function ProposedAction (props: Props): React.ReactElement<Props> {
             {params}
           </>
         )}
-    </>
+    </div>
   );
 }