fix(core): do not stretch provider logos in selection modal (#7128)

spinnaker · Jun 19, 2019 · fa515dc · fa515dc
1 parent e9b09fe
commit fa515dc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -326,13 +326,16 @@ 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;
     width: 200px;
     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);