Issue #3426873: Switch default admin theme to the Gin Admin theme as Vartheme Claro is deprecated

Author: Natshah

config/install/gin.settings.yml

@@ -31,9 +31,24 @@ body.install-page .logo a {
   background-color: transparent;
 }
 
+body.install-page .site-name {
+  background-image: url(../../images/varbase-medium-logo.png);
+  background-position-x: 0px;
+  background-position-y: 0px;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-attachment: initial;
+  background-origin: initial;
+  background-clip: initial;
+  background-color: transparent;
+  height: 3rem;
+  width: 30rem;
+  color: transparent;
+}
+
 body.install-page .site-version {
   vertical-align: initial !important;
-  padding-left: 10px;
+  padding-left: 10rem;
   color: #4192c8;
   font-weight: bold;
   font-size: .6em;

css/theme/install-page.css

@@ -1,4 +1,19 @@
-((Drupal) => {
+/**
+ * @file
+ * JavaScript behaviors for Varbase installer.
+ */
+
+(function ($, Drupal) {
+
+  'use strict';
+
+  Drupal.behaviors.varbaseInstaller = {
+    attach: function attach(context) {
+
+      $("<footer class=\"installer-footer clearfix\"><div id=\"credit\" class=\"clearfix\"><div class=\"message\">Proudly built by</div><div class=\"logo\"><a href=\"http://www.vardot.com\" target=\"_blank\">Vardot Company</a></div></div></footer>").appendTo("body");
+    },
+  };
+
   Drupal.behaviors.varbaseGinAccent = {
     attach: function attach(context) {
 
@@ -10,4 +25,4 @@
     },
   };
 
-})(Drupal);
+})(jQuery, Drupal);

js/install-scripts.js

@@ -31,9 +31,24 @@ body.install-page {
     background-color: transparent;
   }
 
+  .site-name {
+    background-image: url(../../images/varbase-medium-logo.png);
+    background-position-x: 0px;
+    background-position-y: 0px;
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-attachment: initial;
+    background-origin: initial;
+    background-clip: initial;
+    background-color: transparent;
+    height: 3rem;
+    width: 30rem;
+    color: transparent;
+  }
+
   .site-version {
     vertical-align: initial !important;
-    padding-left: 10px;
+    padding-left: 10rem;
     color: #4192c8;
     font-weight: bold;
     font-size: 0.6em;

scss/theme/install-page.scss

@@ -9,4 +9,5 @@ install-scripts:
   js:
     js/install-scripts.js: { }
   dependencies:
+    - core/jquery
     - gin/gin_accent

templates/install-page.html.twig

@@ -758,18 +758,6 @@ function varbase_requirements($phase) {
   return $requirements;
 }
 
-/**
- * Implements hook_theme().
- */
-function varbase_theme($existing, $type, $theme, $path) {
-  return [
-    'install_page' => [
-      'template' => 'install-page.html',
-      'path' => $path . '/templates'
-    ],
-  ];
-}
-
 /**
  * Implements hook_library_info_alter().
  */