diff --git a/bower.json b/bower.json index cf3b5a0f72..ec44b8e6a4 100644 --- a/bower.json +++ b/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", diff --git a/components/cloud-foundry/frontend/src/view/util/app-state-icon/app-state-icon.scss b/components/cloud-foundry/frontend/src/view/util/app-state-icon/app-state-icon.scss index b2cc269c21..81c2b717ed 100644 --- a/components/cloud-foundry/frontend/src/view/util/app-state-icon/app-state-icon.scss +++ b/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; } diff --git a/components/endpoints-dashboard/src/view/view.html b/components/endpoints-dashboard/src/view/view.html index d301916b55..779f721f88 100644 --- a/components/endpoints-dashboard/src/view/view.html +++ b/components/endpoints-dashboard/src/view/view.html @@ -71,7 +71,7 @@ - check_circle
+ + + + + image/svg+xml + + + + + + + + diff --git a/components/os-branding/bower.json b/components/os-branding/bower.json new file mode 100644 index 0000000000..b032873058 --- /dev/null +++ b/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": { + } + +} diff --git a/components/os-branding/i18n/en_US/login.json b/components/os-branding/i18n/en_US/login.json new file mode 100644 index 0000000000..3067bfbc1d --- /dev/null +++ b/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": "" + } + } +} diff --git a/components/os-branding/i18n/en_US/product.json b/components/os-branding/i18n/en_US/product.json new file mode 100644 index 0000000000..065cf5efca --- /dev/null +++ b/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": "" + } + } +} diff --git a/components/os-branding/os-branding.component.json b/components/os-branding/os-branding.component.json new file mode 100644 index 0000000000..1f725fbfc1 --- /dev/null +++ b/components/os-branding/os-branding.component.json @@ -0,0 +1,9 @@ +{ + "frontend": { + "dependencies": { + "app-theme": { + "os-branding": "*" + } + } + } +} \ No newline at end of file diff --git a/components/os-branding/src/about.scss b/components/os-branding/src/about.scss new file mode 100644 index 0000000000..4f4318bb39 --- /dev/null +++ b/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; + } + + } + + } + + + +} diff --git a/components/os-branding/src/brand.scss b/components/os-branding/src/brand.scss new file mode 100644 index 0000000000..aecb9d60cd --- /dev/null +++ b/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"; diff --git a/components/os-branding/src/dark-form.scss b/components/os-branding/src/dark-form.scss new file mode 100644 index 0000000000..38849bce5f --- /dev/null +++ b/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; + } + } + } +} + diff --git a/components/os-branding/src/login.scss b/components/os-branding/src/login.scss new file mode 100644 index 0000000000..a983325501 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file