From e2d0cd5b18e9f39ce28c743bc04ca4f7ba499f8e Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 27 Nov 2018 11:57:02 +0200 Subject: [PATCH] fix: theme improvments by @stasiukanya squashed commit of the following: commit 6b07dc7fa0eec80545ddcc2d017c3c897002464d Author: Anya Stasiuk Date: Wed Nov 7 15:18:26 2018 +0200 theme fixes --- src/common-elements/Tooltip.tsx | 1 + src/common-elements/dropdown.ts | 2 ++ src/common-elements/headers.ts | 2 +- src/common-elements/panels.ts | 8 ++--- src/common-elements/tabs.ts | 16 ++++++---- src/components/Endpoint/styled.elements.ts | 3 +- src/components/Markdown/styled.elements.tsx | 3 +- .../PayloadSamples/styled.elements.ts | 6 ++-- src/components/Redoc/styled.elements.tsx | 9 +++++- src/components/SearchBox/styled.elements.tsx | 8 +++-- src/components/SideMenu/styled.elements.ts | 32 +++++++++---------- src/styled-components.ts | 8 +---- src/theme.ts | 20 +++++++++--- 13 files changed, 68 insertions(+), 50 deletions(-) diff --git a/src/common-elements/Tooltip.tsx b/src/common-elements/Tooltip.tsx index 3130fc6493..a6c2f8b0c8 100644 --- a/src/common-elements/Tooltip.tsx +++ b/src/common-elements/Tooltip.tsx @@ -19,6 +19,7 @@ const Tip = styled.div` border-radius: 4px; padding: 0.3em 0.6em; text-align: center; + box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1); `; const Content = styled.div` diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts index cd1c62fc54..86623949ae 100644 --- a/src/common-elements/dropdown.ts +++ b/src/common-elements/dropdown.ts @@ -38,6 +38,8 @@ export const StyledDropdown = styled(Dropdown)` margin-top: 5px; background: white; + box-sizing: border-box; + &:hover { border-color: ${props => props.theme.colors.primary.main}; color: ${props => props.theme.colors.primary.main}; diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts index f28fccfa20..4e38b4855a 100644 --- a/src/common-elements/headers.ts +++ b/src/common-elements/headers.ts @@ -8,7 +8,7 @@ const headerFontSize = { export const headerCommonMixin = level => css` font-family: ${props => props.theme.typography.headings.fontFamily}; - font-weight: 400; + font-weight: ${({ theme }) => theme.typography.headings.fontWeight}; font-size: ${headerFontSize[level]}; `; diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index baf60d4688..08620b3997 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -1,5 +1,5 @@ import { SECTION_ATTR } from '../services/MenuStore'; -import styled, { media, WithProps } from '../styled-components'; +import styled, { media } from '../styled-components'; export const MiddlePanel = styled.div` width: calc(100% - ${props => props.theme.rightPanel.width}); @@ -12,9 +12,9 @@ export const MiddlePanel = styled.div` `}; `; -export const Section = (styled.div as WithProps<'div', { underlined?: boolean }>).attrs(props => ({ +export const Section = styled.div.attrs(props => ({ [SECTION_ATTR]: props.id, -}))` +}))<{ underlined?: boolean }>` padding: ${props => props.theme.spacing.sectionVertical}px 0; ${media.lessThan('medium', true)` @@ -39,7 +39,7 @@ export const Section = (styled.div as WithProps<'div', { underlined?: boolean }> export const RightPanel = styled.div` width: ${props => props.theme.rightPanel.width}; - color: #fafbfc; + color: ${({ theme }) => theme.rightPanel.textColor}; background-color: ${props => props.theme.rightPanel.backgroundColor}; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts index 602600fcb2..7076bdc7cb 100644 --- a/src/common-elements/tabs.ts +++ b/src/common-elements/tabs.ts @@ -1,4 +1,6 @@ +import { darken } from 'polished'; import { Tabs as ReactTabs } from 'react-tabs'; + import styled from '../styled-components'; export { Tab, TabList, TabPanel } from 'react-tabs'; @@ -14,14 +16,14 @@ export const Tabs = styled(ReactTabs)` padding: 5px 10px; display: inline-block; - background-color: rgba(0, 0, 0, 0.2); + background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)}; border-bottom: 1px solid rgba(0, 0, 0, 0.5); cursor: pointer; text-align: center; outline: none; - color: #ccc; + color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)}; margin: 5px; - border: 1px solid #181f22; + border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)}; border-radius: 5px; min-width: 60px; font-size: 0.9em; @@ -29,7 +31,7 @@ export const Tabs = styled(ReactTabs)` &.react-tabs__tab--selected { color: ${props => props.theme.colors.text.primary}; - background: #e2e2e2; + background: ${({ theme }) => theme.rightPanel.textColor}; } &:only-child { @@ -55,7 +57,7 @@ export const Tabs = styled(ReactTabs)` } } > .react-tabs__tab-panel { - background: #171e21; + background: ${({ theme }) => theme.codeSample.backgroundColor}; & > div, & > pre { padding: 20px; @@ -74,7 +76,7 @@ export const SmallTabs = styled(Tabs)` font-size: 13px; font-weight: normal; border-bottom: 1px dashed; - color: #787b7d; + color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)}; border-radius: 0; background: none; @@ -83,7 +85,7 @@ export const SmallTabs = styled(Tabs)` } &.react-tabs__tab--selected { - color: #babcbf; + color: ${({ theme }) => theme.rightPanel.textColor}; background: none; } } diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index b970472db8..4241ff0902 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -17,7 +17,8 @@ export const ServerRelativeURL = styled.span` export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>` padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; - background-color: ${props => (props.inverted ? 'transparent' : '#222d32')}; + background-color: ${props => + props.inverted ? 'transparent' : props.theme.codeSample.backgroundColor}; display: flex; white-space: nowrap; align-items: center; diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx index 486528bc0d..e0df9dcf50 100644 --- a/src/components/Markdown/styled.elements.tsx +++ b/src/components/Markdown/styled.elements.tsx @@ -72,6 +72,7 @@ export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent< border: 1px solid rgba(38, 50, 56, 0.1); padding: 0.1em 0.25em 0.2em; font-size: ${props => props.theme.typography.code.fontSize}; + font-weight: ${({ theme }) => theme.typography.code.fontWeight}; word-break: break-word; } @@ -141,7 +142,7 @@ export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent< border-top: 1px solid #ccc; &:nth-child(2n) { - background-color: #f8f8f8; + background-color: ${({ theme }) => theme.schema.nestedBackground}; } } diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts index 644b9a6130..50e4a1570d 100644 --- a/src/components/PayloadSamples/styled.elements.ts +++ b/src/components/PayloadSamples/styled.elements.ts @@ -13,7 +13,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)` margin-left: 10px; text-transform: none; font-size: 0.929em; - border-bottom: 1px solid rgba(255, 255, 255, 0.9); + border-bottom: 1px solid ${({ theme }) => theme.rightPanel.textColor}; margin: 0 0 10px 0; display: block; @@ -23,11 +23,11 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)` border: none; padding: 0 1.2em 0 0; background: transparent; - color: rgba(255, 255, 255, 0.9); + color: ${({ theme }) => theme.rightPanel.textColor}; box-shadow: none; .Dropdown-arrow { - border-top-color: rgba(255, 255, 255, 0.9); + border-top-color: ${({ theme }) => theme.rightPanel.textColor}; } } .Dropdown-menu { diff --git a/src/components/Redoc/styled.elements.tsx b/src/components/Redoc/styled.elements.tsx index abc9925598..ebb30df11e 100644 --- a/src/components/Redoc/styled.elements.tsx +++ b/src/components/Redoc/styled.elements.tsx @@ -43,7 +43,14 @@ export const BackgroundStub = styled.div` top: 0; bottom: 0; right: 0; - width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4); + width: ${({ theme }) => { + if (theme.rightPanel.width.endsWith('%')) { + const percents = parseInt(theme.rightPanel.width, 10); + return `calc((100% - ${theme.menu.width}) * ${percents / 100})`; + } else { + return theme.rightPanel.width; + } + }}; ${media.lessThan('medium', true)` display: none; `}; diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx index 2f3e7be42f..647e71c874 100644 --- a/src/components/SearchBox/styled.elements.tsx +++ b/src/components/SearchBox/styled.elements.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +import { darken } from 'polished'; import styled from '../../styled-components'; import { MenuItemLabel } from '../SideMenu/styled.elements'; @@ -16,10 +17,11 @@ export const SearchInput = styled.input.attrs(() => ({ padding: 5px ${props => props.theme.spacing.unit * 2}px 5px ${props => props.theme.spacing.unit * 4}px; border: 0; - border-bottom: 1px solid #e1e1e1; + border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}; + font-family: ${({ theme }) => theme.typography.fontFamily}; font-weight: bold; font-size: 13px; - color: ${props => props.theme.colors.text}; + color: ${props => props.theme.menu.textColor}; background-color: transparent; outline: none; `; @@ -44,7 +46,7 @@ export const SearchIcon = styled((props: { className?: string }) => ( width: 0.9em; path { - fill: ${props => props.theme.colors.text}; + fill: ${props => props.theme.menu.textColor}; } `; diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts index e1ddcc9609..68d543edcd 100644 --- a/src/components/SideMenu/styled.elements.ts +++ b/src/components/SideMenu/styled.elements.ts @@ -1,13 +1,12 @@ import * as classnames from 'classnames'; +import { darken } from 'polished'; import { deprecatedCss, ShelfIcon } from '../../common-elements'; -import styled, { css, WithProps } from '../../styled-components'; +import styled, { css } from '../../styled-components'; -export const OperationBadge = (styled.span as WithProps<'span', { type: string }>).attrs( - (props: any) => ({ - className: `operation-type ${props.type}`, - }), -)` +export const OperationBadge = styled.span.attrs((props: { type: string }) => ({ + className: `operation-type ${props.type}`, +}))<{ type: string }>` width: 32px; display: inline-block; height: ${props => props.theme.typography.code.fontSize}; @@ -63,11 +62,11 @@ export const OperationBadge = (styled.span as WithProps<'span', { type: string } } `; -function menuItemActiveBg(depth): string { +function menuItemActiveBg(depth, { theme }): string { if (depth > 1) { - return '#e1e1e1'; + return darken(0.1, theme.menu.backgroundColor); } else if (depth === 1) { - return '#f0f0f0'; + return darken(0.05, theme.menu.backgroundColor); } else { return ''; } @@ -99,7 +98,7 @@ export const menuItemDepth = { font-size: 0.8em; padding-bottom: 0; cursor: default; - color: ${props => props.theme.colors.text.primary}; + color: ${props => props.theme.menu.textColor}; `, 1: css` font-size: 0.929em; @@ -109,7 +108,7 @@ export const menuItemDepth = { } `, 2: css` - color: ${props => props.theme.colors.text.primary}; + color: ${props => props.theme.menu.textColor}; `, }; @@ -127,8 +126,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({ }), }))` cursor: pointer; - color: ${props => - props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary}; + color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)}; margin: 0; padding: 12.5px ${props => props.theme.spacing.unit * 4}px; ${({ depth, type, theme }) => @@ -137,12 +135,12 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({ justify-content: space-between; font-family: ${props => props.theme.typography.headings.fontFamily}; ${props => menuItemDepth[props.depth]}; - background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')}; + background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')}; ${props => (props.deprecated && deprecatedCss) || ''}; &:hover { - background-color: ${props => menuItemActiveBg(props.depth)}; + background-color: ${props => menuItemActiveBg(props.depth, props)}; } ${ShelfIcon} { @@ -174,8 +172,8 @@ export const RedocAttribution = styled.div` a, a:visited, a:hover { - color: ${theme.colors.text.primary} !important; - border-top: 1px solid #e1e1e1; + color: ${theme.menu.textColor} !important; + border-top: 1px solid ${darken(0.1, theme.menu.backgroundColor)}; padding: ${theme.spacing.unit}px 0; display: block; } diff --git a/src/styled-components.ts b/src/styled-components.ts index fbb637bac4..868211a44d 100644 --- a/src/styled-components.ts +++ b/src/styled-components.ts @@ -1,15 +1,9 @@ -import * as React from 'react'; import * as styledComponents from 'styled-components'; import { ResolvedThemeInterface } from './theme'; export { ResolvedThemeInterface }; -type WithProps< - C extends keyof JSX.IntrinsicElements | React.ComponentType, - T extends object -> = styledComponents.ThemedStyledFunction; - const { default: styled, css, @@ -49,7 +43,7 @@ export const media = { }, }; -export { css, createGlobalStyle, keyframes, ThemeProvider, WithProps }; +export { css, createGlobalStyle, keyframes, ThemeProvider }; export default styled; export function extensionsHook(styledName: string) { diff --git a/src/theme.ts b/src/theme.ts index 28945e4ff4..9d31285b1b 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -95,7 +95,7 @@ const defaultTheme: ThemeInterface = { }, typography: { fontSize: '14px', - lineHeight: '1.5', + lineHeight: '1.5em', fontWeightRegular: '400', fontWeightBold: '600', fontWeightLight: '300', @@ -104,6 +104,7 @@ const defaultTheme: ThemeInterface = { optimizeSpeed: true, headings: { fontFamily: 'Montserrat, sans-serif', + fontWeight: '400', }, code: { fontSize: '13px', @@ -111,18 +112,19 @@ const defaultTheme: ThemeInterface = { lineHeight: ({ typography }) => typography.lineHeight, fontWeight: ({ typography }) => typography.fontWeightRegular, color: '#e53935', - backgroundColor: 'rgba(38, 50, 56, 0.04)', + backgroundColor: 'rgba(38, 50, 56, 0.05)', wrap: false, }, links: { color: ({ colors }) => colors.primary.main, - visited: ({ colors }) => colors.primary.main, - hover: ({ colors }) => lighten(0.2, colors.primary.main), + visited: ({ typography }) => typography.links.color, + hover: ({ typography }) => lighten(0.2, typography.links.color), }, }, menu: { width: '260px', backgroundColor: '#fafafa', + textColor: '#333333', groupItems: { textTransform: 'uppercase', }, @@ -131,7 +133,7 @@ const defaultTheme: ThemeInterface = { }, arrow: { size: '1.5em', - color: theme => theme.colors.text.primary, + color: theme => theme.menu.textColor, }, }, logo: { @@ -143,6 +145,9 @@ const defaultTheme: ThemeInterface = { width: '40%', textColor: '#ffffff', }, + codeSample: { + backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor), + }, }; export default defaultTheme; @@ -275,6 +280,7 @@ export interface ResolvedThemeInterface { }; headings: { fontFamily: string; + fontWeight: string; }; links: { @@ -286,6 +292,7 @@ export interface ResolvedThemeInterface { menu: { width: string; backgroundColor: string; + textColor: string; groupItems: { textTransform: string; }; @@ -306,6 +313,9 @@ export interface ResolvedThemeInterface { textColor: string; width: string; }; + codeSample: { + backgroundColor: string; + }; extensionsHook?: (name: string, props: any) => string; }