From 0e60eb9bce2bac79a3e7ea1d9c70ab53cce6b78a Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Thu, 14 Dec 2023 14:17:18 +0800 Subject: [PATCH] Fix buttons colors Signed-off-by: Egor Savkin --- sass/css/_base.scss | 2 +- sass/css/_shop.scss | 120 ++++++++++++++++++------------ sass/css/styles.scss | 3 +- static/css/order-hardware.css | 20 ----- static/images/shop/icon-clear.svg | 1 + static/js/shop.bundle.js | 2 +- static/js/shop/CrateList.jsx | 2 +- static/js/shop/ImportJSON.jsx | 6 +- static/js/shop/OrderSummary.jsx | 21 ++++-- static/js/shop/RFQFeedback.jsx | 2 +- static/js/shop/ShowJSON.jsx | 6 +- 11 files changed, 99 insertions(+), 86 deletions(-) create mode 100644 static/images/shop/icon-clear.svg diff --git a/sass/css/_base.scss b/sass/css/_base.scss index d284f720..4c9679f9 100644 --- a/sass/css/_base.scss +++ b/sass/css/_base.scss @@ -149,7 +149,7 @@ a { border: 1px solid $btn-primary-2 !important; text-decoration: none; - &:hover { + &:hover, &:disabled { background-color: $btn-secondary-2; border: 1px solid $btn-secondary-2 !important; } diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 5c71fbc1..50f86fde 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -8,50 +8,38 @@ button { outline: none!important; } -#root-shop { +.rfqFeedback { + button { + background-color: inherit; + align-self: center; + border: 0; + position: absolute; + right: 10px; + top: 10px; - .layout { - - .rfqFeedback { - display: flex; - align-items: center; - padding: 2rem 3rem; - text-align: center; - /*position: absolute; - width: 350px;*/ - background: white; - /*left: calc(100%/2 - 350px/2);*/ - -webkit-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); - box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); - /*top: calc(50% - 50px);*/ - border: 1px solid $brand-color; - font-size: .9rem; - - button { - background-color: inherit; - align-self: center; - border: 0; - position: absolute; - right: 10px; - top: 10px; - - img { - width: 15px; - } - } - - .btn.btn-primary.disabled { - background-color: gray; - } - - .btn-outline-primary, - .btn-outline-primary:hover { - color: $btn-primary-2; - border-color: $btn-primary-2; - background-color: inherit; - } + img { + width: 15px; } + } + + .btn.btn-primary.disabled { + background-color: gray; + } + + .btn-outline-primary { + color: $btn-primary-2; + border-color: $btn-primary-2; + background-color: inherit; + &:hover { + background-color: inherit; + color: $btn-secondary-2; + border-color: $btn-secondary-2; + } + } +} + +#root-shop { + .layout { display: flex; @@ -186,11 +174,15 @@ button { padding-bottom: .5rem; } - .btn-outline-primary, - .btn-outline-primary:hover { + .btn-outline-primary { color: $btn-primary-2; border-color: $btn-primary-2; background-color: inherit; + &:hover { + background-color: inherit; + color: $btn-secondary-2; + border-color: $btn-secondary-2; + } } .control { @@ -300,7 +292,7 @@ button { button { background-color: inherit; border: 0; - margin-left: 20px; + margin-left: 16px; img { width: 20px; @@ -350,11 +342,14 @@ button { border: 1px solid #e53e3e !important; } - .btn-outline-primary, - .btn-outline-primary:hover { + .btn-outline-primary { color: $btn-primary-2; border-color: $btn-primary-2; background-color: inherit; + &:hover { + background-color: inherit; + color: $btn-secondary-2; + } } } } @@ -606,6 +601,37 @@ button { margin-left: -10px; } + #accordion_crates { + background-color: inherit; + .accordion_crates_item { + .accordion-header { + padding-bottom: 0; + + } + .accordion-button { + background-color: inherit; + font-weight: bold; + &:hover { + background-color: $color-highlight; + } + } + } + #accordion_crates_add { + .accordion-header { + padding-bottom: 0; + } + .accordion-button { + font-weight: bold; + &:hover { + background-color: $color-highlight; + } + } + + .accordion-button:after { + background-image: url("/images/shop/icon-add.svg"); + } + } + } } .k-popup-connectors, diff --git a/sass/css/styles.scss b/sass/css/styles.scss index 4f6ddc28..cd62f5fa 100644 --- a/sass/css/styles.scss +++ b/sass/css/styles.scss @@ -24,7 +24,8 @@ $btn-secondary-2: #a88cfd !default; $link-primary-dark: #c2affd !default; $link-secondary-dark: #cec2ea !default; -$color-hover: #eae7f7 !default; +$color-hover: #eae7f7 !default; +$color-highlight: #dfe9ff !default; // Import partials. @import diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index d7c4ea33..e8b10643 100644 --- a/static/css/order-hardware.css +++ b/static/css/order-hardware.css @@ -61,26 +61,6 @@ text-decoration: none; } -#accordion_crates #accordion_crates_add .accordion-button:after { - background-image: url("/images/shop/icon-add.svg"); -} - -#accordion_crates .accordion-header button { - font-weight: bold; -} - -#accordion_crates, -#accordion_crates .accordion-header, -#accordion_crates .accordion-button, -#accordion_crates .accordion-item { - background-color: inherit; -} - -#accordion_crates .accordion-button:not(.collapsed) { - background-color: rgba(26, 109, 147, 0.1); -} - - /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px diff --git a/static/images/shop/icon-clear.svg b/static/images/shop/icon-clear.svg new file mode 100644 index 00000000..bbe50267 --- /dev/null +++ b/static/images/shop/icon-clear.svg @@ -0,0 +1 @@ + diff --git a/static/js/shop.bundle.js b/static/js/shop.bundle.js index d97df520..a7a866bb 100644 --- a/static/js/shop.bundle.js +++ b/static/js/shop.bundle.js @@ -1,2 +1,2 @@ /*! For license information please see shop.bundle.js.LICENSE.txt */ -(()=>{var e={841:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),u=Symbol.for("react.server_context"),c=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),f=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),m=Symbol.for("react.lazy");Symbol.for("react.offscreen");Symbol.for("react.module.reference"),t.isContextConsumer=function(e){return function(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case o:case a:case i:case d:case f:return e;default:switch(e=e&&e.$$typeof){case u:case s:case c:case m:case p:case l:return e;default:return t}}case r:return t}}}(e)===s}},366:(e,t,n)=>{"use strict";e.exports=n(841)},184:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t{"use strict";var r=n(296),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?a:l[e.$$typeof]||o}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=a;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,f=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var o=p(n);o&&o!==m&&e(t,o,r)}var a=c(n);d&&(a=a.concat(d(n)));for(var l=s(t),h=s(n),g=0;g{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,o=n?Symbol.for("react.portal"):60106,i=n?Symbol.for("react.fragment"):60107,a=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,u=n?Symbol.for("react.context"):60110,c=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,f=n?Symbol.for("react.forward_ref"):60112,p=n?Symbol.for("react.suspense"):60113,m=n?Symbol.for("react.suspense_list"):60120,h=n?Symbol.for("react.memo"):60115,g=n?Symbol.for("react.lazy"):60116,y=n?Symbol.for("react.block"):60121,b=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function E(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case c:case d:case i:case l:case a:case p:return e;default:switch(e=e&&e.$$typeof){case u:case f:case g:case h:case s:return e;default:return t}}case o:return t}}}function S(e){return E(e)===d}t.AsyncMode=c,t.ConcurrentMode=d,t.ContextConsumer=u,t.ContextProvider=s,t.Element=r,t.ForwardRef=f,t.Fragment=i,t.Lazy=g,t.Memo=h,t.Portal=o,t.Profiler=l,t.StrictMode=a,t.Suspense=p,t.isAsyncMode=function(e){return S(e)||E(e)===c},t.isConcurrentMode=S,t.isContextConsumer=function(e){return E(e)===u},t.isContextProvider=function(e){return E(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return E(e)===f},t.isFragment=function(e){return E(e)===i},t.isLazy=function(e){return E(e)===g},t.isMemo=function(e){return E(e)===h},t.isPortal=function(e){return E(e)===o},t.isProfiler=function(e){return E(e)===l},t.isStrictMode=function(e){return E(e)===a},t.isSuspense=function(e){return E(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===d||e===l||e===a||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===h||e.$$typeof===s||e.$$typeof===u||e.$$typeof===f||e.$$typeof===b||e.$$typeof===v||e.$$typeof===w||e.$$typeof===y)},t.typeOf=E},296:(e,t,n)=>{"use strict";e.exports=n(103)},143:e=>{"use strict";e.exports=function(e,t,n,r,o,i,a,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,i,a,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},962:function(e,t,n){var r,o;r=function(){"use strict";Array.isArray||(Array.isArray=function(e){return"[object Array]"===Object.prototype.toString.call(e)});var e={},t={"==":function(e,t){return e==t},"===":function(e,t){return e===t},"!=":function(e,t){return e!=t},"!==":function(e,t){return e!==t},">":function(e,t){return e>t},">=":function(e,t){return e>=t},"<":function(e,t,n){return void 0===n?e=t?[]:r}};return e.is_logic=function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)&&1===Object.keys(e).length},e.truthy=function(e){return!(Array.isArray(e)&&0===e.length||!e)},e.get_operator=function(e){return Object.keys(e)[0]},e.get_values=function(t){return t[e.get_operator(t)]},e.apply=function(n,r){if(Array.isArray(n))return n.map((function(t){return e.apply(t,r)}));if(!e.is_logic(n))return n;var o,i,a,l,s,u=e.get_operator(n),c=n[u];if(Array.isArray(c)||(c=[c]),"if"===u||"?:"==u){for(o=0;o0){var d=String(u).split("."),f=t;for(o=0;o{"use strict";var r=n(414);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},448:(e,t,n)=>{"use strict";var r=n(294),o=n(840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n