Skip to content

Commit 4954912

Browse files
rsanterirsanteri
authored
feat: Update theming for various components (#162)
1 parent 7d0a7f9 commit 4954912

File tree

13 files changed

+143
-50
lines changed

13 files changed

+143
-50
lines changed

‎src/components/Breadcrumb/index.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ChangeEventHandler, useState, useMemo } from 'react';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
33
import { useLocation, match, Link, useHistory } from 'react-router-dom';
44
import { useTranslation } from 'react-i18next';
55
import { getPath, getRouteMatch, KnownURLParams } from '../../utils/routing';
@@ -376,24 +376,30 @@ export function findAdditionalButtons(routeMatch: match<KnownURLParams> | null,
376376
// Styles
377377
//
378378

379+
const ContainerBaseStyle = css`
380+
border: var(--breadcrumb-border);
381+
height: var(--breadcrumb-height);
382+
background: var(--breadcrumb-bg);
383+
`;
384+
379385
const BreadcrumbGroup = styled.div`
380386
${ButtonCSS}
381-
border: var(--breadcrumb-border);
387+
${ContainerBaseStyle}
382388
width: 100%;
383389
`;
384390

385391
const BreadcrumbEmptyInput = styled(InputWrapper)`
386-
border: var(--breadcrumb-border);
392+
${ContainerBaseStyle}
387393
388394
input {
389395
padding-left: 0;
390396
margin-left: -0.25rem;
391-
font-size: var(--breadcrumb-input-font-size);
392-
font-weight: var(--breadcrumb-input-font-weight);
397+
font-size: var(--breadcrumb-font-size);
398+
font-weight: var(--breadcrumb-font-weight);
393399
394400
&::placeholder {
395401
color: var(--breadcrumb-placeholder-color);
396-
font-weight: var(--breadcrumb-input-font-weight);
402+
font-weight: var(--breadcrumb-font-weight);
397403
}
398404
}
399405
`;
@@ -450,22 +456,21 @@ const StyledBreadcrumb = styled(ItemRow)`
450456
line-height: var(--breadcrumb-line-height);
451457
font-size: var(--breadcrumb-font-size);
452458
font-weight: var(--breadcrumb-font-weight);
453-
background: var(--input-bg);
459+
background: var(--breadcrumb-bg);
454460
color: var(--input-text-color);
455461
padding-left: 0;
456462
margin-left: -0.25rem;
457463
}
458464
`;
459465

460466
const BreadcrumbInputWrapper = styled(InputWrapper)`
461-
border: var(--breadcrumb-border);
467+
${ContainerBaseStyle}
462468
`;
463469

464470
const GoToHolder = styled.div`
465471
position: relative;
466472
font-size: var(--font-size-primary);
467-
height: 2rem;
468-
margin-top: -0.5625rem;
473+
height: var(--breadcrumb-height);
469474
z-index: 2;
470475
width: 100%;
471476
`;

‎src/components/Collapsable/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,11 @@ const CollapsableHeader = styled.div`
7272
display: flex;
7373
justify-content: flex-start;
7474
font-size: var(--font-size-primary);
75+
color: var(--collapsable-header-text-color);
7576
font-weight: 500;
7677
line-height: 1.5rem;
77-
border-bottom: var(--border-thin-1);
78+
padding: var(--collapsable-header-padding);
79+
border-bottom: var(--collapsable-header-border-bottom);
7880
cursor: pointer;
7981
8082
svg path {
@@ -84,6 +86,7 @@ const CollapsableHeader = styled.div`
8486

8587
const ContentContainer = styled.div`
8688
position: relative;
89+
border-bottom: var(--collapsable-content-border-bottom);
8790
`;
8891

8992
const Content = styled.div<{ open: boolean; visible: boolean }>`

‎src/components/Popover/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const Popover: React.FC<{ children: ReactNode; show?: boolean }> = ({ children,
1818
//
1919

2020
export const PopoverStyles = css`
21-
border: 1px solid #d0d0d0;
22-
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
23-
padding: var(--spacing-3);
24-
background: var(--color-bg-primary);
25-
border-radius: var(--radius-primary);
21+
border: var(--popover-border);
22+
box-shadow: var(--popover-shadow);
23+
padding: var(--popover-padding);
24+
background: var(--popover-background);
25+
border-radius: var(--popover-border-radius);
2626
`;
2727

2828
export const PopoverWrapper = styled.div<{ show: boolean; alignment?: 'left' | 'right' }>`

‎src/components/Tabs/index.tsx

+17-11
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const TabsContainer = styled.div`
8383

8484
export const TabsHeading = styled.div<{ widen?: boolean }>`
8585
display: flex;
86-
border-bottom: var(--border-medium-1);
86+
border-bottom: var(--tab-heading-border-bottom);
8787
margin: ${(p) => (p.widen ? '0 calc(var(--layout-page-padding-y) * -1)' : 'initial')};
8888
padding: ${(p) => (p.widen ? '0 var(--layout-page-padding-x)' : 'initial')};
8989
color: var(--color-text-secondary);
@@ -99,23 +99,29 @@ export const TabsHeading = styled.div<{ widen?: boolean }>`
9999
`;
100100

101101
export const TabsHeadingItem = styled.div<{ active: boolean; temporary?: boolean }>`
102-
margin-right: var(--spacing-7);
103-
margin-bottom: -2px;
104-
padding: var(--spacing-3) var(--spacing-7);
105-
border-top-left-radius: ${(p) => (p.temporary ? '0.25rem' : 'none')};
106-
border-top-right-radius: ${(p) => (p.temporary ? '0.25rem' : 'none')};
107-
border-bottom: 2px solid ${(p) => (p.active ? 'var(--color-bg-secondary-highlight)' : 'transparent')};
102+
margin: var(--tab-heading-margin);
103+
padding: var(--tab-heading-padding);
104+
border-radius: var(--tab-heading-border-radius);
105+
border-top-left-radius: ${(p) => (p.temporary ? 'var(--radius-primary)' : 'var(--tab-heading-border-radius)')};
106+
border-top-right-radius: ${(p) => (p.temporary ? 'var(--radius-primary)' : 'var(--tab-heading-border-radius)')};
107+
border-bottom: ${(p) =>
108+
p.active ? 'var(--tab-heading-item-active-border-bottom)' : 'var(--tab-heading-item-border-bottom)'};
108109
background: ${(p) =>
109-
p.temporary && p.active ? 'var(--color-bg-secondary-highlight)' : p.temporary ? '#f6f6f6' : 'transparent'};
110-
color: ${(p) => (p.active ? 'var(--color-text-primary)' : 'var(--color-text-secondary)')};
111-
font-weight: ${(p) => (p.active ? '500' : '400')};
110+
p.temporary && p.active
111+
? 'var(--color-bg-secondary-highlight)'
112+
: p.temporary
113+
? '#f6f6f6'
114+
: 'var(--tab-heading-bg)'};
115+
color: ${(p) => (p.active ? 'var(--tab-heading-active-text-color)' : 'var(--tab-heading-text-color)')};
116+
font-weight: ${(p) => (p.active ? 'var(--tab-heading-active-font-weight)' : 'var(--tab-heading-font-weight)')};
112117
cursor: pointer;
113118
transition: 0.15s border;
114119
white-space: nowrap;
120+
font-size: var(--font-size-primary);
115121
116122
&:hover {
117123
border-bottom-color: var(--color-bg-brand-primary);
118-
font-weight: 500;
124+
font-weight: var(--tab-heading-active-font-weight);
119125
border-top-left-radius: var(--radius-primary);
120126
border-top-right-radius: var(--radius-primary);
121127
}

‎src/components/TitledRow/index.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -89,19 +89,21 @@ const StyledTitledRow = styled.div`
8989
`;
9090

9191
const TitledRowTitle = styled.div`
92-
font-weight: 500;
93-
font-size: var(--font-size-primary);
94-
margin: 0.5rem 0;
92+
font-weight: var(--titled-row-head-font-weight);
93+
font-size: var(--titled-row-head-font-size);
94+
margin: var(--titled-row-head-margin);
95+
color: var(--titled-row-head-text-color);
9596
`;
9697

9798
const ContentBackground = styled.div`
98-
background: var(--color-bg-secondary);
99-
border-radius: var(--radius-primary);
100-
font-size: var(--font-size-primary);
99+
background: var(--titled-row-bg);
100+
border-radius: var(--titled-row-border-radius);
101+
font-size: var(--titled-row-font-size);
102+
color: var(--titled-row-text-color);
101103
`;
102104

103105
const ContentSection = styled.div`
104-
padding: 0.5rem 1rem;
106+
padding: var(--titled-row-padding);
105107
white-space: pre-wrap;
106108
word-break: break-all;
107109
`;

‎src/mocks/browser.js

+1
Original file line numberDiff line numberDiff line change
@@ -399,6 +399,7 @@ export const worker = setupWorker(
399399
rawGetEndpoint('api/features', {}),
400400
stantardGetEndpoint('api/links', []),
401401
stantardGetEndpoint('api/notifications', []),
402+
stantardGetEndpoint('api/flows/autocomplete', ['BasicFlow', 'NewFlow']),
402403
wsApi.addEventListener('connection', ({ client }) => {
403404
client.addEventListener('message', (event) => {
404405
if (event.data === '__ping__') {

‎src/pages/Run/components/RunWarning.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,13 @@ function hasVersionTag(run: Run): boolean {
105105
//
106106

107107
const Container = styled.div`
108-
background: var(--color-warning);
109-
padding: 0.5rem var(--layout-page-padding-x);
110-
margin: 0 calc(var(--layout-page-padding-x) * -1);
111-
font-size: var(--font-size-primary);
108+
background: var(--run-warning-bg);
109+
padding: var(--run-warning-padding);
110+
margin: var(--run-warning-margin);
111+
font-size: var(--run-warning-font-size);
112+
color: var(--run-warning-text-color);
113+
border-radius: var(--run-warning-border-radius);
114+
112115
display: flex;
113116
align-items: center;
114117
font-weight: 500;
@@ -118,7 +121,7 @@ const Container = styled.div`
118121
}
119122
120123
a {
121-
color: var(--color-text-primary);
124+
color: var(--run-warning-text-color);
122125
}
123126
`;
124127

‎src/pages/Task/components/AnchorMenu.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const AnchorMenu: React.FC<AnchorMenuProps> = ({ items, activeSection, setSectio
7676
};
7777

7878
const AnchorMenuContainer = styled.div`
79+
padding-top: 0.75rem;
7980
width: 6.25rem;
8081
flex-shrink: 0;
8182
position: relative;

‎src/pages/Task/components/AnchoredView.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ const HeightTracker: React.FC<{ children: ReactNode; updateLastSectionHeight: (h
103103

104104
const AnchoredViewContainer = styled.div`
105105
display: flex;
106-
padding: 0.75rem 0 3rem 0;
107106
width 100%;
108107
`;
109108

@@ -114,6 +113,8 @@ const TaskContent = styled.div`
114113
margin: var(--task-content-margin);
115114
padding: var(--task-content-padding);
116115
box-shadow: var(--task-content-shadow);
116+
border-left: var(--task-content-border-left);
117+
border-right: var(--task-content-border-right);
117118
`;
118119

119120
export default AnchoredView;

‎src/pages/Task/components/TaskList.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const TaskList: React.FC<Props> = ({
9191

9292
return (
9393
<TaskListContainer ref={ref}>
94-
<FixedList style={{ position: 'sticky', top: HEADER_SIZE_PX + 'px' }}>
94+
<FixedList style={{ position: 'sticky', top: 'var(--layout-application-bar-height)' }}>
9595
{rows.length > 0 && (
9696
<List
9797
overscanRowCount={5}
@@ -125,8 +125,9 @@ const TaskList: React.FC<Props> = ({
125125
};
126126

127127
const TaskListContainer = styled.div`
128+
padding: var(--task-list-padding);
129+
width: var(--task-list-width);
128130
font-size: 0.75rem;
129-
width: 15.25rem;
130131
flex-shrink: 0;
131132
`;
132133

‎src/pages/Task/components/TaskListRow.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ const TaskListRow: React.FC<Props> = ({
6363
};
6464

6565
const TaskListRowContainer = styled.div<{ active: boolean }>`
66-
border-bottom: var(--border-thin-1);
66+
border-bottom: var(--timeline-row-label-border-bottom);
67+
border-radius: var(--timeline-row-label-border-radius);
6768
6869
transition: 0.15s background;
6970
background: ${(p) => (p.active ? 'var(--color-bg-secondary-highlight)' : 'transparent')};

‎src/pages/Task/index.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ const Task: React.FC<TaskViewProps> = ({
294294
setQueryParam={setQueryParam}
295295
/>
296296

297-
<div style={{ display: 'flex' }}>
297+
<TaskContentContainer>
298298
<TaskList
299299
rows={rows}
300300
rowDataDispatch={rowDataDispatch}
@@ -526,7 +526,8 @@ const Task: React.FC<TaskViewProps> = ({
526526
/>
527527
</>
528528
)}
529-
</div>
529+
</TaskContentContainer>
530+
530531
{fullscreen && task && (
531532
<FullPageContainer
532533
onClose={closeHandler}
@@ -599,6 +600,15 @@ const TaskLoaderContainer = styled.div`
599600
padding: 2rem;
600601
`;
601602

603+
const TaskContentContainer = styled.div`
604+
display: flex;
605+
background: var(--task-view-bg);
606+
border-radius: var(--task-view-border-radius);
607+
margin: var(--task-view-margin);
608+
padding: var(--task-view-padding);
609+
box-shadow: var(--task-view-shadow);
610+
`;
611+
602612
const Space = styled.div`
603613
margin: 1rem 0;
604614
width: 100%;

0 commit comments

Comments
 (0)