Fix: some style issues (#1658)

* fix: some style issues * feat: table names in red * fix: comments
decentraland · May 4, 2023 · a5814ab · a5814ab
1 parent c274d32
commit a5814ab
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 34 deletions.
diff --git a/webapp/src/components/AssetCard/AssetCard.css b/webapp/src/components/AssetCard/AssetCard.css
@@ -13,6 +13,12 @@
   flex-direction: column;
 }
 
+.AssetCard .textOverflow {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .ui.cards a.card.AssetCard.catalog:hover,
 .ui.link.card.AssetCard.catalog:hover,
 .ui.link.cards .card.AssetCard.catalog:hover,

diff --git a/webapp/src/components/AssetCard/AssetCard.tsx b/webapp/src/components/AssetCard/AssetCard.tsx
@@ -158,7 +158,12 @@ const AssetCard = (props: Props) => {
               : isAvailableForMint
               ? t('asset_card.available_for_mint')
               : t('asset_card.cheapest_listing'),
-          actionIcon: isAvailableForMint ? mintingIcon : null,
+          actionIcon:
+            isAvailableForMint &&
+            sortBy !== SortBy.MOST_EXPENSIVE &&
+            sortBy !== SortBy.CHEAPEST
+              ? mintingIcon
+              : null,
           price:
             sortBy === SortBy.MOST_EXPENSIVE
               ? mostExpensive === MINT
@@ -270,7 +275,7 @@ const AssetCard = (props: Props) => {
       >
         <Card.Header>
           <div className={isCatalogItem(asset) ? 'catalogTitle' : 'title'}>
-            {title}
+            <span className={'textOverflow'}>{title}</span>
             {!isNFT(asset) && isCatalogItem(asset) && (
               <span className="creator">
                 <Profile address={asset.creator} textOnly />

diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx
@@ -13,7 +13,6 @@ import {
   Rarity
 } from '@dcl/schemas'
 import { Button, Loader, Mana, Popup } from 'decentraland-ui'
-import { formatWeiMANA } from '../../../lib/mana'
 import { formatDistanceToNow } from '../../../lib/date'
 import { locations } from '../../../modules/routing/locations'
 import { isNFT } from '../../../modules/asset/utils'
@@ -24,6 +23,7 @@ import clock from '../../../images/clock.png'
 import noListings from '../../../images/noListings.png'
 import { ManaToFiat } from '../../ManaToFiat'
 import { LinkedProfile } from '../../LinkedProfile'
+import { fomrmatWeiToAssetCard } from '../../AssetCard/utils'
 import { BuyNFTButtons } from '../SaleActionBox/BuyNFTButtons'
 import { ItemSaleActions } from '../SaleActionBox/ItemSaleActions'
 import { BuyOptions, Props } from './BestBuyingOption.types'
@@ -162,7 +162,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
                     network={asset.network}
                     className={styles.informationBold}
                   >
-                    {formatWeiMANA(asset.price)}
+                    {fomrmatWeiToAssetCard(asset.price)}
                   </Mana>
                 </div>
                 {+asset.price > 0 && (
@@ -207,7 +207,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
                     network={listing.order.network}
                     className={styles.listingMana}
                   >
-                    {formatWeiMANA(listing.order.price)}
+                    {fomrmatWeiToAssetCard(listing.order.price)}
                   </Mana>
                 </div>
                 <div className={styles.informationListingText}>
@@ -232,7 +232,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
                       network={listing.order.network}
                       className={styles.listingMana}
                     >
-                      {formatWeiMANA(mostExpensiveBid.price)}
+                      {fomrmatWeiToAssetCard(mostExpensiveBid.price)}
                     </Mana>
                   </div>
 

diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
@@ -24,6 +24,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  height: 100%;
+  justify-content: space-between;
 }
 
 .ItemDetail .information {
@@ -36,7 +38,6 @@
 .ItemDetail .informationContainer {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   gap: 30px;
 }
 
@@ -55,6 +56,10 @@
   .ItemDetail .information {
     width: 100%;
   }
+
+  .ItemDetail .informationContainer {
+    flex-wrap: wrap;
+  }
   .ItemDetail .assetImageContainer {
     width: 100%;
   }

diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css
@@ -2,8 +2,8 @@
   position: relative;
 }
 
-.ListingsTable .linkedProfileRow {
-  margin-left: 20px;
+.linkedProfileRow {
+  color: var(--primary) !important;
 }
 
 .ListingsTable .headerMargin {
@@ -76,7 +76,7 @@
 }
 
 @media (max-width: 768px) {
-  .ListingsTable .linkedProfileRow {
+  .linkedProfileRow {
     margin-left: unset;
   }
 }
diff --git a/webapp/src/components/AssetPage/ListingsTableContainer/ListingsTableContainer.tsx b/webapp/src/components/AssetPage/ListingsTableContainer/ListingsTableContainer.tsx
@@ -79,7 +79,6 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
         handleTabChange(BelowTabs.OWNERS.value)
     }, [BelowTabs.OWNERS, handleTabChange, locations.search])
 
-    console.log(item)
     return (
       <TableContainer
         children={

diff --git a/webapp/src/components/AssetPage/OwnersTable/OwnersTable.module.css b/webapp/src/components/AssetPage/OwnersTable/OwnersTable.module.css
@@ -2,6 +2,10 @@
   padding: 20px !important;
 }
 
+.linkedProfileRow {
+  color: var(--primary) !important;
+}
+
 .issuedIdContainer {
   display: flex;
   flex-direction: row;
@@ -27,15 +31,24 @@
   padding-right: 25px;
 }
 
+.empty {
+  height: 86px;
+}
+
 .emptyTable {
-  height: 200px;
+  width: 100%;
+  height: 350px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 10px;
+  font-size: 20px;
 }
 
-.emptyTableActionButton {
+.OwnersTable .emptyTableActionButton :global(.ui.button.basic) {
   text-decoration: underline;
+  color: white !important;
 }
 
 @media (max-width: 768px) {

diff --git a/webapp/src/components/AssetPage/OwnersTable/OwnersTable.tsx b/webapp/src/components/AssetPage/OwnersTable/OwnersTable.tsx
@@ -6,6 +6,7 @@ import {
   OwnersSortBy
 } from '../../../modules/vendor/decentraland'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import emptyOwners from '../../../images/emptyOwners.png'
 import { TableContent } from '../../Table/TableContent'
 import { DataTableType } from '../../Table/TableContent/TableContent.types'
 import { formatDataToTable } from './utils'
@@ -59,6 +60,7 @@ const OwnersTable = (props: Props) => {
       totalPages={totalPages}
       empty={() => (
         <div className={styles.emptyTable}>
+          <img src={emptyOwners} alt="empty" className={styles.empty} />
           <span>
             {t('owners_table.there_are_no_owners')}
             <Button

diff --git a/webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.css b/webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.css
@@ -50,3 +50,7 @@
     padding: 20px;
   }
 }
+
+.linkedProfile {
+  color: var(--primary) !important;
+}
diff --git a/webapp/src/components/AssetPage/TransactionHistory/utils.tsx b/webapp/src/components/AssetPage/TransactionHistory/utils.tsx
@@ -6,6 +6,7 @@ import { formatDistanceToNow } from '../../../lib/date'
 import { formatWeiMANA } from '../../../lib/mana'
 import { LinkedProfile } from '../../LinkedProfile'
 import { DataTableType } from '../../Table/TableContent/TableContent.types'
+import './TransactionHistory.css'
 
 const INPUT_FORMAT = 'PPP'
 const WEEK_IN_MILLISECONDS = 7 * 24 * 60 * 60 * 1000
@@ -20,8 +21,12 @@ const formatEventDate = (updatedAt: number) => {
 export const formatDataToTable = (sales: Sale[]): DataTableType[] => {
   return sales?.map((sale: Sale) => {
     const value: DataTableType = {
-      [t('transaction_history.from')]: <LinkedProfile address={sale.seller} />,
-      [t('transaction_history.to')]: <LinkedProfile address={sale.buyer} />,
+      [t('transaction_history.from')]: (
+        <LinkedProfile address={sale.seller} className="linkedProfile" />
+      ),
+      [t('transaction_history.to')]: (
+        <LinkedProfile address={sale.buyer} className="linkedProfile" />
+      ),
       [t('transaction_history.type')]: t(`global.${sale.type}`),
       [t('transaction_history.when')]: formatEventDate(sale.timestamp),
       [t('transaction_history.price')]: (

diff --git a/webapp/src/components/ManaToFiat/ManaToFiat.tsx b/webapp/src/components/ManaToFiat/ManaToFiat.tsx
@@ -3,32 +3,45 @@ import { utils } from 'ethers'
 import { TokenConverter } from '../../modules/vendor/TokenConverter'
 import { Props } from './ManaToFiat.types'
 
+const ONE_MILLION = { value: 1000000, displayValue: 'M' }
+const ONE_BILLION = { value: 1000000000, displayValue: 'B' }
+const ONE_TRILLION = { value: 1000000000000, displayValue: 'T' }
+
 const ManaToFiat = (props: Props) => {
   const { mana, digits = 2 } = props
-  const [fiatValue, setFiatValue] = React.useState<number>()
+  const [fiatValue, setFiatValue] = React.useState<string>()
 
   useEffect(() => {
     try {
       const value = parseFloat(utils.formatEther(mana))
       new TokenConverter()
         .marketMANAToUSD(value)
         .then(usd => {
-          setFiatValue(usd)
+          const divider =
+            usd > ONE_TRILLION.value
+              ? ONE_TRILLION
+              : usd > ONE_BILLION.value
+              ? ONE_BILLION
+              : usd > ONE_MILLION.value
+              ? ONE_MILLION
+              : { value: 1, displayValue: '' }
+
+          setFiatValue(
+            `$ ${(+(+usd / divider.value).toFixed(digits)).toLocaleString(
+              undefined,
+              {
+                maximumFractionDigits: 2
+              }
+            )}${divider.displayValue}`
+          )
         })
         .catch()
     } catch (error) {
       // do nothing
     }
-  }, [mana])
+  }, [digits, mana])
 
-  return fiatValue ? (
-    <>
-      $
-      {Number(fiatValue.toFixed(digits)).toLocaleString(undefined, {
-        maximumFractionDigits: 2
-      })}
-    </>
-  ) : null
+  return fiatValue ? <>{fiatValue}</> : null
 }
 
 export default React.memo(ManaToFiat)
diff --git a/webapp/src/components/Vendor/decentraland/NFTFilters/NFTFilters.tsx b/webapp/src/components/Vendor/decentraland/NFTFilters/NFTFilters.tsx
@@ -200,16 +200,16 @@ const NFTFilters = (props: Props) => {
   const searchPlaceholder = isMap
     ? t('nft_filters.search_land')
     : count === undefined
-      ? t('global.loading') + '...'
-      : t('nft_filters.search', {
+    ? t('global.loading') + '...'
+    : t('nft_filters.search', {
         suffix:
           count < MAX_QUERY_SIZE
             ? t('nft_filters.results', {
-              count: count.toLocaleString()
-            })
+                count: count.toLocaleString()
+              })
             : t('nft_filters.more_than_results', {
-              count: count.toLocaleString()
-            })
+                count: count.toLocaleString()
+              })
       })
 
   const toggleBoxI18nKey =
@@ -302,8 +302,9 @@ const NFTFilters = (props: Props) => {
           >
             <div className="label">{t('nft_filters.filter')}</div>
             <div
-              className={`open-filters ${showFiltersMenu || appliedFilters.length > 0 ? 'active' : ''
-                }`}
+              className={`open-filters ${
+                showFiltersMenu || appliedFilters.length > 0 ? 'active' : ''
+              }`}
             />
           </div>
         </Responsive>

diff --git a/webapp/src/images/emptyOwners.png b/webapp/src/images/emptyOwners.png