From 74f05153704d4a9cff355fd8b322b98a1805638c Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 26 Oct 2018 09:23:09 +0200
Subject: alernate prop on inlinecode component

---
 packages/dev-tools-pages/ts/components/Compiler.tsx   |  2 +-
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'packages')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index a5b92da13..995a53e89 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -45,7 +45,7 @@ const cards = [
         title: 'Project-centric',
         body: (
             <React.Fragment>
-                It can compile an entire project instead of only individual <InlineCode>.sol</InlineCode> files
+                It can compile an entire project instead of only individual <InlineCode alt>.sol</InlineCode> files
             </React.Fragment>
         ),
     },
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index bfbaeb395..4b5afa95c 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,8 +1,14 @@
+import * as React from 'react';
 import styled from 'styled-components';
 import { colors } from '../variables';
 
-const InlineCode = styled.code`
-    background-color: ${colors.blueGray}
+interface InlineCodeProps {
+    alt?: boolean;
+    children: React.ReactNode;
+}
+
+const InlineCode = styled(({ alt, children, ...props }: InlineCodeProps) => <code {...props}>{children}</code>)`
+    background-color: ${props => (props.alt ? '#E5E8E9' : colors.blueGray)};
     padding: 0.1875rem;
 `;
 
-- 
cgit v1.2.3