UX improvements per Paul design

gatsby-browser.js

@@ -2,14 +2,9 @@ require("prismjs/themes/prism-okaidia.css");
 require("./src/theme/assets/scss/theme.scss");
 require('./src/theme/assets/fontawesome/css/all.css');
 require('./src/theme/assets/search/algolia.css');
-const smoothScroll = require('smooth-scroll');
 const Layout = require('./src/components/Layout').default;
 const React = require('react');
 
-if (typeof window !== "undefined") {
-    smoothScroll('a[href*="#"]')
-  }  
-
 exports.wrapPageElement = ({ element, props }) => {
     return <Layout {...props}>{element}</Layout>
 };

gatsby-config.js

@@ -16,7 +16,7 @@ module.exports = {
       resolve: `gatsby-source-git`,
       options: {
         name: `4`,
-        remote: `/Users/acarlino/Sites/gatsby-docs-4`,
+        remote: `https://github.com/silverstripe/silverstripe-framework.git`,
         branch: `4`,
         patterns: `docs/en/**`
       }

src/components/Header.tsx

@@ -36,10 +36,11 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
           <div className="container position-relative py-2 d-flex">
             <div className="docs-logo-wrapper">
               <div className="site-logo">
-                <Link className="navbar-brand" to={ home ? home.slug : '/'} title="Go to the home page">
+                <Link style={{ backgroundImage: `url(${logo})`}} className="navbar-brand" to={ home ? home.slug : '/'} title="Go to the home page">                  
-                  <img src={logo} alt="Silverstripe CMS documentation" />
+                  Silverstripe CMS Documentation
-                  <span>Documentation</span>
                 </Link>
+                <span />
+                <span>Documentation</span>
               </div>    
 
             </div>
@@ -50,7 +51,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
                   <SearchBox identifier="header-search" />
                 </form>
               </div>
-              <ul className="social-list list-inline d-flex flex-grow-1 flex-lg-grow-0 justify-content-between justify-content-lg-around align-items-center">
+              <ul className="social-list list-inline d-flex flex-grow-1 flex-lg-grow-0 align-items-center">
                 <li className="list-inline-item version-select">
                   <label htmlFor="version-select">Version: </label>
                   <select id="version-select" value={getCurrentVersion() || '4'} onChange={handleNavigate}>

src/components/SearchBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatelessComponent, ReactElement, useEffect } from 'react';
+import { StatelessComponent, ReactElement, useEffect, useState } from 'react';
 import { navigateTo } from "gatsby-link"
 import { getCurrentVersion } from '../utils/nodes';
 
@@ -17,6 +17,7 @@ const autocompleteSelected = (e) => {
 };
 
 const SearchBox: StatelessComponent<SearchBoxProps> = ({ identifier }): ReactElement|null => {
+    const [ isFocused, setFocus ] = useState(false);
     useEffect(() => {
         if (typeof window === 'undefined') return;
 
@@ -40,13 +41,21 @@ const SearchBox: StatelessComponent<SearchBoxProps> = ({ identifier }): ReactEle
       
     }, []);
 
+    const handleFocus = () => setFocus(true);
+    const handleBlur = () => setFocus(false);
+    
+
     return (
+      <>
+            <label className={ isFocused ? `hide` : `show` } htmlFor={identifier}>Search...</label>
             <input
                 id={identifier}
                 type="search"
-                placeholder="Search the docs..."
                 className="form-control search-input"
+                onFocus={handleFocus}
+                onBlur={handleBlur}
             />
+      </>
       )  
 };
 

src/theme/assets/scss/ss-docs.scss

