Update styles on import (hyperledger-archives#2010)

Made images all the same size on deploy Made border wider on selection contributes to hyperledger/composer#1930
davesocha · Aug 25, 2017 · aa3cfa9 · aa3cfa9
1 parent 9f4fdb2
commit aa3cfa9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/composer-playground/src/app/import/deploy.component.scss b/packages/composer-playground/src/app/import/deploy.component.scss
@@ -78,7 +78,7 @@ deploy-business-network {
 
                     .sample-network-list-item {
                         background-color: $white;
-                        border: 1px solid $fourth-highlight;
+                        border: 2px solid $fourth-highlight;
                         padding: $space-smedium;
                         text-align: center;
                         margin-right: $space-smedium;
@@ -88,15 +88,27 @@ deploy-business-network {
                         flex-direction: column;
                         justify-content: flex-end;
                         position: relative;
-                        height: 227px;
 
                         img {
-                            height: 150px;
-                            width: 132px;
+                            max-width: 120px;
+                            margin-left: auto;
+                            margin-top: 2rem;
+                            margin-right: auto;
+                            margin-bottom: auto;
+                            max-height: 70px;
+                        }
+
+                        svg {
+                            max-width: 120px;
+                            margin-left: auto;
+                            margin-top: 2rem;
+                            margin-right: auto;
+                            margin-bottom: auto;
+                            max-height: 70px;
                         }
 
                         &.file-importer {
-                            height: 227px;
+                            height: 182px;
 
                             svg.ibm-icon {
                                 width: 100px;
@@ -124,8 +136,8 @@ deploy-business-network {
 
                         button.close-dropped {
                             position: absolute;
-                            top: -16px;
-                            right: -12px;
+                            top: -44px;
+                            right: -11px;
 
                             svg {
                                 fill: $first-highlight;

diff --git a/packages/composer-playground/src/app/import/update.component.scss b/packages/composer-playground/src/app/import/update.component.scss
@@ -67,7 +67,7 @@ update-business-network {
 
                     .sample-network-list-item {
                         background-color: $white;
-                        border: 1px solid $fourth-highlight;
+                        border: 2px solid $fourth-highlight;
                         padding: $space-smedium;
                         text-align: center;
                         margin-right: $space-smedium;