Fix table font-sizes and dropdown arrow alignment (#1135)

* Fix table font-sizes and dropdown arrow alignment

* Fix font-size for table bodies

Author: timothyis

components/api/table.js

@@ -154,8 +154,8 @@ export function Cell({ children, isHead, center }) {
           th {
             padding: 12px 20px 12px 0;
             color: #999;
-            font-size: var(--font-size-primary);
-            line-height: var(--line-height-primary);
+            font-size: var(--font-size-small);
+            line-height: var(--line-height-small);
             font-weight: normal;
             text-align: left;
             text-transform: uppercase;
@@ -177,8 +177,8 @@ export function Cell({ children, isHead, center }) {
         <style jsx>{`
           td {
             border-bottom: 1px solid var(--accents-2);
-            font-size: var(--font-size-primary);
-            line-height: var(--line-height-primary);
+            font-size: var(--font-size-small);
+            line-height: var(--line-height-small);
             padding: 12px 20px 12px 0;
             vertical-align: top;
           }

components/layout/header/header.js

@@ -338,6 +338,7 @@ class Header extends Component {
                   >
                     <MenuPopOver
                       title="API"
+                      offsetArrowLeft={60}
                       primaryList={[
                         { title: 'Platform API', url: '/docs/api' },
                         {

components/layout/header/menu-popover.js

@@ -31,7 +31,8 @@ export class MenuPopOver extends Component {
       secondaryTitle,
       primaryList,
       secondaryList,
-      blogItem
+      blogItem,
+      offsetArrowLeft
     } = this.props
     const contentWidth = primaryList && secondaryList ? 480 : 160
     return (
@@ -53,7 +54,9 @@ export class MenuPopOver extends Component {
           offsetTop={0}
           to={
             <PopOver.Menu
-              tipOffset={dashboard ? 58 : 60}
+              tipOffset={
+                offsetArrowLeft ? offsetArrowLeft : dashboard ? 58 : 60
+              }
               noPadding
               width={dashboard ? 140 : contentWidth}
             >

components/table/table-body.js

@@ -15,8 +15,8 @@ const TableBody = ({ children, ...props }) => (
 
       tbody :global(td) {
         color: #444444;
-        font-size: var(--font-size-primary);
-        line-height: var(--line-height-primary);
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-small);
       }
     `}</style>
   </tbody>

components/table/table.js

@@ -63,8 +63,8 @@ const Table = ({ children, className, ...other }) => {
           display: flex;
           align-items: center;
           padding: 10px 0;
-          line-height: var(--line-height-primary);
-          font-size: var(--font-size-primary);
+          line-height: var(--line-height-small);
+          font-size: var(--font-size-small);
         }
 
         table :global(td > div) {
@@ -80,8 +80,8 @@ const Table = ({ children, className, ...other }) => {
 
         table :global(th) {
           color: #666;
-          font-size: var(--font-size-primary);
-          line-height: var(--line-height-primary);
+          font-size: var(--font-size-small);
+          line-height: var(--line-height-small);
           font-weight: 400;
           letter-spacing: 0;
         }