Add theming to timeline and taskview

Author: rsanteri

src/components/Timeline/Footer/MinimapActiveSection.tsx

@@ -61,7 +61,7 @@ const MinimapActiveSection: React.FC<ActiveSectionProps> = ({ timeline, dragging
 const MiniTimelineActiveSection = styled.div<{ dragging: boolean }>`
   position: relative;
   height: 3.0625rem;
-  background var(--color-bg-primary);
+  background var(--timeline-footer-selected-bg);
   border-left: var(--border-thin-1);
   border-right: var(--border-thin-1);
   border-bottom: 0.5rem solid var(--color-border-1);

src/components/Timeline/Footer/MinimapFooter.tsx

@@ -186,7 +186,7 @@ const MinimapFooter: React.FC<MinimapFooterProps> = ({
 const MinimapFooterContent = styled.div`
   position: relative;
   flex: 1;
-  background: var(--color-bg-secondary);
+  background: var(--timeline-footer-bg);
   border-bottom: var(--border-thin-1);
   height: 3.0625rem;
 `;

src/components/Timeline/Footer/index.tsx

@@ -34,7 +34,7 @@ const TimelineFooterContainer = styled.div`
   width: 100%;
   height: 2.5rem;
   margin-bottom: 1.5625rem;
-  border-top: var(--border-medium-1);
+  border-top: var(--timeline-footer-border);
 `;
 
 const TimelineFooterLeft = styled.div`

src/components/Timeline/TaskListLabel.tsx

@@ -125,16 +125,20 @@ const RowLabel = styled.div<{ type: 'step' | 'task'; isOpen?: boolean; group?: b
   max-width: 15.3125rem;
   overflow: hidden;
   cursor: pointer;
-  font-size: ${(p) => (p.type === 'task' ? '0.75rem' : '0.875rem')};
-  font-weight: ${(p) => (p.type === 'step' ? '600' : 'normal')};
+  font-size: ${(p) =>
+    p.type === 'task' ? 'var(--timeline-row-label-task-font-size)' : 'var(--timeline-row-label-step-font-size)'};
+  font-weight: ${(p) =>
+    p.type === 'step' ? 'var(--timeline-row-label-step-font-weight)' : 'var(--timeline-row-label-task-font-weight)'};
   line-height: 1.6875rem;
-  border-left: var(--border-thin-1);
+  border-left: var(--timeline-row-label-border-left);
+  border-bottom: var(--timeline-row-label-border-bottom);
   padding-left: ${(p) => (p.type === 'task' ? '0.5rem' : undefined)};
 
   a {
     display: flex;
     width: 100%;
-    color: var(--color-text-primary);
+    color: ${(p) =>
+      p.type === 'task' ? 'var(--timeline-row-label-task-text-color)' : '--timeline-row-label-step-text-color'};
     text-decoration: none;
     max-width: 100%;
     white-space: nowrap;
@@ -200,7 +204,8 @@ const StepLabel = styled.div<{ isLoading: boolean }>`
   display: flex;
   align-items: center;
   user-select: text;
-  font-size: 0.75rem;
+  font-size: var(--timeline-row-label-step-font-size);
+  color: var(--timeline-row-label-step-text-color);
 
   i {
     width: 1.875rem;

src/components/Timeline/Timeline.tsx

@@ -281,6 +281,11 @@ const ListContainer = styled.div<{ customMinHeight: number }>`
   min-height: ${(p) => `${p.customMinHeight}rem`};
   max-width: 100%;
   position: relative;
+
+  background: var(--timeline-bg);
+  border-radius: var(--timeline-border-radius);
+  padding: var(--timeline-padding);
+  box-shadow: var(--timeline-shadow);
 `;
 
 export default Timeline;

src/components/Timeline/TimelineRow/LineElement.tsx

@@ -158,7 +158,6 @@ export const BoxGraphicValue = styled.div<{ position: LabelPosition }>`
     top: 50%;
     transform: translateY(-50%);
     z-index: -1;
-    background: var(--color-bg-primary);
   }
 `;
 
@@ -185,6 +184,7 @@ const UnkownMoveAnimation = keyframes`
 const BoxGraphicLine = styled.div<{ grayed?: boolean; state: string; isLastAttempt: boolean }>`
   position: absolute;
   background: ${(p) => lineColor(p.grayed || false, p.state, p.isLastAttempt)};
+  border-radius: var(--timeline-line-border-radius);
   width: 100%;
   height: 0.375rem;
   top: 50%;

src/components/Timeline/TimelineRow/index.tsx

@@ -134,7 +134,6 @@ const StyledRow = styled.div`
   display: flex;
   width: 100%;
   min-height: 1.75rem;
-  border-bottom: var(--border-thin-1);
   transition: background 0.15s;
 
   &:hover {
@@ -158,7 +157,8 @@ const StickyStyledRow = styled(StyledRow)`
 const RowContainerStyles = css`
   position: relative;
   width: 100%;
-  border-left: var(--border-thin-1);
+  border-left: var(--timeline-row-separator-border);
+  border-bottom: var(--timeline-row-border-bottom);
   overflow-x: hidden;
 `;
 

src/components/Timeline/TimelineRow/utils.ts

@@ -43,22 +43,22 @@ export function getRowStatus(
 
 export function lineColor(grayed: boolean, state: string, isFirst: boolean): string {
   if (grayed) {
-    return '#c7c7c7';
+    return 'var(--timeline-line-color-neutral)';
   } else {
     switch (state) {
       case 'completed':
       case 'ok':
-        return !isFirst ? brightenCssVar('--color-bg-danger', 30) : 'var(--color-bg-success)';
+        return !isFirst ? brightenCssVar('--timeline-line-color-danger', 30) : 'var(--timeline-line-color-success)';
       case 'running':
-        return 'var(--color-bg-success-light)';
+        return 'var(--timeline-line-color-running)';
       case 'pending':
-        return 'var(--color-bg-warning';
+        return 'var(--timeline-line-color-warning)';
       case 'failed':
-        return !isFirst ? brightenCssVar('--color-bg-danger', 30) : 'var(--color-bg-danger)';
+        return !isFirst ? brightenCssVar('--timeline-line-color-danger', 30) : 'var(--timeline-line-color-danger)';
       case 'unknown':
-        return !isFirst ? brightenCssVar('--color-bg-disabled', 30) : 'var(--color-bg-disabled)';
+        return !isFirst ? brightenCssVar('--timeline-line-color-unknown', 30) : 'var(--timeline-line-color-unknown)';
       default:
-        return brightenCssVar('--color-bg-disabled', 50);
+        return brightenCssVar('--timeline-line-color-unknown', 50);
     }
   }
 }

src/pages/Task/components/AnchoredView.tsx

@@ -109,8 +109,11 @@ const AnchoredViewContainer = styled.div`
 
 const TaskContent = styled.div`
   flex: 1;
-
-  padding: 0 2rem 0 1rem;
+  background: var(--task-content-bg);
+  border-radius: var(--task-content-border-radius);
+  margin: var(--task-content-margin);
+  padding: var(--task-content-padding);
+  box-shadow: var(--task-content-shadow);
 `;
 
 export default AnchoredView;

src/theme/theme.css

@@ -281,4 +281,44 @@
     --data-header-label-font-weight: var(--font-weight-medium);
 
     --data-header-link-color: #fff;
+
+    /* Timeline */
+
+    --timeline-bg: none;
+    --timeline-border-radius: none;
+    --timeline-padding: none;
+    --timeline-shadow: none;
+
+    --timeline-line-border-radius: none;
+    --timeline-line-color-neutral: #c7c7c7;
+    --timeline-line-color-success: var(--color-bg-success);
+    --timeline-line-color-running: var(--color-bg-success-light);
+    --timeline-line-color-warning: var(--color-bg-warning);
+    --timeline-line-color-danger: var(--color-bg-danger);
+    --timeline-line-color-unknown: var(--color-bg-disabled);
+
+    --timeline-row-border-bottom: var(--border-thin-1);
+    --timeline-row-separator-border: var(--border-thin-1);
+    --timeline-row-label-border-left: var(--border-thin-1);
+    --timeline-row-label-border-bottom: var(--border-thin-1);
+
+    --timeline-row-label-task-font-size: var(--font-size-4);
+    --timeline-row-label-task-font-weight: var(--font-weight-regular);
+    --timeline-row-label-task-text-color: var(--color-text-primary);
+
+    --timeline-row-label-step-font-size: var(--font-size-4);
+    --timeline-row-label-step-font-weight: var(--font-weight-semibold);
+    --timeline-row-label-step-text-color: var(--color-text-primary);
+
+    --timeline-footer-border: var(--border-medium-1);
+    --timeline-footer-bg: var(--color-bg-secondary);
+    --timeline-footer-selected-bg: var(--color-bg-primary);
+    
+    /* Task content */
+    --task-content-bg: none;
+    --task-content-border-radius: none;
+    --task-content-padding: 0 2rem 0 1rem;
+    --task-content-margin: none;
+    --task-content-shadow: none;
+    
 }