From 3d00580717201cd2f423ba9aba0c28d6e3949746 Mon Sep 17 00:00:00 2001
From: Alex Nisnevich <alex.nisnevich@gmail.com>
Date: Sun, 14 May 2023 22:57:18 -0700
Subject: [PATCH] UI improvements: fix #1850, fix #1851

---
 .../components/cards/CardCollection.tsx       | 22 +++++++++++++------
 src/common/components/cards/CardGrid.tsx      |  7 +++---
 .../components/game/DraftCardPicker.tsx       | 20 ++++++++---------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/common/components/cards/CardCollection.tsx b/src/common/components/cards/CardCollection.tsx
index 37ed29e3..c2300465 100644
--- a/src/common/components/cards/CardCollection.tsx
+++ b/src/common/components/cards/CardCollection.tsx
@@ -46,16 +46,24 @@ export default class CardCollection extends React.Component<CardCollectionProps,
   }
 
   public render(): JSX.Element {
-    const GridOrTable = this.props.layout === 0 ? CardGrid : CardTable;
     return (
       <div style={{ width: '100%' }}>
         {this.renderPageControls()}
-        <GridOrTable
-          selectable
-          cards={this.cards}
-          selectedCardIds={this.props.selectedCardIds}
-          onCardClick={this.onCardClick}
-        />
+        {this.props.layout === Layout.Grid
+          ? <CardGrid
+            selectable
+            cards={this.cards}
+            selectedCardIds={this.props.selectedCardIds}
+            onCardClick={this.onCardClick}
+            scale={1.25}
+          />
+          : <CardTable
+            selectable
+            cards={this.cards}
+            selectedCardIds={this.props.selectedCardIds}
+            onCardClick={this.onCardClick}
+          />
+        }
         {this.renderPageControls()}
       </div>
     );
diff --git a/src/common/components/cards/CardGrid.tsx b/src/common/components/cards/CardGrid.tsx
index 2ea708a1..ae719a99 100644
--- a/src/common/components/cards/CardGrid.tsx
+++ b/src/common/components/cards/CardGrid.tsx
@@ -9,7 +9,7 @@ import Sentence from '../card/Sentence';
 import { CardGridOrTableProps } from './CardCollection';
 import CardProvenanceDescription from './CardProvenanceDescription';
 
-export default class CardGrid extends React.Component<CardGridOrTableProps> {
+export default class CardGrid extends React.Component<CardGridOrTableProps & { scale?: number }> {
   public render(): JSX.Element {
     return (
       <div
@@ -57,13 +57,14 @@ export default class CardGrid extends React.Component<CardGridOrTableProps> {
         source={card.metadata.source}
         selected={this.props.selectable && this.props.selectedCardIds.includes(card.id)}
         onCardClick={this.props.onCardClick}
+        scale={this.props.scale || 1}
       />
       <CardProvenanceDescription
         card={card}
         style={{
-          fontSize: 11,
+          fontSize: 11 * (this.props.scale || 1),
           color: '#888',
-          maxWidth: 140,
+          maxWidth: 140 * (this.props.scale || 1),
           padding: '1px 3px',
           background: `rgba(255, 255, 255, 0.8)`,
           borderRadius: 5
diff --git a/src/common/components/game/DraftCardPicker.tsx b/src/common/components/game/DraftCardPicker.tsx
index 5fb2fedc..d0a9c5f0 100644
--- a/src/common/components/game/DraftCardPicker.tsx
+++ b/src/common/components/game/DraftCardPicker.tsx
@@ -23,7 +23,7 @@ export default class DraftCardPicker extends React.Component<DraftCardPickerProp
   };
 
   public render(): JSX.Element {
-    const { cardGroup, format } = this.props;
+    const { cardGroup } = this.props;
     const { selectedCardIds } = this.state;
 
     return (
@@ -57,16 +57,14 @@ export default class DraftCardPicker extends React.Component<DraftCardPickerProp
                 selected: selectedCardIds.includes(card.id),
                 onCardClick: () => this.handleSelectCard(card)
               })}
-              {format.name === 'everythingDraft' && (
-                <CardProvenanceDescription
-                  disableLinks
-                  card={card}
-                  style={{
-                    color: '#bbb',
-                    fontSize: '0.5em'
-                  }}
-                />
-              )}
+              <CardProvenanceDescription
+                disableLinks
+                card={card}
+                style={{
+                  color: '#bbb',
+                  fontSize: '0.5em'
+                }}
+              />
             </div>
           ))}
         </div>