Renamed coreConcepts icon. Restyled how copy button and tabs appear in code

packages/website/ts/components/docs/code.tsx

@@ -33,25 +33,27 @@ export const Code: React.FC<ICodeProps> = ({ children, lang = 'typescript', run
     };
 
     return (
-        <CodeWrapper>
+        <>
             <CopyToClipboard text={children} onCopy={handleCopyClick}>
                 <CopyButton>{copyButtonText}</CopyButton>
             </CopyToClipboard>
 
-            <SyntaxHighlighter
-                language={lang}
-                customStyle={customStyle}
-                style={style}
-                CodeTag={CodeTag}
-                PreTag={PreTag}
-                showLineNumbers={false}
-                wrapLines={true}
-            >
-                {children}
-            </SyntaxHighlighter>
+            <CodeWrapper>
+                <SyntaxHighlighter
+                    language={lang}
+                    customStyle={customStyle}
+                    style={style}
+                    CodeTag={CodeTag}
+                    PreTag={PreTag}
+                    showLineNumbers={false}
+                    wrapLines={true}
+                >
+                    {children}
+                </SyntaxHighlighter>
 
-            {isRunnable && <CodeRun />}
-        </CodeWrapper>
+                {isRunnable && <CodeRun />}
+            </CodeWrapper>
+        </>
     );
 };
 
@@ -59,7 +61,7 @@ const GUTTER = '10px';
 const BORDER_RADIUS = '4px';
 
 const CodeWrapper = styled.div`
-    position: relative;
+    clear: both;
     max-width: 700px;
     margin-bottom: 1.875rem;
     padding: ${GUTTER};
@@ -92,11 +94,10 @@ const CodeTag = styled.code`
 `;
 
 const CopyButton = styled(Button)`
-    position: absolute;
-    right: 0;
-    top: -48px;
+    float: right;
     height: 32px;
     padding: 0 12px;
+    margin-bottom: 13px;
     font-size: 14px;
     font-weight: 300;
     background: white;

packages/website/ts/components/docs/tabs.tsx

@@ -19,17 +19,12 @@ export const Tabs = styled(OriginalTabs).attrs({
     selectedTabClassName: 'is-active',
 })<ITabProps>`
     margin-bottom: 1.875rem;
-
-    .is-active {
-        background-color: ${colors.backgroundLight};
-        color: ${colors.brandDark};
-    }
+    position: relative;
 `;
 
 export const TabPanel = styled(OriginalTabPanel).attrs({
     selectedClassName: 'is-active',
 })<ITabProps>`
-    background-color: ${colors.backgroundLight};
     border-radius: 4px;
     display: none;
 
@@ -40,6 +35,8 @@ export const TabPanel = styled(OriginalTabPanel).attrs({
 
 export const TabList = styled(OriginalTabList)<ITabProps>`
     display: flex;
+    position: absolute;
+    top: 5px;
 `;
 
 export const Tab = styled(OriginalTab)<ITabProps>`
@@ -49,4 +46,9 @@ export const Tab = styled(OriginalTab)<ITabProps>`
     font-size: 16px;
     font-weight: 300;
     color: ${colors.textDarkSecondary};
+
+    &.is-active {
+        background-color: ${colors.backgroundLight};
+        color: ${colors.brandDark};
+    }
 `;

packages/website/ts/pages/docs/home.tsx

@@ -93,7 +93,7 @@ const shortcuts: IShortcutLinkProps[] = [
     {
         heading: 'Core Concepts',
         description: 'Understand the fundamentals of 0x development',
-        icon: '0x-coreConcepts',
+        icon: 'coreConcepts',
         url: '/docs/core-concepts',
     },
     {
@@ -139,14 +139,14 @@ const getStartedLinks: IShortcutLinkProps[] = [
     {
         heading: 'Launch an exchange in 30 seconds',
         description: 'Learn how to spin up an exchange or marketplace in seconds.',
-        icon: '0x-coreConcepts',
+        icon: 'coreConcepts',
         url: '/docs/core-concepts',
     },
     {
         heading: 'Tap into contract-fillable liquidity',
         description: 'Source contract-fillable liquidity at the best prices from 0x.',
         icon: 'apiExplorer',
-        url: '/docs/core-concepts',
+        url: '/docs/api-explorer',
     },
     {
         heading: 'Launch your in-game marketplace',