diff --git a/superset-frontend/images/icons/filter.svg b/superset-frontend/images/icons/filter.svg index f762e26de0ea..a5e58564704b 100644 --- a/superset-frontend/images/icons/filter.svg +++ b/superset-frontend/images/icons/filter.svg @@ -17,5 +17,5 @@ specific language governing permissions and limitations under the License. --> - + diff --git a/superset-frontend/images/icons/filter_small.svg b/superset-frontend/images/icons/filter_small.svg new file mode 100644 index 000000000000..f762e26de0ea --- /dev/null +++ b/superset-frontend/images/icons/filter_small.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/src/components/FaveStar.tsx b/superset-frontend/src/components/FaveStar.tsx index 2dba97ca8695..d9ed28492e51 100644 --- a/superset-frontend/src/components/FaveStar.tsx +++ b/superset-frontend/src/components/FaveStar.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { t } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import TooltipWrapper from './TooltipWrapper'; import Icon from './Icon'; @@ -31,6 +31,10 @@ interface FaveStarProps { showTooltip?: boolean; } +const StyledLink = styled.a` + font-size: ${({ theme }) => theme.typography.sizes.xl}px; +`; + export default class FaveStar extends React.PureComponent { componentDidMount() { this.props.fetchFaveStar(this.props.itemId); @@ -68,7 +72,7 @@ export default class FaveStar extends React.PureComponent { } return ( - { width={this.props.width || 20} height={this.props.height || 'auto'} /> - + ); } } diff --git a/superset-frontend/src/components/Icon/index.tsx b/superset-frontend/src/components/Icon/index.tsx index 2c5a4eeaea00..2ba1aa2b9f15 100644 --- a/superset-frontend/src/components/Icon/index.tsx +++ b/superset-frontend/src/components/Icon/index.tsx @@ -17,6 +17,7 @@ * under the License. */ import React, { SVGProps } from 'react'; +import { styled } from '@superset-ui/core'; import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg'; import { ReactComponent as AlertIcon } from 'images/icons/alert.svg'; @@ -77,6 +78,7 @@ import { ReactComponent as FieldNumIcon } from 'images/icons/field_num.svg'; import { ReactComponent as FieldStructIcon } from 'images/icons/field_struct.svg'; import { ReactComponent as FileIcon } from 'images/icons/file.svg'; import { ReactComponent as FilterIcon } from 'images/icons/filter.svg'; +import { ReactComponent as FilterSmallIcon } from 'images/icons/filter_small.svg'; import { ReactComponent as FolderIcon } from 'images/icons/folder.svg'; import { ReactComponent as FullIcon } from 'images/icons/full.svg'; import { ReactComponent as GearIcon } from 'images/icons/gear.svg'; @@ -194,6 +196,7 @@ export type IconName = | 'field-struct' | 'file' | 'filter' + | 'filter-small' | 'folder' | 'full' | 'gear' @@ -314,6 +317,7 @@ export const iconsRegistry: Record< 'field-struct': FieldStructIcon, file: FileIcon, filter: FilterIcon, + 'filter-small': FilterSmallIcon, folder: FolderIcon, full: FullIcon, gear: GearIcon, @@ -376,6 +380,18 @@ interface IconProps extends SVGProps { name: IconName; } +const IconWrapper = styled.span` + display: inline-block; + width: 1em; + height: 1em; + svg { + width: 100%; + height: 100%; + color: currentColor; + vertical-align: middle; + } +`; + const Icon = ({ name, color = '#666666', @@ -385,7 +401,9 @@ const Icon = ({ const Component = iconsRegistry[name]; return ( - + + + ); }; diff --git a/superset-frontend/src/components/ListView/TableCollection.tsx b/superset-frontend/src/components/ListView/TableCollection.tsx index 41b001853baf..b36226c051f0 100644 --- a/superset-frontend/src/components/ListView/TableCollection.tsx +++ b/superset-frontend/src/components/ListView/TableCollection.tsx @@ -145,6 +145,7 @@ const Table = styled.table` .table-row { .actions { opacity: 0; + font-size: ${({ theme }) => theme.typography.sizes.xl}px; } &:hover { diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx index 2bf3c20efdcf..9b0b0ff2ca1f 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx @@ -24,16 +24,19 @@ export const Pill = styled.div` color: ${({ theme }) => theme.colors.grayscale.light5}; border-radius: 1em; vertical-align: text-top; - padding: 0 8px; - font-size: 14px; + padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`}; + font-size: ${({ theme }) => theme.typography.sizes.m}px; font-weight: normal; transition: ${({ theme }) => theme.transitionTiming}s all; + min-width: 1em; + min-height: 1em; + line-height: 1em; + vertical-align: middle; + white-space: nowrap; svg { - vertical-align: middle; - height: 1em; - width: 1em; - color: currentColor; + position: relative; + top: -1px; } &:hover { @@ -52,17 +55,8 @@ export const Pill = styled.div` &.filters-inactive { color: ${({ theme }) => theme.colors.grayscale.light5}; background: ${({ theme }) => theme.colors.grayscale.light1}; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - padding: 0; + padding: ${({ theme }) => theme.gridUnit}px; text-align: center; - line-height: 22px; - font-size: 18px; - svg { - margin-bottom: 2px; - } &:hover { background: ${({ theme }) => theme.colors.grayscale.base}; } diff --git a/superset-frontend/src/dashboard/components/Header.jsx b/superset-frontend/src/dashboard/components/Header.jsx index c986a314a981..1df072247494 100644 --- a/superset-frontend/src/dashboard/components/Header.jsx +++ b/superset-frontend/src/dashboard/components/Header.jsx @@ -105,6 +105,14 @@ const StyledDashboardHeader = styled.div` .fave-unfave-icon { margin-left: ${({ theme }) => theme.gridUnit * 2}px; } + .button-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + .action-button { + font-size: ${({ theme }) => theme.typography.sizes.xl}px; + } + } `; class Header extends React.PureComponent { diff --git a/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx b/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx index fae689909467..7419dc033f98 100644 --- a/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx +++ b/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx @@ -149,7 +149,7 @@ class HeaderActionsDropdown extends React.PureComponent { title={} noCaret id="save-dash-split-button" - bsSize="small" + bsSize="large" style={{ border: 'none', padding: 0, marginLeft: '4px' }} pullRight > diff --git a/superset-frontend/src/dashboard/stylesheets/dashboard.less b/superset-frontend/src/dashboard/stylesheets/dashboard.less index ac28aa097f7a..59253e3b7ef5 100644 --- a/superset-frontend/src/dashboard/stylesheets/dashboard.less +++ b/superset-frontend/src/dashboard/stylesheets/dashboard.less @@ -128,12 +128,6 @@ body { height: 100%; } } - - .button-container { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - } } .dashboard .chart-header,