style updates for core theme (#3134)

[INS-452]
This commit is contained in:
Dimitri Mitropoulos 2021-03-02 11:14:19 -05:00 committed by GitHub
parent edd447f38e
commit 4b993a7762
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 68 additions and 22 deletions

View File

@ -116,6 +116,8 @@ export async function generateThemeCSS(theme: PluginTheme): Promise<string> {
css += wrapStyles(n, '.theme--pane', getThemeBlockCSS(styles.pane));
css += wrapStyles(n, '.theme--pane__header', getThemeBlockCSS(styles.paneHeader));
css += wrapStyles(n, '.theme--app-header', getThemeBlockCSS(styles.appHeader));
// Sidebar Styles
css += wrapStyles(n, '.theme--sidebar', getThemeBlockCSS(styles.sidebar));
css += wrapStyles(n, '.theme--sidebar__list', getThemeBlockCSS(styles.sidebarList));

View File

@ -82,7 +82,8 @@ class MethodDropdown extends PureComponent {
return (
<Dropdown ref={this._setDropdownRef} className="method-dropdown" right={right}>
<DropdownButton type="button" {...extraProps}>
{buttonLabel} <i className="fa fa-caret-down" />
<span className={`http-method-${method}`}>{buttonLabel}</span>{' '}
<i className="fa fa-caret-down space-left" />
</DropdownButton>
{constants.HTTP_METHODS.map(method => (
<DropdownItem

View File

@ -50,13 +50,27 @@ class Theme extends React.PureComponent<Props, State> {
value={theme.theme.name}
className={isActive ? 'active' : ''}>
<svg theme={theme.theme.name} width="100%" height="100%" viewBox="0 0 500 300">
{/*
A WORD TO THE WISE: If you, dear traveler from the future, are here for the purpose of theming things due to changes in the app structure, please remember to add `--sub` to your classes or else the selected class' theme variables will apply to all theme previews. Search your codebase for `--sub` to see more.
*/}
<g subtheme={theme.theme.name}>
{/* App Header */}
<g className="theme--app-header--sub">
<rect x="0" y="0" width="100%" height="10%" className="bg-fill" />
</g>
{/* Panes */}
<g className="theme--pane--sub">
<rect x="0" y="0" width="100%" height="100%" className="bg-fill" />
{/* Response Area */}
<rect x="0" y="10%" width="100%" height="100%" className="bg-fill" />
{/* URL Bars */}
<rect
x="25%"
y="0"
y="10%"
width="100%"
height="10%"
className="theme--pane__header--sub bg-fill"
@ -65,23 +79,16 @@ class Theme extends React.PureComponent<Props, State> {
{/* Sidebar */}
<g className="theme--sidebar--sub">
<rect x="0" y="0" width="25%" height="100%" className="bg-fill" />
<rect
x="0"
y="0"
width="25%"
height="10%"
className="theme--sidebar__header--sub bg-fill"
/>
<rect x="0" y="10%" width="25%" height="100%" className="bg-fill" />
</g>
{/* Lines */}
<line x1="25%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
<line x1="62%" x2="62%" y1="0" y2="100%" strokeWidth="1" className="hl-stroke" />
<line x1="25%" x2="25%" y1="0" y2="100%" strokeWidth="1" className="hl-stroke" />
<line x1="0" x2="25%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
<line x1="0%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
<line x1="25%" x2="100%" y1="20%" y2="20%" strokeWidth="1" className="hl-stroke" />
<line x1="62%" x2="62%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
<line x1="25%" x2="25%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
{/* Colors */}
{/* Color Squares */}
<rect x="40%" y="85%" width="5%" height="8%" className="success-fill" />
<rect x="50%" y="85%" width="5%" height="8%" className="info-fill" />
<rect x="60%" y="85%" width="5%" height="8%" className="warning-fill" />

View File

@ -50,7 +50,7 @@ const WorkspacePageHeader = ({
return (
<Header
className="app-header"
className="app-header theme--app-header"
gridLeft={
<React.Fragment>
<img src={coreLogo} alt="Insomnia" width="24" height="24" />

View File

@ -506,7 +506,7 @@ class WrapperHome extends React.PureComponent<Props, State> {
wrapperProps={this.props.wrapperProps}
renderPageHeader={() => (
<Header
className="app-header"
className="app-header theme--app-header"
gridLeft={
<React.Fragment>
<img src={coreLogo} alt="Insomnia" width="24" height="24" />

View File

@ -122,6 +122,7 @@
grid-column-end: span 6;
grid-row-start: 1;
grid-row-end: span 1;
background: var(--color-bg);
}
.layout-body {

View File

@ -31,9 +31,14 @@ module.exports = {
default: '#333',
},
},
appHeader: {
background: {
default: '#2C2C2C',
},
},
sidebar: {
background: {
default: '#2e2f2b',
default: '#2C2C2C',
success: '#7ecf2b',
notice: '#f0e137',
warning: '#ff9a1f',
@ -58,10 +63,10 @@ module.exports = {
},
paneHeader: {
foreground: {
default: '#666',
default: '#ccc',
},
background: {
default: '#fff',
default: '#212121',
success: '#75ba24',
notice: '#d8c84d',
warning: '#ec8702',
@ -72,7 +77,7 @@ module.exports = {
},
pane: {
background: {
default: '#282925',
default: '#292929',
success: '{{ styles.sidebar.background.success }}',
notice: '{{ styles.sidebar.background.notice }}',
warning: '{{ styles.sidebar.background.warning }}',

View File

@ -30,6 +30,11 @@ module.exports = {
xl: 'rgba(114, 121, 133, 0.8)',
},
styles: {
appHeader: {
background: {
default: '#20252c',
},
},
sidebar: {
background: {
default: '#20252c',

View File

@ -24,6 +24,11 @@ module.exports = {
xl: 'rgba(114, 121, 133, 0.8)',
},
styles: {
appHeader: {
background: {
default: '#eaeaeb',
},
},
sidebar: {
background: {
default: '#eaeaeb',

View File

@ -6,6 +6,11 @@ module.exports = {
default: '#555',
},
styles: {
appHeader: {
background: {
default: '#695eb8',
},
},
link: {
foreground: {
default: '#68a9a2',

View File

@ -24,6 +24,11 @@ module.exports = {
xl: 'rgba(142, 149, 146, 0.8)',
},
styles: {
appHeader: {
background: {
default: '#002b36',
},
},
sidebar: {
background: {
default: '#002b36',

View File

@ -24,6 +24,11 @@ module.exports = {
xl: 'rgba(133, 157, 176, 0.8)',
},
styles: {
appHeader: {
foreground: {
default: '#fff',
},
},
link: {
foreground: {
default: '#68a9a2',

View File

@ -14,6 +14,11 @@ module.exports = {
surprise: '#6030BF',
},
styles: {
appHeader: {
background: {
default: '#f7fafc',
},
},
link: {
foreground: {
default: '#68a9a2',