From fa515dc7462b2ffaad51ca81f9faa71215b449db Mon Sep 17 00:00:00 2001
From: Chris Berry <anotherchrisberry@gmail.com>
Date: Wed, 19 Jun 2019 09:46:29 -0500
Subject: [PATCH] fix(core): do not stretch provider logos in selection modal
 (#7128)

---
 .../providerSelection/ProviderSelectionModal.tsx  | 15 +++++++++------
 app/scripts/modules/core/src/modal/modals.less    |  3 +++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx b/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
index 450d7e345ad..fb991a0e2ce 100644
--- a/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
+++ b/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
@@ -54,12 +54,15 @@ export class ProviderSelectionModal extends React.Component<
                 key={provider}
                 onClick={() => this.setProvider(provider)}
               >
-                <img
-                  src={CloudProviderRegistry.getValue(provider, 'logo.path')}
-                  alt={provider}
-                  width="170px"
-                  height="65px"
-                />
+                {CloudProviderRegistry.hasValue(provider, 'logo.path') && (
+                  <img
+                    src={CloudProviderRegistry.getValue(provider, 'logo.path')}
+                    alt={provider}
+                    width="100%"
+                    height="auto"
+                  />
+                )}
+                {!CloudProviderRegistry.hasValue(provider, 'logo.path') && <h3 className="card-label">{provider}</h3>}
               </div>
             ))}
           </div>
diff --git a/app/scripts/modules/core/src/modal/modals.less b/app/scripts/modules/core/src/modal/modals.less
index 1168f8eddaf..95caef45872 100644
--- a/app/scripts/modules/core/src/modal/modals.less
+++ b/app/scripts/modules/core/src/modal/modals.less
@@ -326,6 +326,7 @@ abbr.select2-search-choice-close {
 .card-choices {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
   .card {
     border: 1px solid var(--color-alto);
     border-radius: 2px;
@@ -333,6 +334,8 @@ abbr.select2-search-choice-close {
     margin: 15px;
     padding: 30px 15px;
     cursor: pointer;
+    display: flex;
+    align-items: center;
     &.active {
       border: 1px solid var(--color-accent);
       background-color: var(--color-accent-g2);