Add import/export buttons and adjust layout accordingly

Author: BartoszKlonowski

app/src/popup/Main.css

@@ -11,9 +11,9 @@ html, body {
 .panel-session-name {
   display: flex;
   flex-direction: column;
-  height: 50;
-  justify-content: center;
-  margin-top: 15px;
+  height: 100%;
+  margin-top: 20px;
+  justify-content: space-around;
 }
 
 a {
@@ -92,7 +92,7 @@ form {
 }
 
 .sessions-list-container {
-  height: 145px;
+  height: 180px;
   width: 250px;
   flex-direction: column;
   list-style: none;
@@ -140,6 +140,13 @@ form {
   width: 25px;
 }
 
+.import-export-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
 textarea:focus, input:focus{
   outline: none;
 }

app/src/popup/components/Popup.js

@@ -62,6 +62,10 @@ export class Popup extends React.Component {
                         icon="reopen"
                         disabled={!this.state.sessionExists}
                     />
+                    <div className="import-export-container">
+                        <ActionButton name="fromOpenButton" text="FROMOPEN" icon="from-file" disabled={false} />
+                        <ActionButton name="toOpenButton" text="TOOPEN" icon="to-file" disabled={false} />
+                    </div>
                 </div>
             </form>
         );