Dev Portal - Designer Edits

gatsby-config.js

@@ -172,23 +172,25 @@ module.exports = {
     {
       resolve: 'gatsby-transform-md-docs',
       options: {
-        slugPrefix: 'docs',
         langConfig: {
           langs: CONFIGURED_LOCALES,
           defaultLangKey,
           prefixDefaultLangKey,
-        }
+        },
+        projects: ['colonyJS', 'colonyNetwork', 'colonyStarter', 'purser', 'tailor'],
+        slugPrefix: 'docs',
       }
     },
     {
       resolve: 'gatsby-transform-md-tutorials',
       options: {
-        slugPrefix: 'tutorials',
         langConfig: {
           langs: CONFIGURED_LOCALES,
           defaultLangKey,
           prefixDefaultLangKey,
-        }
+        },
+        projects: ['colonyTutorials'],
+        slugPrefix: 'tutorials',
       }
     },
     {

src/modules/core/components/Heading/Heading.jsx

@@ -11,8 +11,8 @@ import { getChildrenOrText } from '~utils/strings';
 import styles from './Heading.module.css';
 
 export type Appearance = {|
-  theme?: 'dark' | 'light' | 'invert' | 'primary',
-  margin?: 'none' | 'tiny' | 'small' | 'double',
+  theme?: 'dark' | 'light' | 'invert' | 'primary' | 'grey',
+  margin?: 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'double',
   size?:
     | 'tiny'
     | 'small'

src/modules/core/components/Heading/Heading.module.css

@@ -1,3 +1,5 @@
+@value mediumDown from '~styles/breakpoints.css';
+
 .main {
   color: rgba(0, 0, 0, 0.8);
 }
@@ -16,6 +18,14 @@
   margin-bottom: 6px !important;
 }
 
+.marginMedium {
+  margin-bottom: 12px !important;
+}
+
+.marginLarge {
+  margin-bottom: 24px !important;
+}
+
 .marginDouble {
   margin-bottom: 40px;
 }
@@ -47,7 +57,7 @@
 
 .sizeLarge {
   font-size: 32px;
-  line-height: 45px;
+  line-height: 50px;
 }
 
 .sizeHuge {
@@ -71,6 +81,10 @@
   color: #289BDC;
 }
 
+.themeGrey {
+  color: #2E4153;
+}
+
 /* Weights */
 .weightThin {
   font-family: 'Avenir Next Light';
@@ -83,3 +97,10 @@
 .weightBold {
   font-weight: 500;
 }
+
+@media (mediumDown) {
+  .sizeLarge {
+    letter-spacing: .2px;
+    line-height: 1.2em;
+  }
+}

src/modules/core/components/Link/Link.module.css

@@ -7,6 +7,7 @@
   font-size: 14px;
   transition-duration: .2s;
   width: 14px;
+  font-family: 'Avenir Next Light';
 }
 
 .left::before {

src/modules/core/components/NavigationToggle/NavigationToggle.module.css

@@ -1,16 +1,16 @@
 @value smallUp, mediumUp, largeUp from '~styles/breakpoints.css';
 
 .main {
-  height: 24px;
-  width: 28px;
+  height: 18px;
+  width: 20px;
   position: relative;
 }
 
 .mobileIcon {
   background: none;
   border: none;
-  width: 28px;
-  height: 24px;
+  width: 20px;
+  height: 18px;
   padding: 0;
   position: absolute;
   top: 0;
@@ -25,7 +25,7 @@
   left: 0;
   position: absolute;
   width: 100%;
-  height: 4px;
+  height: 2px;
   transition: all 200ms ease-out;
 }
 
@@ -35,7 +35,7 @@
 
 .mobileIcon .mobileIconLine:nth-child(2),
 .mobileIcon .mobileIconLine:nth-child(3) {
-  top: 10px;
+  top: 8px;
 }
 
 .mobileIcon .mobileIconLine:nth-child(4) {

src/modules/core/components/Search/algolia-overrides.css

@@ -3,14 +3,34 @@
 }
 
 .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor  .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
-  background-color: rgb(240, 245, 250);
+  background-color: #f0f5f7;
 }
 
 .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
   color: currentColor;
-  background-color: rgb(105, 220, 210);
+  background-color: transparent;
 }
 
 .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
-  box-shadow: inset 0 -2px 0 0 rgb(105, 220, 210);
+  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, .3);
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  color: #2E4153;
+  font-weight: normal;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  padding-left: 0;
+  padding-right: 0;
+  text-align: left;
+  width: 25%;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--content {
+  width: 75%;
+}
+
+.ds-suggestion:not(:first-of-type) .algolia-docsearch-suggestion--category-header {
+  margin-top: 18px;
 }

src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.jsx

@@ -7,9 +7,12 @@ import { graphql, useStaticQuery } from 'gatsby';
 
 import type { Project } from '~types';
 
+import { transformProjectData } from '~utils/docs';
+
 import Header from './Header';
 import Footer from './Footer';
