From 56a0385e94b190522cb0d08a2382b32f404af4cc Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 22 Dec 2021 15:19:48 -0600
Subject: [PATCH] maintain nft image aspect ratios and center images in
 collection view (#13136)

* maintain nft image aspect ratios and center images in collection view
---
 .../app/collectible-details/index.scss        |  5 +--
 .../collectibles-items/collectibles-items.js  | 20 +++++----
 .../app/collectibles-items/index.scss         | 43 +++++++++++--------
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/ui/components/app/collectible-details/index.scss b/ui/components/app/collectible-details/index.scss
index 424b603f4..53c593b2d 100644
--- a/ui/components/app/collectible-details/index.scss
+++ b/ui/components/app/collectible-details/index.scss
@@ -43,10 +43,7 @@ $spacer-break-small: 16px;
 
   &__image {
     width: 100%;
-
-    @media screen and (min-width: $break-large) {
-      width: $card-width-break-large;
-    }
+    object-fit: contain;
   }
 
   &__address {
diff --git a/ui/components/app/collectibles-items/collectibles-items.js b/ui/components/app/collectibles-items/collectibles-items.js
index eff55a954..6e070a0ee 100644
--- a/ui/components/app/collectibles-items/collectibles-items.js
+++ b/ui/components/app/collectibles-items/collectibles-items.js
@@ -48,7 +48,7 @@ export default function CollectiblesItems({ collections = {} }) {
             const isExpanded = dropdownState[key];
             return (
               <div
-                className="collectibles-items__item"
+                className="collectibles-items__collection"
                 key={`collection-${index}`}
                 onClick={() => {
                   setDropdownState((_dropdownState) => ({
@@ -62,19 +62,19 @@ export default function CollectiblesItems({ collections = {} }) {
                   display={DISPLAY.FLEX}
                   alignItems={ALIGN_ITEMS.CENTER}
                   justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
-                  className="collectibles-items__item__accordion-title"
+                  className="collectibles-items__collection-accordion-title"
                 >
                   <Box
                     alignItems={ALIGN_ITEMS.CENTER}
-                    className="collectibles-items__item__collection-header"
+                    className="collectibles-items__collection-header"
                   >
                     {collectionImage ? (
                       <img
                         src={collectionImage}
-                        className="collectibles-items__item__collection-image"
+                        className="collectibles-items__collection-image"
                       />
                     ) : (
-                      <div className="collectibles-items__item__collection-image-alt">
+                      <div className="collectibles-items__collection-image-alt">
                         {collectionName[0]}
                       </div>
                     )}
@@ -108,9 +108,13 @@ export default function CollectiblesItems({ collections = {} }) {
                         ipfsGateway,
                       );
                       return (
-                        <Box width={width} key={`collectible-${i}`}>
+                        <Box
+                          width={width}
+                          key={`collectible-${i}`}
+                          className="collectibles-items__collection-item-wrapper"
+                        >
                           <div
-                            className="collectibles-items__image__wrapper"
+                            className="collectibles-items__collection-item"
                             style={{
                               backgroundColor,
                             }}
@@ -121,7 +125,7 @@ export default function CollectiblesItems({ collections = {} }) {
                                   `${ASSET_ROUTE}/${address}/${tokenId}`,
                                 )
                               }
-                              className="collectibles-items__image"
+                              className="collectibles-items__collection-item-image"
                               src={collectibleImage}
                             />
                           </div>
diff --git a/ui/components/app/collectibles-items/index.scss b/ui/components/app/collectibles-items/index.scss
index cb786bc99..3e6f500d3 100644
--- a/ui/components/app/collectibles-items/index.scss
+++ b/ui/components/app/collectibles-items/index.scss
@@ -1,33 +1,18 @@
 .collectibles-items {
-  &__image__wrapper {
-    border-radius: 4px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  &__image {
-    border-radius: 4px;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  &__item {
+  &__collection {
     margin-bottom: 24px;
 
-    &__accordion-title {
+    &-accordion-title {
       cursor: pointer;
     }
 
-    &__collection-image {
+    &-image {
       width: 32px;
       height: 32px;
       border-radius: 50%;
     }
 
-    &__collection-image-alt {
+    &-image-alt {
       border-radius: 50%;
       width: 32px;
       height: 32px;
@@ -37,5 +22,25 @@
       text-align: center;
       line-height: 1;
     }
+
+    &-item-wrapper {
+      align-self: center;
+    }
+
+    &-item {
+      border-radius: 4px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-self: center;
+    }
+
+    &-item-image {
+      border-radius: 4px;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
   }
 }