@@ -14,11 +14,30 @@ body {
 .search-form {
     width: 75%;
     margin: 0 auto;
+    position: relative;
+    label {
+        position: absolute;
+        left: 0;
+        top: calc(50% - 0.5rem);
+        font-size: 1rem;
+        z-index: 100;
+        transition: all 0.3s;
+        cursor: text;
+        &.hide {
+            transform: translateY(-15px);
+            opacity: 0;
+        }
+    }
+
     .search-input {
-        border-radius: 5px;
+        border: 1px solid $gray-900;
-        background: $gray-200;
+        border-width: 0 0 1px 0;
+        border-radius: 0;
+        padding: 1rem 0;
         &:focus {
             color: $gray-900;
+            border-color: $gray-900;
+            box-shadow: none;
         }
     }
 }
@@ -82,26 +101,37 @@ code {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    padding: 0 1rem;
     .site-logo {
+        display: flex;
+        align-items: center;
+        justify-content: space-between; 
+        width: 215px;
+        padding-left: 1rem;
         .navbar-brand {
             font-size: 1rem;
+            background-size: cover;
+            background-repeat: no-repeat;
+            width: 32px;
+            height: 32px;
+            text-indent: -9999em;
+            display: inline-block;
             padding: 0;
             margin: 0;
-            display: flex;
+        }
-            flex-direction: column;
+        span {
-            align-items: center;
+            &:nth-child(2) {
-            justify-content: center;
+                width: 1px;
-            span {
+                background: $gray-700;
-                text-transform: uppercase;
+                height: 32px;
-                font-size: 0.8rem;
+            }
-                color: $gray-850;
+            &:nth-child(3) {
+                font-size: 1.25rem;
+                color: darken($gray-850, 5%);
+                font-weight: bold;
+                justify-self: flex-end;
             }
         }
-        img {
+
-            width: 7rem;
-            height: 1.5rem;
-        }
     }
 }
 .docs-top-utilities {
@@ -110,9 +140,12 @@ code {
         margin: 0;
         width: 25%;
         li {
-            margin: 0;
+            margin: 0 1rem;
             width: auto;
             height: auto;
+            a {
+                color: $gray-850;
+            }
         }
         .version-select {
             display: flex;
@@ -123,21 +156,29 @@ code {
             line-height: 1;
             color: $gray-800;
             label {
-                font-size: 0.7rem;
+                font-size: 0.75rem;
                 margin: 0 0.5rem;
-                color: $gray-900;
+                color: $gray-800;
+                text-transform: uppercase;
             }
             select {
                appearance: none;
                 border: 0;
                 color: $gray-800;
-                background: none;
+                background: $theme-color-primary;
+                border-radius: 100px;
+                color: #fff;
+                padding: 0.25rem 1rem 0.25rem 0.5rem;
+                width: 62px;
                 padding-right: 2rem;
-                flex-shrink: 0;         
+                flex-shrink: 0; 
+                font-size: 1rem;        
             }
             i {
                 pointer-events: none;
-                margin-left: -1rem;
+                margin: 5px 0 0 -1.25rem;
+                color: #fff;
+                font-size: 0.8rem;
             }
         }
     }
@@ -211,14 +252,23 @@ h1, h2, h3 {
         width: auto;
         left: 0;
         right: 0;
-    }
+        /* purgecss ignore */
-    /* purgecss ignore */
+        .algolia-autocomplete .ds-dropdown-menu {
-    .algolia-autocomplete .ds-dropdown-menu {
+            min-width: 350px;
-        min-width: 400px;
+            max-width: 470px;
+        }
     }
     .search-form {
         width: auto;
     }
+    .docs-logo-wrapper {
+        .site-logo {
+            width: 180px;
+            span:nth-child(3) {
+                font-size: 0.9rem;
+            }
+        }
+    }
 }
 
 code[class*="language-"], pre[class*="language-"] {
@@ -229,9 +279,14 @@ code[class*="language-"], pre[class*="language-"] {
     background: #f5f6f8;
     color: #5d6778;
     text-shadow: none;
-}                
+}
-.algolia-autocomplete {
+header {               
-    width: 100%;
+    .algolia-autocomplete {
+        width: 100%;
+        .ds-dropdown-menu {
+            min-width: 535px;
+        }
+    }
 }
 .gatsby-highlight {
     margin: 2rem 0;