feat: add floor change on mobile (#5302)

* few more tweaks

* remove extra code

src/nft/components/explore/Cells/Cells.tsx

@@ -120,9 +120,12 @@ export const EthCell = ({
       : ethNumberStandardFormatter(denominatedValue, true, false, true)
     : '-'
 
+  const isMobile = useIsMobile()
+  const TextComponent = isMobile ? ThemedText.BodySmall : ThemedText.BodyPrimary
+
   return (
     <EthContainer>
-      <ThemedText.BodyPrimary>{value ? formattedValue : '-'}</ThemedText.BodyPrimary>
+      <TextComponent>{value ? formattedValue : '-'}</TextComponent>
     </EthContainer>
   )
 }
@@ -153,15 +156,17 @@ export const VolumeCell = ({
   )
 }
 
-export const ChangeCell = ({ change, children }: { children?: ReactNode; change?: number }) => (
-  <ChangeCellContainer change={change ?? 0}>
-    {!change || change > 0 ? (
-      <SquareArrowUpIcon width="20px" height="20px" />
-    ) : (
-      <SquareArrowDownIcon width="20px" height="20px" />
-    )}
-    <ThemedText.BodyPrimary color="currentColor">
-      {children || `${change ? Math.abs(Math.round(change)) : 0}%`}
-    </ThemedText.BodyPrimary>
-  </ChangeCellContainer>
-)
+export const ChangeCell = ({ change, children }: { children?: ReactNode; change?: number }) => {
+  const isMobile = useIsMobile()
+  const TextComponent = isMobile ? ThemedText.Caption : ThemedText.BodyPrimary
+  return (
+    <ChangeCellContainer change={change ?? 0}>
+      {!change || change > 0 ? (
+        <SquareArrowUpIcon width="20px" height="20px" />
+      ) : (
+        <SquareArrowDownIcon width="20px" height="20px" />
+      )}
+      <TextComponent color="currentColor">{children || `${change ? Math.abs(Math.round(change)) : 0}%`}</TextComponent>
+    </ChangeCellContainer>
+  )
+}

src/nft/components/explore/CollectionTable.tsx

@@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { CollectionTableColumn, TimePeriod } from 'nft/types'
 import { useMemo } from 'react'
 import { CellProps, Column, Row } from 'react-table'
+import { MediumOnly } from 'theme/components'
 
 import { ChangeCell, CollectionTitleCell, DiscreteNumberCell, EthCell, TextCell, VolumeCell } from './Cells/Cells'
 import { Table } from './Table'
@@ -65,11 +66,18 @@ const CollectionTable = ({ data, timePeriod }: { data: CollectionTableColumn[];
         sortType: floorSort,
         Cell: function ethCell(cell: CellProps<CollectionTableColumn>) {
           return (
-            <EthCell
-              value={cell.row.original.floor.value}
-              denomination={cell.row.original.denomination}
-              usdPrice={cell.row.original.usdPrice}
-            />
+            <>
+              <EthCell
+                value={cell.row.original.floor.value}
+                denomination={cell.row.original.denomination}
+                usdPrice={cell.row.original.usdPrice}
+              />
+              {timePeriod !== TimePeriod.AllTime && (
+                <MediumOnly>
+                  <ChangeCell change={cell.row.original.floor.change} />
+                </MediumOnly>
+              )}
+            </>
           )
         },
       },

src/nft/components/explore/Table.tsx

@@ -130,11 +130,11 @@ export function Table<D extends Record<string, unknown>>({
   useEffect(() => {
     if (!width) return
 
-    if (width < theme.breakpoint.sm) {
+    if (width <= theme.breakpoint.sm) {
       setHiddenColumns(smallHiddenColumns)
-    } else if (width < theme.breakpoint.md) {
+    } else if (width <= theme.breakpoint.md) {
       setHiddenColumns(mediumHiddenColumns)
-    } else if (width < theme.breakpoint.lg) {
+    } else if (width <= theme.breakpoint.lg) {
       setHiddenColumns(largeHiddenColumns)
     } else {
       setHiddenColumns([])

src/theme/components/index.tsx

@@ -465,6 +465,13 @@ export const SmallOnly = styled.span`
   `};
 `
 
+export const MediumOnly = styled.span`
+  display: none;
+  @media (max-width: ${({ theme }) => theme.breakpoint.md}px) {
+    display: block;
+  }
+`
+
 export const Separator = styled.div`
   width: 100%;
   height: 1px;

src/theme/components/text.tsx

@@ -14,12 +14,19 @@ type TextProps = Omit<TextPropsOriginal, 'css'>
 // todo: export each component individually
 
 export const ThemedText = {
+  // todo: there should be just one `Body` with default color, no need to make all variations
   BodyPrimary(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={16} color="textPrimary" {...props} />
   },
   BodySecondary(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={16} color="textSecondary" {...props} />
   },
+  BodySmall(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={14} color="textPrimary" {...props} />
+  },
+  Caption(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={12} color="textPrimary" {...props} />
+  },
   HeadlineSmall(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color="textPrimary" {...props} />
   },