Minor changes to website style (#3879)

Author: tobias-tengler

website/gatsby-config.js

@@ -68,6 +68,7 @@ module.exports = {
                         viewBox="0 0 512 512"
                         width="16"
                         height="16"
+                        fill="var(--heading-text-color)"
                       >
                         <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" />
                       </svg>`,
@@ -173,13 +174,8 @@ module.exports = {
         }`,
         setup: (options) => {
           const { pathPrefix } = options.query.site;
-          const {
-            author,
-            company,
-            description,
-            siteUrl,
-            title,
-          } = options.query.site.siteMetadata;
+          const { author, company, description, siteUrl, title } =
+            options.query.site.siteMetadata;
           const baseUrl = siteUrl + pathPrefix;
           const currentYear = new Date().getUTCFullYear();
 

website/src/components/mdx/code-block.tsx

@@ -1,7 +1,7 @@
-import React, { FunctionComponent } from "react";
-import styled from "styled-components";
 import Highlight, { Language } from "prism-react-renderer";
 import Prism from "prismjs";
+import React, { FunctionComponent } from "react";
+import styled from "styled-components";
 import { Copy } from "./copy";
 
 interface CodeBlockProps {

website/src/components/mdx/inline-code.tsx

@@ -0,0 +1,12 @@
+import React, { FunctionComponent } from "react";
+import styled from "styled-components";
+
+export const InlineCode: FunctionComponent = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+
+const Container = styled.code`
+  padding: 2px 5px;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: var(--font-size);
+`;

website/src/components/misc/global-style.tsx

@@ -28,6 +28,8 @@ export const GlobalStyle = createGlobalStyle`
   :root {
     --brand-color: #f40010;
     --brand-color-hover: #b7020a;
+    --text-color: #667;
+    --heading-text-color: #334;
     --text-color-contrast: #fff;
     --border-radius: 4px;
     --font-size: .833rem;
@@ -42,7 +44,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     font-size: 18px;
     line-height: 30px;
-    color: #667;
+    color: var(--text-color);
     scroll-behavior: smooth;
 
     -webkit-font-smoothing: antialiased;
@@ -88,18 +90,12 @@ export const GlobalStyle = createGlobalStyle`
     font-weight: bold;
     line-height: 1.250em;
     text-rendering: optimizeLegibility;
-    color: #334;
+    color: var(--heading-text-color);
   }
 
   p {
     margin-bottom: 20px;
     line-height: 1.667em;
-
-    code {
-      padding: 2px 5px;
-      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-      font-size: var(--font-size);
-    }
   }
 
   h1 {

website/src/components/misc/marketing-elements.tsx

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-
 import CheckIconSvg from "../../images/check.svg";
 import EnvelopeIconSvg from "../../images/envelope.svg";
 import SlackIconSvg from "../../images/slack.svg";
@@ -85,7 +84,7 @@ export const ContentContainer = styled.div<{ noImage?: boolean }>`
 export const SectionTitle = styled.h1<{ centerAlways?: boolean }>`
   flex: 0 0 auto;
   font-size: 1.75em;
-  color: #667;
+  color: var(--text-color);
   text-align: center;
 
   @media only screen and (min-width: 768px) {

website/src/components/misc/search.tsx

@@ -17,14 +17,13 @@ import {
   InstantSearch,
   Snippet,
 } from "react-instantsearch-dom";
-import { useDispatch, useStore, useSelector } from "react-redux";
+import { useDispatch, useSelector, useStore } from "react-redux";
 import styled from "styled-components";
+import AlgoliaLogoSvg from "../../images/algolia-logo.svg";
 import { State } from "../../state";
 import { changeSearchQuery } from "../../state/common";
 import { Link } from "./link";
 
-import AlgoliaLogoSvg from "../../images/algolia-logo.svg";
-
 interface SearchProperties {
   siteUrl: string;
 }
@@ -133,17 +132,17 @@ const Stats = connectStateResults(
     }` as any)
 );
 
-const DocHit = (siteUrl: string, clickHandler: () => void) => ({
-  hit,
-}: HitComponentProperties) => {
-  const slug = (hit.url as string).replace(siteUrl, "");
+const DocHit =
+  (siteUrl: string, clickHandler: () => void) =>
+  ({ hit }: HitComponentProperties) => {
+    const slug = (hit.url as string).replace(siteUrl, "");
 
-  return (
-    <Link to={slug} onClick={clickHandler}>
-      <Snippet attribute="content" hit={hit} tagName="mark" />
-    </Link>
-  );
-};
+    return (
+      <Link to={slug} onClick={clickHandler}>
+        <Snippet attribute="content" hit={hit} tagName="mark" />
+      </Link>
+    );
+  };
 
 const Container = styled.div`
   display: flex;
@@ -199,7 +198,7 @@ const HitsWrapper = styled.div<{ show: boolean }>`
       color: var(--brand-color);
 
       &:hover {
-        color: #667;
+        color: var(--text-color);
       }
     }
   }

website/src/components/structure/layout.tsx

@@ -1,6 +1,7 @@
 import { MDXProvider } from "@mdx-js/react";
 import React, { FunctionComponent } from "react";
 import { CodeBlock } from "../mdx/code-block";
+import { InlineCode } from "../mdx/inline-code";
 import { CookieConsent } from "../misc/cookie-consent";
 import { GlobalLayoutStyle, GlobalStyle } from "../misc/global-style";
 import { Header } from "./header";
@@ -9,6 +10,7 @@ import { MainContentContainer } from "./main-content-container/main-content-cont
 export const Layout: FunctionComponent = ({ children }) => {
   const components = {
     pre: CodeBlock,
+    inlineCode: InlineCode,
   };
 
   return (

website/src/pages/index.tsx

@@ -533,7 +533,7 @@ const ArticleMetadata = styled.div`
   align-items: center;
   margin: 15px 20px 7px;
   font-size: 0.778em;
-  color: #667;
+  color: var(--text-color);
 `;
 
 const ArticleTitle = styled.h1`
@@ -555,7 +555,7 @@ const Logo = styled.div<{ width?: number }>`
   width: ${({ width }) => width || 160}px;
 
   > a > svg {
-    fill: #667;
+    fill: var(--text-color);
     transition: fill 0.2s ease-in-out;
 
     &:hover {

website/src/partials/sales-partial.tsx

@@ -135,7 +135,7 @@ const SwiterContainer = styled.div`
 const Title = styled.h1`
   flex: 0 0 auto;
   font-size: 1.75em;
-  color: #667;
+  color: var(--text-color);
   text-align: center;
 
   ${IsPhablet(`