styling tweaks, prepare AssetContent for preview

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<boolean>()
   const [isComputeType, setIsComputeType] = useState<boolean>(false)
   const [showEditCompute, setShowEditCompute] = useState<boolean>()
   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)
   }
 

src/components/Asset/index.tsx

@@ -20,7 +20,7 @@ export default function AssetDetails({ uri }: { uri: string }): ReactElement {
 
   return ddo && pageTitle !== undefined && !loading ? (
     <Page title={pageTitle} uri={uri}>
-      <AssetContent />
+      <AssetContent ddo={ddo} />
     </Page>
   ) : error ? (
     <Page title={pageTitle} noPageHeader uri={uri}>

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 {

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);
 }

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);
+  padding: calc(var(--spacer) / 2);
-  width: 6rem;
+  width: 4rem;
-  height: 6rem;
+  height: 4rem;
   display: flex;
   align-items: center;
   justify-content: center;

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;
-
+  border: 1px solid var(--border-color);
-  margin-left: -2rem;
-  margin-right: -2rem;
-  border-bottom: 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);
 }

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 {

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: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
-}
-
-@media (min-width: 40rem) {
-  .price {
-    margin-left: -4rem;
-    margin-right: -4rem;
-  }
 }
 
 .grid {

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;
+}

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);
+  }
+}