Skip to content

Commit ebee2b4

Browse files
rsanterirsanteri
authored
Add various CSS variables and fix small UI issues (#163)
* Add various CSS variables and fix small UI issues * Theming to code block and parameter table
1 parent 4954912 commit ebee2b4

29 files changed

+283
-77
lines changed

‎src/GlobalStyle.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,18 @@ const globalCSS = css`
5555
}
5656
5757
code {
58-
font-family: var(--font-family-code);
59-
font-size: var(--font-size-4);
58+
display: block;
59+
background: var(--code-bg);
60+
color: var(--code-text-color);
61+
font-size: var(--code-font-size);
62+
font-family: var(--code-font-family);
63+
font-weight: var(--code-font-weight);
64+
padding: var(--code-padding);
65+
border-bottom: var(--code-border-bottom);
66+
border-top: var(--code-border-top);
67+
border-left: var(--code-border-left);
68+
border-right: var(--code-border-right);
69+
border-radius: var(--code-border-radius);
6070
}
6171
`;
6272

‎src/components/Breadcrumb/index.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,8 @@ const ContainerBaseStyle = css`
380380
border: var(--breadcrumb-border);
381381
height: var(--breadcrumb-height);
382382
background: var(--breadcrumb-bg);
383+
box-shadow: var(--breadcrumb-shadow);
384+
border-radius: var(--breadcrumb-border-radius);
383385
`;
384386

385387
const BreadcrumbGroup = styled.div`
@@ -417,7 +419,8 @@ const ButtonCrumb = styled(BigButton)`
417419
418420
padding-left: var(--spacing-3);
419421
padding-right: var(--spacing-3);
420-
color: var(--color-text-primary);
422+
font-weight: var(--breadcrumb-font-weight);
423+
color: var(--breadcrumb-text-color);
421424
422425
overflow-x: hidden;
423426
max-width: 18.75rem;
@@ -426,6 +429,8 @@ const ButtonCrumb = styled(BigButton)`
426429
427430
&.active {
428431
background: transparent;
432+
font-weight: var(--breadcrumb-highlight-font-weight);
433+
color: var(--breadcrumb-highlight-text-color);
429434
}
430435
431436
&:hover {
@@ -437,7 +442,7 @@ const ButtonCrumb = styled(BigButton)`
437442
const BreadcrumbDivider = styled.div`
438443
display: inline-block;
439444
pointer-events: none;
440-
color: var(--color-text-primary);
445+
color: var(--breadcrumb-text-color);
441446
font-weight: bold;
442447
&:after {
443448
content: '/';
@@ -465,9 +470,11 @@ const StyledBreadcrumb = styled(ItemRow)`
465470

466471
const BreadcrumbInputWrapper = styled(InputWrapper)`
467472
${ContainerBaseStyle}
473+
box-shadow: none;
468474
`;
469475

470476
const GoToHolder = styled.div`
477+
margin-right: 0;
471478
position: relative;
472479
font-size: var(--font-size-primary);
473480
height: var(--breadcrumb-height);
@@ -480,7 +487,7 @@ const GoToContainer = styled.div`
480487
top: calc(var(--spacing-3) * -1);
481488
left: calc(var(--spacing-3) * -1);
482489
${PopoverStyles}
483-
width: 100%;
490+
width: calc(100% + var(--spacing-3));
484491
`;
485492

486493
const GotoClose = styled.div`

‎src/components/Button/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const ButtonCSS = css`
155155

156156
const StyledButton = styled.button<StyledButtonProps>`
157157
${ButtonCSS};
158-
padding: var(--spacing-1) ${(p) => (p.iconOnly ? 'var(--spacing-1)' : 'var(--spacing-3)')};
158+
padding: ${(p) => (p.iconOnly ? 'var(--icon-button-padding)' : 'var(--button-padding)')};
159159
${(p) => getButtonColors(p.variant)};
160160
${(p) => p.active && ActiveButtonCSS};
161161
${(p) => p.disabled && DisabledButtonCSS};

‎src/components/Collapsable/index.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
3838
<CollapseContainer>
3939
<Container active={transitioning}>
4040
<CollapsableHeader
41+
open={open}
4142
onClick={() => {
4243
setTransitioning(true);
4344
setOpen(!open);
@@ -65,15 +66,17 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
6566
//
6667

6768
const CollapseContainer = styled.div`
68-
margin: 0.5rem 0 1rem 0;
69+
margin: var(--collapsable-margin);
70+
border-bottom: var(--collapsable-content-border-bottom);
6971
`;
7072

71-
const CollapsableHeader = styled.div`
73+
const CollapsableHeader = styled.div<{ open: boolean }>`
7274
display: flex;
7375
justify-content: flex-start;
76+
font-family: var(--collapsable-header-font-family);
7477
font-size: var(--font-size-primary);
75-
color: var(--collapsable-header-text-color);
7678
font-weight: 500;
79+
color: ${(p) => (p.open ? 'var(--collapsable-header-open-text-color)' : 'var(--collapsable-header-text-color)')};
7780
line-height: 1.5rem;
7881
padding: var(--collapsable-header-padding);
7982
border-bottom: var(--collapsable-header-border-bottom);
@@ -86,7 +89,6 @@ const CollapsableHeader = styled.div`
8689

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

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

‎src/components/DataHeader/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const DataHeaderContainer = styled.div<{ isWide: boolean }>`
4444
font-size: var(--data-header-font-size);
4545
color: var(--data-header-text-color);
4646
margin: 0 ${(p) => (p.isWide ? 'calc(var(--layout-page-padding-x) * -1)' : '0')};
47-
padding: 1rem ${(p) => (p.isWide ? 'var(--layout-page-padding-x)' : '0.5rem')};
47+
padding: ${(p) => (p.isWide ? 'var(--data-header-padding-wide)' : 'var(--data-header-padding)')};
4848
`;
4949

5050
const DataHeaderContent = styled.div`

‎src/components/Form/InputLabel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { AsyncStatus } from '../../types';
77
//
88

99
export const InputLabel = styled(ForceNoWrapText)<{ active: boolean; status?: AsyncStatus }>`
10-
background: var(--color-bg-primary);
10+
background: inherit;
1111
font-size: var(--input-label-font-size);
1212
font-weight: var(--input-label-font-weight);
1313
padding: 0 0.25rem;

‎src/components/LogList/LogActionBar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ const SearchContainer = styled.div`
127127
const LogActionBarContainer = styled.div<{ spaceAround: boolean }>`
128128
display: flex;
129129
justify-content: space-between;
130+
align-items: center;
130131
margin-bottom: 1rem;
131132
padding: ${(p) => (p.spaceAround ? '0 1rem' : '0')};
132133
`;

‎src/components/LogList/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -293,12 +293,9 @@ const PollLoader: React.FC<PollLoaderProps> = ({ status, preloadStatus }) => {
293293
// Style
294294
//
295295

296-
const LogListContainer = styled.div`
297-
background: var(--color-bg-secondary);
298-
border-bottom: var(--border-primary-thin);
299-
font-family: monospace;
300-
border-radius: var(--radius-primary);
296+
const LogListContainer = styled.code`
301297
font-size: var(--font-size-primary);
298+
padding: 0.25rem;
302299
position: relative;
303300
overflow: hidden;
304301
white-space: pre-wrap;
@@ -326,6 +323,7 @@ const LogLineText = styled.div`
326323
word-break: break-all;
327324
flex: 1;
328325
padding-right: 0.5rem;
326+
line-height: 1rem;
329327
`;
330328

331329
const ScrollToBottomButton = styled.div`

‎src/components/Popover/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ReactNode } from 'react';
22
import styled, { css } from 'styled-components';
3+
import InputWrapper from '../Form/InputWrapper';
34

45
//
56
// Fixed container for popups
@@ -23,6 +24,10 @@ export const PopoverStyles = css`
2324
padding: var(--popover-padding);
2425
background: var(--popover-background);
2526
border-radius: var(--popover-border-radius);
27+
28+
${InputWrapper} {
29+
background: var(--popover-background);
30+
}
2631
`;
2732

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

‎src/components/Table/index.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,17 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
154154
>
155155
<HeaderColumnWrapper>
156156
{label}
157-
{sortable && <SortIcon active={active} direction={direction} padLeft />}
157+
{sortable && (
158+
<SortIconContainer>
159+
<SortIcon active={active} direction={direction} padLeft />
160+
</SortIconContainer>
161+
)}
158162
</HeaderColumnWrapper>
159163
</TH>
160164
);
161165
};
166+
167+
const SortIconContainer = styled.div`
168+
display: inline-flex;
169+
margin-left: var(--spacing-1);
170+
`;

‎src/components/Tabs/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, widen }) => {
3737

3838
return (
3939
<TabsContainer>
40-
<Scrollbars style={{ height: '2.875rem', width: '100%' }} autoHide>
40+
<Scrollbars style={{ height: 'var(--tab-heading-height)', width: '100%' }} autoHide>
4141
<TabsHeading widen={widen}>
4242
{tabs.map((tab) =>
4343
tab.linkTo ? (
@@ -108,10 +108,12 @@ export const TabsHeadingItem = styled.div<{ active: boolean; temporary?: boolean
108108
p.active ? 'var(--tab-heading-item-active-border-bottom)' : 'var(--tab-heading-item-border-bottom)'};
109109
background: ${(p) =>
110110
p.temporary && p.active
111-
? 'var(--color-bg-secondary-highlight)'
111+
? 'var(--tab-heading-active-bg)'
112112
: p.temporary
113113
? '#f6f6f6'
114-
: 'var(--tab-heading-bg)'};
114+
: p.active
115+
? 'var(--tab-heading-active-bg)'
116+
: 'var(--tab-heading-bg)'};
115117
color: ${(p) => (p.active ? 'var(--tab-heading-active-text-color)' : 'var(--tab-heading-text-color)')};
116118
font-weight: ${(p) => (p.active ? 'var(--tab-heading-active-font-weight)' : 'var(--tab-heading-font-weight)')};
117119
cursor: pointer;

‎src/components/Timeline/Timeline.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ const StickyHeader: React.FC<{
276276
// Style
277277
//
278278

279-
const ListContainer = styled.div<{ customMinHeight: number }>`
279+
export const ListContainer = styled.div<{ customMinHeight: number }>`
280280
flex: 1;
281281
min-height: ${(p) => `${p.customMinHeight}rem`};
282282
max-width: 100%;

‎src/components/TitledRow/index.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export function valueToRenderableType(
8585
//
8686

8787
const StyledTitledRow = styled.div`
88-
margin: 1rem 0 0.5rem 0;
88+
margin: var(--titled-row-margin);
8989
`;
9090

9191
const TitledRowTitle = styled.div`
@@ -112,13 +112,21 @@ const Row = styled.div`
112112
display: flex;
113113
114114
&:not(:last-child) {
115-
border-bottom: 2px solid #fff;
115+
border-bottom: var(--titled-row-table-border-bottom);
116116
}
117117
118118
div:first-child {
119-
width: 200px;
120-
min-width: 200px;
121-
border-right: 2px solid #fff;
119+
width: var(--titled-row-table-title-cell-width);
120+
min-width: var(--titled-row-table-title-cell-width);
121+
border-right: var(--titled-row-table-separator-border);
122+
}
123+
124+
div:nth-child(2) {
125+
flex: 1;
126+
font-size: var(--titled-row-table-value-font-size);
127+
font-weight: var(--titled-row-table-value-font-weight);
128+
padding: var(--titled-row-table-value-padding);
129+
color: var(--titled-row-table-value-text-color);
122130
}
123131
`;
124132

‎src/constants.ts

-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { FeatureFlags } from './utils/FEATURE';
2-
import { toRelativeSize } from './utils/style';
32

43
declare global {
54
interface Window {
@@ -37,9 +36,6 @@ export const formatUrl = (base: string, path: string): string => `${base}/${path
3736
export const apiHttp = (path: string): string => formatUrl(METAFLOW_SERVICE, path);
3837
export const apiWs = (path: string): string => formatUrl(METAFLOW_SERVICE_WS, path);
3938

40-
export const HEADER_SIZE_PX = 112;
41-
export const HEADER_SIZE_REM = toRelativeSize(112 / 16);
42-
4339
/**
4440
* Look for number of days to display in following order:
4541
*

0 commit comments

Comments
 (0)