added logo to bottom right

Author: ksampias

assets/logo/48x48.png

@@ -60,14 +60,17 @@ body {
   background-color: #6D7984;
 }
 
-.logo {
-  margin: 0 15px 0 12px;
-  height: 2em;
-  width: 2em;
-}
-
 .right-spacer {
   flex: 3;
+  display: flex;
+}
+
+.filler-a {
+  flex: 10;
+}
+
+.filler-b {
+  flex: 1;
 }
 
 .container {
@@ -79,12 +82,27 @@ body {
   height: 100%;
   flex: 3;
   align-self: flex-end;
+  display: flex;
   background-color: white;
   color: #4C5259;
 }
 
 .sortable-tree {
   -webkit-app-region: no-drag;
+  flex: 10;
+}
+
+.logo-container {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+img {
+  padding: 0% 20% 20% 0%;
+  height: 2em;
+  width: 2em;
 }
 
 .form-container {

src/App.css

@@ -124,11 +124,11 @@ class App extends Component {
     return (
       <div className='top-container'>
         <div className='top-spacer'>
-          <div className='left-spacer'>
-            <p>ReactPrimer</p>
-            <img className='logo' src={require('../assets/logo/32x32.png')} alt='logo'></img>
+          <div className='left-spacer' />
+          <div className='right-spacer'>
+            <div className='filler-a' />
+            <div className='filler-b' />
           </div>
-          <div className='right-spacer' />
         </div>
         <div className='container'>
           <NewCompForm
@@ -161,7 +161,10 @@ class App extends Component {
                   ],
                 })}
                 />
-            </div>
+              <div className='logo-container'>
+                <img className='logo' src={require('../assets/logo/48x48.png')} alt='logo'></img>
+              </div>
+          </div>
           </div>
         </div>
       );