fix: styles issues (#1035)

* fix: status pill position * fix: identity tooltip showing on mobile * fix: mobile styles
decentraland · Jun 21, 2023 · db7ada3 · db7ada3
1 parent 5410ac3
commit db7ada3
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 29 deletions.
diff --git a/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx b/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx
@@ -26,7 +26,7 @@ export type BurgerMenuContentProps = NavigationProps & {
 
 const filtersInitialStatus = { categoryOpen: true, statusOpen: false, timeFrameOpen: false }
 
-const OPEN_BURGER_HEIGHT = 740
+const OPEN_BURGER_HEIGHT = 860
 const SEARCH_TITLE_HEIGHT = 32
 const CATEGORY_FILTER_HEIGHT = 407
 const STATUS_FILTER_HEIGHT = 290

diff --git a/src/components/Layout/Navigation.tsx b/src/components/Layout/Navigation.tsx
@@ -4,6 +4,7 @@ import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext
 import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
 import { Link } from 'decentraland-gatsby/dist/plugins/intl'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
 import { Popup } from 'decentraland-ui/dist/components/Popup/Popup'
 import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
 
@@ -46,6 +47,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
     isDismissClicked: false,
     isPopUpDismissed: false,
   })
+  const isMobile = useMobileMediaQuery()
 
   useEffect(
     () =>
@@ -101,7 +103,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
                     {showDot && <Dot />}
                   </Tabs.Tab>
                 }
-                open={showDot && !dismissState.isPopUpDismissed}
+                open={!isMobile && showDot && !dismissState.isPopUpDismissed}
               />
             </Link>
           )}

diff --git a/src/components/Status/StatusPill.css b/src/components/Status/StatusPill.css
@@ -0,0 +1,3 @@
+.StatusPill {
+  display: flex;
+}
diff --git a/src/components/Status/StatusPill.tsx b/src/components/Status/StatusPill.tsx
@@ -2,14 +2,16 @@ import React from 'react'
 
 import classNames from 'classnames'
 import { Link } from 'decentraland-gatsby/dist/plugins/intl'
-import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
+import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
 
 import { ProposalStatus } from '../../entities/Proposal/types'
 import { getProposalStatusDisplayName, getProposalStatusShortName } from '../../entities/Proposal/utils'
 import locations from '../../utils/locations'
 import Pill, { PillColor, Props as PillProps } from '../Common/Pill'
 import Check from '../Icon/Check'
 
+import './StatusPill.css'
+
 type Props = {
   className?: string
   status: ProposalStatus
@@ -29,33 +31,29 @@ const ColorsConfig: Record<ProposalStatus, PillColor> = {
 }
 
 const StatusPill = ({ className, status, size, isLink }: Props) => {
+  const isMobile = useMobileMediaQuery()
+
   const style = status === (ProposalStatus.Enacted || ProposalStatus.OutOfBudget) ? 'shiny' : 'outline'
-  const pillClassNames = classNames('StatusPill', className)
-  const colorsConfig = ColorsConfig[status]
   const showIcon = status === ProposalStatus.Enacted || status === ProposalStatus.Passed
   const iconColor = status === ProposalStatus.Enacted ? 'var(--white-900)' : 'var(--green-800)'
   const icon = showIcon ? <Check color={iconColor} /> : null
-
   const Wrapper = isLink ? Link : 'div'
   const href = isLink ? locations.proposals({ status: status }) : undefined
+  const name = isMobile ? getProposalStatusShortName(status) : getProposalStatusDisplayName(status)
+  const pillSize = isMobile ? 'small' : size || 'default'
 
   return (
-    <>
-      <Mobile>
-        <Wrapper href={href}>
-          <Pill size={'small'} style={style} className={pillClassNames} color={colorsConfig} icon={icon}>
-            {getProposalStatusShortName(status)}
-          </Pill>
-        </Wrapper>
-      </Mobile>
-      <NotMobile>
-        <Wrapper href={href}>
-          <Pill size={size || 'default'} style={style} className={pillClassNames} color={colorsConfig} icon={icon}>
-            {getProposalStatusDisplayName(status)}
-          </Pill>
-        </Wrapper>
-      </NotMobile>
-    </>
+    <Wrapper href={href} className="StatusPill">
+      <Pill
+        size={pillSize}
+        style={style}
+        className={classNames('StatusPill', className)}
+        color={ColorsConfig[status]}
+        icon={icon}
+      >
+        {name}
+      </Pill>
+    </Wrapper>
   )
 }
 

diff --git a/src/pages/proposals.css b/src/pages/proposals.css
@@ -8,6 +8,7 @@
 }
 
 .Animated {
+  width: 100%;
   transition: all 0.5s ease 0s;
 }
 

diff --git a/src/pages/transparency.css b/src/pages/transparency.css
@@ -34,13 +34,6 @@
   margin-bottom: 0;
 }
 
-.ui.container.TransparencyContainer {
-  display: flex;
-  justify-content: space-between;
-  align-content: stretch;
-  flex-wrap: wrap;
-}
-
 .ui.container.TransparencyContainer .ActionableLayout {
   position: relative;
   margin-top: 40px;