feat: reversed buttons & fixed styling issues (#172)

Author: adascaliteiradu

src/components/form/form.js

@@ -231,11 +231,11 @@ export const Form = ({ data, evaluateForm, onFinishingForm }) => {
       <div>
         {questionView()}
         <div className="level action-buttons">
-          <div className="level-left">
+          <div className="level-left">{data.form && restartButton()}</div>
+          <div className="level-right">
             {currentNode > FIRST_NODE && goBackButton()}
             {areThereQuestionsLeft() && goForwardButton()}
           </div>
-          <div className="level-right">{data.form && restartButton()}</div>
         </div>
       </div>
     );

src/components/form/form.scss

@@ -11,8 +11,8 @@
 @media (max-width: 768px) {
   .action-buttons {
     padding: 0;
-    .level-left {
-      margin-top: 1.5rem;
+    .level-right {
+      margin-top: 0;
       display: flex;
 
       .level-item {

src/components/form/staticText.js

@@ -1,16 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "./form.scss";
+import { List } from "../list/list";
 import { ListHeader } from "../list-header/list-header";
 import { ListItem } from "../list-item/list-item";
 
 function StaticText({ title, description }) {
   return (
     <div>
       <ListHeader title={title} />
-      <div>
+      <List>
         <ListItem nonOption={true} title={description} />
-      </div>
+      </List>
     </div>
   );
 }