Moved shlink versions component to main container

src/common/MenuLayout.js

@@ -17,7 +17,7 @@ const propTypes = {
   selectedServer: serverType,
 };
 
-const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) => {
+const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions) => {
   const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
     const [ showSideBar, setShowSidebar ] = useState(false);
 
@@ -61,7 +61,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
           <div className="row menu-layout__swipeable-inner">
             <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
             <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
-              <div className="shlink-container">
+              <div className="menu-layout__container">
                 <Switch>
                   <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
                   <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
@@ -72,6 +72,10 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
                   />
                 </Switch>
               </div>
+
+              <div className="menu-layout__footer text-center text-md-right">
+                <ShlinkVersions />
+              </div>
             </div>
           </div>
         </Swipeable>

src/common/MenuLayout.scss

@@ -32,3 +32,26 @@
 .menu-layout__burger-icon--active {
   color: white;
 }
+
+$footer-height: 2.3rem;
+$footer-margin: .8rem;
+
+.menu-layout__container {
+  padding: 20px 0 ($footer-height + $footer-margin);
+  min-height: 100%;
+  margin-bottom: -($footer-height + $footer-margin);
+
+  @media (min-width: $mdMin) {
+    padding: 30px 15px ($footer-height + $footer-margin);
+  }
+}
+
+.menu-layout__footer {
+  height: $footer-height;
+  margin-top: $footer-margin;
+  padding: 0;
+
+  @media (min-width: $mdMin) {
+    padding: 0 15px;
+  }
+}

src/common/services/provideServices.js

@@ -26,7 +26,8 @@ const provideServices = (bottle, connect, withRouter) => {
     'ShortUrls',
     'AsideMenu',
     'CreateShortUrl',
-    'ShortUrlVisits'
+    'ShortUrlVisits',
+    'ShlinkVersions'
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   bottle.decorator('MenuLayout', withRouter);

src/index.scss

@@ -28,14 +28,6 @@ body,
   color: inherit !important;
 }
 
-.shlink-container {
-  padding: 20px 0;
-
-  @media (min-width: $mdMin) {
-    padding: 30px 15px;
-  }
-}
-
 .badge-main {
   color: #fff;
   background-color: $mainColor;

src/servers/DeleteServerButton.js

@@ -9,7 +9,7 @@ const propTypes = {
   className: PropTypes.string,
 };
 
-const DeleteServerButton = (DeleteServerModal, ShlinkVersions) => {
+const DeleteServerButton = (DeleteServerModal) => {
   const DeleteServerButtonComp = ({ server, className }) => {
     const [ isModalOpen, setModalOpen ] = useState(false);
 
@@ -20,8 +20,6 @@ const DeleteServerButton = (DeleteServerModal, ShlinkVersions) => {
           <span className="aside-menu__item-text">Remove this server</span>
         </span>
 
-        <ShlinkVersions className="mt-2 pl-2" />
-
         <DeleteServerModal
           isOpen={isModalOpen}
           toggle={() => setModalOpen(!isModalOpen)}

src/servers/services/provideServices.js

@@ -24,7 +24,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('DeleteServerModal', withRouter);
   bottle.decorator('DeleteServerModal', connect(null, [ 'deleteServer' ]));
 
-  bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal', 'ShlinkVersions');
+  bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
 
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
   bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));