Open Source branding (#1403)

* Open source branding/theme

* Ensure tick icon is the correct color across themes

* Change tentative state color to grey rather than the theme's primary color

bower.json

@@ -15,7 +15,7 @@
     "app-theme": "./components/app-theme",
     "app-framework": "./components/app-framework",
     "app-core": "./components/app-core",
-    "suse-branding": "./components/suse-branding",
+    "os-branding": "./components/os-branding",
     "about-app": "./components/about-app",
     "endpoints-dashboard": "./components/endpoints-dashboard",
     "cloud-foundry": "./components/cloud-foundry",

components/cloud-foundry/frontend/src/view/util/app-state-icon/app-state-icon.scss

@@ -1,3 +1,5 @@
+$app-state-tentative-color: $status-unknown !default;
+
 app-state-icon {
   line-height: normal;
   font-size: $font-size-base;
@@ -13,10 +15,9 @@ app-state-icon {
 }
 
 .text-tentative {
-  color: $console-primary;
+  color: $app-state-tentative-color;
 }
 
-
 span.material-icons.app-status {
   font-size: $icon-font-size-base;
 }

components/endpoints-dashboard/src/view/view.html

@@ -71,7 +71,7 @@
 
           <!--Endpoint Connection Status-->
           <td ng-switch="endpoint.getStatus()" class="endpoint-table-connected">
-            <span class="material-icons app-icon-lg text-primary endpoint-connected-icon"
+            <span class="material-icons app-icon-lg endpoint-connected endpoint-connected-icon"
                   ng-switch-when="connected">check_circle</span>
             <div ng-switch-when="unconnected"
                  uib-popover="{{ 'endpoints-dashboard.table.connection-disconnected' | translate }}"

components/endpoints-dashboard/src/view/view.scss

@@ -4,6 +4,10 @@
   &.endpoints-dashboard {
     .endpoints-table {
 
+      .endpoint-connected {
+        color: $state-success-text;
+      }
+
       .endpoint-table-connected {
         padding-top: 3px;
         padding-bottom: 0;

components/os-branding/bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "os-branding",
+  "description": "",
+  "license": "Apache-2.0",
+  "moduleType": [],
+  "homepage": "",
+  "main": [
+    "src/brand.scss"
+  ],
+  "ignore": [
+    ".*"
+  ],
+  "dependencies": {
+  }
+
+}

components/os-branding/i18n/en_US/login.json

@@ -0,0 +1,14 @@
+{
+  "login": {
+    "company-logo": "",
+    "title": "STRATOS UI",
+    "footer": {
+      "title": "",
+      "copyright": "",
+      "company.logo": "images/OpenSUSE_Logo.png",
+      "product.logo": "",
+      "company.www-link": "www.suse.com",
+      "product.www-link": ""
+    }
+  }
+}

components/os-branding/i18n/en_US/product.json

@@ -0,0 +1,37 @@
+{
+  "product": {
+    "name": "Cloud Foundry Console",
+    "console": "Cloud Foundry Console",
+    "cf": "Cloud Foundry"
+  },
+  "company": {
+    "name": "SUSE",
+    "terms": "Legal",
+    "terms.href": "https://www.suse.com/company/legal/",
+    "PRIVACY_HREF": "", 
+    "PRODUCT_FAMILY_HREF": "",
+    "www-link": "http://www.suse.com"
+  },
+  "about": {
+    "footer": {
+      "company.logo": "images/OpenSUSE_Logo.png",
+      "company.terms-href": "",
+      "company.privacy-href": ""
+    }
+  },
+  "navbar": {
+    "title": "Stratos UI",
+    "logo": "svg:SUSE_Geeko.svg"
+  },
+  "login": {
+    "title":"Sign in",
+    "console": "Cloud Foundry Console"
+  },
+  "landing": {
+    "footer": {
+      "company.logo": "images/OpenSUSE_Logo.png",
+      "company.terms-href": "",
+      "company.privacy-href": ""
+    }
+  }
+}

components/os-branding/os-branding.component.json

@@ -0,0 +1,9 @@
+{
+  "frontend": {
+    "dependencies": {
+      "app-theme": {
+        "os-branding": "*"
+      }
+    }
+  }
+}

components/os-branding/src/about.scss

@@ -0,0 +1,36 @@
+$about-top-margin: 48px;
+
+.brand {
+
+  page-footer.about-branding {
+    background: none;
+    margin-top: $about-top-margin;
+
+    img.product-logo {
+      width: 320px;
+      display: block;
+    }
+
+    img.company-logo {
+      width: 128px;
+      position: relative;
+      top: auto;
+      right: auto;
+    }
+
+    .copyright {
+      font-size: 18px;
+      line-height: 1.25em;
+      left: auto;
+
+      .product-name, .secondary {
+        color: #333;
+      }
+
+    }
+
+  }
+
+
+
+}

components/os-branding/src/brand.scss

@@ -0,0 +1,39 @@
+// SUSE Brand primary colour
+$suse-primary: #02D35F;
+$suse-dark-blue: #06253A;
+$suse-blue: #073155;
+$suse-primary-light: #16696A;
+
+// Secondary blue colour
+$suse-secondary: #00243e;
+$suse-text: #fff;
+
+$login-form-border-color: lighten($suse-secondary, 10%);
+
+// Colours for the header bar
+$page-header-fg: #fff !default;
+$page-header-bg: #3171B8 !default;
+$page-header-active-fg: #000 !default;
+
+$page-header-active-fg: #75c7ff;
+
+// Set the primary brand colour
+$brand-primary: #2D85C6;
+
+$console-primary: $brand-primary;
+
+// Hide welcome text panel on the login page
+$login-page-text-panel-display: none;
+
+// The normal status-okay green is close to suse primary, so just use it instead
+$status-okay: $suse-primary;
+
+.sort-asc-desc-btn svg {
+  .st0 {
+    fill: $brand-primary;
+  }
+}
+
+@import "dark-form";
+@import "login";
+@import "about";

components/os-branding/src/dark-form.scss

@@ -0,0 +1,31 @@
+@mixin dark-form() {
+  .form-group {
+    background-color: $suse-secondary;
+    // We override the border color in all cases, so we also need to ensure the focus z-index overrides the
+    // error z-index (see focus below)
+    border-color: $login-form-border-color;
+    color: $suse-text;
+
+    &.focus {
+      border-color: $suse-primary;
+    }
+
+    .control-label, .checkbox-input, .checkbox-input.checked .checkbox-input-label {
+      color: darken($suse-text, 10%);
+    }
+
+    input {
+      color: $suse-text;
+      text-shadow: 0 0 0 $suse-text;
+      -webkit-text-fill-color: $suse-text;
+    }
+
+    search-box {
+      .dropdown-menu {
+        border-color: $login-form-border-color;
+        background: $suse-secondary;
+      }
+    }
+  }
+}
+

components/os-branding/src/login.scss

@@ -0,0 +1,70 @@
+$login-padding: 24px;
+$login-logo-size: 128px;
+$login-panel-width: 380px;
+$login-bg-color: #eee;
+
+.brand {
+
+  .landing-container {
+    .landing-content>.landing-spacer-content {
+      display: flex;
+      justify-content: center;
+      align-self: center;
+    }
+
+    login-form {
+      .login-form-spinner {
+        color: #333;
+
+        bounce-spinner > .bounce-spinner-sm > div {
+          background-color: #333;
+        }
+      }
+    }
+
+    .login-page {
+
+      justify-content: center;
+      margin-top: 0;
+
+      .login-left {
+        display: none
+      }
+
+      .login-right {
+        background-color: #f8f8f8;
+        padding: 24px 0;
+        border: 2px solid #ddd;
+        box-shadow: #ddd 0 0 20px 4px;
+
+        .login-form {
+          display: flex;
+          flex-direction: column;
+
+          .login-form-logo-image {
+            width: 280px;
+            align-self: center;
+            margin-top: 12px;
+            margin-bottom: 24px;
+          }
+
+          h1.login-form-title {
+            //display: none;
+            text-align: center;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+
+  .landing-footer {
+    > .page-footer-items {
+      display: none;
+    }
+
+    .product-name .secondary {
+      color: $suse-blue;
+    }
+  }
+}