Settings -> Themes use figure and figcaption elements

dev/Styles/User/SettingsThemes.less

@@ -1,13 +1,14 @@
 
-.b-themes-list {
+#V-Settings-Themes {
 
-	.e-item {
+	figure {
 
 		display: inline-block;
 		border: 2px solid transparent;
 		cursor: pointer;
-		padding: 16px;
+		padding: 8px;
 		margin: 5px;
+		width: 128px;
 
 		&:hover {
 			border-color: grey;
@@ -18,9 +19,13 @@
 			border-color: #000;
 		}
 
-		.e-image {
-			width: 100px;
-			height: 100px;
+		figcaption {
+			padding: 0 0 8px 0;
+			text-align: center;
+		}
+
+		img {
+			height: 128px;
 		}
 	}
 }

snappymail/v/0.0.0/app/templates/Views/User/SettingsThemes.html

@@ -2,11 +2,11 @@
 	<span data-i18n="SETTINGS_THEMES/LEGEND_THEMES"></span>
 	<span data-bind="saveTrigger: themeTrigger"></span>
 </div>
-<div class="b-themes-list" data-bind="foreach: themesObjects">
-	<div class="e-item" data-bind="click: function () { $root.theme(name); }, css: { 'selected': selected }">
-		<div class="e-name" data-bind="text: nameDisplay"></div>
-		<img class="e-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-bind="attr: { 'src': themePreviewSrc }" />
-	</div>
+<div data-bind="foreach: themesObjects">
+	<figure data-bind="click: function () { $root.theme(name); }, css: { 'selected': selected }">
+		<figcaption data-bind="text: nameDisplay"></figcaption>
+		<img data-bind="attr: { 'src': themePreviewSrc }" />
+	</figure>
 </div>
 <br />
 <br />