refactor: apply new login screen design

e2e/tests/console/download.spec.js

@@ -1,14 +1,21 @@
 describe("download functionality", () => {
   beforeEach(() => {
     cy.loadConsoleWithAuth()
-    cy.getEditorContent().should("be.visible")
+    cy.getEditor().should("be.visible")
+
+    cy.document().should((doc) => {
+      const activeElement = doc.activeElement
+      expect(activeElement).to.exist
+      expect(activeElement.classList.contains("monaco-mouse-cursor-text")).to.be.true
+    })
+
     cy.clearEditor()
   })
 
   it("should show download button with results", () => {
     // When
-    cy.typeQuery("select x from long_sequence(10)")
-    cy.runLine()
+    cy.typeQueryDirectly("select x from long_sequence(10)")
+    cy.clickRunIconInLine(1)
 
     // Then
     cy.getByDataHook("download-parquet-button").should("be.visible")

e2e/tests/enterprise/oidc.spec.js

@@ -57,7 +57,7 @@ describe("OIDC", () => {
       cy.getByDataHook("auth-login").should("be.visible")
       cy.getByDataHook("button-sso-continue").should("not.exist")
       cy.getByDataHook("button-sso-login").should("be.visible")
-      cy.getByDataHook("button-sso-login").contains("Continue with SSO")
+      cy.getByDataHook("button-sso-login").contains("Single Sign-On (SSO)")
       cy.getEditor().should("not.exist")
     })
 
@@ -220,7 +220,7 @@ describe("OIDC", () => {
       cy.getByDataHook("auth-login").should("be.visible")
       cy.getByDataHook("button-sso-continue").should("not.exist")
       cy.getByDataHook("button-sso-login").should("be.visible")
-      cy.getByDataHook("button-sso-login").contains("Continue with SSO")
+      cy.getByDataHook("button-sso-login").contains("Single Sign-On (SSO)")
       cy.getEditor().should("not.exist")
     })
 
@@ -309,7 +309,7 @@ describe("OIDC", () => {
       cy.getByDataHook("auth-login").should("be.visible")
       cy.getByDataHook("button-sso-continue").should("not.exist")
       cy.getByDataHook("button-sso-login").should("be.visible")
-      cy.getByDataHook("button-sso-login").contains("Continue with SSO")
+      cy.getByDataHook("button-sso-login").contains("Single Sign-On (SSO)")
       cy.getEditor().should("not.exist")
 
       cy.getByDataHook("button-sso-login").click()

src/components/CenteredLayout/index.tsx

@@ -1,14 +1,87 @@
 import React from "react"
 import styled from "styled-components"
+import { Text } from "../Text"
+import { useSettings } from "../../providers"
 
 const Root = styled.div`
-  display: grid;
-  place-items: center;
-  height: 100vh;
-  background: ${({ theme }) => theme.color.backgroundDarker};
-  color: ${({ theme }) => theme.color.foreground};
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: auto;
+  overflow-y: auto;
+  background: ${({ theme }) => theme.color.loginBackground};
 `
 
-export const CenteredLayout = ({ children }: { children: React.ReactNode }) => (
-  <Root>{children}</Root>
-)
+const Main = styled.div`
+  margin-top: auto;
+  position: relative;
+`
+
+const GridBackground = styled.img`
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`
+
+const MainContent = styled.div`
+  position: relative;
+  z-index: 1;
+`
+
+const Footer = styled.div`
+  text-align: center;
+  align-items: center;
+  display: flex;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  margin-top: auto;
+`
+
+const VersionBadge = styled.div`
+  display: flex;
+  padding: 0.6rem 1.1rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.4rem;
+  border: 0.075rem solid #521427;
+  background: #290a13;
+`
+
+export const CenteredLayout = ({ children }: { children: React.ReactNode }) => {
+  const { settings } = useSettings()
+  return (
+    <Root>
+      <Main>
+        <GridBackground
+          src="assets/grid-bg.webp"
+          alt=""
+          aria-hidden="true"
+          width="100%"
+          height="100%"
+        />
+        <MainContent>{children}</MainContent>
+      </Main>
+      <Footer>
+        <Text size="sm" color="gray2">
+          Copyright &copy; {new Date().getFullYear()} QuestDB. All rights
+          reserved.
+        </Text>
+        {settings["release.type"] && (
+          <VersionBadge>
+            <Text size="sm" color="gray2">
+              QuestDB {settings["release.type"] === "EE" ? "Enterprise" : ""}{" "}
+              {settings["release.version"]}
+            </Text>
+          </VersionBadge>
+        )}
+      </Footer>
+    </Root>
+  )
+}

src/components/Form/FormInput/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 import { Button } from "../../Button"
 import { Input as UnstyledInput } from "../../Input"
 import { Eye, EyeOff } from "@styled-icons/remix-line"
@@ -14,9 +14,14 @@ export type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   autoComplete?: string
 }
 
-const Wrapper = styled.div<{ autoComplete: FormInputProps["autoComplete"] }>`
+const Wrapper = styled.div<{
+  autoComplete: FormInputProps["autoComplete"]
+  type: FormInputProps["type"]
+}>`
   display: flex;
   width: 100%;
+  position: relative;
+  align-items: center;
   ${(props) =>
     props.autoComplete === "off" &&
     `
@@ -26,22 +31,46 @@ const Wrapper = styled.div<{ autoComplete: FormInputProps["autoComplete"] }>`
       display: none !important;
     }
   `}
+  ${(props) =>
+    props.type === "password" &&
+    `
+    border-radius: 8px;
+  `}
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
+    -webkit-transition-delay: 9999s;
+  }
 `
 
-const Input = styled(UnstyledInput)<FormInputProps>`
+const Input = styled(UnstyledInput)<
+  FormInputProps & { $inputType: FormInputProps["type"] }
+>`
   ${(props) => props.disabled && `opacity: 0.7;`}
+  ${({ $inputType }) =>
+    $inputType === "password" &&
+    css`
+      width: calc(100% + 3.2rem);
+      padding-right: 4.2rem !important;
+    `}
 `
 
-const ToggleButton = styled(Button)<{ last?: boolean }>`
+const ToggleButton = styled(Button)`
   cursor: pointer;
   border-radius: 0;
+  position: absolute;
+  right: 1.2rem;
+  padding: 0;
 
-  ${(props) =>
-    props.last &&
-    `
-    border-top-right-radius: 0.4rem;
-    border-bottom-right-radius: 0.4rem;
-  `}
+  &:hover {
+    background: transparent !important;
+
+    svg {
+      color: ${({ theme }) => theme.color.foreground};
+    }
+  }
 `
 
 export const FormInput = ({
@@ -69,28 +98,28 @@ export const FormInput = ({
   }, [])
 
   return (
-    <Wrapper autoComplete={autoComplete}>
+    <Wrapper autoComplete={autoComplete} type={type}>
       <Input
         {...register(name, {
           valueAsNumber: type === "number",
         })}
         name={name}
         placeholder={placeholder}
         type={passwordShown ? "text" : type}
+        $inputType={type}
         disabled={disabled}
         showPassword={showPassword}
         autoComplete={autoComplete}
         {...rest}
       />
       {type === "password" && (
         <ToggleButton
-          skin="secondary"
+          skin="transparent"
           onClick={handleTogglePassword}
           title="Toggle password visibility"
           type="button"
-          last
         >
-          {passwordShown ? <Eye size="15px" /> : <EyeOff size="15px" />}
+          {passwordShown ? <Eye size="20px" /> : <EyeOff size="20px" />}
         </ToggleButton>
       )}
     </Wrapper>

src/components/Form/FormItem/index.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import styled from "styled-components"
+import { ErrorWarning } from "@styled-icons/remix-fill"
 import { useFormContext, FieldError } from "react-hook-form"
+import { Box } from "../../../components/Box"
 import { Text } from "../../../components/Text"
 
 type Props = {
@@ -50,6 +52,10 @@ const AfterLabel = styled.span`
   color: ${({ theme }) => theme.color.gray2};
 `
 
+const ErrorIcon = styled(ErrorWarning)`
+  color: ${({ theme }) => theme.color.red};
+`
+
 export const FormItem = ({
   name,
   label,
@@ -86,12 +92,21 @@ export const FormItem = ({
         !error &&
         helperText &&
         (typeof helperText === "string" ? (
-          <Text color="comment">{helperText}</Text>
+          <Text color="comment" size="sm">
+            {helperText}
+          </Text>
         ) : (
           helperText
         ))}
 
-      {name && error && <Text color="red">{error.message}</Text>}
+      {name && error && (
+        <Box align="center" gap="1rem">
+          <ErrorIcon size="20px" />
+          <Text color="red" size="sm">
+            {error.message}
+          </Text>
+        </Box>
+      )}
     </Root>
   )
 }