Add (fav)icon and heading style

Author: SamuelTallet

docs/README.md

@@ -18,7 +18,7 @@ Installation
 ------------
 
 ### Docker (PHP built-in server)
-1. Run `docker run -p 5000:5000 samueltallet/mongodb-php-gui`.<br>
+1. Execute `docker run --rm -p 5000:5000 samueltallet/mongodb-php-gui`<br>
 2. Open your browser at this address: http://127.0.0.1:5000/ to access GUI.<br>
 3. If your MongoDB is running on localhost, use 172.17.0.1 as host to login.
 
@@ -31,11 +31,10 @@ Installation
 6. Optionnaly, if you want to query DB with SQL, you must have [Java JDK](https://jdk.java.net/) installed.
 7. Open your browser at Apache server URL to access GUI.
 
-Thanks
-------
+Credits
+-------
 
-❤️ Thanks to [Limber](https://github.com/nimbly/Limber), [Capsule](https://github.com/nimbly/Capsule), [Font Awesome](https://fontawesome.com/), [Bootstrap](https://getbootstrap.com/), [CodeMirror](https://github.com/codemirror/codemirror) and [JsonView](https://github.com/pgrabovets/json-view).<br>
-Thanks also to [MongoDB PHP library](https://github.com/mongodb/mongo-php-library), [vis.js](https://github.com/visjs) and [SQL to MongoDB Query Converter](https://github.com/vincentrussell/sql-to-mongo-db-query-converter). ❤️
+This GUI uses [Limber](https://github.com/nimbly/Limber), [Capsule](https://github.com/nimbly/Capsule), [Font Awesome](https://fontawesome.com/), [Bootstrap](https://getbootstrap.com/), [CodeMirror](https://github.com/codemirror/codemirror), [JsonView](https://github.com/pgrabovets/json-view), [MongoDB PHP library](https://github.com/mongodb/mongo-php-library), [vis.js](https://github.com/visjs) and [SQL to MongoDB Query Converter](https://github.com/vincentrussell/sql-to-mongo-db-query-converter). Leaf icon was made by [Freepik](https://www.freepik.com) from [Flaticon](https://www.flaticon.com).
 
 Copyright
 ---------

index.php

@@ -18,12 +18,12 @@
  * 
  * @var string
  */
-define('MPG_APP_VERSION', '1.1.4');
+define('MPG_APP_VERSION', '1.1.5');
 
 /**
  * Development mode?
  * 
- * @var string
+ * @var boolean
  */
 define('MPG_DEV_MODE', false);
 
@@ -69,7 +69,7 @@
  * Base URL. XXX Without trailing slash.
  * 
  * @var string
- * @example http://127.0.0.1:5000/mongo
+ * @example //127.0.0.1:5000/mongo
  */
 define('MPG_BASE_URL', $baseUrl);
 

static/css/mpg.css

@@ -1,3 +1,17 @@
+:root {
+
+    --mpg-color-light: #7bcc29;
+    --mpg-color-regular: #6eb825;
+    --mpg-color-dark: #5dad1d;
+    
+}
+
+body {
+
+    font-family: Arial, sans-serif;
+    
+}
+
 .navbar {
 
     margin-bottom: 10px;
@@ -24,9 +38,15 @@
 
 }
 
-.bg-mongodb {
+.bg-dark {
 
-    background-color: #13aa52;
+    background-color: var(--mpg-color-dark) !important;
+
+}
+
+.navbar-brand {
+
+    font-family: Ubuntu, ubuntu-medium;
 
 }
 
@@ -38,6 +58,8 @@
 
     padding: 5px;
 
+    color: white !important;
+
 }
 
 .navbar.menu-expanded .navbar-brand {
@@ -85,6 +107,14 @@
 
 }
 
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+
+    .navbar-brand-icon {
+        display: none;
+    }
+
+}
+
 #menu-toggle-button {
 
     border: none;
@@ -239,6 +269,20 @@ button, input {
 
 }
 
+.btn-success {
+
+    background-color: var(--mpg-color-regular);
+    border-color: var(--mpg-color-regular);
+
+}
+
+.btn-success:hover, .btn-success:focus {
+
+    background-color: var(--mpg-color-dark);
+    border-color: var(--mpg-color-dark);
+
+}
+
 #mpg-output-column, #mpg-indexes-column {
 
     margin-top: 15px;

static/css/mpg.login.css

@@ -1,4 +1,3 @@
-
 /**
  * @see https://teamtreehouse.com/community/shake-effect-with-javascript-only
  */
@@ -22,7 +21,7 @@
 }
 
 .apply-shake {
-    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
 }
 
 /**
@@ -41,6 +40,12 @@ html, body {
 
 }
 
+body {
+
+    font-family: Arial, sans-serif;
+    
+}
+
 .alert {
 
     max-width: 290px;
@@ -57,12 +62,17 @@ html, body {
 
 }
 
+.card-header-name {
+
+    font-family: Ubuntu, ubuntu-medium;
+
+}
 
-.input-group-prepend span {
+.input-group-text {
 
     width: 40px;
 
-    background-color: #13aa52;
+    background-color: #5dad1d;
     color: white;
 
     border: 0 !important;

static/css/ubuntu-font.css

@@ -0,0 +1,9 @@
+@font-face {
+
+    font-family: 'ubuntu-medium';
+    src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2'),
+         url('../fonts/ubuntu-medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}