Design Updates for the History Component

packages/dag-history-component/src/components/Bookmark/EditBookmark.tsx

@@ -170,6 +170,7 @@ export default class EditBookmark extends React.Component<EditBookmarkProps> {
 							highlight={selectedDepth}
 							leadIn={numLeadInStates}
 							active={active}
+							style={{ height: 8 }}
 							onIndexClicked={(idx: number) =>
 								onDiscoveryTrailIndexClicked(idx)
 							}

packages/dag-history-component/src/components/DiscoveryTrail/calculateSpans.ts

@@ -15,9 +15,13 @@ export default function calculateSpans(
 	if (isNumber(leadIn) && leadIn !== 0) {
 		spans = insertSpan(spans, new Span(depth - leadIn, depth + 1, 'leadin'))
 	}
-	if (isNumber(highlight)) {
+	if (active && depth > 1) {
 		const type = active ? 'highlighted' : 'highlightedInactive'
-		spans = insertSpan(spans, new Span(highlight, highlight + 1, type))
+		const highlightDepth = highlight || depth
+		spans = insertSpan(
+			spans,
+			new Span(highlightDepth, highlightDepth + 1, type),
+		)
 	}
 	return spans
 }

packages/dag-history-component/src/components/DiscoveryTrail/index.tsx

@@ -47,6 +47,8 @@ export interface DiscoveryTrailProps {
 	 * If not full width, renders curved ends
 	 */
 	fullWidth?: boolean
+
+	style?: React.CSSProperties
 }
 
 export default class DiscoveryTrail extends React.Component<
@@ -99,6 +101,7 @@ export default class DiscoveryTrail extends React.Component<
 			highlight,
 			leadIn,
 			active,
+			style,
 			bookmark: isBookmark,
 			fullWidth: isFullWidth,
 		} = this.props
@@ -118,6 +121,7 @@ export default class DiscoveryTrail extends React.Component<
 		return (
 			<Pager
 				className={this.pagerClass}
+				style={style}
 				onClick={e => this.handleClick(e)}
 				innerRef={(e: HTMLDivElement) => (this.containerDiv = e)}
 			>

packages/dag-history-component/src/components/DiscoveryTrail/styled.ts

@@ -1,16 +1,16 @@
 import * as react from 'react'
 import styled, { StyledComponentClass } from 'styled-components'
 
-const minPagerWidth = '6px'
+const minPagerWidth = '3px'
 const emptyStateColor = 'white'
-const highlightedStateInactiveBookmarkColor = '#ABEBC6'
-const highlightedStateColor = '#2ECC71'
-const leadInStateColor = '#ABEBC6'
+const highlightedStateInactiveBookmarkColor = 'white'
+const highlightedStateColor = '#bbf0d1'
+const leadInStateColor = '#dbf7e7'
 const emptyBookmarkColor = 'white'
 const highlightedBookmarkInactiveBookmarkColor = '#ebc6ab'
-const highlightedBookmarkColor = '#f93'
+const highlightedBookmarkColor = '#555'
 const leadInBookmarkColor = '#f5e2d4'
-const statePagerBorderColor = '1px solid #cbcbcb'
+const statePagerBorderColor = 'none'
 
 export const PagerState = styled.div``