diff --git a/src/ui/BasicPanel.js b/src/ui/BasicPanel.js index aa4eae240d..ac3562b9fd 100644 --- a/src/ui/BasicPanel.js +++ b/src/ui/BasicPanel.js @@ -3,6 +3,14 @@ var style = require('./styles/basicStyles') var yo = require('yo-yo') var ui = require('../helpers/ui') +var csjs = require('csjs-inject') + +var css = csjs` + .container { + width: 70%; + } +` + function BasicPanel (_name, _width, _height) { this.data this.name = _name @@ -24,7 +32,8 @@ BasicPanel.prototype.show = function () { } BasicPanel.prototype.render = function () { - var view = yo`
+ var view = yo` +
${this.name}
diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js index 1033f71418..80c1ec562d 100644 --- a/src/ui/ButtonNavigator.js +++ b/src/ui/ButtonNavigator.js @@ -14,21 +14,24 @@ var css = csjs` .stepButtons { width: 100%; display: flex; - justify-content: center + justify-content: center; } .stepButton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} } .jumpButtons { width: 100%; display: flex; - justify-content: center + justify-content: center; } .jumpButton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} + } + .navigator { + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; } .navigator:hover { - color: ${styles.colors.black} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; } ` diff --git a/src/ui/CodeListView.js b/src/ui/CodeListView.js index 309367b21a..6130c2e5b4 100644 --- a/src/ui/CodeListView.js +++ b/src/ui/CodeListView.js @@ -4,7 +4,18 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var DropdownPanel = require('./DropdownPanel') var EventManager = require('../lib/eventManager') +var csjs = require('csjs-inject') +var styleGuide = require('./styles/style-guide') +var styles = styleGuide() +var css = csjs` + .instructions { + ${styles.rightPanel.debuggerTab.box_Debugger} + width: 75%; + overflow-y: scroll; + max-height: 250px; + } +` function CodeListView (_parent, _codeManager) { this.event = new EventManager() this.parent = _parent @@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () { var codeView = this.code.map(function (item, i) { return yo`
${item}
` }) - return yo`
+ return yo`
${codeView}
` } diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 0a3a6ac7f7..f1328f1aca 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -2,10 +2,38 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var styleDropdown = require('./styles/dropdownPanel') -var basicStyles = require('./styles/basicStyles') var TreeView = require('./TreeView') var EventManager = require('../lib/eventManager') +var csjs = require('csjs-inject') +var styleGuide = require('./styles/style-guide') +var styles = styleGuide() + +var css = csjs` + .title { + margin-top: 10px; + ${styles.rightPanel.debuggerTab.dropdown_Debugger} + display: flex; + align-items: center; + } + .name { + font-weight: bold; + } + .icon { + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; + margin-right: 5%; + } + .eyeButton { + ${styles.rightPanel.debuggerTab.button_Debugger} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; + margin: 3px; + float: right; + } + .eyeButton:hover { + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; + } +` + function DropdownPanel (_name, _opts) { this.event = new EventManager() if (!_opts) { @@ -79,12 +107,12 @@ DropdownPanel.prototype.render = function (overridestyle) { to {transform:rotate(359deg);} } -
-
-
${this.name}
+
+
+
${this.name}
-
${content}
@@ -110,11 +138,11 @@ DropdownPanel.prototype.toggle = function () { var caret = this.view.querySelector('.title').firstElementChild if (el.style.display === '') { el.style.display = 'none' - caret.className = 'fa fa-caret-right' + caret.className = `${css.icon} fa fa-caret-right` this.event.trigger('hide', []) } else { el.style.display = '' - caret.className = 'fa fa-caret-down' + caret.className = `${css.icon} fa fa-caret-down` this.event.trigger('show', []) } } @@ -124,7 +152,7 @@ DropdownPanel.prototype.hide = function () { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = 'none' - caret.className = 'fa fa-caret-right' + caret.className = `${css.icon} fa fa-caret-right` this.event.trigger('hide', []) } } @@ -134,7 +162,7 @@ DropdownPanel.prototype.show = function () { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = '' - caret.className = 'fa fa-caret-down' + caret.className = `${css.icon} fa fa-caret-down` this.event.trigger('show', []) } } diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index 44698105b3..c2db3da118 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -25,7 +25,7 @@ var css = csjs` justify-content: center; } .txinput { - ${styles.inputField} + ${styles.rightPanel.debuggerTab.input_Debugger} min-width: 30px; margin: 3px; } @@ -35,10 +35,14 @@ var css = csjs` justify-content: center; } .txbutton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; } .txbutton:hover { - color: ${styles.colors.black}; + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; + } + .txinfo { + margin-top: 5px; } ` function TxBrowser (_parent) { @@ -192,7 +196,7 @@ TxBrowser.prototype.render = function () {
-
+
${this.basicPanel.render()}
` diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 042788b6e7..a98adf5c00 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -4,155 +4,267 @@ module.exports = styleGuide function styleGuide () { /* -------------------------------------------------------------------------- - COLORS + + CSS PROPERTIES + -------------------------------------------------------------------------- */ - var colors = { - // BASIC COLORS (B&W and transparent) - transparent: 'transparent', - white: 'hsl(0, 0%, 100%)', - black: 'hsl(0, 0%, 0%)', - opacityBlack: 'hsla(0, 0%, 0%, .4)', - // BLUE - blue: 'hsla(229, 75%, 87%, 1)', - lightBlue: 'hsla(229, 75%, 87%, .5)', - backgroundBlue: 'hsla(229, 100%, 97%, 1)', - // GREY - grey: 'hsla(0, 0%, 40%, 1)', - lightGrey: 'hsla(0, 0%, 40%, .5)', - veryLightGrey: 'hsla(0, 0%, 40%, .2)', - // RED - red: 'hsla(0, 82%, 82%, 1)', - lightRed: 'hsla(0, 82%, 82%, .5)', - // GREEN - green: 'hsla(141, 75%, 84%, 1)', - lightGreen: 'hsla(141, 75%, 84%, .5)', - // PINK - pink: 'hsla(300, 69%, 76%, 1)', - lightPink: 'hsla(300, 69%, 76%, .5)', - // YELLOW - orange: 'hsla(44, 100%, 50%, 1)', - lightOrange: 'hsla(44, 100%, 50%, .5)', - // VIOLET - violet: 'hsla(240, 64%, 68%, 1)' - } + var cssProperties = { + /* ------------------------------------------------------ + COLORS + ------------------------------------------------------ */ + colors: { + // BASIC COLORS (B&W and transparent) + transparent: 'transparent', + white: 'hsl(0, 0%, 100%)', + black: 'hsl(0, 0%, 0%)', + opacityBlack: 'hsla(0, 0%, 0%, .4)', + // BLUE + blue: 'hsla(229, 75%, 87%, 1)', + lightBlue: 'hsla(229, 75%, 87%, .5)', + backgroundBlue: 'hsla(229, 100%, 97%, 1)', + // GREY + grey: 'hsla(0, 0%, 40%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + // RED + strongRed: 'hsla(0, 100%, 71%, 1)', + red: 'hsla(0, 82%, 82%, 1)', + lightRed: 'hsla(0, 82%, 82%, .5)', + // GREEN + green: 'hsla(141, 75%, 84%, 1)', + lightGreen: 'hsla(141, 75%, 84%, .5)', + // PINK + pink: 'hsla(300, 69%, 76%, 1)', + lightPink: 'hsla(300, 69%, 76%, .5)', + // YELLOW + orange: 'hsla(44, 100%, 50%, 1)', + lightOrange: 'hsla(44, 100%, 50%, .5)', + // VIOLET + violet: 'hsla(240, 64%, 68%, 1)' + }, - /* -------------------------------------------------------------------------- + /* ------------------------------------------------------ FONTS - -------------------------------------------------------------------------- */ + ------------------------------------------------------ */ + fonts: { + font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif' + }, - var texts = { - 'title-XL': ` - font-size : 2em; - font-weight : 700; - letter-spacing : .05em; - `, - - 'title-L': ` - font-size : 1em; - font-weight : 600; - `, - - 'title-M': ` - font-size : 1em; - font-weight : 400; - `, - - 'title-S': ` - font-size : .8em; - font-weight : 300; - `, - - 'text': ` - font-size : .8em; - ` + /* ------------------------------------------------------ + BORDERS + ------------------------------------------------------ */ + borders: { + primary_borderRadius: '3px', + secondary_borderRadius: '5px' + } } /* -------------------------------------------------------------------------- - TEXT-BOXES - -------------------------------------------------------------------------- */ - var textBoxes = { - - 'display-box': ` - font-size : 12px; - padding : 10px 15px; - line-height : 20px; - background : ${colors.white}; - border-radius : 3px; - border : 1px solid ${colors.veryLightGrey}; - overflow : hidden; - word-break : break-word; - width : 100%; - `, - - 'info-text-box': ` - background-color : ${colors.white}; - line-height : 20px; - border : .2em dotted ${colors.lightGrey}; - padding : 8px 15px; - border-radius : 5px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'warning-text-box': ` - background-color : ${colors.lightOrange}; - line-height : 20px; - padding : 8px 15px; - border-radius : 5px; - border : .2em dotted ${colors.orange}; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'error-text-box': ` - background-color : ${colors.lightRed}; - line-height : 20px; - padding : 1em 1em .5em 1em; - border-radius : 3px; - box-shadow : rgba(0,0,0,.2) 0 1px 4px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'title-box': ` - margin-bottom : 0.4em; - padding : .3em; - background-color : transparent; - font-weight : bold; - display : flex; - justify-content : space-between; - word-wrap : break-word; - position : relative; - border-radius : 3px; - overflow : hidden; - word-break : normal; - `, - - 'input': ` - border : 1px solid ${colors.veryLightGrey}; - height : 25px; - width : 250px; - border-radius : 3px; - padding : 0 8px; - overflow : hidden; - word-break : normal; - ` - } - /* -------------------------------------------------------------------------- - BUTTONS + + APP PROPERTIES + -------------------------------------------------------------------------- */ - var buttons = { - 'button': ` + var appProperties = { + /* ------------------------------------------------------ + BACKGROUND COLORS + ------------------------------------------------------ */ + primary_BackgroundColor: cssProperties.colors.white, + secondary_BackgroundColor: cssProperties.colors.backgroundBlue, + dark_BackgroundColor: cssProperties.colors.veryLightGrey, + light_BackgroundColor: cssProperties.colors.white, + /* ------------------------------------------------------ + RESIZING + ******************************************************** */ + ghostBar: cssProperties.colors.lightBlue, + draggingBar: cssProperties.colors.lightBlue, + + /* ------------------------------------------------------ + TEXT COLORS + ******************************************************** */ + mainText_Color: cssProperties.colors.black, + supportText_Color: cssProperties.colors.grey, + errorText_Color: cssProperties.colors.strongRed, + warningText_Color: cssProperties.colors.orange, + infoText_Color: cssProperties.colors.violet, + /* ------------------------------------------------------ + ICONS + ******************************************************** */ + icon_Color: cssProperties.colors.black, + icon_HoverColor: cssProperties.colors.orange, + + /* ------------------------------------------------------ + MESSAGES + ******************************************************** */ + // Success + success_TextColor: cssProperties.colors.black, + success_BackgroundColor: cssProperties.colors.lightGreen, + success_BorderColor: cssProperties.colors.green, + + // Danger + danger_TextColor: cssProperties.colors.black, + danger_BackgroundColor: cssProperties.colors.lightRed, + danger_BorderColor: cssProperties.colors.red, + + // Warning + warning_TextColor: cssProperties.colors.black, + warning_BackgroundColor: cssProperties.colors.lightOrange, + warning_BorderColor: cssProperties.colors.orange, + + /* ------------------------------------------------------ + DROPDOWN + ******************************************************** */ + dropdown_TextColor: cssProperties.colors.black, + dropdown_BackgroundColor: cssProperties.colors.white, + dropdown_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + INPUT + ******************************************************** */ + input_TextColor: cssProperties.colors.black, + input_BackgroundColor: cssProperties.colors.white, + input_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + SOLID BORDER BOX + ******************************************************** */ + solidBorderBox_TextColor: cssProperties.colors.black, + solidBorderBox_BackgroundColor: cssProperties.colors.white, + solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + BUTTONS + ******************************************************** */ + + /* ................. + PRIMARY + .................. */ + primaryButton_TextColor: cssProperties.colors.black, + primaryButton_BackgroundColor: cssProperties.colors.lightBlue, + primaryButton_BorderColor: cssProperties.colors.lightBlue, + + /* ................. + SECONDARY + .................. */ + secondaryButton_TextColor: cssProperties.colors.black, + secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey, + secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, + + /* ................. + SUCCESS + .................. */ + successButton_TextColor: cssProperties.colors.white, + successButton_BackgroundColor: cssProperties.colors.green, + successButton_BorderColor: cssProperties.colors.green, + + /* ................. + DANGER + .................. */ + dangerButton_TextColor: cssProperties.colors.white, + dangerButton_BackgroundColor: cssProperties.colors.red, + dangerButton_BorderColor: cssProperties.colors.red, + + /* ................. + WARNING + .................. */ + warningButton_TextColor: cssProperties.colors.white, + warningButton_BackgroundColor: cssProperties.colors.lightOrange, + warningButton_BorderColor: cssProperties.colors.lightOrange, + + /* ................. + INFO + .................. */ + infoButton_TextColor: cssProperties.colors.black, + infoButton_BackgroundColor: cssProperties.colors.white, + infoButton_BorderColor: cssProperties.colors.veryLightGrey, + + /* ................. + SOLIDITY + .................. */ + + // CALL + callButton_TextColor: cssProperties.colors.black, + callButton_BackgroundColor: cssProperties.colors.lightBlue, + callButton_BorderColor: cssProperties.colors.lightBlue, + + // TRANSACTION + transactButton_TextColor: cssProperties.colors.black, + transactButton_BackgroundColor: cssProperties.colors.lightRed, + transactButton_BorderColor: cssProperties.colors.lightRed, + + // PAYABLE TRANSACTION + transactPayableButton_TextColor: cssProperties.colors.black, + transactPayableButton_BackgroundColor: cssProperties.colors.red, + transactPayableButton_BorderColor: cssProperties.colors.red, + + /* ------------------------------------------------------ + UI ELEMENTS + ******************************************************** */ + + uiElements: { + solidBorderBox: (opts = {}) => ` + 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; + overflow : hidden; + word-break : break-word; + width : 100%; + `, + + dottedBorderBox: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + border : .2em dotted ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${cssProperties.borders.secondary_borderRadius}; + line-height : 20px; + padding : 8px 15px; + margin-bottom : 1em; + overflow : hidden; + word-break : break-word; + `, + + inputField: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${cssProperties.borders.secondary_borderRadius}; + height : 25px; + width : 250px; + padding : 0 8px; + overflow : hidden; + word-break : normal; + `, + + dropdown: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + font-size : 12px; + font-weight : bold; + padding : 0 8px; + text-decoration : none; + cursor : pointer; + border-radius : 3px; + height : 25px; + width : 250px; + text-align : center; + overflow : hidden; + word-break : normal; + `, + + button: (opts = {}) => ` + margin : 1px; + background-color : ${opts.BackgroundColor}; + border : .3px solid ${opts.BorderColor}; + color : ${opts.Color}; display : flex; align-items : center; justify-content : center; - border-color : transparent; border-radius : 3px; - border : .3px solid ${colors.veryLightGrey}; cursor : pointer; min-height : 25px; max-height : 25px; @@ -161,42 +273,358 @@ function styleGuide () { font-size : 12px; overflow : hidden; word-break : normal; - background-color : #E8E8E8; - `, + ` + } + } - 'button:hover': ` - opacity : 0.8; - `, + /* -------------------------------------------------------------------------- - 'dropdown': ` - font-size : 12px; - font-weight : bold; - padding : 0 8px; - text-decoration : none; - background-color : ${colors.white}; - cursor : pointer; - border : 1px solid ${colors.veryLightGrey}; - border-radius : 3px; - height : 25px; - width : 250px; - text-align : center; - overflow : hidden; - word-break : normal; - ` + REMIX PROPERTIES + + -------------------------------------------------------------------------- */ + + var remixProperties = { + /* ------------------------------------------------------ + REMIX GENERAL + /* ------------------------------------------------------ */ + remix: { + modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor, + modalDialog_text_Primary: appProperties.mainText_Color, + modalDialog_text_Secondary: appProperties.supportText_Color, + modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor, + modalDialog_Header_Footer_Color: appProperties.mainText_Color, + modalDialog_BoxDottedBorder_BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + modalDialog_BoxDottedBorder_BorderColor: appProperties.solidBorderBox_BorderColor, + modalDialog_BoxDottedBorder_Color: appProperties.solidBorderBox_TextColor, + modalDialog_CopyToClipboard_Icon_Color: appProperties.icon_Color, + modalDialog_CopyToClipboard_Icon_HoverColor: appProperties.icon_HoverColor + + }, + + /* ------------------------------------------------------ + LEFT PANEL (FILE PANEL) + /* ------------------------------------------------------ */ + leftPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, + + icon_Color_Menu: appProperties.icon_Color, + icon_HoverColor_Menu: appProperties.icon_HoverColor, + + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor + + }, + + /* ------------------------------------------------------ + EDITOR + /* ------------------------------------------------------ */ + editor: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_Editor: appProperties.light_BackgroundColor, + backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor, + backgroundColor_Editor_Context_Highlights: appProperties.dark_BackgroundColor, + backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor, + backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_Editor: '', + + icon_Color_Editor: appProperties.icon_Color, + icon_HoverColor_Editor: appProperties.icon_HoverColor + + }, + + /* ------------------------------------------------------ + TERMINAL + /* ------------------------------------------------------ */ + terminal: { + backgroundColor_Menu: appProperties.secondary_BackgroundColor, + backgroundColor_Terminal: appProperties.dark_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_RegularLog: appProperties.mainText_Color, + text_InfoLog: appProperties.supportText_Color, + text_ErrorLog: appProperties.errorText_Color, + text_Title_TransactionLog: appProperties.infoText_Color, + text_Regular_TransactionLog: appProperties.supportText_Color, + + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor, + icon_Color_Menu: appProperties.icon_Color, + icon_HoverColor_Menu: appProperties.icon_HoverColor, + icon_Color_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor, + + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, + + input_Search_MenuBar: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor + }), + + dropdown_Filter_MenuBar: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + button_Log_Debug: appProperties.uiElements.button({ + BackgroundColor: appProperties.warningButton_BackgroundColor, + BorderColor: appProperties.warningButton_BorderColor, + Color: appProperties.warningButton_TextColor + }), + + button_Log_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.warningButton_BorderColor, + Color: appProperties.warningButton_TextColor + }) + + }, + + /* ------------------------------------------------------ + RIGHT PANEL + /* ------------------------------------------------------ */ + rightPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_Tab: appProperties.secondary_BackgroundColor, + BackgroundColor_Pre: appProperties.light_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, + + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor, + + message_Warning_BackgroundColor: appProperties.warning_BackgroundColor, + message_Warning_BorderColor: appProperties.warning_BorderColor, + message_Warning_Color: appProperties.warning_TextColor, + + message_Error_BackgroundColor: appProperties.danger_BackgroundColor, + message_Error_BorderColor: appProperties.danger_BorderColor, + message_Error_Color: appProperties.danger_TextColor, + + message_Success_BackgroundColor: appProperties.success_BackgroundColor, + message_Success_BorderColor: appProperties.success_BorderColor, + message_Success_Color: appProperties.success_TextColor, + + /* :::::::::::::: + COMPILE TAB + ::::::::::::::: */ + compileTab: { + button_Compile: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + button_Publish: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + dropdown_CompileContract: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + box_CompileContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + icon_WarnCompilation_Color: appProperties.warning_BackgroundColor + + }, + + /* :::::::::::::: + RUN TAB + ::::::::::::::: */ + runTab: { + box_RunTab: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + dropdown_RunTab: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + input_RunTab: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor + }), + + box_Instance: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + button_atAddress: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Create: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Instance_Call: appProperties.uiElements.button({ + BackgroundColor: appProperties.callButton_BackgroundColor, + BorderColor: appProperties.callButton_BorderColor, + Color: appProperties.callButton_TextColor + }), + + button_Instance_Transact: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactButton_BackgroundColor, + BorderColor: appProperties.transactButton_BorderColor, + Color: appProperties.transactButton_TextColor + }), + + button_Instance_TransactPayable: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactPayableButton_BackgroundColor, + BorderColor: appProperties.transactPayableButton_BorderColor, + Color: appProperties.transactPayableButton_TextColor + }), + + icon_Color_Instance_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_Instance_CopyToClipboard: appProperties.icon_HoverColor + + }, + + /* :::::::::::::: + SETTINGS TAB + ::::::::::::::: */ + settingsTab: { + box_SolidityVersionInfo: appProperties.uiElements.dottedBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + dropdown_SelectCompiler: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }) + + }, + + /* :::::::::::::: + DEBUGGER TAB + ::::::::::::::: */ + debuggerTab: { + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + + box_Debugger: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + button_Debugger: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + button_Debugger_icon_Color: appProperties.icon_Color, + button_Debugger_icon_HoverColor: appProperties.icon_HoverColor, + + dropdown_Debugger: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + input_Debugger: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor + }), + + debuggerDropdowns_Instructions_Highlight_BackgroundColor: appProperties.secondary_BackgroundColor + + }, + + /* :::::::::::::: + ANALYSIS TAB + ::::::::::::::: */ + analysisTab: { + button_Run_AnalysisTab: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + box_AnalysisContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }) + }, + + /* :::::::::::::: + SUPPORT TAB + ::::::::::::::: */ + supportTab: { + box_IframeContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + box_SupportInfo: appProperties.uiElements.dottedBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }) + + } + } } return { - textBoxL: textBoxes['display-box-L'], - infoTextBox: textBoxes['info-text-box'], - inputField: textBoxes['input'], - displayBox: textBoxes['display-box'], - warningTextBox: textBoxes['warning-text-box'], - titleL: texts['title-L'], - titleM: texts['title-M'], - dropdown: buttons['dropdown'], - button: buttons['button'], - colors: colors, - titleBox: textBoxes['title-box'] + colors: cssProperties.colors, + appProperties: appProperties, + borders: cssProperties.borders, + leftPanel: remixProperties.leftPanel, + editor: remixProperties.editor, + terminal: remixProperties.terminal, + rightPanel: remixProperties.rightPanel, + remix: remixProperties.remix } }