refactor(website): to style markdown elements, update logo colors

commercetools · Apr 27, 2019 · 3afb1e6 · 3afb1e6
1 parent 2f01b35
commit 3afb1e6
Show file tree

Hide file tree

Showing 13 changed files with 832 additions and 152 deletions.
diff --git a/packages/application-components/src/components/dialogs/info-dialog/info-dialog.mdx b/packages/application-components/src/components/dialogs/info-dialog/info-dialog.mdx
@@ -6,16 +6,6 @@ permalink: /components/info-dialog
 
 # InfoDialog
 
-## Usage
-
-```js
-import { InfoDialog } from '@commercetools-frontend/application-components';
-```
-
-#### Description
-
-Info dialogs are controlled components used to show more information about a particular feature, UI element, etc. They are mainly composed of text paragraphs.
-
 import { InfoDialog } from '@commercetools-frontend/application-components';
 import { Spacings, Text } from '@commercetools-frontend/ui-kit';
 
@@ -45,9 +35,15 @@ import { Spacings, Text } from '@commercetools-frontend/ui-kit';
   </InfoDialog>
 </div>
 
-#### Usage
+### Description
+
+Info dialogs are controlled components used to show more information about a particular feature, UI element, etc. They are mainly composed of text paragraphs.
+
+### Usage
+
+```jsx
+import { InfoDialog } from '@commercetools-frontend/application-components';
 
-```js
 <InfoDialog title="Lorem ipsus" isOpen={isOpen} onClose={handleClose}>
   <Spacings.Stack scale="m">
     <Text.Body>{'Lorem ipsus ...'}</Text.Body>
@@ -56,7 +52,7 @@ import { Spacings, Text } from '@commercetools-frontend/ui-kit';
 </InfoDialog>
 ```
 
-#### Properties
+### Properties
 
 | Props               | Type       | Required | Values            | Default | Description                                                                                                                                                                                                                                                                                                 |
 | ------------------- | ---------- | :------: | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -55,6 +55,12 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-favicon`,
+      options: {
+        logo: `${__dirname}/src/images/logo.svg`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

diff --git a/website/package.json b/website/package.json
@@ -22,6 +22,7 @@
     "gatsby-image": "2.0.40",
     "gatsby-mdx": "0.6.2",
     "gatsby-plugin-emotion": "4.0.6",
+    "gatsby-plugin-favicon": "3.1.6",
     "gatsby-plugin-google-fonts": "0.0.4",
     "gatsby-plugin-meta-redirect": "1.1.1",
     "gatsby-plugin-react-helmet": "3.0.12",

diff --git a/website/src/colors.js b/website/src/colors.js
@@ -2,10 +2,13 @@
 export const light = {
   // primary: 'rgb(248, 6, 82)',
   primary: 'rgb(212, 4, 36)',
-  primarySoft: 'rgb(212, 4, 36, 0.3)',
+  primarySoft: 'rgba(212, 4, 36, 0.3)',
   surface: 'rgb(255, 255, 255)',
   cards: 'rgb(232, 239, 247)',
+  cardsSoft: 'rgba(232, 239, 247, 0.3)',
   // highlight: 'rgb(173, 197, 214)',
   borders: 'rgb(34, 47, 63)',
+  bordersSoft: 'rgba(34, 47, 63, 0.2)',
   text: 'rgb(16, 28, 40)',
+  textSoft: 'rgba(16, 28, 40, 0.6)',
 };
diff --git a/website/src/components/code-block.js b/website/src/components/code-block.js
@@ -4,23 +4,17 @@ import Highlight, { defaultProps } from 'prism-react-renderer';
 import { customProperties } from '@commercetools-frontend/ui-kit';
 import * as colors from '../colors';
 
-// TODO: improve colors
 const theme = {
   plain: {
-    backgroundColor: colors.light.surface,
+    backgroundColor: colors.light.cards,
     color: colors.light.text,
   },
   styles: [
     {
-      types: ['comment'],
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
-        color: 'rgb(173, 197, 214)',
-      },
-    },
-    {
-      types: ['prolog', 'doctype', 'cdata', 'punctuation'],
-      style: {
-        color: colors.light.text,
+        color: '#999988',
+        fontStyle: 'italic',
       },
     },
     {
@@ -30,78 +24,57 @@ const theme = {
       },
     },
     {
-      types: ['tag', 'operator', 'number'],
-      style: {
-        color: 'rgb(87, 156, 135)',
-      },
-    },
-    {
-      types: ['property', 'function'],
-      style: {
-        color: 'rgb(254, 127, 45)',
-      },
-    },
-    {
-      types: ['tag-id', 'selector', 'atrule-id'],
+      types: ['string', 'attr-value'],
       style: {
-        color: colors.light.cards,
+        color: colors.light.primary,
       },
     },
     {
-      types: ['attr-name'],
+      types: ['punctuation', 'operator'],
       style: {
-        color: 'rgb(254, 127, 45)',
+        color: colors.light.borders,
       },
     },
     {
       types: [
-        'boolean',
-        'string',
         'entity',
         'url',
-        'attr-value',
-        'keyword',
-        'control',
-        'directive',
-        'unit',
-        'statement',
-        'regex',
-        'at-rule',
-        'placeholder',
+        'symbol',
+        'number',
+        'boolean',
         'variable',
+        'constant',
+        'property',
+        'regex',
+        'inserted',
       ],
       style: {
-        color: colors.light.primary,
+        color: 'rgb(107, 80, 255)',
       },
     },
     {
-      types: ['deleted'],
+      types: ['atrule', 'keyword', 'attr-name', 'selector'],
       style: {
-        textDecorationLine: 'line-through',
-      },
-    },
-    {
-      types: ['inserted'],
-      style: {
-        textDecorationLine: 'underline',
+        color: 'rgb(236, 160, 48)',
+        fontStyle: 'italic',
       },
     },
     {
-      types: ['italic'],
+      types: ['function', 'deleted', 'tag'],
       style: {
-        fontStyle: 'italic',
+        color: 'rgb(236, 160, 48)',
       },
     },
     {
-      types: ['important', 'bold'],
+      types: ['function-variable'],
       style: {
-        fontWeight: 'bold',
+        color: 'rgb(107, 80, 255)',
       },
     },
     {
-      types: ['important'],
+      types: ['tag', 'selector', 'keyword'],
       style: {
-        color: colors.light.primary,
+        color: 'rgb(4, 138, 191)',
       },
     },
   ],
@@ -132,9 +105,13 @@ const CodeBlock = props => {
         >
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
+              {line.map((token, key) => {
+                if (tokens.length === i + 1 && token.empty) {
+                  return null;
+                }
+                const tokenProps = getTokenProps({ token, key });
+                return <span key={key} {...tokenProps} />;
+              })}
             </div>
           ))}
         </pre>

diff --git a/website/src/components/footer.js b/website/src/components/footer.js
@@ -31,7 +31,8 @@ const Footer = () => (
             color: ${colors.light.text};
           `}
         >
-          {'copyright'} &copy; {`commercetools ${new Date().getFullYear()}`}
+          {'copyright'} &copy;{' '}
+          {`${new Date().getFullYear()} commercetools GmbH`}
         </div>
       </Spacings.Stack>
     </div>

diff --git a/website/src/components/layout.js b/website/src/components/layout.js
@@ -60,7 +60,7 @@ const Layout = props => {
               display: flex;
               flex-direction: column;
               width: 256px;
-              border-right: 1px solid ${colors.light.borders};
+              border-right: 2px solid ${colors.light.cards};
             `}
           >
             <Navbar />