KEYCLOAK-11426: Remove background

themes/src/main/resources/theme/keycloak-preview/account/index.ftl

@@ -109,41 +109,15 @@
             });
         </script>
 
-<div id="main_react_container"></div>
+<div id="main_react_container" style="display:none;height:100%"></div>
 
-<div id="welcomeScreen" style="display:none">
+<div id="welcomeScreen" style="display:none;height:100%">
     <#if properties.styles?has_content>
         <#list properties.styles?split(' ') as style>
         <link href="${resourceUrl}/${style}" rel="stylesheet"/>
         </#list>
     </#if>
-    <style>
+    
-        .pf-c-background-image {
-            --pf-c-background-image--BackgroundImage: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/pfbg_576.jpg');
-            --pf-c-background-image--BackgroundImage-2x: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/pfbg_576@2x.jpg');
-            --pf-c-background-image--BackgroundImage--sm: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/pfbg_768.jpg');
-            --pf-c-background-image--BackgroundImage--sm-2x: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/pfbg_768@2x.jpg');
-            --pf-c-background-image--BackgroundImage--lg: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/pfbg_1200.jpg');
-            --pf-c-background-image--Filter: url('${resourceUrl}/node_modules/@patternfly/patternfly/assets/images/background-filter.svg#image_overlay');
-        }
-    </style>
-        
-<div class="pf-c-background-image">
-  <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
-    <filter id="image_overlay">
-      <feColorMatrix type="matrix" values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0" />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-        <feFuncA type="table" tableValues="0 1"></feFuncA>
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
     <div class="pf-c-page" id="page-layout-default-nav">
       <header role="banner" class="pf-c-page__header">
         <div class="pf-c-page__header-brand">

themes/src/main/resources/theme/keycloak-preview/account/resources/WelcomePageScripts.js

@@ -22,8 +22,10 @@ var toggleReact = function () {
     if (!isWelcomePage()) {
         document.getElementById("welcomeScreen").style.display = 'none';
         document.getElementById("main_react_container").style.display = 'block';
+        document.getElementById("main_react_container").style.height = '100%';
     } else {
         document.getElementById("welcomeScreen").style.display = 'block';
+        document.getElementById("welcomeScreen").style.height = '100%';
         document.getElementById("main_react_container").style.display = 'none';
     }
 };

themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx

@@ -22,7 +22,6 @@ import {KeycloakService} from './keycloak-service/keycloak.service';
 
 import {PageNav} from './PageNav';
 import {PageToolbar} from './PageToolbar';
-import {Background} from './Background';
 import {makeRoutes} from './ContentPages';
 
 import {
@@ -74,16 +73,17 @@ export class App extends React.Component<AppProps> {
         );
 
         const Sidebar = <PageSidebar nav={<PageNav/>} />;
-
+        
+        const fullHeight = { height: '100%'};
+        
         return (
-            <React.Fragment>
+            <span style={fullHeight}>
-                <Background/>
                 <Page header={Header} sidebar={Sidebar} isManagedSidebar>
                     <PageSection>
                         {makeRoutes()}
                     </PageSection>
                 </Page>
-            </React.Fragment>
+            </span>
         );
     }
 };

themes/src/main/resources/theme/keycloak-preview/account/resources/app/Background.tsx

@@ -1,46 +0,0 @@
-/* 
- * Copyright 2019 Red Hat, Inc. and/or its affiliates.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from 'react';
-
-import {BackgroundImageSrc, BackgroundImage} from '@patternfly/react-core';
- 
-declare const resourceUrl: string;
-
-const pFlyImages = resourceUrl + '/node_modules/@patternfly/patternfly/assets/images/';
-
-const bgImages = {
-    [BackgroundImageSrc.xs]: pFlyImages + 'pfbg_576.jpg',
-    [BackgroundImageSrc.xs2x]: pFlyImages + 'pfbg_576@2x.jpg',
-    [BackgroundImageSrc.sm]: pFlyImages + 'pfbg_768.jpg',
-    [BackgroundImageSrc.sm2x]: pFlyImages + 'pfbg_768@2x.jpg',
-    [BackgroundImageSrc.lg]: pFlyImages + 'pfbg_1200.jpg',
-    [BackgroundImageSrc.filter]: pFlyImages + 'background-filter.svg#image_overlay'
-};
-
-interface BackgroundProps {}
-export class Background extends React.Component<BackgroundProps> {
-    
-    public constructor(props: BackgroundProps) {
-        super(props);
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <BackgroundImage src={bgImages} />
-        );
-    }
-};