-import { transformProjectData } from '~utils/docs';
+
+import styles from './DeveloperPortalLayout.module.css';
 
 type Props = {|
   children: Node,
@@ -39,7 +42,7 @@ const DeveloperPortalLayout = ({ children, intl: { locale } }: Props) => {
         coreProjects={coreProjects}
         openSourceProjects={openSourceProjects}
       />
-      <div>{children}</div>
+      <div className={styles.body}>{children}</div>
       <Footer
         coreProjects={coreProjects}
         openSourceProjects={openSourceProjects}

src/modules/layouts/components/DeveloperPortalLayout/DeveloperPortalLayout.module.css

@@ -0,0 +1,3 @@
+body {
+  background-color: #fff;
+}

src/modules/layouts/components/DeveloperPortalLayout/DocsDropdownContent/DocsDropdownContent.module.css

@@ -11,43 +11,38 @@
 }
 
 .heroLink {
-  display: block;
-  height: 82px;
+  display: none;
 }
 
 .hero {
-  align-items: stretch;
+  align-items: center;
+  background-color: #ffffff;
   border-radius: borderRadius;
-  display: flex;
+  box-shadow: boxShadow;
+  display: none;
+  padding: 15px;
 }
 
 .logoContainer {
-  background-color: #ffffff;
-  border-radius: borderRadius;
-  box-shadow: boxShadow;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .logo {
   height: auto;
-  margin: 5px;
-  padding: 10px;
-  width: 59px;
+  margin: 0;
+  padding: 0;
+  width: 40px;
 }
 
 .cta {
   align-self: stretch;
-  background-color: #ffffff;
-  border-radius: borderRadius;
-  box-shadow: boxShadow;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin: 0 0 0 10px;
   width: 100%;
-  padding: 15px 20px;
+  padding: 0 0 0 15px;
 }
 
 .heroLink:hover .hero {
@@ -69,7 +64,6 @@
 .menuContent {
   display: flex;
   justify-content: space-between;
-  margin: 45px 0 0;
 }
 
 .menuContent a {
@@ -87,13 +81,25 @@
 @media (mediumUp) {
   .main {
     border-bottom: none;
-    padding: 40px;
+    padding: 40px 40px 32px;
+  }
+
+  .heroLink {
+    display: block;
+  }
+
+  .hero {
+    display: flex;
   }
 
   .cta {
     min-width: 315px;
   }
 
+  .menuContent {
+    margin: 32px 0 0;
+  }
+
   .menuContent a {
     color: #00284B;
   }

src/modules/layouts/components/DeveloperPortalLayout/Header/Header.module.css

@@ -4,6 +4,7 @@
   background-color: #021C2B;
   display: flex;
   justify-content: center;
+  padding: 20px 0;
 }
 
 .menuWrapper {
@@ -56,6 +57,7 @@
 }
 
 .dropdownParent {
+  display: none;
   cursor: default;
 }
 
@@ -77,10 +79,14 @@
 .navToggle {
   position: absolute;
   right: 0;
-  top: 16px;
+  top: 19px;
 }
 
 @media (mediumUp) {
+  .main {
+    padding: 0;
+  }
+
   .menuWrapper {
     align-items: center;
     flex-direction: row;
@@ -106,6 +112,10 @@
     margin-left: 30px;
   }
 
+  .dropdownParent {
+    display: block;
+  }
+
   .docsDropdownParent .docsDropdownContainer {
     display: block;
   }

src/modules/layouts/components/MainLayout/MainLayout.module.css

@@ -6,14 +6,6 @@
   font-family: "Avenir Next", "Helvetica", "Arial", sans-serif;
 }
 
-:global [id]:before {
-  display: block;
-  content: "";
-  margin-top: -60px;
-  height: 60px;
-  visibility: hidden;
-}
-
 .gridContainer {
   display: grid;
   grid-template-rows: 80px auto auto;

src/modules/pages/components/Developers/CoreProducts/CoreProducts.module.css

@@ -1,7 +1,7 @@
 @value mediumUp, largeUp from '~styles/breakpoints.css';
 
 .main {
-  padding: 0 4% 50px;
+  padding: 0 4% 0;
   position: relative;
 }
 
@@ -26,15 +26,15 @@
 }
 
 .sectionIntroContent {
-  padding: 100px 25% 80px;
+  padding: 70px 10% 40px;
   text-align: center;
 }
 
 .coreProductsRow {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding: 0 20%;
+  padding: 0 10%;
 }
 
 .coreProductsItem {
@@ -44,10 +44,18 @@
 }
 
 .coreProductsItem + .coreProductsItem {
-  margin-top: 60px;
+  margin-top: 40px;
 }
 
 @media (mediumUp) {
+  .main {
+    padding: 0 4% 50px;
+  }
+
+  .sectionIntroContent {
+    padding: 100px 25% 80px;
+  }
+
   .coreProductsRow {
     align-items: stretch;
     flex-direction: row;