fix style issues

decentraland · May 3, 2024 · 28957c0 · 28957c0
1 parent 725c5eb
commit 28957c0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/components/CollectionsPage/CollectionCard/CollectionCard.css b/src/components/CollectionsPage/CollectionCard/CollectionCard.css
@@ -1,6 +1,10 @@
 .CollectionCard .content {
   margin-top: 16px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .CollectionCard .content .text {

diff --git a/src/components/CollectionsPage/CollectionsPage.css b/src/components/CollectionsPage/CollectionsPage.css
@@ -179,12 +179,15 @@
 }
 
 .CollectionsPage .collections-main-actions {
-  display: grid;
-  grid-template-columns: 1fr 310px;
+  display: flex;
   gap: 20px;
   margin-top: 20px;
 }
 
+.CollectionsPage .collections-main-actions > :first-child {
+  flex: 1;
+}
+
 .CollectionsPage .dcl.field .collections-search-field.ui.input input {
   padding: 8px;
   background: var(--shadows);
@@ -193,7 +196,8 @@
   font-size: 16px;
 }
 
-.CollectionsPage .collections-main-actions .actions {
+.CollectionsPage .collections-main-actions > .actions {
   align-self: baseline;
   justify-self: end;
+  flex: none;
 }
diff --git a/src/components/CollectionsPage/CollectionsPage.tsx b/src/components/CollectionsPage/CollectionsPage.tsx
@@ -34,7 +34,6 @@ import CollectionRow from './CollectionRow'
 import { Props, TABS } from './CollectionsPage.types'
 import './CollectionsPage.css'
 
-let timeout: NodeJS.Timeout
 const PAGE_SIZE = 20
 export const LOCALSTORAGE_EMOTES_V2_ANNOUCEMENT = 'builder-emotes-2.0-announcement'
 export default class CollectionsPage extends React.PureComponent<Props> {
@@ -45,6 +44,8 @@ export default class CollectionsPage extends React.PureComponent<Props> {
     search: ''
   }
 
+  timeout: ReturnType<typeof setTimeout> | undefined = undefined
+
   componentDidMount() {
     const { address, hasUserOrphanItems, onFetchCollections, onFetchOrphanItem, onOpenModal } = this.props
     // fetch if already connected
@@ -85,10 +86,10 @@ export default class CollectionsPage extends React.PureComponent<Props> {
   handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
     const { onFetchCollections, address } = this.props
     this.setState({ search: data.value })
-    if (timeout) {
-      clearTimeout(timeout)
+    if (this.timeout) {
+      clearTimeout(this.timeout)
     }
-    timeout = setTimeout(() => {
+    this.timeout = setTimeout(() => {
       onFetchCollections(address, { page: 1, limit: PAGE_SIZE, q: data.value })
     }, 500)
   }
@@ -216,7 +217,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
           value={search}
           isClearable
         />
-        <Row className="actions">
+        <Row className="actions" grow={false}>
           {isThirdPartyManager && (
             <Button className="action-button" size="small" basic onClick={this.handleNewThirdPartyCollection}>
               {t('collections_page.new_third_party_collection')}
@@ -298,19 +299,17 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         <EventBanner />
         <div className="filters">
           <Container>
-            <Tabs isFullscreen>
-              {hasUserOrphanItems && (
-                // TODO: Remove tabs when there are no users with orphan items
-                <>
-                  <Tabs.Tab active={this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.COLLECTIONS)}>
-                    {t('collections_page.collections')}
-                  </Tabs.Tab>
-                  <Tabs.Tab active={!this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.ITEMS)}>
-                    {t('collections_page.single_items')}
-                  </Tabs.Tab>
-                </>
-              )}
-            </Tabs>
+            {hasUserOrphanItems && (
+              // TODO: Remove tabs when there are no users with orphan items
+              <Tabs isFullscreen>
+                <Tabs.Tab active={this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.COLLECTIONS)}>
+                  {t('collections_page.collections')}
+                </Tabs.Tab>
+                <Tabs.Tab active={!this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.ITEMS)}>
+                  {t('collections_page.single_items')}
+                </Tabs.Tab>
+              </Tabs>
+            )}
             {this.renderMainActions()}
             <Row height={30}>
               <Column>