simple styling for login to access arranger components

PilotDataPlatform · Sep 6, 2023 · a4552c3 · a4552c3
1 parent 64ca9d6
commit a4552c3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/modules/components/src/App.css b/modules/components/src/App.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+}
+
+.arranger-login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 35vh;
+  height: 100vh;
+  background-color: var(--primary-color-dark-5);
+}
+
+.arranger-login h2 {
+  text-align: center;
+  width: 100%;
+  color: var(--white);
+}
+
+.arranger-login .ant-btn-default {
+  background-color: transparent;
+  border-color: var(--white);
+  box-shadow: none;
+  color: var(--white);
+}
+
+.arranger-login .ant-btn-default:hover {
+  border-color: var(--white);
+  color: var(--white);
+}
diff --git a/modules/components/src/App.js b/modules/components/src/App.js
@@ -1,8 +1,11 @@
 import React from 'react';
+import { Button } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 import { Arranger, ArrangerContextProvider, ArrangerHeader, Aggregations, Table } from './Arranger';
 import KeyCloakMiddleWare from './utils/KeyCloak/KeyCloakMiddleware';
 import { keycloak } from './utils/KeyCloak/config';
 import { StyleProvider, AVAILABLE_THEMES } from './ThemeSwitcher';
+import './App.css';
 
 const ArrangerComponents = ({ ...props }) => (
   <ArrangerContextProvider>
@@ -21,6 +24,22 @@ const ArrangerComponents = ({ ...props }) => (
   </ArrangerContextProvider>
 );
 
+const ArrangerLogin = () => (
+  <div class="arranger-login">
+    <h2>Login with Pilot credentials to access Arranger Components</h2>
+    <Button onClick={() => keycloak.login({ redirectUri: window.location.origin })}>
+      <UserOutlined
+        style={{
+          marginRight: 10,
+          strokeWidth: '30',
+          stroke: 'white',
+        }}
+      />
+      Login
+    </Button>
+  </div>
+);
+
 const App = () => {
   return (
     <KeyCloakMiddleWare>
@@ -34,9 +53,7 @@ const App = () => {
           return (
             <>
               {!keycloak?.authenticated ? (
-                <button onClick={() => keycloak.login({ redirectUri: window.location.origin })}>
-                  Login to Pilot
-                </button>
+                <ArrangerLogin />
               ) : (
                 <ArrangerComponents
                   {...{ ...props, graphqlField: 'pilotdevtestalias', projectId: 'pilotdev' }}