From a38eb515b74f932b33b3ab37e76a64acc9af6765 Mon Sep 17 00:00:00 2001
From: Daniel <dds2130@rit.edu>
Date: Fri, 19 Nov 2021 18:28:32 -0500
Subject: [PATCH] override icon size

---
 src/components/_mobile/collection/Attack.tsx      | 6 +++---
 src/components/_mobile/collection/Battlegear.tsx  | 6 +++---
 src/components/_mobile/collection/CardBase.tsx    | 4 ++--
 src/components/_mobile/collection/Location.tsx    | 6 +++---
 src/components/_mobile/collection/collection.scss | 7 +++++--
 src/components/_mobile/collection/index.tsx       | 1 +
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/_mobile/collection/Attack.tsx b/src/components/_mobile/collection/Attack.tsx
index 3768c21..e2749f8 100644
--- a/src/components/_mobile/collection/Attack.tsx
+++ b/src/components/_mobile/collection/Attack.tsx
@@ -9,7 +9,7 @@ import { CardBase, CardComponent, Flavor, Unique } from './CardBase';
 const AttackCard: CardBase<Attack> = (props) => {
   const { card } = props;
 
-  const ability = abilityText({ ability: card.gsx$ability });
+  const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
   const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
   const flavor = card.gsx$flavortext;
 
@@ -22,8 +22,8 @@ const AttackCard: CardBase<Attack> = (props) => {
       </>}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
-        <Typography><AttackIcon bp={card.gsx$bp} /> Attack - {card.gsx$bp}</Typography>
+        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Typography><AttackIcon size="icon20" bp={card.gsx$bp} /> Attack - {card.gsx$bp}</Typography>
         <Typography>
           {`${card.gsx$base} | `}
           <ElementIcon element="fire" value={card.gsx$fire} />{`${card.gsx$fire} `}
diff --git a/src/components/_mobile/collection/Battlegear.tsx b/src/components/_mobile/collection/Battlegear.tsx
index a0314ed..ad09b20 100644
--- a/src/components/_mobile/collection/Battlegear.tsx
+++ b/src/components/_mobile/collection/Battlegear.tsx
@@ -8,7 +8,7 @@ import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
 
 const BattlegearCard: CardBase<Battlegear> = (props) => {
   const { card } = props;
-  const ability = abilityText({ ability: card.gsx$ability });
+  const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
   const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
   const flavor = card.gsx$flavortext;
 
@@ -16,8 +16,8 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
     <CardComponent {...props}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
-        <Typography><BattlegearIcon /> Battlegear{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
+        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Typography><BattlegearIcon size="icon20"/> Battlegear{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
       </>}
       right={<>
         <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
diff --git a/src/components/_mobile/collection/CardBase.tsx b/src/components/_mobile/collection/CardBase.tsx
index f7568f4..46da116 100644
--- a/src/components/_mobile/collection/CardBase.tsx
+++ b/src/components/_mobile/collection/CardBase.tsx
@@ -40,10 +40,10 @@ export const CardComponent = (
           alt={`${card.gsx$name} thumb`}
           onClick={() => extend(card.gsx$name)}
         />
-        <Box sx={{ display: 'flex', flexDirection: 'column', marginLeft: 1, width: "30%" }}>
+        <Box sx={{ marginLeft: .5, marginRight: .5, minWidth: "242px" }}>
           {left}
         </Box>
-        <Box sx={{ display: 'block' }}>
+        <Box>
           {right}
         </Box>
       </Card>
diff --git a/src/components/_mobile/collection/Location.tsx b/src/components/_mobile/collection/Location.tsx
index c6874ce..94db90e 100644
--- a/src/components/_mobile/collection/Location.tsx
+++ b/src/components/_mobile/collection/Location.tsx
@@ -8,7 +8,7 @@ import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
 
 const LocationCard: CardBase<Location> = (props) => {
   const { card } = props;
-  const ability = abilityText({ ability: card.gsx$ability });
+  const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
   const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
   const flavor = card.gsx$flavortext;
 
@@ -16,8 +16,8 @@ const LocationCard: CardBase<Location> = (props) => {
     <CardComponent {...props}
       left={<>
         <Name name={card.gsx$name} />
-        <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
-        <Typography><LocationIcon /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
+        <RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
+        <Typography><LocationIcon size="icon20" /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
         <Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
       </>}
       right={<>
diff --git a/src/components/_mobile/collection/collection.scss b/src/components/_mobile/collection/collection.scss
index 8e77f8f..c86bd1f 100644
--- a/src/components/_mobile/collection/collection.scss
+++ b/src/components/_mobile/collection/collection.scss
@@ -1,22 +1,25 @@
 .icon14 {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     vertical-align: middle;
 }
 
 .icon16 {
     width: 16px;
     height: 16px;
+    vertical-align: middle;
 }
 
 .icon20 {
     width: 20px;
     height: 20px;
+    vertical-align: middle;
 }
 
 .icon24 {
     width: 24px;
     height: 24px;
+    vertical-align: middle;
 }
 
 .name {
diff --git a/src/components/_mobile/collection/index.tsx b/src/components/_mobile/collection/index.tsx
index 9e5e281..f56de6e 100644
--- a/src/components/_mobile/collection/index.tsx
+++ b/src/components/_mobile/collection/index.tsx
@@ -88,6 +88,7 @@ export default function Collection (_props) {
 
   const handlePerPage = (event: SelectChangeEvent<number>) => {
     sn(event.target.value as number);
+    sp(1);
   };
 
   const handlePage = (event: React.ChangeEvent<unknown>, value: number) => {