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 D E
parent 0756928317
commit d433929ece
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;
padding : 1ch;
margin-top : 2ch;
border-top : ${styles.terminal.customBlockBorderTop
? styles.terminal.blockBorderTop
: '0.07ch solid ' + styles.colors.veryLightGrey
};
border-top : ${styles.terminal.blockBorderTop};
color : ${styles.appProperties.mainText_Color};
}
.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}
}
.atAddress {
${styles.rightPanel.runTab.button_atAddress}
margin: 0;
min-width: 100px;
width: 100px;
font-size: 10px;
margin: 0;
word-break: inherit;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
${styles.rightPanel.runTab.button_atAddress}
}
.atAddressSect {
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)
transparent: 'transparent',
white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)',
black: 'black',
opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE
@ -59,6 +59,7 @@ function styleGuideDavid () {
BORDERS
------------------------------------------------------ */
borders: {
primary_borderRadius: '3px',
secondary_borderRadius: '5px'
}
}
@ -81,10 +82,10 @@ function styleGuideDavid () {
BACKGROUND COLORS
------------------------------------------------------ */
primary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.white,
secondary_BackgroundColor: cssProperties.colors.veryLightGrey,
tertiary_BackgroundColor: cssProperties.colors.white,
quaternary_BackgroundColor: cssProperties.colors.white,
fifth_BackgroundColor: cssProperties.colors.white,
fifth_BackgroundColor: cssProperties.colors.lightGrey,
seventh_BackgroundColor: cssProperties.colors.white,
dark_BackgroundColor: cssProperties.colors.black,
light_BackgroundColor: cssProperties.colors.white,
@ -181,6 +182,7 @@ function styleGuideDavid () {
primaryButton_TextColor: cssProperties.colors.black,
primaryButton_BackgroundColor: cssProperties.colors.white,
primaryButton_BorderColor: cssProperties.colors.black,
primaryButton_BorderWidth: '2px',
/* .................
SECONDARY
@ -281,6 +283,7 @@ function styleGuideDavid () {
background-color : ${opts.BackgroundColor};
border : 1px solid ${opts.BorderColor};
color : ${opts.Color};
border-radius : ${cssProperties.borders.primary_borderRadius}
font-size : 12px;
padding : 10px 15px;
line-height : 20px;
@ -356,6 +359,10 @@ function styleGuideDavid () {
font-size : 12px;
overflow : hidden;
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({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.dropdown_BackgroundColor,
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({
@ -618,33 +637,51 @@ function styleGuideDavid () {
button_atAddress: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.transactButton_BackgroundColor,
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({
BackgroundColor: appProperties.constantButton_BackgroundColor,
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({
BackgroundColor: appProperties.callButton_BackgroundColor,
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({
BackgroundColor: appProperties.transactButton_BackgroundColor,
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({
BackgroundColor: appProperties.transactPayableButton_BackgroundColor,
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,
@ -669,13 +706,19 @@ function styleGuideDavid () {
button_runTests: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
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,
@ -701,12 +744,18 @@ function styleGuideDavid () {
button_LoadPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
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({
BackgroundColor: appProperties.transactButton_BackgroundColor,
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({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
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,
@ -756,7 +808,10 @@ function styleGuideDavid () {
button_Run_AnalysisTab: appProperties.uiElements.button({
BackgroundColor: appProperties.primaryButton_BackgroundColor,
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({

Write Preview
Loading…
Cancel
Save