diff --git a/public/images/confirmed.svg b/public/images/confirmed.svg new file mode 100644 index 0000000..8cc7417 --- /dev/null +++ b/public/images/confirmed.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/unconfirmed.svg b/public/images/unconfirmed.svg new file mode 100644 index 0000000..046bc28 --- /dev/null +++ b/public/images/unconfirmed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Validator.js b/src/Validator.js index 3675f7c..ecabd18 100644 --- a/src/Validator.js +++ b/src/Validator.js @@ -47,13 +47,13 @@ class Validator extends Component { ) - let allPhysicalAddreses = physicalAddresses || [] - allPhysicalAddreses.push({ + let metadataUnconfirmedAddresss = { fullAddress: fullAddress, us_state: us_state, postal_code: postal_code, isConfirmed: false - }) + } + let allPhysicalAddreses = physicalAddresses || [metadataUnconfirmedAddresss] return (
diff --git a/src/ValidatorPhysicalAddresses.js b/src/ValidatorPhysicalAddresses.js index 75796c2..3351139 100644 --- a/src/ValidatorPhysicalAddresses.js +++ b/src/ValidatorPhysicalAddresses.js @@ -1,46 +1,38 @@ import React from 'react' -const CONFIRMED_ADDRESS_TITLE = 'Confirmed Address' -const UNCONFIRMED_ADDRESS_TITLE = 'Unconfirmed Address' +const ICON_CONFIRMED_CLASSNAME = 'data-icon--confirmed' +const ICON_UNCONFIRMED_CLASSNAME = 'data-icon--unconfirmed' const ValidatorPhysicalAddress = ({ physicalAddresses }) => { const confirmedAddresses = physicalAddresses.filter(a => a.isConfirmed) const unconfirmedAddresses = physicalAddresses.filter(a => !a.isConfirmed) const hasConfirmedAddresses = confirmedAddresses.length > 0 - const baseTitle = hasConfirmedAddresses ? CONFIRMED_ADDRESS_TITLE : UNCONFIRMED_ADDRESS_TITLE const addresses = hasConfirmedAddresses ? confirmedAddresses : unconfirmedAddresses - let renderedResult = null - if (addresses.length > 1) { - renderedResult = addresses.map((address, index) => { - return ( -
-

{`${baseTitle} #${index + 1}`}

- -
- ) - }) - } else { - renderedResult = ( -
-

{baseTitle}

- -
- ) - } - return renderedResult -} + let singleOrMultiple = + addresses.length > 1 ? 'validator-physical-address--multiple' : 'validator-physical-address--single' + let validatorPhysicalAddressClassName = `validators-table-i validator-physical-address ${singleOrMultiple}` -const PhysicalAddressValue = ({ address }) => { - const { fullAddress, us_state, postal_code } = address return ( -

- {`${fullAddress},`} -
- {`${us_state.toUpperCase()}, ${postal_code}`} -

+
+

Address

+ +
) } +const PhysicalAddressValue = ({ addresses }) => { + let textAlign = addresses.length > 1 ? 'text-align-left' : 'text-align-right' + let physicalAddressValueClassName = `validator-physical-address__value text-capitalized ${textAlign}` + + return addresses.map((address, index) => ( +

+ {`${address.fullAddress} `} + {`${address.us_state.toUpperCase()}, ${address.postal_code}`} + +

+ )) +} + export default ValidatorPhysicalAddress diff --git a/src/stylesheets/application.css b/src/stylesheets/application.css index 4879103..e594324 100644 --- a/src/stylesheets/application.css +++ b/src/stylesheets/application.css @@ -1 +1 @@ -.footer{left:0;right:0}.create-keys-button{background-color:#5c34a2;background-position:calc(100% - 15px) 50%;background-repeat:no-repeat;border-radius:5px;border:0;box-shadow:0px 5px 10px 0 rgba(92,92,92,0.2);color:#fff;cursor:pointer;font-size:16px;font-weight:bold;line-height:44px;outline:none;padding:0 45px 0 15px;text-decoration:none;text-transform:capitalize;transition:0.15s background-color}.create-keys-button:hover{background-color:#7346c3}.create-keys-button{background-image:url("../images/icons/icon-arrow-right.svg");background-size:18px 14px}.container{margin-left:auto;margin-right:auto;position:relative;width:960px}@media (max-width: 980px){.container{width:98%}}.hidden{display:none}button:focus{outline:none}html,body,p,h1,h2,h3{margin:0;padding:0;font-weight:normal}html{display:flex;min-height:100%}body{-webkit-font-smoothing:antialiased;background-color:#ffffff;box-sizing:border-box;color:#333;font-family:'Nunito', sans-serif;font-size:14px;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:132px}}@media screen and (max-width: 414px){body{padding-bottom:132px}}.key-content{display:table-cell;vertical-align:middle;background-color:#fbfbfb;text-align:center}.left{float:left}.right{float:right}.text-capitalized{text-transform:capitalize}.text-uppercase{text-transform:uppercase}.text-align-right{text-align:right}.create-keys-button-container{display:flex;align-items:center;justify-content:center}.create-keys{padding-bottom:20px}.create-keys h1{margin-bottom:20px}.create-keys h2{margin-bottom:20px}.create-keys-form{display:flex;justify-content:space-between;margin-bottom:10px}@media (max-width: 768px){.create-keys-form{flex-direction:column}}.create-keys-form-i{width:48%}@media (max-width: 768px){.create-keys-form-i{width:100%}}.create-keys label:not(.radio){color:#333;display:block;font-size:16px;font-weight:500;line-height:1.5;margin-bottom:6px}.create-keys button,.create-keys input,.create-keys textarea{outline:none;font-family:'Open Sans', sans-serif}.create-keys input,.create-keys textarea{background-color:#fff;border-radius:3px;border:1px solid #e4e4e4;box-sizing:border-box;color:#333;font-size:16px;height:38px;outline:none;padding:0 15px;transition:0.15s border-color;margin-bottom:20px;width:100%}.create-keys input:hover,.create-keys textarea:hover{border-color:#8e959d;color:#202d3c}.create-keys input:focus,.create-keys textarea:focus{border-color:#5c34a2;color:#202d3c}.create-keys #PlacesAutocomplete__root{margin-bottom:20px}.create-keys #PlacesAutocomplete__root input{margin-bottom:0}.create-keys textarea{height:110px;padding:15px;resize:none}.create-keys input[type="radio"]{display:none}.create-keys input[type="radio"]:checked+.radio:after{opacity:1}.create-keys-button[disabled]{cursor:default;opacity:0.7}.create-keys-button:focus,.create-keys-button:active{box-shadow:none}.create-keys-button.finalize{margin-right:10px}.sokol .create-keys-button{background-color:#6ac9b9}.sokol .create-keys-button:hover{background-color:#8fd7cb}.footer{background-color:#5c34a2;bottom:0;padding:18px 0;position:absolute}.footer.sokol{background-color:#6ac9b9}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .socials{order:2}@media screen and (max-width: 768px){.footer .socials{margin-top:15px;order:1}}.footer-logo{background-image:url("../images/logos/logo_validators_dapp_footer.png");background-repeat:no-repeat;background-size:contain;display:block;height:20px;left:0;order:0;width:123px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.footer-logo{background-image:url("../images/logos/logo_validators_dapp_footer@2x.png");background-size:contain}}.footer-rights{color:#fff;font-size:12px;order:1;text-align:center}@media screen and (max-width: 768px){.footer-rights{line-height:normal;margin-top:15px;order:2;width:100%}}.header{background-color:#5c34a2;position:relative;width:100%;z-index:9999}@media screen and (max-width: 414px){.header{left:0;right:0;position:fixed;top:0;z-index:124}}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{width:93%;padding:22px 0}}.header.sokol{background-color:#6ac9b9}.header-logo{display:block;height:26px}.header .links-container{align-items:center;display:flex;justify-content:space-between;height:70px;margin-left:auto}@media screen and (max-width: 414px){.header .links-container{display:none}}@media screen and (max-width: 768px){.header .links-container{justify-content:flex-end;width:auto}}.header .links-container-mobile{display:none}@media screen and (max-width: 414px){.header .links-container-mobile{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-evenly}}.header .link{color:#fff;font-size:14px;font-weight:700;line-height:18px;margin-left:34px;opacity:0.9;text-decoration:none;transition:opacity linear 0.1s}.header .link:hover,.header .link.active{opacity:1}@media screen and (max-width: 414px){.header .link{margin-left:0}}.header .link-icon{height:18px;width:18px;margin-right:10px;float:left;background-position:50% 50%;background-repeat:no-repeat}.header .link-icon-all{background-image:url("../images/icons/icon-all.svg")}.header .link-icon-set-metadata{background-image:url("../images/icons/icon-set-metadata.svg")}.header .link-icon-pending-changes{background-image:url("../images/icons/icon-pending-changes.svg")}.header.sokol .link-icon-all{background-image:url("../images/icons/icon-all-sokol.svg")}.header.sokol .link-icon-set-metadata{background-image:url("../images/icons/icon-set-metadata-sokol.svg")}.header.sokol .link-icon-pending-changes{background-image:url("../images/icons/icon-pending-changes-sokol.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 414px){.header .mobile-menu{display:block;order:3}}.header .mobile-menu .mobile-menu-icon{width:18px;height:14px}.header .mobile-menu .mobile-menu-open-icon{width:18px;height:18px}@media screen and (max-width: 414px){.header .header-mobile-menu-container{background-color:#45277a;height:172px}}@media screen and (max-width: 414px){.header.sokol .header-mobile-menu-container{background-color:#45bba7}}.header .Select{margin-left:25px}@media screen and (max-width: 414px){.header .Select{margin-left:0;max-width:125px;order:2}.header .Select .Select-control{max-width:125px}}.select-network-id{background:#fff;width:40px}.app-container{padding-top:40px;position:relative}.app-container.app-container-open-mobile-menu{z-index:1}.app-container.app-container-open-mobile-menu:before{background-color:rgba(78,44,137,0.8);bottom:0;content:'';display:none;left:0;position:absolute;right:0;top:0;z-index:1234}@media screen and (max-width: 414px){.app-container.app-container-open-mobile-menu:before{display:block}}.app-container.app-container-open-mobile-menu.sokol:before{background-color:rgba(106,201,185,0.8)}@media screen and (max-width: 414px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 414px){.content{padding-top:120px}}.content.content-menu-open{padding-top:242px}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading{display:flex;justify-content:space-between;left:50%;margin:-30px 0 0 -111.5px;padding-top:50px;position:absolute;top:50%;width:206px}.loading:before{background-image:url("../images/logos/logo_loader.svg");background-position:0 0;background-repeat:no-repeat;content:'';left:0;position:absolute;top:0;height:100px;width:206px}.loading-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#fff;border-radius:50%;height:9px;opacity:.2;width:9px}.loading-i:nth-child(2){animation-delay:.1s}.loading-i:nth-child(3){animation-delay:.2s}.loading-i:nth-child(4){animation-delay:.3s}.loading-i:nth-child(5){animation-delay:.4s}.loading-i:nth-child(6){animation-delay:.5s}.main-title-container{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between;margin-bottom:38px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 414px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container.no-search-on-top{margin-top:-50px}.main-title-container .search-input{width:100%}}.search-container{background-color:#502d8d;box-sizing:border-box;height:50px;padding:10px 0 0 0}.search-container.sokol{background-color:#45bba7}@media screen and (max-width: 414px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}.search-input{background-color:transparent;background-image:url("../images/icons/icon-search.svg");background-position:0 50%;background-repeat:no-repeat;background-size:16px 16px;border-radius:0;border:none;box-sizing:border-box;color:#fff;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}.sokol .search-input{background-image:url("../images/icons/icon-search-sokol.svg")}.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input:-ms-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.socials{font-size:0}.socials-item:not(:first-child){margin-left:10px}.socials-i{background-color:#ffffff;border-radius:3px;display:inline-block;height:30px;position:relative;transition:0.3s background-color;vertical-align:top;width:30px}.socials-i:not(:first-child){margin-left:10px}.socials-i:hover{background-color:rgba(255,255,255,0.4)}.socials-i:before{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;content:'';height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px}.socials-i_github:before{background-image:url("../images/socials/git.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_github:before{background-image:url("../images/socials/git@2x.png");background-size:contain}}.socials-i_telegram:before{background-image:url("../images/socials/telegram.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_telegram:before{background-image:url("../images/socials/telegram@2x.png");background-size:contain}}.socials-i_twitter:before{background-image:url("../images/socials/tw.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_twitter:before{background-image:url("../images/socials/tw@2x.png");background-size:contain}}.socials-i_poa:before{background-image:url("../images/socials/poa.png");height:20px;width:20px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_poa:before{background-image:url("../images/socials/poa@2x.png");background-size:contain}}.sokol .socials .socials-i_github:before{background-image:url("../images/socials/git-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_github:before{background-image:url("../images/socials/git-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_telegram:before{background-image:url("../images/socials/telegram-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_telegram:before{background-image:url("../images/socials/telegram-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_twitter:before{background-image:url("../images/socials/tw-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_twitter:before{background-image:url("../images/socials/tw-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_poa:before{background-image:url("../images/socials/poa-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_poa:before{background-image:url("../images/socials/poa-sokol@2x.png");background-size:contain}}.validators{text-align:left}.validators-i{border-radius:5px;border:1px solid #e4e4e4;margin-bottom:30px;padding:20px 30px}@media (max-width: 414px){.validators-i{margin-bottom:20px}}.validators-header{border-bottom:1px solid #e4e4e4;color:#333333;display:flex;font-size:18px;font-stretch:normal;font-style:normal;font-weight:700;justify-content:space-between;letter-spacing:normal;line-height:1.2;margin:0 0 20px;padding:0 0 15px;text-align:left}@media (max-width: 414px){.validators-header{display:block}}.validators-header--address{word-break:break-all;margin-bottom:10px}.validators-header--hint{color:#777;font-size:13px;font-weight:400;line-height:1.2}.validators-header--confirmations{font-size:15px;font-weight:500;line-height:1.2}@media (max-width: 414px){.validators-header--confirmations{padding-top:15px}}.validators-body{overflow:hidden}.validators-footer{display:flex;justify-content:center;padding-top:20px}.validators-notary,.validators-license{width:48%;font-size:12px}@media (max-width: 414px){.validators-notary,.validators-license{float:none;width:100%}}.validators-title{background-position:0 50%;background-repeat:no-repeat;background-size:contain;color:#333;font-size:16px;font-weight:700;height:24px;line-height:24px;margin:0 0 20px 0;padding:0 0 0 35px;text-align:left}@media (max-width: 414px){.validators-title{margin:15px 0}}.validators-title--notary{background-image:url("../images/icons/icon-notary.svg")}.validators-title--notary-license{background-image:url("../images/icons/icon-notary-license.svg")}.validators-table-i{color:#333;display:flex;font-size:14px;font-weight:500;justify-content:space-between;line-height:1.2;padding:20px}.validators-table-i:nth-child(odd){background-color:#f7f7f7}.validators-count{color:#333;font-size:14px;line-height:38px;margin-bottom:0}.validators-count-val{font-weight:700} +.footer{left:0;right:0}.create-keys-button{background-color:#5c34a2;background-position:calc(100% - 15px) 50%;background-repeat:no-repeat;border-radius:5px;border:0;box-shadow:0px 5px 10px 0 rgba(92,92,92,0.2);color:#fff;cursor:pointer;font-size:16px;font-weight:bold;line-height:44px;outline:none;padding:0 45px 0 15px;text-decoration:none;text-transform:capitalize;transition:0.15s background-color}.create-keys-button:hover{background-color:#7346c3}.create-keys-button{background-image:url("../images/icons/icon-arrow-right.svg");background-size:18px 14px}.container{margin-left:auto;margin-right:auto;position:relative;width:960px}@media (max-width: 980px){.container{width:98%}}.hidden{display:none}button:focus{outline:none}html,body,p,h1,h2,h3{margin:0;padding:0;font-weight:normal}html{display:flex;min-height:100%}body{-webkit-font-smoothing:antialiased;background-color:#ffffff;box-sizing:border-box;color:#333;font-family:'Nunito', sans-serif;font-size:14px;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:132px}}@media screen and (max-width: 414px){body{padding-bottom:132px}}.key-content{display:table-cell;vertical-align:middle;background-color:#fbfbfb;text-align:center}.left{float:left}.right{float:right}.text-capitalized{text-transform:capitalize}.text-uppercase{text-transform:uppercase}.text-align-right{text-align:right}.text-whitespace-nowrap{white-space:nowrap}.create-keys-button-container{display:flex;align-items:center;justify-content:center}.create-keys{padding-bottom:20px}.create-keys h1{margin-bottom:20px}.create-keys h2{margin-bottom:20px}.create-keys-form{display:flex;justify-content:space-between;margin-bottom:10px}@media (max-width: 768px){.create-keys-form{flex-direction:column}}.create-keys-form-i{width:48%}@media (max-width: 768px){.create-keys-form-i{width:100%}}.create-keys label:not(.radio){color:#333;display:block;font-size:16px;font-weight:500;line-height:1.5;margin-bottom:6px}.create-keys button,.create-keys input,.create-keys textarea{outline:none;font-family:'Open Sans', sans-serif}.create-keys input,.create-keys textarea{background-color:#fff;border-radius:3px;border:1px solid #e4e4e4;box-sizing:border-box;color:#333;font-size:16px;height:38px;outline:none;padding:0 15px;transition:0.15s border-color;margin-bottom:20px;width:100%}.create-keys input:hover,.create-keys textarea:hover{border-color:#8e959d;color:#202d3c}.create-keys input:focus,.create-keys textarea:focus{border-color:#5c34a2;color:#202d3c}.create-keys #PlacesAutocomplete__root{margin-bottom:20px}.create-keys #PlacesAutocomplete__root input{margin-bottom:0}.create-keys textarea{height:110px;padding:15px;resize:none}.create-keys input[type="radio"]{display:none}.create-keys input[type="radio"]:checked+.radio:after{opacity:1}.create-keys-button[disabled]{cursor:default;opacity:0.7}.create-keys-button:focus,.create-keys-button:active{box-shadow:none}.create-keys-button.finalize{margin-right:10px}.sokol .create-keys-button{background-color:#6ac9b9}.sokol .create-keys-button:hover{background-color:#8fd7cb}.footer{background-color:#5c34a2;bottom:0;padding:18px 0;position:absolute}.footer.sokol{background-color:#6ac9b9}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .socials{order:2}@media screen and (max-width: 768px){.footer .socials{margin-top:15px;order:1}}.footer-logo{background-image:url("../images/logos/logo_validators_dapp_footer.png");background-repeat:no-repeat;background-size:contain;display:block;height:20px;left:0;order:0;width:123px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.footer-logo{background-image:url("../images/logos/logo_validators_dapp_footer@2x.png");background-size:contain}}.footer-rights{color:#fff;font-size:12px;order:1;text-align:center}@media screen and (max-width: 768px){.footer-rights{line-height:normal;margin-top:15px;order:2;width:100%}}.header{background-color:#5c34a2;position:relative;width:100%;z-index:9999}@media screen and (max-width: 414px){.header{left:0;right:0;position:fixed;top:0;z-index:124}}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{width:93%;padding:22px 0}}.header.sokol{background-color:#6ac9b9}.header-logo{display:block;height:26px}.header .links-container{align-items:center;display:flex;justify-content:space-between;height:70px;margin-left:auto}@media screen and (max-width: 414px){.header .links-container{display:none}}@media screen and (max-width: 768px){.header .links-container{justify-content:flex-end;width:auto}}.header .links-container-mobile{display:none}@media screen and (max-width: 414px){.header .links-container-mobile{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-evenly}}.header .link{color:#fff;font-size:14px;font-weight:700;line-height:18px;margin-left:34px;opacity:0.9;text-decoration:none;transition:opacity linear 0.1s}.header .link:hover,.header .link.active{opacity:1}@media screen and (max-width: 414px){.header .link{margin-left:0}}.header .link-icon{height:18px;width:18px;margin-right:10px;float:left;background-position:50% 50%;background-repeat:no-repeat}.header .link-icon-all{background-image:url("../images/icons/icon-all.svg")}.header .link-icon-set-metadata{background-image:url("../images/icons/icon-set-metadata.svg")}.header .link-icon-pending-changes{background-image:url("../images/icons/icon-pending-changes.svg")}.header.sokol .link-icon-all{background-image:url("../images/icons/icon-all-sokol.svg")}.header.sokol .link-icon-set-metadata{background-image:url("../images/icons/icon-set-metadata-sokol.svg")}.header.sokol .link-icon-pending-changes{background-image:url("../images/icons/icon-pending-changes-sokol.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 414px){.header .mobile-menu{display:block;order:3}}.header .mobile-menu .mobile-menu-icon{width:18px;height:14px}.header .mobile-menu .mobile-menu-open-icon{width:18px;height:18px}@media screen and (max-width: 414px){.header .header-mobile-menu-container{background-color:#45277a;height:172px}}@media screen and (max-width: 414px){.header.sokol .header-mobile-menu-container{background-color:#45bba7}}.header .Select{margin-left:25px}@media screen and (max-width: 414px){.header .Select{margin-left:0;max-width:125px;order:2}.header .Select .Select-control{max-width:125px}}.select-network-id{background:#fff;width:40px}.app-container{padding-top:40px;position:relative}.app-container.app-container-open-mobile-menu{z-index:1}.app-container.app-container-open-mobile-menu:before{background-color:rgba(78,44,137,0.8);bottom:0;content:'';display:none;left:0;position:absolute;right:0;top:0;z-index:1234}@media screen and (max-width: 414px){.app-container.app-container-open-mobile-menu:before{display:block}}.app-container.app-container-open-mobile-menu.sokol:before{background-color:rgba(106,201,185,0.8)}@media screen and (max-width: 414px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 414px){.content{padding-top:120px}}.content.content-menu-open{padding-top:242px}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading{display:flex;justify-content:space-between;left:50%;margin:-30px 0 0 -111.5px;padding-top:50px;position:absolute;top:50%;width:206px}.loading:before{background-image:url("../images/logos/logo_loader.svg");background-position:0 0;background-repeat:no-repeat;content:'';left:0;position:absolute;top:0;height:100px;width:206px}.loading-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#fff;border-radius:50%;height:9px;opacity:.2;width:9px}.loading-i:nth-child(2){animation-delay:.1s}.loading-i:nth-child(3){animation-delay:.2s}.loading-i:nth-child(4){animation-delay:.3s}.loading-i:nth-child(5){animation-delay:.4s}.loading-i:nth-child(6){animation-delay:.5s}.main-title-container{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between;margin-bottom:38px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 414px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container.no-search-on-top{margin-top:-50px}.main-title-container .search-input{width:100%}}.search-container{background-color:#502d8d;box-sizing:border-box;height:50px;padding:10px 0 0 0}.search-container.sokol{background-color:#45bba7}@media screen and (max-width: 414px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}.search-input{background-color:transparent;background-image:url("../images/icons/icon-search.svg");background-position:0 50%;background-repeat:no-repeat;background-size:16px 16px;border-radius:0;border:none;box-sizing:border-box;color:#fff;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}.sokol .search-input{background-image:url("../images/icons/icon-search-sokol.svg")}.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input:-ms-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.socials{font-size:0}.socials-item:not(:first-child){margin-left:10px}.socials-i{background-color:#ffffff;border-radius:3px;display:inline-block;height:30px;position:relative;transition:0.3s background-color;vertical-align:top;width:30px}.socials-i:not(:first-child){margin-left:10px}.socials-i:hover{background-color:rgba(255,255,255,0.4)}.socials-i:before{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;content:'';height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px}.socials-i_github:before{background-image:url("../images/socials/git.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_github:before{background-image:url("../images/socials/git@2x.png");background-size:contain}}.socials-i_telegram:before{background-image:url("../images/socials/telegram.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_telegram:before{background-image:url("../images/socials/telegram@2x.png");background-size:contain}}.socials-i_twitter:before{background-image:url("../images/socials/tw.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_twitter:before{background-image:url("../images/socials/tw@2x.png");background-size:contain}}.socials-i_poa:before{background-image:url("../images/socials/poa.png");height:20px;width:20px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_poa:before{background-image:url("../images/socials/poa@2x.png");background-size:contain}}.sokol .socials .socials-i_github:before{background-image:url("../images/socials/git-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_github:before{background-image:url("../images/socials/git-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_telegram:before{background-image:url("../images/socials/telegram-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_telegram:before{background-image:url("../images/socials/telegram-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_twitter:before{background-image:url("../images/socials/tw-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_twitter:before{background-image:url("../images/socials/tw-sokol@2x.png");background-size:contain}}.sokol .socials .socials-i_poa:before{background-image:url("../images/socials/poa-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_poa:before{background-image:url("../images/socials/poa-sokol@2x.png");background-size:contain}}.validators{text-align:left}.validators-i{border-radius:5px;border:1px solid #e4e4e4;margin-bottom:30px;padding:20px 30px}@media (max-width: 414px){.validators-i{margin-bottom:20px}}.validators-header{border-bottom:1px solid #e4e4e4;color:#333333;display:flex;font-size:18px;font-stretch:normal;font-style:normal;font-weight:700;justify-content:space-between;letter-spacing:normal;line-height:1.2;margin:0 0 20px;padding:0 0 15px;text-align:left}@media (max-width: 414px){.validators-header{display:block}}.validators-header--address{word-break:break-all;margin-bottom:10px}.validators-header--hint{color:#777;font-size:13px;font-weight:400;line-height:1.2}.validators-header--confirmations{font-size:15px;font-weight:500;line-height:1.2}@media (max-width: 414px){.validators-header--confirmations{padding-top:15px}}.validators-body{overflow:hidden}.validators-footer{display:flex;justify-content:center;padding-top:20px}.validators-notary,.validators-license{width:48%;font-size:12px}@media (max-width: 414px){.validators-notary,.validators-license{float:none;width:100%}}.validators-title{background-position:0 50%;background-repeat:no-repeat;background-size:contain;color:#333;font-size:16px;font-weight:700;height:24px;line-height:24px;margin:0 0 20px 0;padding:0 0 0 35px;text-align:left}@media (max-width: 414px){.validators-title{margin:15px 0}}.validators-title--notary{background-image:url("../images/icons/icon-notary.svg")}.validators-title--notary-license{background-image:url("../images/icons/icon-notary-license.svg")}.validators-table-i{color:#333;display:flex;font-size:14px;font-weight:500;justify-content:space-between;line-height:1.2;padding:20px}.validators-table-i:nth-child(odd){background-color:#f7f7f7}.validators-count{color:#333;font-size:14px;line-height:38px;margin-bottom:0}.validators-count-val{font-weight:700}.data-icon--unconfirmed,.data-icon--confirmed{background-position:center;background-repeat:no-repeat;border-radius:50%;display:inline-block;height:24px;vertical-align:middle;width:24px}.data-icon--unconfirmed{background-color:#e5e5e5;background-image:url("/images/unconfirmed.svg")}.data-icon--confirmed{background-color:#60db97;background-image:url("/images/confirmed.svg")}.validator-physical-address{display:flex}.validator-physical-address__title{flex-shrink:0;padding-right:10px}.validator-physical-address__value{line-height:20px;margin-bottom:21px;padding-right:35px;position:relative}.validator-physical-address__value .data-icon--confirmed,.validator-physical-address__value .data-icon--unconfirmed{position:absolute;right:0;top:-3px}.validator-physical-address--multiple{display:block}.validator-physical-address--multiple .validator-physical-address__title{margin-bottom:10px;width:100%} diff --git a/src/stylesheets/application.scss b/src/stylesheets/application.scss index b76108c..fc53045 100644 --- a/src/stylesheets/application.scss +++ b/src/stylesheets/application.scss @@ -13,3 +13,4 @@ @import 'application/search'; @import 'application/socials'; @import 'application/validators'; +@import 'application/validatorPhysicalAddresses'; diff --git a/src/stylesheets/application/_base.scss b/src/stylesheets/application/_base.scss index 93e839c..9d89160 100644 --- a/src/stylesheets/application/_base.scss +++ b/src/stylesheets/application/_base.scss @@ -63,3 +63,7 @@ body { .text-align-right { text-align: right; } + +.text-whitespace-nowrap { + white-space: nowrap; +} diff --git a/src/stylesheets/application/_validatorPhysicalAddresses.scss b/src/stylesheets/application/_validatorPhysicalAddresses.scss new file mode 100644 index 0000000..7cd7696 --- /dev/null +++ b/src/stylesheets/application/_validatorPhysicalAddresses.scss @@ -0,0 +1,31 @@ +.validator-physical-address { + display: flex; + + &__title { + flex-shrink: 0; + padding-right: 10px; + } + + &__value { + line-height: 20px; + margin-bottom: 21px; + padding-right: 35px; + position: relative; + + .data-icon--confirmed, + .data-icon--unconfirmed { + position: absolute; + right: 0; + top: -3px; + } + } +} + +.validator-physical-address--multiple { + display: block; + + .validator-physical-address__title { + margin-bottom: 10px; + width: 100%; + } +} diff --git a/src/stylesheets/application/_validators.scss b/src/stylesheets/application/_validators.scss index 48bd6dc..65a09f5 100644 --- a/src/stylesheets/application/_validators.scss +++ b/src/stylesheets/application/_validators.scss @@ -131,3 +131,28 @@ font-weight: 700; } } + +// Icon that represents unconfirmed/confirmed validator's data +%data-icon { + background-position: center; + background-repeat: no-repeat; + border-radius: 50%; + display: inline-block; + height: 24px; + vertical-align: middle; + width: 24px; +} + +.data-icon { + &--unconfirmed { + @extend %data-icon; + background-color: #e5e5e5; + background-image: url('/images/unconfirmed.svg'); + } + + &--confirmed { + @extend %data-icon; + background-color: #60db97; + background-image: url('/images/confirmed.svg'); + } +}