From d67529409c14512a70d999eb0b53b1f6f18c2617 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 1 Nov 2021 19:04:18 +0100 Subject: [PATCH] styling tweaks, prepare AssetContent for preview --- src/components/Asset/AssetContent/index.tsx | 17 ++++++---- src/components/Asset/index.tsx | 2 +- .../Publish/Actions/index.module.css | 1 - .../Publish/Navigation/index.module.css | 21 ++++++++++-- .../Publish/Pricing/Coin.module.css | 7 ++-- .../Publish/Pricing/Dynamic.module.css | 33 ++----------------- .../Publish/Pricing/Fees.module.css | 13 -------- .../Publish/Pricing/Price.module.css | 13 ++------ .../Publish/Pricing/index.module.css | 5 +++ src/components/Publish/index.module.css | 14 ++++++++ 10 files changed, 57 insertions(+), 69 deletions(-) diff --git a/src/components/Asset/AssetContent/index.tsx b/src/components/Asset/AssetContent/index.tsx index b232f0a98..85049a76a 100644 --- a/src/components/Asset/AssetContent/index.tsx +++ b/src/components/Asset/AssetContent/index.tsx @@ -17,16 +17,24 @@ import { useWeb3 } from '@context/Web3' import styles from './index.module.css' import NetworkName from '@shared/NetworkName' import content from '../../../../content/purgatory.json' +import { DDO } from '@oceanprotocol/lib' -export default function AssetContent(): ReactElement { +export default function AssetContent({ ddo }: { ddo: DDO }): ReactElement { const { debug } = useUserPreferences() const { accountId } = useWeb3() - const { owner, isInPurgatory, purgatoryData, isAssetNetwork } = useAsset() + const { + price, + metadata, + type, + owner, + isInPurgatory, + purgatoryData, + isAssetNetwork + } = useAsset() const [showEdit, setShowEdit] = useState() const [isComputeType, setIsComputeType] = useState(false) const [showEditCompute, setShowEditCompute] = useState() const [isOwner, setIsOwner] = useState(false) - const { ddo, price, metadata, type } = useAsset() useEffect(() => { if (!accountId || !owner) return @@ -37,13 +45,10 @@ export default function AssetContent(): ReactElement { }, [accountId, price, owner, ddo]) function handleEditButton() { - // move user's focus to top of screen - window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) setShowEdit(true) } function handleEditComputeButton() { - window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) setShowEditCompute(true) } diff --git a/src/components/Asset/index.tsx b/src/components/Asset/index.tsx index 20000e1df..0a8a19256 100644 --- a/src/components/Asset/index.tsx +++ b/src/components/Asset/index.tsx @@ -20,7 +20,7 @@ export default function AssetDetails({ uri }: { uri: string }): ReactElement { return ddo && pageTitle !== undefined && !loading ? ( - + ) : error ? ( diff --git a/src/components/Publish/Actions/index.module.css b/src/components/Publish/Actions/index.module.css index f4b6e8d0b..26239348a 100644 --- a/src/components/Publish/Actions/index.module.css +++ b/src/components/Publish/Actions/index.module.css @@ -3,7 +3,6 @@ justify-content: center; align-items: center; padding-top: var(--spacer); - border-top: 1px solid var(--border-color); } .actions button { diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css index 064e597de..618709aa1 100644 --- a/src/components/Publish/Navigation/index.module.css +++ b/src/components/Publish/Navigation/index.module.css @@ -1,5 +1,4 @@ .navigation { - border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacer); margin-top: -1rem; padding: calc(var(--spacer) / 2) 0; @@ -31,9 +30,11 @@ counter-increment: list-number; font-weight: var(--font-weight-bold); white-space: nowrap; + position: relative; } -.navigation li:before { +/* inject the numbers */ +.navigation li::before { content: counter(list-number); display: inline-flex; align-items: center; @@ -46,6 +47,22 @@ margin-right: calc(var(--spacer) / 4); } +/* inject line */ +.navigation li::after { + content: ''; + display: block; + position: absolute; + left: 100%; + top: 1rem; + width: 50%; + height: 1px; + background: var(--border-color); +} + +.navigation li:last-child::after { + display: none; +} + .current { font-weight: var(--font-weight-bold); } diff --git a/src/components/Publish/Pricing/Coin.module.css b/src/components/Publish/Pricing/Coin.module.css index 777d5102c..49515aaab 100644 --- a/src/components/Publish/Pricing/Coin.module.css +++ b/src/components/Publish/Pricing/Coin.module.css @@ -1,6 +1,5 @@ .coin { padding: var(--spacer) calc(var(--spacer) / 2); - border-top: 1px solid var(--border-color); } .coin:last-child { @@ -9,9 +8,9 @@ .icon { composes: box from '@shared/atoms/Box.module.css'; - padding: calc(var(--spacer) / 1.5); - width: 6rem; - height: 6rem; + padding: calc(var(--spacer) / 2); + width: 4rem; + height: 4rem; display: flex; align-items: center; justify-content: center; diff --git a/src/components/Publish/Pricing/Dynamic.module.css b/src/components/Publish/Pricing/Dynamic.module.css index 1e157d9b3..b68277392 100644 --- a/src/components/Publish/Pricing/Dynamic.module.css +++ b/src/components/Publish/Pricing/Dynamic.module.css @@ -1,26 +1,3 @@ -.wallet { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: calc(var(--spacer) / 2); -} - -.balance { - text-align: center; - font-size: var(--font-size-small) !important; - border: 1px solid var(--border-color); - border-right: 0; - margin-right: -3px; - height: 35px; - padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2) - calc(var(--spacer) / 4.5) calc(var(--spacer) / 2); - border-top-left-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); - color: var(--color-secondary); - display: flex; - align-items: center; -} - .title { font-size: var(--font-size-base); margin-top: var(--spacer); @@ -32,18 +9,14 @@ .tokens { display: grid; - - margin-left: -2rem; - margin-right: -2rem; - border-bottom: 1px solid var(--border-color); + border: 1px solid var(--border-color); background: var(--background-highlight); + border-radius: var(--border-radius); } @media screen and (min-width: 40rem) { .tokens { grid-template-columns: 1fr 1fr; - margin-left: -4rem; - margin-right: -4rem; } } @@ -52,7 +25,5 @@ } .alertArea { - margin-left: -2rem; - margin-right: -2rem; padding: 0 calc(var(--spacer) / 2); } diff --git a/src/components/Publish/Pricing/Fees.module.css b/src/components/Publish/Pricing/Fees.module.css index 35dae6488..1b5b555c8 100644 --- a/src/components/Publish/Pricing/Fees.module.css +++ b/src/components/Publish/Pricing/Fees.module.css @@ -2,21 +2,8 @@ display: grid; gap: var(--spacer); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); - margin-left: -2rem; - margin-right: -2rem; - border-bottom: 1px solid var(--border-color); padding: var(--spacer); - text-align: center; - border-bottom: 1px solid var(--border-color); - background: var(--background-highlight); -} - -@media screen and (min-width: 40rem) { - .fees { - margin-left: -4rem; - margin-right: -4rem; - } } .fees > div { diff --git a/src/components/Publish/Pricing/Price.module.css b/src/components/Publish/Pricing/Price.module.css index 8cc48872e..de9bf02c8 100644 --- a/src/components/Publish/Pricing/Price.module.css +++ b/src/components/Publish/Pricing/Price.module.css @@ -7,18 +7,9 @@ } .price { - margin-left: -2rem; - margin-right: -2rem; background: var(--background-highlight); - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); -} - -@media (min-width: 40rem) { - .price { - margin-left: -4rem; - margin-right: -4rem; - } + border: 1px solid var(--border-color); + border-radius: var(--border-radius); } .grid { diff --git a/src/components/Publish/Pricing/index.module.css b/src/components/Publish/Pricing/index.module.css index 6487f0ef8..c380f3aaf 100644 --- a/src/components/Publish/Pricing/index.module.css +++ b/src/components/Publish/Pricing/index.module.css @@ -1,3 +1,8 @@ .pricing input { text-align: center; } + +.pricing [class*='Tabs_tabContent'] { + padding-left: 0; + padding-right: 0; +} diff --git a/src/components/Publish/index.module.css b/src/components/Publish/index.module.css index 55c0b5be0..77710010b 100644 --- a/src/components/Publish/index.module.css +++ b/src/components/Publish/index.module.css @@ -2,3 +2,17 @@ composes: box from '@shared/atoms/Box.module.css'; margin-bottom: var(--spacer); } + +@media (min-width: 45rem) { + .form { + padding-left: calc(var(--spacer) * 2); + padding-right: calc(var(--spacer) * 2); + } +} + +@media (min-width: 60rem) { + .form { + padding-left: calc(var(--spacer) * 4); + padding-right: calc(var(--spacer) * 4); + } +}