feat(console): add github banner with a toggle flag in the config (#447)

ui/assets/console-configuration.json

 {
+  "githubBanner": false,
   "readOnly": false,
   "savedQueries": []
 }

ui/src/components/Emoji/index.tsx

+import styled from "styled-components"
+
+export const Emoji = styled.span`
+  font-family: ${({ theme }) => theme.fontEmoji};
+`

ui/src/components/Link/index.tsx

 import React from "react"
 import styled from "styled-components"
 
+import type { Color } from "types"
 import { color } from "utils"
 
 import { Text, textStyles, TextProps } from "../Text"
@@ -8,6 +9,7 @@ import { Text, textStyles, TextProps } from "../Text"
 const defaultProps = Text.defaultProps
 
 type Props = Readonly<{
+  hoverColor: Color
   href: string
   rel?: string
   target?: string
@@ -17,10 +19,12 @@ type Props = Readonly<{
 const Wrapper = styled.a<Props>`
   ${textStyles};
   text-decoration: none;
+  line-height: 1;
 
   &:hover:not([disabled]),
   &:focus:not([disabled]) {
-    color: ${color("draculaCyan")};
+    color: ${(props) =>
+      props.hoverColor ? color(props.hoverColor) : "inherit"};
   }
 `
 

ui/src/components/index.ts

 export * from "./Animation"
 export * from "./Button"
+export * from "./Emoji"
 export * from "./Hooks"
 export * from "./Input"
 export * from "./Link"

ui/src/scenes/Footer/index.tsx

@@ -21,11 +21,16 @@
  *  limitations under the License.
  *
  ******************************************************************************/
-import React from "react"
-import styled from "styled-components"
+import React, { useCallback, useEffect, useState } from "react"
+import { useSelector } from "react-redux"
+import { CSSTransition } from "react-transition-group"
+import styled, { createGlobalStyle } from "styled-components"
 import { Github } from "@styled-icons/remix-fill/Github"
 
-import { Link } from "components"
+import { Link, Text, TransitionDuration } from "components"
+import { selectors } from "store"
+
+import GithubBanner from "../GithubBanner"
 
 const Copyright = styled.div`
   display: flex;
@@ -40,22 +45,69 @@ const Icons = styled.div`
   align-items: center;
 `
 
-const Footer = () => (
-  <>
-    <Copyright>
-      Copyright &copy; 2014-{new Date().getFullYear()} QuestDB
-    </Copyright>
-    <Icons>
-      <Link
-        color="draculaForeground"
-        href="https://github.com/questdb/questdb"
-        rel="noreferrer"
-        target="_blank"
+const GithubBannerTransition = createGlobalStyle`
+  .github-banner-enter {
+    max-height: 0;
+  }
+
+  .github-banner-enter-active {
+    max-height: 4rem;
+    transition: all ${TransitionDuration.REG}ms;
+  }
+
+  .github-banner-exit,
+  .github-banner-enter-done {
+    max-height: 4rem;
+  }
+
+  .github-banner-exit-active {
+    max-height: 0;
+    transition: all ${TransitionDuration.REG}ms;
+  }
+`
+
+const Footer = () => {
+  const [showBanner, setShowBanner] = useState(false)
+  const handleClick = useCallback(() => {
+    setShowBanner(false)
+  }, [])
+  const { githubBanner } = useSelector(selectors.console.getConfiguration)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowBanner(true)
+    }, 2e3)
+  }, [])
+
+  return (
+    <>
+      <GithubBannerTransition />
+      <Copyright>
+        <Text color="draculaForeground">
+          Copyright &copy; 2014-{new Date().getFullYear()} QuestDB
+        </Text>
+      </Copyright>
+      <Icons>
+        <Link
+          color="draculaForeground"
+          hoverColor="draculaCyan"
+          href="https://github.com/questdb/questdb"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <Github size="18px" />
+        </Link>
+      </Icons>
+      <CSSTransition
+        classNames="github-banner"
+        in={showBanner && githubBanner}
+        timeout={TransitionDuration.REG}
+        unmountOnExit
       >
-        <Github size="18px" />
-      </Link>
-    </Icons>
-  </>
-)
+        <GithubBanner onClick={handleClick} />
+      </CSSTransition>
+    </>
+  )
+}
 
 export default Footer

ui/src/scenes/GithubBanner/index.tsx

+/*******************************************************************************
+ *     ___                  _   ____  ____
+ *    / _ \ _   _  ___  ___| |_|  _ \| __ )
+ *   | | | | | | |/ _ \/ __| __| | | |  _ \
+ *   | |_| | |_| |  __/\__ \ |_| |_| | |_) |
+ *    \__\_\\__,_|\___||___/\__|____/|____/
+ *
+ *  Copyright (c) 2014-2019 Appsicle
+ *  Copyright (c) 2019-2020 QuestDB
+ *
+ *  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 React from "react"
+import styled from "styled-components"
+import { Close } from "@styled-icons/remix-line/Close"
+import { Star } from "@styled-icons/remix-fill/Star"
+
+import { Link } from "components"
+import { color } from "utils"
+
+type Props = Readonly<{
+  onClick: () => void
+}>
+
+const Wrapper = styled.div`
+  position: fixed;
+  display: flex;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: ${color("draculaPink")};
+  overflow: hidden;
+`
+
+const GithubLink = styled.span`
+  text-decoration: underline;
+`
+
+const CloseIcon = styled(Close)`
+  position: absolute;
+  right: 1rem;
+  color: ${color("black")};
+
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+const StarIcon = styled(Star)`
+  color: ${color("draculaYellow")};
+`
+
+const GithubBanner = ({ onClick }: Props) => (
+  <Wrapper>
+    <Link
+      hoverColor="black"
+      href="https://github.com/questdb/questdb"
+      weight={800}
+    >
+      If you like QuestDB, give us a <StarIcon size="14px" />
+      &nbsp;on&nbsp;
+      <GithubLink>Github</GithubLink>
+    </Link>
+    <CloseIcon onClick={onClick} size="20px" />
+  </Wrapper>
+)
+
+export default GithubBanner

ui/src/store/Console/reducers.ts

@@ -10,6 +10,8 @@ export const initialState: ConsoleStateShape = {
 }
 
 export const defaultConfiguration: ConfigurationShape = {
+  githubBanner: false,
+  readOnly: false,
   savedQueries: [],
 }
 

ui/src/store/Console/types.ts

@@ -4,6 +4,7 @@ export type QueryShape = Readonly<{
 }>
 
 export type ConfigurationShape = Readonly<{
+  githubBanner: boolean
   readOnly?: boolean
   savedQueries: QueryShape[]
 }>

ui/src/styles/_base.scss

@@ -278,7 +278,8 @@ ol.unstyled {
 #footer {
   display: flex;
   background: #21222c;
-  flex: 0 0 40px;
+  flex: 0 0 4rem;
+  height: 4rem;
   color: #f8f8f2;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

ui/src/theme/index.ts

@@ -36,6 +36,9 @@ export const theme: DefaultThemeShape = {
   color,
   font:
     '"Open Sans", -apple-system, BlinkMacSystemFont, Helvetica, Roboto, sans-serif',
+
+  fontEmoji:
+    '"apple color emoji", "segoe ui emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", "noto color emoji"',
   fontMonospace: '"Source Code Pro", monospace',
   fontSize,
 }

ui/src/types/styled.d.ts

@@ -38,6 +38,7 @@ declare module "styled-components" {
     baseFontSize: string
     color: ColorShape
     font: string
+    fontEmoji: string
     fontMonospace: string
     fontSize: FontSizeShape
   }