Show preview of colours in theme selection

Author: fbacall

app/assets/stylesheets/application.scss

@@ -1049,6 +1049,24 @@ td.day .calendar-text {
   }
 }
 
+.theme-selector {
+  display: flex;
+  gap: 10px
+}
+
+.theme-select-option {
+  flex-grow: 1;
+  label {
+    border: 5px solid;
+    padding: 10px 20px;
+    border-radius: 5px;
+    display: block;
+
+    hr {
+      border-width: 10px;
+    }
+  }
+}
 .btn-oidc-only {
   font-size: 36px;
   padding: 4px;

app/views/spaces/_form.html.erb

@@ -7,7 +7,7 @@
 
   <%= f.input :description, as: :markdown_area, input_html: { rows: '10' } %>
 
-  <%= f.input :theme, collection: TeSS::Config.themes.keys, selected: @space.theme || 'default' %>
+  <%= render partial: 'theme_selector', locals: { form: f } %>
 
   <div class="form-group">
     <%= render partial: 'common/image_form', locals: { form: f } %>

app/views/spaces/_theme_selector.html.erb

@@ -0,0 +1,18 @@
+<div class="form-group">
+  <label>Theme</label>
+  <div class="theme-selector">
+    <% TeSS::Config.themes.each do |theme, colours| %>
+      <% id = "space_theme_#{theme}" %>
+      <% primary = colours['primary'] %>
+      <% secondary = colours['secondary'] %>
+      <div class="theme-select-option">
+        <%= label_tag(id, class: 'radio_buttons optional', style: "border-color: #{primary};") do %>
+          <%= form.radio_button(:theme, theme, id: id) %>
+          <%= theme.titleize %>
+          <hr style="border-color: <%= primary %>">
+          <hr style="border-color: <%= secondary %>">
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>