mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fix(ui): New theme now follows maintainer recommendations

Browse Source 
- Existing themes aren't broken
 - New theme provides good color scheme
 - Buttons are visible and clearly defined
pull/1/head
jeremiG 6 years ago committed by yann300
parent 7ef215f703
commit 82d6676dca
3 changed files with 77 additions and 25 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      src/app/panels/styles/terminal-styles.js
  2. 4
      src/app/tabs/styles/run-tab-styles.js
  3. 93
      src/app/ui/styles-guide/styleGuideDavid.js

5
src/app/panels/styles/terminal-styles.js
Unescape View File

@ -78,10 +78,7 @@ var css = csjs`
line-height : 2ch; line-height : 2ch;
padding : 1ch; padding : 1ch;
margin-top : 2ch; margin-top : 2ch;
border-top : ${styles.terminal.customBlockBorderTop border-top : ${styles.terminal.blockBorderTop};
? styles.terminal.blockBorderTop
: '0.07ch solid ' + styles.colors.veryLightGrey
};
color : ${styles.appProperties.mainText_Color}; color : ${styles.appProperties.mainText_Color};
} }
.cli { .cli {

4
src/app/tabs/styles/run-tab-styles.js
Unescape View File

@ -130,15 +130,15 @@ var css = csjs`
${styles.rightPanel.runTab.button_transaction} ${styles.rightPanel.runTab.button_transaction}
} }
.atAddress { .atAddress {
${styles.rightPanel.runTab.button_atAddress} margin: 0;
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
font-size: 10px; font-size: 10px;
margin: 0;
word-break: inherit; word-break: inherit;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-right: 0; border-right: 0;
${styles.rightPanel.runTab.button_atAddress}
} }
.atAddressSect { .atAddressSect {
margin-top: 6px; margin-top: 6px;

93
src/app/ui/styles-guide/styleGuideDavid.js
Unescape View File

@ -16,7 +16,7 @@ function styleGuideDavid () {
// BASIC COLORS (B&W and transparent) // BASIC COLORS (B&W and transparent)
transparent: 'transparent', transparent: 'transparent',
white: 'hsl(0, 0%, 100%)', white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)', black: 'black',
opacityBlack: 'hsla(0, 0%, 0%, .4)', opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE // BLUE
@ -59,6 +59,7 @@ function styleGuideDavid () {
BORDERS BORDERS
------------------------------------------------------ */ ------------------------------------------------------ */
borders: { borders: {
primary_borderRadius: '3px',
secondary_borderRadius: '5px' secondary_borderRadius: '5px'
} }
} }
@ -81,10 +82,10 @@ function styleGuideDavid () {
BACKGROUND COLORS BACKGROUND COLORS
------------------------------------------------------ */ ------------------------------------------------------ */
primary_BackgroundColor: cssProperties.colors.white, primary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.white, secondary_BackgroundColor: cssProperties.colors.veryLightGrey,
tertiary_BackgroundColor: cssProperties.colors.white, tertiary_BackgroundColor: cssProperties.colors.white,
quaternary_BackgroundColor: cssProperties.colors.white, quaternary_BackgroundColor: cssProperties.colors.white,
fifth_BackgroundColor: cssProperties.colors.white, fifth_BackgroundColor: cssProperties.colors.lightGrey,
seventh_BackgroundColor: cssProperties.colors.white, seventh_BackgroundColor: cssProperties.colors.white,
dark_BackgroundColor: cssProperties.colors.black, dark_BackgroundColor: cssProperties.colors.black,
light_BackgroundColor: cssProperties.colors.white, light_BackgroundColor: cssProperties.colors.white,
@ -181,6 +182,7 @@ function styleGuideDavid () {
primaryButton_TextColor: cssProperties.colors.black, primaryButton_TextColor: cssProperties.colors.black,
primaryButton_BackgroundColor: cssProperties.colors.white, primaryButton_BackgroundColor: cssProperties.colors.white,
primaryButton_BorderColor: cssProperties.colors.black, primaryButton_BorderColor: cssProperties.colors.black,
primaryButton_BorderWidth: '2px',
/* ................. /* .................
SECONDARY SECONDARY
@ -281,6 +283,7 @@ function styleGuideDavid () {
background-color : ${opts.BackgroundColor}; background-color : ${opts.BackgroundColor};
border : 1px solid ${opts.BorderColor}; border : 1px solid ${opts.BorderColor};
color : ${opts.Color}; color : ${opts.Color};
border-radius : ${cssProperties.borders.primary_borderRadius}
font-size : 12px; font-size : 12px;
padding : 10px 15px; padding : 10px 15px;
line-height : 20px; line-height : 20px;
@ -356,6 +359,10 @@ function styleGuideDavid () {
font-size : 12px; font-size : 12px;
overflow : hidden; overflow : hidden;
word-break : normal; word-break : normal;
border-radius : ${opts.BorderRadius};
border-width : ${opts.BorderWidth};
border-color : ${opts.BorderColor};
border-style : ${opts.BorderStyle};
` `
} }
} }
@ -538,25 +545,37 @@ function styleGuideDavid () {
button_Compile: appProperties.uiElements.button({ button_Compile: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor, BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor, BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor Color: appProperties.primaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Details: appProperties.uiElements.button({ button_Details: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Publish: appProperties.uiElements.button({ button_Publish: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
dropdown_CompileContract: appProperties.uiElements.dropdown({ dropdown_CompileContract: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor, BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor, BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor Color: appProperties.dropdown_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
box_CompileContainer: appProperties.uiElements.solidBorderBox({ box_CompileContainer: appProperties.uiElements.solidBorderBox({
@ -618,33 +637,51 @@ function styleGuideDavid () {
button_atAddress: appProperties.uiElements.button({ button_atAddress: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor, BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor, BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor Color: appProperties.primaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Create: appProperties.uiElements.button({ button_Create: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor, BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor, BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.transactButton_TextColor Color: appProperties.transactButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Constant: appProperties.uiElements.button({ button_Constant: appProperties.uiElements.button({
BackgroundColor: appProperties.constantButton_BackgroundColor, BackgroundColor: appProperties.constantButton_BackgroundColor,
BorderColor: appProperties.constantButton_BorderColor, BorderColor: appProperties.constantButton_BorderColor,
Color: appProperties.constantButton_TextColor Color: appProperties.constantButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Instance_Call: appProperties.uiElements.button({ button_Instance_Call: appProperties.uiElements.button({
BackgroundColor: appProperties.callButton_BackgroundColor, BackgroundColor: appProperties.callButton_BackgroundColor,
BorderColor: appProperties.callButton_BorderColor, BorderColor: appProperties.callButton_BorderColor,
Color: appProperties.callButton_TextColor Color: appProperties.callButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Instance_Transact: appProperties.uiElements.button({ button_Instance_Transact: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor, BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor, BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.transactButton_TextColor Color: appProperties.transactButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Instance_TransactPayable: appProperties.uiElements.button({ button_Instance_TransactPayable: appProperties.uiElements.button({
BackgroundColor: appProperties.transactPayableButton_BackgroundColor, BackgroundColor: appProperties.transactPayableButton_BackgroundColor,
BorderColor: appProperties.transactPayableButton_BorderColor, BorderColor: appProperties.transactPayableButton_BorderColor,
Color: appProperties.transactPayableButton_TextColor Color: appProperties.transactPayableButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
icon_Color_Instance_CopyToClipboard: appProperties.icon_Color, icon_Color_Instance_CopyToClipboard: appProperties.icon_Color,
@ -669,13 +706,19 @@ function styleGuideDavid () {
button_runTests: appProperties.uiElements.button({ button_runTests: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor, BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor, BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor Color: appProperties.primaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_generateTestFile: appProperties.uiElements.button({ button_generateTestFile: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor, BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor, BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor Color: appProperties.primaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
color_testPass: appProperties.success_BackgroundColor, color_testPass: appProperties.success_BackgroundColor,
@ -701,12 +744,18 @@ function styleGuideDavid () {
button_LoadPlugin: appProperties.uiElements.button({ button_LoadPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_initPlugin: appProperties.uiElements.button({ button_initPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor, BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor, BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}) })
}, },
@ -727,7 +776,10 @@ function styleGuideDavid () {
button_Debugger: appProperties.uiElements.button({ button_Debugger: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
button_Debugger_icon_Color: appProperties.icon_ConstantColor, button_Debugger_icon_Color: appProperties.icon_ConstantColor,
@ -756,7 +808,10 @@ function styleGuideDavid () {
button_Run_AnalysisTab: appProperties.uiElements.button({ button_Run_AnalysisTab: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor, BackgroundColor: appProperties.primaryButton_BackgroundColor,
BorderColor: appProperties.primaryButton_BorderColor, BorderColor: appProperties.primaryButton_BorderColor,
Color: appProperties.primaryButton_TextColor Color: appProperties.primaryButton_TextColor,
BorderWidth: appProperties.primaryButton_BorderWidth,
BorderRadius: cssProperties.borders.primary_borderRadius,
BorderStyle: 'solid'
}), }),
box_AnalysisContainer: appProperties.uiElements.solidBorderBox({ box_AnalysisContainer: appProperties.uiElements.solidBorderBox({

Write Preview
Loading…
Cancel
Save