Fix docs link on login page, improve layout (#2271)

apache · Dec 5, 2023 · f21d6c4 · f21d6c4
1 parent 068af0f
commit f21d6c4
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 51 deletions.
diff --git a/ui/src/app/login/components/auth-box/auth-box.component.html b/ui/src/app/login/components/auth-box/auth-box.component.html
@@ -17,62 +17,56 @@
   -->
 
 <div
-    class="md-padding full-background sp-fade light-mode"
-    fxLayout="row"
+    class="full-background sp-fade light-mode"
+    fxLayout="row wrap"
     fxLayoutAlign="center center"
     style="min-height: 100vh !important"
 >
-    <div fxFlex="40" fxLayout="column" fxLayoutAlign="center center">
-        <mat-card
-            class="card-100-center box-shadow-login"
-            style="padding: 20px; position: relative; top: -25px"
-        >
-            <div fxFlex="100" fxLayout="column">
-                <div
-                    fxLayout="row"
-                    fxFlex="60"
-                    fxLayoutAlign="center center"
-                    style="margin-left: auto; margin-right: auto"
-                >
-                    <div
-                        fxFlex="60"
-                        fxLayoutAlign="center center"
-                        fxLayout="row"
-                        style="color: white; width: 100%"
-                    >
-                        <img
-                            alt="icon"
-                            src="../../../../assets/img/sp/logo.png"
-                            style="width: 100%"
-                        />
-                    </div>
+    <div
+        fxFlex.gt-md="50"
+        fxFlex.lt-md="100"
+        fxLayout="row"
+        fxLayoutAlign="start start"
+        class="full-height"
+    >
+        <div fxFlex="100" fxLayout="column" class="full-height">
+            <div fxLayoutAlign="end end" fxLayout="row" class="logo-outer">
+                <img
+                    alt="icon"
+                    src="../../../../assets/img/sp/logo.png"
+                    class="logo"
+                />
+            </div>
+            <div fxLayout="row" fxFlex fxLayoutAlign="center center">
+                <div fxLayout="column" class="content-box">
+                    <ng-content></ng-content>
                 </div>
-                <ng-content></ng-content>
             </div>
-        </mat-card>
-        <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
-            <button
-                mat-button
-                mat-raised-button
-                color="accent"
-                (click)="openDocumentation()"
-                style="
-                    min-width: 0px;
-                    padding-left: 20px;
-                    padding-right: 20px;
-                    font-size: 18px;
-                "
-            >
-                View Docs
-            </button>
-            <span style="margin-top: 10px"
-                ><a
+            <div fxLayout="row" fxLayoutAlign="end end" class="auth-box-footer">
+                <a
+                    class="footer-link"
+                    href="https://streampipes.apache.org/docs/user-guide-introduction"
+                >
+                    Documentation
+                </a>
+                <span style="margin-left: 10px; margin-right: 10px"> | </span>
+                <a
+                    class="footer-link"
                     data-cy="view-api-docs-link"
                     routerLink="/apidocs"
                     routerLinkActive="active"
-                    >View API docs</a
-                ></span
-            >
+                    >API Documentation</a
+                >
+            </div>
         </div>
     </div>
+    <div
+        fxFlex.gt-md="50"
+        fxFlex.lt-md="100"
+        fxLayout="column wrap"
+        fxLayoutAlign="center center"
+        class="background-auth-box full-height"
+    >
+        <h1 class="app-name-text">{{ appConstants.APP_NAME }}</h1>
+    </div>
 </div>
diff --git a/ui/src/app/login/components/auth-box/auth-box.component.scss b/ui/src/app/login/components/auth-box/auth-box.component.scss
@@ -15,3 +15,53 @@
  * limitations under the License.
  *
  */
+
+.background-auth-box {
+    background: var(--color-navigation-bg);
+}
+
+.auth-box-footer {
+    margin-bottom: 20px;
+    margin-right: 20px;
+}
+
+.footer-link {
+    color: var(--color-accent);
+    text-decoration: none;
+}
+
+.footer-link:hover {
+    text-decoration: underline;
+}
+
+.full-height {
+    height: 100vh;
+}
+
+.logo-outer {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.logo {
+    margin-right: auto;
+    max-height: 55px;
+    max-width: 300px;
+}
+
+.content-box {
+    max-width: 500px;
+    min-width: 60%;
+    padding: 20px;
+    box-shadow:
+        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
+        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+    border-radius: 1rem;
+    background: var(--color-bg-0);
+}
+
+.app-name-text {
+    padding: 30px;
+    color: var(--color-navigation-link-text);
+    font-size: 6vmax;
+}
diff --git a/ui/src/app/login/components/auth-box/auth-box.component.ts b/ui/src/app/login/components/auth-box/auth-box.component.ts
@@ -17,14 +17,13 @@
  */
 
 import { Component } from '@angular/core';
+import { AppConstants } from '../../../services/app.constants';
 
 @Component({
     selector: 'sp-auth-box',
     templateUrl: './auth-box.component.html',
     styleUrls: ['./auth-box.component.scss'],
 })
 export class AuthBoxComponent {
-    openDocumentation() {
-        window.open('https://streampipes.apache.org/docs', '_blank');
-    }
+    constructor(public appConstants: AppConstants) {}
 }