chore: Make font-weights themable, fix font faces (#19236)
* fix(fonts): Import all necessary font packages * Make html tags themable * Set bold font weight to 600, add medium font weight to theme * Replace hard coded font weights with theme variables * Change some font weight light elements to normal * Fix tests * Fix bug in pivot table * Address code review comments
This commit is contained in:
Kamil Gabryjelski
GitHub
parent
35b8a72dae
commit
a8a48af7fa
|
|
@ -67,8 +67,8 @@
|
|||
"dom-to-image": "^2.6.0",
|
||||
"emotion-rgba": "0.0.9",
|
||||
"fast-glob": "^3.2.7",
|
||||
"fontsource-fira-code": "^3.0.5",
|
||||
"fontsource-inter": "^3.0.5",
|
||||
"fontsource-fira-code": "^4.0.0",
|
||||
"fontsource-inter": "^4.0.0",
|
||||
"fs-extra": "^10.0.0",
|
||||
"fuse.js": "^6.4.6",
|
||||
"geolib": "^2.0.24",
|
||||
|
|
@ -34919,15 +34919,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/fontsource-fira-code": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-3.0.5.tgz",
|
||||
"integrity": "sha512-pxhYUSBdgXYFnGIdO3QQTuemncqdRE3NEoVu94tm+jCx5/sUUGDugOdNdZqSY7Gd8w7Xk98hHbT5zFGgrxDL+A==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-4.0.0.tgz",
|
||||
"integrity": "sha512-qKVeWWNvkPP22FUkea2qVgZHiPBIRk9HFGIFmEUbqEV7Wcu/Dxrva4t7d1XPa2+0cnJgD0kHAiDZ514KjHYQKA==",
|
||||
"deprecated": "Package relocated. Please install and migrate to @fontsource/fira-code."
|
||||
},
|
||||
"node_modules/fontsource-inter": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-3.0.5.tgz",
|
||||
"integrity": "sha512-7AGbrHVjL2IcIz/Lv64IR5g0W+JuGQT/bFFF5nDD1zNOT5Ke8IMIMc+tE4rb5fCVNG2AGt0gtXH3kGLUURKY8w==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-4.0.0.tgz",
|
||||
"integrity": "sha512-TicQe9zq5GS12vE/ZOE+iXkJ0GN+Tem4TrIbPyOsGn3OaTrs/bmc/a4BjDzJsxS8+Qr3t121Bw5acyeqb4fiAQ==",
|
||||
"deprecated": "Package relocated. Please install and migrate to @fontsource/inter."
|
||||
},
|
||||
"node_modules/for-in": {
|
||||
|
|
@ -87456,14 +87456,14 @@
|
|||
"devOptional": true
|
||||
},
|
||||
"fontsource-fira-code": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-3.0.5.tgz",
|
||||
"integrity": "sha512-pxhYUSBdgXYFnGIdO3QQTuemncqdRE3NEoVu94tm+jCx5/sUUGDugOdNdZqSY7Gd8w7Xk98hHbT5zFGgrxDL+A=="
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-4.0.0.tgz",
|
||||
"integrity": "sha512-qKVeWWNvkPP22FUkea2qVgZHiPBIRk9HFGIFmEUbqEV7Wcu/Dxrva4t7d1XPa2+0cnJgD0kHAiDZ514KjHYQKA=="
|
||||
},
|
||||
"fontsource-inter": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-3.0.5.tgz",
|
||||
"integrity": "sha512-7AGbrHVjL2IcIz/Lv64IR5g0W+JuGQT/bFFF5nDD1zNOT5Ke8IMIMc+tE4rb5fCVNG2AGt0gtXH3kGLUURKY8w=="
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-4.0.0.tgz",
|
||||
"integrity": "sha512-TicQe9zq5GS12vE/ZOE+iXkJ0GN+Tem4TrIbPyOsGn3OaTrs/bmc/a4BjDzJsxS8+Qr3t121Bw5acyeqb4fiAQ=="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
|
|
|
|||
|
|
@ -127,8 +127,8 @@
|
|||
"dom-to-image": "^2.6.0",
|
||||
"emotion-rgba": "0.0.9",
|
||||
"fast-glob": "^3.2.7",
|
||||
"fontsource-fira-code": "^3.0.5",
|
||||
"fontsource-inter": "^3.0.5",
|
||||
"fontsource-fira-code": "^4.0.0",
|
||||
"fontsource-inter": "^4.0.0",
|
||||
"fs-extra": "^10.0.0",
|
||||
"fuse.js": "^6.4.6",
|
||||
"geolib": "^2.0.24",
|
||||
|
|
|
|||
|
|
@ -17,31 +17,38 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import React, { CSSProperties, useMemo } from 'react';
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { css, styled } from '../../style';
|
||||
import { t } from '../../translation';
|
||||
|
||||
const MESSAGE_STYLES: CSSProperties = { maxWidth: 800 };
|
||||
const TITLE_STYLES: CSSProperties = {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
paddingBottom: 8,
|
||||
};
|
||||
const BODY_STYLES: CSSProperties = { fontSize: 14 };
|
||||
const MIN_WIDTH_FOR_BODY = 250;
|
||||
|
||||
const generateContainerStyles: (
|
||||
height: number | string,
|
||||
width: number | string,
|
||||
) => CSSProperties = (height: number | string, width: number | string) => ({
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height,
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
textAlign: 'center',
|
||||
width,
|
||||
});
|
||||
const Container = styled.div<{
|
||||
width: number | string;
|
||||
height: number | string;
|
||||
}>`
|
||||
${({ theme, width, height }) => css`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height: ${height}px;
|
||||
width: ${width}px;
|
||||
padding: ${theme.gridUnit * 4}px;
|
||||
|
||||
& .no-results-title {
|
||||
font-size: ${theme.typography.sizes.l}px;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
padding-bottom: ${theme.gridUnit * 2};
|
||||
}
|
||||
|
||||
& .no-results-body {
|
||||
font-size: ${theme.typography.sizes.m}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
|
|
@ -51,11 +58,6 @@ type Props = {
|
|||
};
|
||||
|
||||
const NoResultsComponent = ({ className, height, id, width }: Props) => {
|
||||
const containerStyles = useMemo(
|
||||
() => generateContainerStyles(height, width),
|
||||
[height, width],
|
||||
);
|
||||
|
||||
// render the body if the width is auto/100% or greater than 250 pixels
|
||||
const shouldRenderBody =
|
||||
typeof width === 'string' || width > MIN_WIDTH_FOR_BODY;
|
||||
|
|
@ -65,17 +67,20 @@ const NoResultsComponent = ({ className, height, id, width }: Props) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
<Container
|
||||
height={height}
|
||||
width={width}
|
||||
className={className}
|
||||
id={id}
|
||||
style={containerStyles}
|
||||
title={shouldRenderBody ? undefined : BODY_STRING}
|
||||
>
|
||||
<div style={MESSAGE_STYLES}>
|
||||
<div style={TITLE_STYLES}>{t('No Results')}</div>
|
||||
{shouldRenderBody && <div style={BODY_STYLES}>{BODY_STRING}</div>}
|
||||
<div className="no-results-title">{t('No Results')}</div>
|
||||
{shouldRenderBody && (
|
||||
<div className="no-results-body">{BODY_STRING}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -140,7 +140,8 @@ const defaultTheme = {
|
|||
weights: {
|
||||
light: 200,
|
||||
normal: 400,
|
||||
bold: 700,
|
||||
medium: 500,
|
||||
bold: 600,
|
||||
},
|
||||
sizes: {
|
||||
xxs: 9,
|
||||
|
|
|
|||
|
|
@ -17,13 +17,18 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import React, { ReactElement } from 'react';
|
||||
import mockConsole, { RestoreConsole } from 'jest-mock-console';
|
||||
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
||||
import ErrorBoundary from 'react-error-boundary';
|
||||
|
||||
import { promiseTimeout, SuperChart } from '@superset-ui/core';
|
||||
import {
|
||||
promiseTimeout,
|
||||
SuperChart,
|
||||
supersetTheme,
|
||||
ThemeProvider,
|
||||
} from '@superset-ui/core';
|
||||
import { mount as enzymeMount } from 'enzyme';
|
||||
import RealSuperChart, {
|
||||
WrapperProps,
|
||||
} from '../../../src/chart/components/SuperChart';
|
||||
|
|
@ -51,6 +56,12 @@ function expectDimension(
|
|||
);
|
||||
}
|
||||
|
||||
const mount = (component: ReactElement) =>
|
||||
enzymeMount(component, {
|
||||
wrappingComponent: ThemeProvider,
|
||||
wrappingComponentProps: { theme: supersetTheme },
|
||||
});
|
||||
|
||||
describe('SuperChart', () => {
|
||||
const plugins = [
|
||||
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
|
||||
|
|
@ -303,6 +314,7 @@ describe('SuperChart', () => {
|
|||
height="125"
|
||||
/>,
|
||||
);
|
||||
// @ts-ignore
|
||||
triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
|
|
@ -328,6 +340,7 @@ describe('SuperChart', () => {
|
|||
height="25%"
|
||||
/>,
|
||||
);
|
||||
// @ts-ignore
|
||||
triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ export default styled(SankeyComponent)`
|
|||
background: #ddd;
|
||||
padding: 10px;
|
||||
font-size: ${({ fontSize }) => fontSize}em;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.light};
|
||||
color: #000;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -302,13 +302,11 @@ export default styled(BigNumberVis)`
|
|||
}
|
||||
|
||||
.kicker {
|
||||
font-weight: ${({ theme }) => theme.typography.weights.light};
|
||||
line-height: 1em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.header-line {
|
||||
font-weight: ${({ theme }) => theme.typography.weights.normal};
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
span {
|
||||
|
|
@ -318,7 +316,6 @@ export default styled(BigNumberVis)`
|
|||
}
|
||||
|
||||
.subheader-line {
|
||||
font-weight: ${({ theme }) => theme.typography.weights.light};
|
||||
line-height: 1em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,123 +17,124 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { css, styled } from '@superset-ui/core';
|
||||
|
||||
export const Styles = styled.div`
|
||||
table.pvtTable {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
border-collapse: separate;
|
||||
font-family: 'Inter', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
}
|
||||
${({ theme }) => css`
|
||||
table.pvtTable {
|
||||
position: relative;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
text-align: left;
|
||||
margin: ${theme.gridUnit}px;
|
||||
border-collapse: separate;
|
||||
font-family: ${theme.typography.families.sansSerif};
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
table.pvtTable thead tr th,
|
||||
table.pvtTable tbody tr th {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
table.pvtTable thead tr th,
|
||||
table.pvtTable tbody tr th {
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
border-top: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-left: 1px solid ${theme.colors.grayscale.light2};
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
padding: ${theme.gridUnit}px;
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr.pvtRowTotals {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
table.pvtTable tbody tr.pvtRowTotals {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
table.pvtTable thead tr:last-of-type th,
|
||||
table.pvtTable thead tr:first-of-type th.pvtTotalLabel,
|
||||
table.pvtTable thead tr:nth-last-of-type(2) th.pvtColLabel,
|
||||
table.pvtTable thead th.pvtSubtotalLabel,
|
||||
table.pvtTable tbody tr:last-of-type th,
|
||||
table.pvtTable tbody tr:last-of-type td {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
table.pvtTable thead tr:last-of-type th,
|
||||
table.pvtTable thead tr:first-of-type th.pvtTotalLabel,
|
||||
table.pvtTable thead tr:nth-last-of-type(2) th.pvtColLabel,
|
||||
table.pvtTable thead th.pvtSubtotalLabel,
|
||||
table.pvtTable tbody tr:last-of-type th,
|
||||
table.pvtTable tbody tr:last-of-type td {
|
||||
border-bottom: 1px solid ${theme.colors.grayscale.light2};
|
||||
}
|
||||
|
||||
table.pvtTable
|
||||
thead
|
||||
tr:last-of-type:not(:only-child)
|
||||
th.pvtAxisLabel
|
||||
~ th.pvtColLabel,
|
||||
table.pvtTable tbody tr:first-of-type th,
|
||||
table.pvtTable tbody tr:first-of-type td {
|
||||
border-top: none;
|
||||
}
|
||||
table.pvtTable
|
||||
thead
|
||||
tr:last-of-type:not(:only-child)
|
||||
th.pvtAxisLabel
|
||||
~ th.pvtColLabel,
|
||||
table.pvtTable tbody tr:first-of-type th,
|
||||
table.pvtTable tbody tr:first-of-type td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr td:last-of-type,
|
||||
table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) {
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
table.pvtTable tbody tr td:last-of-type,
|
||||
table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) {
|
||||
border-right: 1px solid ${theme.colors.grayscale.light2};
|
||||
}
|
||||
|
||||
table.pvtTable
|
||||
thead
|
||||
tr:last-of-type:not(:only-child)
|
||||
th.pvtAxisLabel
|
||||
+ .pvtTotalLabel {
|
||||
border-right: none;
|
||||
}
|
||||
table.pvtTable
|
||||
thead
|
||||
tr:last-of-type:not(:only-child)
|
||||
th.pvtAxisLabel
|
||||
+ .pvtTotalLabel {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
table.pvtTable tr th.active {
|
||||
background-color: #d9dbe4;
|
||||
}
|
||||
table.pvtTable tr th.active {
|
||||
background-color: #d9dbe4;
|
||||
}
|
||||
|
||||
table.pvtTable .pvtTotalLabel {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
table.pvtTable .pvtTotalLabel {
|
||||
text-align: right;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
table.pvtTable .pvtSubtotalLabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
table.pvtTable .pvtSubtotalLabel {
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr td {
|
||||
color: #2a3f5f;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
table.pvtTable tbody tr td {
|
||||
color: #2a3f5f;
|
||||
padding: ${theme.gridUnit}px;
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
border-top: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-left: 1px solid ${theme.colors.grayscale.light2};
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr th.pvtRowLabel {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
table.pvtTable tbody tr th.pvtRowLabel {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.pvtTotal,
|
||||
.pvtGrandTotal {
|
||||
font-weight: bold;
|
||||
}
|
||||
.pvtTotal,
|
||||
.pvtGrandTotal {
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr td.pvtRowTotal {
|
||||
vertical-align: middle;
|
||||
}
|
||||
table.pvtTable tbody tr td.pvtRowTotal {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toggle-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toggle-wrapper > .toggle-val {
|
||||
white-space: normal;
|
||||
}
|
||||
.toggle-wrapper > .toggle-val {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
padding-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle {
|
||||
padding-right: ${theme.gridUnit}px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
background-color: #eceef2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hoverable:hover {
|
||||
background-color: #eceef2;
|
||||
cursor: pointer;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -17,82 +17,84 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { css, styled } from '@superset-ui/core';
|
||||
|
||||
export default styled.div`
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
${({ theme }) => css`
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
min-width: 4.3em;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
min-width: 4.3em;
|
||||
}
|
||||
|
||||
thead > tr > th {
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
background: ${({ theme: { colors } }) => colors.grayscale.light5};
|
||||
text-align: left;
|
||||
}
|
||||
th svg {
|
||||
color: ${({ theme: { colors } }) => colors.grayscale.light2};
|
||||
margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px;
|
||||
}
|
||||
th.is-sorted svg {
|
||||
color: ${({ theme: { colors } }) => colors.grayscale.base};
|
||||
}
|
||||
.table > tbody > tr:first-of-type > td,
|
||||
.table > tbody > tr:first-of-type > th {
|
||||
border-top: 0;
|
||||
}
|
||||
thead > tr > th {
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
text-align: left;
|
||||
}
|
||||
th svg {
|
||||
color: ${theme.colors.grayscale.light2};
|
||||
margin: ${theme.gridUnit / 2}px;
|
||||
}
|
||||
th.is-sorted svg {
|
||||
color: ${theme.colors.grayscale.base};
|
||||
}
|
||||
.table > tbody > tr:first-of-type > td,
|
||||
.table > tbody > tr:first-of-type > th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.dt-controls {
|
||||
padding-bottom: 0.65em;
|
||||
}
|
||||
.dt-metric {
|
||||
text-align: right;
|
||||
}
|
||||
.dt-totals {
|
||||
font-weight: bold;
|
||||
}
|
||||
.dt-is-null {
|
||||
color: ${({ theme: { colors } }) => colors.grayscale.light1};
|
||||
}
|
||||
td.dt-is-filter {
|
||||
cursor: pointer;
|
||||
}
|
||||
td.dt-is-filter:hover {
|
||||
background-color: ${({ theme: { colors } }) => colors.secondary.light4};
|
||||
}
|
||||
td.dt-is-active-filter,
|
||||
td.dt-is-active-filter:hover {
|
||||
background-color: ${({ theme: { colors } }) => colors.secondary.light3};
|
||||
}
|
||||
.dt-controls {
|
||||
padding-bottom: 0.65em;
|
||||
}
|
||||
.dt-metric {
|
||||
text-align: right;
|
||||
}
|
||||
.dt-totals {
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
.dt-is-null {
|
||||
color: ${theme.colors.grayscale.light1};
|
||||
}
|
||||
td.dt-is-filter {
|
||||
cursor: pointer;
|
||||
}
|
||||
td.dt-is-filter:hover {
|
||||
background-color: ${theme.colors.secondary.light4};
|
||||
}
|
||||
td.dt-is-active-filter,
|
||||
td.dt-is-active-filter:hover {
|
||||
background-color: ${theme.colors.secondary.light3};
|
||||
}
|
||||
|
||||
.dt-global-filter {
|
||||
float: right;
|
||||
}
|
||||
.dt-global-filter {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dt-pagination {
|
||||
text-align: right;
|
||||
/* use padding instead of margin so clientHeight can capture it */
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
.dt-pagination .pagination {
|
||||
margin: 0;
|
||||
}
|
||||
.dt-pagination {
|
||||
text-align: right;
|
||||
/* use padding instead of margin so clientHeight can capture it */
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
.dt-pagination .pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination > li > span.dt-pagination-ellipsis:focus,
|
||||
.pagination > li > span.dt-pagination-ellipsis:hover {
|
||||
background: ${({ theme: { colors } }) => colors.grayscale.light5};
|
||||
}
|
||||
.pagination > li > span.dt-pagination-ellipsis:focus,
|
||||
.pagination > li > span.dt-pagination-ellipsis:hover {
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
}
|
||||
|
||||
.dt-no-results {
|
||||
text-align: center;
|
||||
padding: 1em 0.6em;
|
||||
}
|
||||
.dt-no-results {
|
||||
text-align: center;
|
||||
padding: 1em 0.6em;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { css } from '@superset-ui/core';
|
||||
import { Global } from '@emotion/react';
|
||||
|
||||
export const GlobalStyles = () => (
|
||||
<Global
|
||||
styles={theme => css`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong,
|
||||
th {
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
|
@ -22,6 +22,7 @@ import { Provider } from 'react-redux';
|
|||
import thunkMiddleware from 'redux-thunk';
|
||||
import { hot } from 'react-hot-loader/root';
|
||||
import { ThemeProvider } from '@superset-ui/core';
|
||||
import { GlobalStyles } from 'src/GlobalStyles';
|
||||
import {
|
||||
initFeatureFlags,
|
||||
isFeatureEnabled,
|
||||
|
|
@ -127,6 +128,7 @@ if (sqlLabMenu) {
|
|||
const Application = () => (
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
import React from 'react';
|
||||
import { hot } from 'react-hot-loader/root';
|
||||
import { ThemeProvider } from '@superset-ui/core';
|
||||
import { GlobalStyles } from 'src/GlobalStyles';
|
||||
import setupApp from '../setup/setupApp';
|
||||
import setupPlugins from '../setup/setupPlugins';
|
||||
import { DynamicPluginProvider } from '../components/DynamicPlugins';
|
||||
|
|
@ -38,6 +39,7 @@ initFeatureFlags(bootstrapData.common.feature_flags);
|
|||
|
||||
const App = () => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
<DynamicPluginProvider>
|
||||
<AddSliceContainer />
|
||||
</DynamicPluginProvider>
|
||||
|
|
|
|||
|
|
@ -615,7 +615,7 @@
|
|||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
@alert-link-font-weight: @font-weight-bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
|
|
@ -765,7 +765,7 @@
|
|||
// ** Badge background color in active nav link
|
||||
@badge-active-bg: @lightest; // superset-var
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-font-weight: @font-weight-bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
|
@ -804,7 +804,7 @@
|
|||
//
|
||||
// ##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-font-weight: @font-weight-bold;
|
||||
@close-color: @lightest; // superset-var
|
||||
@close-text-shadow: 0 1px 0 @lightest; // superset-var
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@
|
|||
/*************************************************************************/
|
||||
|
||||
/******************************* Inter UI ********************************/
|
||||
@import '~fontsource-inter/index.css';
|
||||
@import '~fontsource-inter/200.css';
|
||||
@import '~fontsource-inter/400.css';
|
||||
@import '~fontsource-inter/500.css';
|
||||
@import '~fontsource-inter/600.css';
|
||||
|
||||
/******************************* Fira Code ********************************/
|
||||
@import '~fontsource-fira-code/index.css';
|
||||
@import '~fontsource-fira-code/400.css';
|
||||
@import '~fontsource-fira-code/500.css';
|
||||
@import '~fontsource-fira-code/600.css';
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
// *************************** Weights **********************************
|
||||
@font-weight-light: 200;
|
||||
@font-weight-normal: 400;
|
||||
@font-weight-bold: 700;
|
||||
@font-weight-bold: 600;
|
||||
|
||||
// ***************************** Font Sizes *****************************
|
||||
@font-size-base: 14px; // Base `rem` units on this, as needed.
|
||||
|
|
|
|||
|
|
@ -27,10 +27,6 @@ export const StyledModal = styled(Modal)`
|
|||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledTopSection = styled.div`
|
||||
|
|
@ -95,7 +91,6 @@ export const TimezoneHeaderStyle = (theme: SupersetTheme) => css`
|
|||
|
||||
export const SectionHeaderStyle = (theme: SupersetTheme) => css`
|
||||
margin: ${theme.gridUnit * 3}px 0;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
`;
|
||||
|
||||
export const StyledMessageContentTitle = styled.div`
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ export const defaultTheme: (theme: SupersetTheme) => PartialThemeConfig =
|
|||
fontSize: 14,
|
||||
minWidth: '6.5em',
|
||||
},
|
||||
weights: theme.typography.weights,
|
||||
});
|
||||
|
||||
// let styles accept serialized CSS, too
|
||||
|
|
@ -219,6 +220,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
|
|||
theme: {
|
||||
colors,
|
||||
spacing: { lineHeight, fontSize },
|
||||
weights,
|
||||
},
|
||||
},
|
||||
) => {
|
||||
|
|
@ -237,7 +239,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
|
|||
font-size: ${fontSize}px;
|
||||
background-color: ${backgroundColor};
|
||||
color: ${color};
|
||||
font-weight: ${isSelected ? 600 : 400};
|
||||
font-weight: ${isSelected ? weights.bold : weights.normal};
|
||||
white-space: nowrap;
|
||||
&:hover:active {
|
||||
background-color: ${colors.grayBg};
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ const Styled = styled.div`
|
|||
border: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
font-weight: ${theme.typography.weights.light};
|
||||
padding: ${theme.gridUnit * 2}px;
|
||||
margin: 0 ${theme.gridUnit * 3}px
|
||||
${theme.gridUnit * 3}px
|
||||
|
|
|
|||
|
|
@ -16,68 +16,70 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { css, styled } from '@superset-ui/core';
|
||||
|
||||
export const Pill = styled.div`
|
||||
display: inline-block;
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
background: ${({ theme }) => theme.colors.grayscale.base};
|
||||
border-radius: 1em;
|
||||
vertical-align: text-top;
|
||||
padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`};
|
||||
font-size: ${({ theme }) => theme.typography.sizes.m}px;
|
||||
font-weight: bold;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
line-height: 1em;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
${({ theme }) => css`
|
||||
display: inline-block;
|
||||
color: ${theme.colors.grayscale.light5};
|
||||
background: ${theme.colors.grayscale.base};
|
||||
border-radius: 1em;
|
||||
vertical-align: text-top;
|
||||
padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
|
||||
font-size: ${theme.typography.sizes.m}px;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
line-height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||
}
|
||||
|
||||
&.has-cross-filters {
|
||||
background: ${({ theme }) => theme.colors.primary.base};
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.colors.primary.dark1};
|
||||
}
|
||||
}
|
||||
|
||||
&.has-incompatible-filters {
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark2};
|
||||
background: ${({ theme }) => theme.colors.alert.base};
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.colors.alert.dark1};
|
||||
}
|
||||
svg {
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark2};
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: ${theme.colors.grayscale.light5};
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.filters-inactive {
|
||||
color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
background: ${({ theme }) => theme.colors.grayscale.light1};
|
||||
padding: ${({ theme }) => theme.gridUnit}px;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.colors.grayscale.base};
|
||||
cursor: pointer;
|
||||
background: ${theme.colors.grayscale.dark1};
|
||||
}
|
||||
}
|
||||
|
||||
&.has-cross-filters {
|
||||
background: ${theme.colors.primary.base};
|
||||
&:hover {
|
||||
background: ${theme.colors.primary.dark1};
|
||||
}
|
||||
}
|
||||
|
||||
&.has-incompatible-filters {
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
background: ${theme.colors.alert.base};
|
||||
&:hover {
|
||||
background: ${theme.colors.alert.dark1};
|
||||
}
|
||||
svg {
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
}
|
||||
}
|
||||
|
||||
&.filters-inactive {
|
||||
color: ${theme.colors.grayscale.light5};
|
||||
background: ${theme.colors.grayscale.light1};
|
||||
padding: ${theme.gridUnit}px;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.grayscale.base};
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export interface TitleProps {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
.dashboard-header .dashboard-component-header {
|
||||
font-weight: @font-weight-light;
|
||||
font-weight: @font-weight-normal;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@
|
|||
overflow: hidden;
|
||||
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: @font-weight-light;
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: @font-weight-normal;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
@ -29,7 +30,6 @@
|
|||
}
|
||||
|
||||
h6 {
|
||||
font-weight: @font-weight-normal;
|
||||
font-size: @font-size-s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import { Provider } from 'react-redux';
|
|||
import { DndProvider } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import { ThemeProvider } from '@superset-ui/core';
|
||||
import { GlobalStyles } from 'src/GlobalStyles';
|
||||
import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
|
||||
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
|
||||
import setupApp from 'src/setup/setupApp';
|
||||
|
|
@ -38,6 +39,7 @@ const App = ({ store }) => (
|
|||
<Provider store={store}>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
<DynamicPluginProvider>
|
||||
<ExploreViewContainer />
|
||||
<ToastContainer />
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const DatasourceContainer = styled.div`
|
|||
margin: ${theme.gridUnit * 2}px auto;
|
||||
}
|
||||
.type-label {
|
||||
font-weight: ${theme.typography.weights.light};
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
color: ${theme.colors.grayscale.base};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import rison from 'rison';
|
||||
import { SupersetClient, styled, t, useTheme } from '@superset-ui/core';
|
||||
import { css, SupersetClient, styled, t, useTheme } from '@superset-ui/core';
|
||||
import {
|
||||
buildTimeRangeString,
|
||||
formatTimeRange,
|
||||
|
|
@ -92,58 +92,60 @@ const StyledRangeType = styled(Select)`
|
|||
`;
|
||||
|
||||
const ContentStyleWrapper = styled.div`
|
||||
.ant-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
${({ theme }) => css`
|
||||
.ant-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-picker {
|
||||
padding: 4px 17px 4px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-picker {
|
||||
padding: 4px 17px 4px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-divider-horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.ant-divider-horizontal {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #b2b2b2;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.control-label {
|
||||
font-size: 11px;
|
||||
font-weight: ${theme.typography.weights.medium};
|
||||
color: #b2b2b2;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.vertical-radio {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.vertical-radio {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-title {
|
||||
font-style: normal;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.control-anchor-to {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.control-anchor-to {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.control-anchor-to-datetime {
|
||||
width: 217px;
|
||||
}
|
||||
.control-anchor-to-datetime {
|
||||
width: 217px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
}
|
||||
.footer {
|
||||
text-align: right;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.span`
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import thunk from 'redux-thunk';
|
|||
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
|
||||
import { Provider } from 'react-redux';
|
||||
import { ThemeProvider } from '@superset-ui/core';
|
||||
import { GlobalStyles } from 'src/GlobalStyles';
|
||||
import App from 'src/profile/components/App';
|
||||
import messageToastReducer from 'src/components/MessageToasts/reducers';
|
||||
import { initEnhancer } from 'src/reduxUtils';
|
||||
|
|
@ -48,6 +49,7 @@ const store = createStore(
|
|||
const Application = () => (
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
<App user={bootstrap.user} />
|
||||
<ToastContainer />
|
||||
</ThemeProvider>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import {
|
|||
Route,
|
||||
useLocation,
|
||||
} from 'react-router-dom';
|
||||
import { GlobalStyles } from 'src/GlobalStyles';
|
||||
import { initFeatureFlags } from 'src/featureFlags';
|
||||
import ErrorBoundary from 'src/components/ErrorBoundary';
|
||||
import Loading from 'src/components/Loading';
|
||||
|
|
@ -61,6 +62,7 @@ const App = () => (
|
|||
<Router>
|
||||
<LocationPathnameLogger />
|
||||
<RootContextProviders>
|
||||
<GlobalStyles />
|
||||
<Menu data={menu} isFrontendRoute={isFrontendRoute} />
|
||||
<Switch>
|
||||
{routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { styled, t } from '@superset-ui/core';
|
||||
import { css, styled, t } from '@superset-ui/core';
|
||||
import moment from 'moment';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
|
|
@ -35,16 +35,18 @@ import { AlertObject, LogObject } from './types';
|
|||
const PAGE_SIZE = 25;
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
${({ theme }) => css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
a,
|
||||
Link {
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a,
|
||||
Link {
|
||||
margin-left: ${theme.gridUnit * 4}px;
|
||||
font-size: ${theme.typography.sizes.s};
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
interface ExecutionLogProps {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
import React, { useMemo, useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, Link, useHistory } from 'react-router-dom';
|
||||
import { t, styled, SupersetClient } from '@superset-ui/core';
|
||||
import { css, t, styled, SupersetClient } from '@superset-ui/core';
|
||||
import moment from 'moment';
|
||||
import rison from 'rison';
|
||||
|
||||
|
|
@ -44,6 +44,21 @@ interface AnnotationListProps {
|
|||
addSuccessToast: (msg: string) => void;
|
||||
}
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
${({ theme }) => css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
a,
|
||||
Link {
|
||||
margin-left: ${theme.gridUnit * 4}px;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
function AnnotationList({
|
||||
addDangerToast,
|
||||
addSuccessToast,
|
||||
|
|
@ -215,19 +230,6 @@ function AnnotationList({
|
|||
'data-test': 'annotation-bulk-select',
|
||||
});
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
a,
|
||||
Link {
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
let hasHistory = true;
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { styled, css, SupersetTheme } from '@superset-ui/core';
|
||||
import { css, styled, SupersetTheme } from '@superset-ui/core';
|
||||
import { JsonEditor } from 'src/components/AsyncAceEditor';
|
||||
import Button from 'src/components/Button';
|
||||
|
||||
|
|
@ -62,7 +62,6 @@ export const StyledFormHeader = styled.header`
|
|||
|
||||
h4 {
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark2};
|
||||
font-weight: bold;
|
||||
font-size: ${({ theme }) => theme.typography.sizes.l}px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -95,7 +94,6 @@ export const antdCollapseStyles = (theme: SupersetTheme) => css`
|
|||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: ${theme.gridUnit}px;
|
||||
}
|
||||
|
|
@ -155,10 +153,6 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.ant-modal-title > h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
height: ${theme.gridUnit * 180.5}px;
|
||||
}
|
||||
|
|
@ -176,7 +170,7 @@ export const antDAlertStyles = (theme: SupersetTheme) => css`
|
|||
.ant-alert-message {
|
||||
color: ${theme.colors.info.dark2};
|
||||
font-size: ${theme.typography.sizes.s + 1}px;
|
||||
font-weight: bold;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
.ant-alert-description {
|
||||
|
|
@ -198,7 +192,9 @@ export const antDAlertStyles = (theme: SupersetTheme) => css`
|
|||
`;
|
||||
|
||||
export const StyledAlertMargin = styled.div`
|
||||
margin: 0 ${({ theme }) => theme.gridUnit * 4}px -${({ theme }) => theme.gridUnit * 4}px;
|
||||
${({ theme }) => css`
|
||||
margin: 0 ${theme.gridUnit * 4}px -${theme.gridUnit * 4}px;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
|
||||
|
|
@ -208,7 +204,7 @@ export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
|
|||
color: ${theme.colors.error.dark2};
|
||||
.ant-alert-message {
|
||||
font-size: ${theme.typography.sizes.s + 1}px;
|
||||
font-weight: bold;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
.ant-alert-description {
|
||||
font-size: ${theme.typography.sizes.s + 1}px;
|
||||
|
|
@ -284,85 +280,86 @@ export const validatedFormStyles = (theme: SupersetTheme) => css`
|
|||
`;
|
||||
|
||||
export const StyledInputContainer = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
&.mb-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.mb-8 {
|
||||
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||
font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
|
||||
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
}
|
||||
|
||||
&.extra-container {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
margin-top: ${({ theme }) => theme.gridUnit * 0.75}px;
|
||||
font-family: ${({ theme }) => theme.typography.families.sansSerif};
|
||||
font-size: ${({ theme }) => theme.typography.sizes.m}px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 ${({ theme }) => theme.gridUnit}px;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 160px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: ${({ theme }) => theme.colors.grayscale.light1};
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
padding: ${({ theme }) => theme.gridUnit * 1.5}px
|
||||
${({ theme }) => theme.gridUnit * 2}px;
|
||||
border-style: none;
|
||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||
|
||||
&[name='name'] {
|
||||
flex: 0 1 auto;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
&.expandable {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.25s;
|
||||
margin-left: ${({ theme }) => theme.gridUnit * 8}px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
.control-label {
|
||||
${({ theme }) => css`
|
||||
margin-bottom: ${theme.gridUnit * 6}px;
|
||||
&.mb-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.open {
|
||||
height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px;
|
||||
padding-right: ${({ theme }) => theme.gridUnit * 5}px;
|
||||
&.mb-8 {
|
||||
margin-bottom: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: ${theme.colors.grayscale.dark1};
|
||||
font-size: ${theme.typography.sizes.s - 1}px;
|
||||
margin-bottom: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
|
||||
&.extra-container {
|
||||
padding-top: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
margin-left: ${theme.gridUnit * 2}px;
|
||||
margin-top: ${theme.gridUnit * 0.75}px;
|
||||
font-family: ${theme.typography.families.sansSerif};
|
||||
font-size: ${theme.typography.sizes.m}px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 ${theme.gridUnit}px;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 160px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: ${theme.colors.grayscale.light1};
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 2}px;
|
||||
border-style: none;
|
||||
border: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
|
||||
&[name='name'] {
|
||||
flex: 0 1 auto;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
&.expandable {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.25s;
|
||||
margin-left: ${theme.gridUnit * 8}px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
.control-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.open {
|
||||
height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px;
|
||||
padding-right: ${theme.gridUnit * 5}px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const StyledJsonEditor = styled(JsonEditor)`
|
||||
|
|
@ -397,13 +394,13 @@ export const StyledAlignment = styled.div`
|
|||
`;
|
||||
|
||||
export const buttonLinkStyles = (theme: SupersetTheme) => css`
|
||||
font-weight: 400;
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
text-transform: initial;
|
||||
padding-right: ${theme.gridUnit * 2}px;
|
||||
`;
|
||||
|
||||
export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css`
|
||||
font-weight: 400;
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
text-transform: initial;
|
||||
padding: ${theme.gridUnit * 8}px 0 0;
|
||||
margin-left: 0px;
|
||||
|
|
@ -424,7 +421,7 @@ export const TabHeader = styled.div`
|
|||
|
||||
export const CreateHeaderTitle = styled.div`
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark2};
|
||||
font-weight: bold;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||
font-size: ${({ theme }) => theme.typography.sizes.m}px;
|
||||
`;
|
||||
|
||||
|
|
@ -442,7 +439,7 @@ export const EditHeaderTitle = styled.div`
|
|||
export const EditHeaderSubtitle = styled.div`
|
||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||
font-size: ${({ theme }) => theme.typography.sizes.l}px;
|
||||
font-weight: bold;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||
`;
|
||||
|
||||
export const CredentialInfoForm = styled.div`
|
||||
|
|
@ -515,7 +512,7 @@ export const SelectDatabaseStyles = styled.div`
|
|||
margin: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
.available-label {
|
||||
font-size: ${({ theme }) => theme.typography.sizes.l * 1.1}px;
|
||||
font-weight: bold;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||
margin: ${({ theme }) => theme.gridUnit * 6}px 0;
|
||||
}
|
||||
.available-select {
|
||||
|
|
@ -555,7 +552,7 @@ export const StyledCatalogTable = styled.div`
|
|||
|
||||
.gsheet-title {
|
||||
font-size: ${({ theme }) => theme.typography.sizes.l * 1.1}px;
|
||||
font-weight: bold;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||
margin: ${({ theme }) => theme.gridUnit * 10}px 0 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue