mirror of
https://github.com/Kong/insomnia
synced 2024-11-07 22:30:15 +00:00
parent
edd447f38e
commit
4b993a7762
@ -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));
|
||||
|
@ -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
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -122,6 +122,7 @@
|
||||
grid-column-end: span 6;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: span 1;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.layout-body {
|
||||
|
@ -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 }}',
|
||||
|
@ -30,6 +30,11 @@ module.exports = {
|
||||
xl: 'rgba(114, 121, 133, 0.8)',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
background: {
|
||||
default: '#20252c',
|
||||
},
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#20252c',
|
||||
|
@ -24,6 +24,11 @@ module.exports = {
|
||||
xl: 'rgba(114, 121, 133, 0.8)',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
background: {
|
||||
default: '#eaeaeb',
|
||||
},
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#eaeaeb',
|
||||
|
@ -6,6 +6,11 @@ module.exports = {
|
||||
default: '#555',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
background: {
|
||||
default: '#695eb8',
|
||||
},
|
||||
},
|
||||
link: {
|
||||
foreground: {
|
||||
default: '#68a9a2',
|
||||
|
@ -24,6 +24,11 @@ module.exports = {
|
||||
xl: 'rgba(142, 149, 146, 0.8)',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
background: {
|
||||
default: '#002b36',
|
||||
},
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#002b36',
|
||||
|
@ -24,6 +24,11 @@ module.exports = {
|
||||
xl: 'rgba(133, 157, 176, 0.8)',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
foreground: {
|
||||
default: '#fff',
|
||||
},
|
||||
},
|
||||
link: {
|
||||
foreground: {
|
||||
default: '#68a9a2',
|
||||
|
@ -14,6 +14,11 @@ module.exports = {
|
||||
surprise: '#6030BF',
|
||||
},
|
||||
styles: {
|
||||
appHeader: {
|
||||
background: {
|
||||
default: '#f7fafc',
|
||||
},
|
||||
},
|
||||
link: {
|
||||
foreground: {
|
||||
default: '#68a9a2',
|
||||
|
Loading…
Reference in New Issue
Block a user