diff --git a/packages/apps/src/Footer/Footer.tsx b/packages/apps/src/Footer/Footer.tsx index 895b906f..7b9166e2 100644 --- a/packages/apps/src/Footer/Footer.tsx +++ b/packages/apps/src/Footer/Footer.tsx @@ -114,7 +114,7 @@ export default memo(styled(Footer)` color: var(--link-color); } - @media (max-width: 1023px) { + @media (max-width: 1279px) { border-top: 1px solid var(--enum-input-border-disabled-color); } diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss index cd602e1a..ad218a5a 100644 --- a/packages/apps/src/apps.scss +++ b/packages/apps/src/apps.scss @@ -16,6 +16,11 @@ background: var(--header-background); margin-bottom: 0; padding: calc(var(--gap) / 2) 0; + position: fixed; + top: 0; + width: 100%; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + z-index: 1000; .ui.tabular.menu { display: inline-flex; @@ -40,12 +45,11 @@ background-color: transparent; padding: 0; width: auto; + height: 64px; margin-right: calc((var(--gap) / 2) * 3); img { - width: auto; - max-width: 130px; - height: 50px; + width: 100%; } } } @@ -90,13 +94,11 @@ padding-right: 10.25px; display: flex; align-items: center; - margin-bottom: 3px; } &:hover { - .item-icon{ - - svg{ + .item-icon { + svg { fill: var(--button-color); } } @@ -125,7 +127,7 @@ .account-selector-block { max-width: 500px; - .address{ + .address { text-align: left; } } @@ -138,14 +140,14 @@ } .app-main { - padding: calc(var(--gap) * 2) 0; + margin-top: 80px; + padding: calc(var(--gap) * 2) calc(var(--gap) / 2 * 3) calc(var(--gap) / 4 * 10); flex: 1 1 auto; } .app-container { width: 100%; max-width: var(--max-width); - padding: 0 var(--gap); margin: 0 auto; &--header { @@ -153,6 +155,8 @@ justify-content: space-between; align-items: center; max-width: var(--max-header-width); + height: 64px; + padding: 0 var(--gap); } } @@ -163,7 +167,6 @@ } .manage-balances { - &.popup { position: absolute; display: none; @@ -220,7 +223,7 @@ } } - .popup-link{ + .popup-link { & a { cursor: pointer; color: var(--button-color); @@ -238,6 +241,8 @@ display: flex; flex-direction: column; flex-grow: 1; + margin-top: 80px; + padding: calc(var(--gap) / 2 * 3); } .app-balances { @@ -325,8 +330,7 @@ height: 16px; color: var(--link-color); display: inline-block; - background: url("../../react-components/src/AccountButtonGroup/images/warning-alert.svg") - no-repeat; + background: url("../../react-components/src/AccountButtonGroup/images/warning-alert.svg") no-repeat; background-size: contain; } } @@ -362,6 +366,11 @@ .menu-mobile-header { .menu-icon { cursor: pointer; + height: 32px; + } + + .icon { + height: 100%; } } @@ -372,7 +381,7 @@ a.create-account-btn { padding: 8px 24px; - border:1px solid var(--button-color); + border: 1px solid var(--button-color); border-radius: 4px !important; color: var(--link-color); font-family: var(--font-roboto); @@ -382,17 +391,17 @@ &:hover { background-color: var(--button-background-hover); - color: var(--link-color)!important; + color: var(--link-color) !important; } - &.active{ + &.active { pointer-events: none; border-color: var(--button-background-disabled-border); - color:var(--button-background-disabled); + color: var(--button-background-disabled); background: transparent; } - &:before{ + &:before { display: none; } } @@ -430,9 +439,6 @@ @media (max-width: 1279px) { .app-header { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - z-index: 1000; - .ui.tabular.header-menu.menu { display: none; } @@ -441,6 +447,7 @@ display: flex; align-items: center; grid-column-gap: var(--gap); + height: 100%; } .app-user { @@ -478,6 +485,7 @@ .menu-mobile { padding: var(--gap); + margin-top: 80px; display: flex; flex-direction: column; flex-grow: 1; @@ -487,9 +495,26 @@ text-align: center; margin-bottom: var(--gap); } + + &--link { + display: block; + width: 100%; + font-family: var(--font-roboto); + font-weight: 500; + font-size: 16px; + margin: 4px 0; + padding: calc(var(--gap) / 2) var(--gap); + color: var(--header-text-color); + + &.active { + background-color: var(--link-color); + border-radius: 4px; + color: var(--card-background); + } + } } - .app-main { + .app-main { &.menu { display: none; } @@ -504,6 +529,8 @@ .ui.tabular.header-menu.menu { display: inline-flex; + align-items: center; + height: 64px; } .app-user { @@ -516,22 +543,15 @@ } } -@media (max-width: 1023px) { - .app-header { - position: fixed; - top: 0; - width: 100%; +@media (max-width: 1279px) { + .app-wrapper { + background-color: var(--card-background); } +} +@media (max-width: 1023px) { .app-main { - margin-top: 84px; - padding: 0; - - .app-container { - padding: 0; - } - - &.page-no-found{ + &.page-no-found { background-color: var(--bg-page); } } @@ -540,28 +560,27 @@ width: 25%; } - .menu-mobile, .manage-accounts { - margin-top: 84px; - } - .welcome { height: 100vh; } } @media (max-width: 767px) { - .app-wrapper { - background-color: var(--card-background); - } - .app-main { - margin-top: 85px; + padding: calc(var(--gap) / 2 * 3) var(--gap) calc(var(--gap) * 2); + margin-top: 64px; &.no-accounts { margin-top: 67px; } } + .app-logo { + img { + height: 100%; + } + } + .app-user { display: block !important; @@ -569,22 +588,25 @@ display: none; } } + + .app-container { + &--header { + height: 48px; + } + } + .menu-mobile-header { display: block; } .menu-mobile { - margin-top: 85px; + margin-top: 64px; &.no-accounts { margin-top: 67px; } } - .manage-accounts { - margin-top: 85px; - } - .welcome { height: 100vh; @@ -611,7 +633,10 @@ display: none; } } - + .manage-accounts { + margin-top: 64px; + padding: var(--gap); + } } .manage-accounts { @@ -630,7 +655,7 @@ background-color: var(--white-color); z-index: 999; - a{ + a { border-bottom: 1px solid var(--border-color); display: block; width: 100%; @@ -672,7 +697,7 @@ font-family: var(--font-roboto); font-weight: 500; - div{ + div { max-width: 300px; white-space: nowrap; overflow: hidden; @@ -711,11 +736,11 @@ } } -.ui.popup.attributes{ +.ui.popup.attributes { left: -12px !important; } -.ui.top.popup.help{ +.ui.top.popup.help { top: 10px !important; } @@ -737,34 +762,3 @@ border: 1px solid var(--input-background-color); } } - -@media (max-width: 1279px) { - .menu-mobile { - padding: var(--gap); - display: flex; - flex-direction: column; - background-color: var(--card-background); - - &--logo { - text-align: center; - margin-bottom: var(--gap); - } - - &--link { - display: block; - width: 100%; - font-family: var(--font-roboto); - font-weight: 500; - font-size: 16px; - margin: 4px 0; - padding: 8px 16px; - color: var(--header-text-color); - - &.active { - background-color: var(--link-color); - border-radius: 4px; - color: var(--card-background); - } - } - } -} diff --git a/packages/apps/styles/global.scss b/packages/apps/styles/global.scss index f4ccc3ec..44860758 100644 --- a/packages/apps/styles/global.scss +++ b/packages/apps/styles/global.scss @@ -24,7 +24,7 @@ body { .ui.popup { background: var(--bg-page) !important; - a{ + a { color: unset; cursor: pointer; text-decoration: underline; @@ -88,7 +88,7 @@ h1.ui.header { } h2.ui.header { - font: 700 28px/38px var(--font-inter); + font: 700 28px/42px var(--font-inter); color: var(--title-color); margin-bottom: calc(var(--gap) / 2); } @@ -198,7 +198,7 @@ h4.ui.header { height: 48px; & .menu > .item { - padding: 8px calc( (var(--gap) / 2) * 5) !important; + padding: calc(var(--gap)/2) calc((var(--gap) / 2) * 5) !important; } } @@ -247,11 +247,11 @@ h4.ui.header { color: var(--text-color); &:after { - left: calc(50% - 12px);; + left: calc(50% - 12px); } &:before { - left: calc(50% - 12px);; + left: calc(50% - 12px); } .load-more { @@ -412,7 +412,9 @@ form { padding: 1rem var(--gap); } -button.ui.button, .button-link, .ui--Button { +button.ui.button, +.button-link, +.ui--Button { display: flex; justify-content: center; align-items: center; @@ -621,10 +623,10 @@ button.ui.button, .button-link, .ui--Button { border-radius: 4px; padding: 32px; - &.empty{ + &.empty { height: 100%; display: flex; - flex-direction:column; + flex-direction: column; justify-content: center; align-items: center; } @@ -657,7 +659,6 @@ button.ui.button, .button-link, .ui--Button { .ui--Labelled { .ui.input.ui--Input { - &.left { input { padding-right: 4rem !important; @@ -692,31 +693,6 @@ button.ui.button, .button-link, .ui--Button { } } -.modalDescription { - display: flex; - background-color: var(--modal-warning-background-color); - font-size: 14px; - font-family: var(--font-roboto); - line-height: 22px; - border-radius: 4px; - padding: 8px 10.25px; - margin: 0 !important; - - img{ - margin-right: 10.25px; - } - - div { - - p { - margin: 0; - color:var(--modal-warning-text-color); - font-family: var(--font-roboto); - padding: 0.3rem 1.5rem 0 0 !important; - } - } -} - .ui.loader.simple-loader { left: 0; top: 0; @@ -750,26 +726,28 @@ button.ui.button, .button-link, .ui--Button { background-color: rgba(0, 0, 0, 0.7) !important; } -.shadow-block { - padding: calc(var(--gap) * 2); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); - border-radius: calc(var(--gap) / 4); - background-color: var(--white-color); +@media (min-width: 1280px) { + .shadow-block { + padding: calc(var(--gap) * 2); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + border-radius: calc(var(--gap) / 4); + background-color: var(--white-color); + } } -@media (max-width: 1023px) { +@media (max-width: 1279px) { h1.ui.header { - margin-top: calc(var(--gap) * 1.5) !important; - padding: 0 var(--gap); + margin-bottom: calc(var(--gap) / 2 * 3); } +} - .shadow-block { - padding-left: calc((var(--gap) / 2) * 3) !important; - padding-right: calc((var(--gap) / 2) * 3) !important; +@media (max-width: 1023px) { + h1.ui.header { + font-size: 28px; + line-height: 42px; } .ui.page.modals { - .ui--Modal.modal { .ui--Row-address { font-size: 14px !important; @@ -777,13 +755,12 @@ button.ui.button, .button-link, .ui--Button { } .content { - .TextAreaWithDropdown { flex-direction: column; .ui--CopyButton.copyMoved { right: 13px; - top: 13px + top: 13px; } .ui.buttons { @@ -796,14 +773,11 @@ button.ui.button, .button-link, .ui--Button { } @media (max-width: 768px) { + h1.ui.header { + margin-bottom: var(--gap); + } .ui.grid > .row { display: grid; } } -@media (max-width: 320px) { - .shadow-block { - padding-left: var(--gap) !important; - padding-right: var(--gap) !important; - } -} diff --git a/packages/page-builder/src/components/CreateNFT/index.tsx b/packages/page-builder/src/components/CreateNFT/index.tsx index debb091d..2b315b61 100644 --- a/packages/page-builder/src/components/CreateNFT/index.tsx +++ b/packages/page-builder/src/components/CreateNFT/index.tsx @@ -233,14 +233,14 @@ function CreateNFT ({ account, collectionId, collectionInfo, constAttributes, co if (collectionInfo && !isOwner) { return ( -
Choose JPG, PNG, GIF (max 10 Mb)
diff --git a/packages/page-builder/src/components/CreateNFT/styles.scss b/packages/page-builder/src/components/CreateNFT/styles.scss index 6096c3e4..d31b8a33 100644 --- a/packages/page-builder/src/components/CreateNFT/styles.scss +++ b/packages/page-builder/src/components/CreateNFT/styles.scss @@ -1,8 +1,5 @@ .create-nft { background-color: var(--white-color); - padding: calc(var(--gap) * 2); - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); - border-radius: calc(var(--gap) / 4); font-family: var(--font-roboto); .header-text { @@ -31,18 +28,18 @@ .warning-text { p { - color: var(--modal-warning-text-color); - font-family: var(--font-roboto); - font-size: 14px; - line-height: 22px; - margin-bottom: 0; + color: var(--modal-warning-text-color); + font-family: var(--font-roboto); + font-size: 14px; + line-height: 22px; + margin-bottom: 0; } } .avatar{ display: flex; gap: calc(var(--gap) / 2); - margin: 24px 0 48px; + margin: calc(var(--gap) / 2 * 3) 0 calc(var(--gap) / 4 * 10); .avatar-img{ display: flex; @@ -84,10 +81,9 @@ .attributes{ display: flex; flex-direction: column; - gap: 32px ; + gap: 32px; .attributes-input{ - h2{ margin-bottom: var(--gap); } @@ -149,3 +145,27 @@ } } } + +@media (max-width: 1279px) { + .create-nft { + .avatar { + margin: calc(var(--gap) / 2 * 3) 0 calc(var(--gap) * 2); + } + } +} + +@media (max-width: 1023px) { + .create-nft { + .header-text { + font-weight: 600; + font-size: 20px; + line-height: 28px; + } + } +} + +@media (max-width: 768px) { + .create-nft { + padding-top: calc(var(--gap) / 2); + } +} diff --git a/packages/page-builder/src/components/Disclaimer.tsx b/packages/page-builder/src/components/Disclaimer.tsx index 8103d062..8280f522 100644 --- a/packages/page-builder/src/components/Disclaimer.tsx +++ b/packages/page-builder/src/components/Disclaimer.tsx @@ -30,15 +30,15 @@ function Disclaimer ({ checkDisclaimer }: Props): React.ReactElement