ux: updated login page

public/app/core/components/Login/LoginBackground.tsx

@@ -1,29 +1,27 @@
 import React, { Component } from 'react';
 
-const elementsInWidth = 22;
-const elementRows = 50;
+const xCount = 50;
+const yCount = 50;
 
-function Cell({ index, flipIndex }) {
-  const bgColor1 = getColor(index);
-   // const bgColor2 = getColor(index+2);
+function Cell({ x, y, flipIndex }) {
+  const index = (y * xCount) + x;
+  const bgColor1 = getColor(x, y);
   return (
-    <div className={`login-bg__item login-bg-${index} ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
+    <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
   );
 }
 
-const getRandomInt = (min, max) => {
+function getRandomInt(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
-};
+}
 
 export default class LoginBackground extends Component<any, any> {
-  nrOfElements: number;
   cancelInterval: any;
 
   constructor(props) {
     super(props);
-    this.nrOfElements = elementsInWidth * elementRows;
 
     this.state = {
       flipIndex: null,
@@ -33,14 +31,13 @@ export default class LoginBackground extends Component<any, any> {
   }
 
   flipElements() {
-    const elementIndexToFlip = getRandomInt(0, this.nrOfElements - 1);
+    const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
     this.setState(prevState => {
       return {
         ...prevState,
         flipIndex: elementIndexToFlip,
       };
     });
-    console.log('elementIndexToFlip', elementIndexToFlip);
   }
 
   componentWillMount() {
@@ -56,9 +53,15 @@ export default class LoginBackground extends Component<any, any> {
 
     return (
       <div className="login-bg">
-        {Array.from(Array(elementsInWidth * elementRows)).map((el, index) => {
+        {Array.from(Array(yCount)).map((el, y) => {
           return (
-            <Cell index={index} flipIndex={this.state.flipIndex} />
+            <div className="login-bg__row">
+              {Array.from(Array(xCount)).map((el2, x) => {
+                return (
+                  <Cell y={y} x={x} flipIndex={this.state.flipIndex} />
+                );
+              })}
+            </div>
           );
         })}
       </div>
@@ -66,7 +69,7 @@ export default class LoginBackground extends Component<any, any> {
   }
 }
 
-const getColor = index => {
+function getColor(x, y) {
   const colors = [
     '#14161A',
     '#111920',
@@ -1228,5 +1231,10 @@ const getColor = index => {
     '#101A27',
     '#13171F',
   ];
-  return colors[index];
-};
+
+  // let randX = getRandomInt(0, x);
+  // let randY = getRandomInt(0, y);
+  // let randIndex = randY * xCount + randX;
+
+  return colors[(y*xCount + x) % colors.length];
+}

public/sass/pages/_login.scss

@@ -73,6 +73,8 @@ select:-webkit-autofill:focus {
   display: flex;
   align-items: stretch;
   flex-direction: column;
+  position: relative;
+  z-index: 1;
 }
 
 .login-branding {
@@ -293,7 +295,7 @@ select:-webkit-autofill:focus {
     padding: 2rem 4rem;
 
     .logo-icon {
-      width: 100px;
+      width: 130px;
     }
 
     .icon-gf-grafana_wordmark {
@@ -333,13 +335,27 @@ select:-webkit-autofill:focus {
   left: 0;
   right: 0;
   perspective: 1000px;
+  display: flex;
+  flex-wrap: wrap;
+  z-index: 0;
+  flex-direction: column;
+  justify-content: stretch;
+  justify-items: stretch;
+  height: 100%;
+
+  .login-bg__row {
+    display: flex;
+    flex-grow: 1;
+    height: 10px;
+    justify-content: stretch;
+  }
 
   .login-bg__item {
     width: 4%;
-    height: 10px;
+    height: 100%;
+    flex-grow: 1;
     // background: hotpink;
     // border:1px solid #0F1926;
-    float: left;
     transition: 1s ease-in-out;
     z-index: 1;
     transform-style: preserve-3d;
@@ -348,7 +364,6 @@ select:-webkit-autofill:focus {
       transform: rotateY(180deg);
     }
 
-
     &:before, &:after {
       backface-visibility: hidden;
       position: absolute;
@@ -360,65 +375,10 @@ select:-webkit-autofill:focus {
       display: block;
     }
 
-    &:before {
-      z-index: 2;
-      transform: rotateY(0deg);
-      background-color: #215392;
-    }
-
     &:after {
       transform: rotateY(180deg);
       background-color: rgb(25, 50, 80);
     }
-
-    &:nth-child(3n+0) {
-      &:before {
-        background-color: #0f253c;
-      }
-      &:after {
-        background-color: blue;
-      }
-    }
-
-
-    &:nth-child(3n+1) {
-      &:before {
-        background-color: #102438;
-      }
-      &:after {
-        background-color: blue;
-      }
-    }
-
-    &:nth-child(3n+2) {
-      &:before {
-        background-color: #19314e;
-      }
-      &:after {
-        background-color: blue;
-      }
-    }
-
-    &:nth-child(3n+3) {
-      &:before {
-        background-color: #215392;
-      }
-      &:after {
-        background-color: blue;
-      }
-    }
-
-    // &:nth-child(3n+5) {
-    //   &:before {
-    //     background-color: hotpink;
-    //   }
-    //   &:after {
-    //     background-color: blue;
-    //   }
-    // }
-
-
-
   }
 }