UI improvements

app.js

@@ -424,6 +424,18 @@ console.log(self.storages);
 				}
 			});
 
+			template.on('click', '.storage-logo', function(e) {
+				e.preventDefault();
+				var $selectedLogo = $(this).closest('.storage-logo');
+				var storageType = $selectedLogo.data('type');
+				$('.storage-logo').removeClass('storage-logo-selected'); //hide all storage forms
+				$selectedLogo.addClass('storage-logo-selected');
+				$('.js-tab-content-item').hide(); //hide all storage forms
+				var $displayedStorageForm = $('#'+storageType+'-new-item-content');
+				//$displayedStorageForm.show();
+				$displayedStorageForm.slideDown(400, function(){});
+			});
+
 			template.on('click', '.js-set-default-storage', function(e) {
 				e.preventDefault();
 				var uuid = $(this).closest('.js-storage-item').data('uuid');
@@ -466,9 +478,11 @@ console.log(self.storages);
 
 			self.storageManagerNewItemBind(template);
 
+
 			$('.js-storage-items').append(template);
 			$('.js-new-storage-item').hide().slideDown(400, function(){});
 			$('.js-new-storage-tabs').tabs();
+			$('.js-tab-content-item').hide(); //hide all storage forms
 		},
 
 		storageManagerNewItemBind: function(template) {

style/app.css

@@ -96,6 +96,23 @@
     .storage-manager-wrapper .storage-provider-wrapper .storage-item-settings > .row-fluid {
       border-top: 1px solid #D0D0D9;
       padding-top: 18px; }
+
+    .storage-logo-container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+	}
+    .storage-logo {
+		border: 1px solid #DDDDDD;
+		text-align: center;
+		flex: 1 1 33.33%;
+		background: #D0D0D9;
+	}
+    .storage-logo-selected {
+		background: #FFF;
+	}
+
   .storage-manager-wrapper .storage-choice {
     background: #FFF;
     border: 1px solid #D0D0D9;

style/app.scss

@@ -91,6 +91,24 @@
 		margin-top: 5px;
 	}
 
+    .storage-logo-container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+	}
+
+    .storage-logo {
+		border: 1px solid #DDDDDD;
+		text-align: center;
+		flex: 1 1 33.33%;
+		background: #D0D0D9;
+	}
+
+    .storage-logo-selected {
+		background: #FFF;
+	}
+
 	.storage-choice .logo-header {
 		display: inline-block;
 		vertical-align: top;

views/new-item.html

@@ -3,15 +3,15 @@
 		<div class="storage-item-settings">
 			<div class="js-new-storage-tabs">
 				{{#if storages.length}}
-					<ul>
+					<div class="storage-logo-container">
 					{{#each storages}}
-						<li>
+					<div class="storage-logo" data-type="{{type}}">
 							<a href="#{{ type }}-new-item-content" class="storage-item-logo">
 								{{{ logo }}}
 							</a>
-						</li>
+						</div>
 					{{/each}}
-					</ul>
+					</div>
 					<div class="tab-content">
 					{{#each storages}}
 						<div class="js-tab-content-item {{ type }} tab-content-item" data-type="{{ type }}" id="{{ type }}-new-item-content">