#593 - refactor: moved css rules for image select to separate file

src/main/resources/static/css/accounts.css

-#account-icon {
-    margin-top: 3rem;
-    justify-content: center;
-}
-
-#item-icon-preview {
-    text-align: center;
-    border: 2px solid var(--color-text);
-    padding: 1rem;
-    color: var(--color-text);
-}
-
-.button-remove-icon-from-item {
-    margin-left: 1rem;
-}
-
-.button-remove-icon-from-item i {
-    font-size: 1.8rem;
-}
-
-.item-icon-option-column {
-    text-align: center;
-    margin-bottom: 1.5rem;
-}
-
-.item-icon-option {
-    padding: 0.5rem;
-    border: 2px solid transparent;
-}
-
-.item-icon-option:hover {
-    cursor: pointer;
-}
-
-.item-icon-option.selected {
-    border: 2px solid var(--color-text);
-}
-
-.item-icon-preview-icon {
-    height: 5rem;
-}
-
-#item-icon-preview:hover {
-    cursor: pointer;
-}
-
-.item-icon-preview  {
-    height: 5rem;
-}
-
 .account-select-icon {
     height: 34px;
     width: 34px;
@@ -57,19 +7,3 @@
     border: 3px solid var(--color-blue);
     line-height: 28px !important;
 }
-
-.item-icon-option-delete span {
-    display: none;
-}
-
-.item-icon-option-delete i.left {
-    margin-right: 0;
-}
-
-.item-icon-option-delete-confirm {
-    color: var(--color-red) !important;
-}
-
-.item-icon-option-delete-confirm span {
-    display: inline-block;
-}

src/main/resources/static/css/imageSelect.css

+.item-icon {
+    margin-top: 3rem;
+    justify-content: center;
+}
+
+#item-icon-preview {
+    text-align: center;
+    border: 2px solid var(--color-text);
+    padding: 1rem;
+    color: var(--color-text);
+}
+
+.button-remove-icon-from-item {
+    margin-left: 1rem;
+}
+
+.button-remove-icon-from-item i {
+    font-size: 1.8rem;
+}
+
+.item-icon-option-column {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.item-icon-option {
+    padding: 0.5rem;
+    border: 2px solid transparent;
+}
+
+.item-icon-option:hover {
+    cursor: pointer;
+}
+
+.item-icon-option.selected {
+    border: 2px solid var(--color-text);
+}
+
+.item-icon-preview-icon {
+    height: 5rem;
+}
+
+#item-icon-preview:hover {
+    cursor: pointer;
+}
+
+.item-icon-preview  {
+    height: 5rem;
+}
+
+.item-icon-option-delete span {
+    display: none;
+}
+
+.item-icon-option-delete i.left {
+    margin-right: 0;
+}
+
+.item-icon-option-delete-confirm {
+    color: var(--color-red) !important;
+}
+
+.item-icon-option-delete-confirm span {
+    display: inline-block;
+}
\ No newline at end of file

src/main/resources/templates/accounts/newAccount.ftl

@@ -10,6 +10,7 @@
         </#if>
 
         <@header.header "BudgetMaster - ${title}"/>
+        <@header.style "imageSelect"/>
         <#import "/spring.ftl" as s>
     </head>
     <@header.body>

src/main/resources/templates/helpers/imageSelect.ftl

@@ -7,7 +7,7 @@
             <i class="fas fa-icons prefix"></i>
             <label class="input-label" for="${id}">${locale.getString("account.new.label.icon")}</label>
 
-            <div id="${id}" class="valign-wrapper">
+            <div id="${id}" class="valign-wrapper item-icon">
                 <a id="item-icon-preview" data-url="<@s.url '/media/getAvailableImages'/>">
                     <img id="item-icon-preview-icon" src="<#if item.getIcon()??>${item.getIcon().getBase64EncodedImage()}</#if>" class="item-icon-preview <#if item.getIcon()?? == false>hidden</#if>"/>
                     <div id="item-icon-placeholder" class="<#if item.getIcon()??>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>