Ability to delete a theme.

app/assets/stylesheets/styles.css

@@ -805,7 +805,7 @@ input[type="email"] {
   }
 
   .tag.active {
-    background-color: var(--color-green);
+    background-color: var(--color-medium-black);
     border: 3px solid var(--color-medium-black);
   }
 
@@ -835,6 +835,7 @@ input[type="email"] {
     float: left;
     min-width: 2rem;
     margin: 0 1rem 1rem 0;
+    border: 3px solid var(--color-red);
     float: right;
   }
 

app/controllers/themes_controller.rb

@@ -4,6 +4,10 @@ def index
     @themes = Theme.all.order(&:name)
   end
 
+  def new
+    @theme = Theme.new
+  end
+
   def show
     @contexts = Theme::CONTEXTS
     @theme = Theme.find(params[:id])
@@ -16,16 +20,22 @@ def create
     redirect_to @theme
   end
 
+  def destroy
+    @theme = Theme.find(params[:id])
+    @theme.destroy
+    redirect_to themes_path
+  end
+
   def update
     @theme = Theme.find(params[:id])
-    new_category_ids = theme_params[:categories].split(/[\,\s]/)    
+    new_category_ids = theme_params[:categories].split(/[\,\s]/)
     update_kind = @theme.categories.length == new_category_ids.length ? "metadata" : "category"
 
     if theme_params[:categories]
       categories = Category.where(id: new_category_ids)
       @theme.categories = categories
     end
-    
+
     @theme.name = theme_params[:name]
     @theme.description = theme_params[:description]
     @theme.notes = theme_params[:notes]

app/views/shared/_header.html.erb

@@ -2,11 +2,11 @@
   <a href="/"><img class="logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjcuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyOTQuOSA5NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTQuOSA5NS43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBjbGFzcz0ic3QwIj4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNC4zLDM0LjZ2MTRjMCwyLDAuMywzLjQsMC45LDQuMmMwLjYsMC44LDEuNywxLjIsMy4yLDEuMkgyNHY3LjJoLTUuN2MtMy40LDAtNi0wLjQtOC0xLjIKCQljLTEuOS0wLjgtMy4zLTIuMS00LjItNGMtMC45LTEuOC0xLjMtNC4zLTEuMy03LjVWMjIuMWMwLTEuMy0wLjMtMi40LTAuOC0zLjJzLTEuNC0xLjctMi43LTIuN2w2LjMtNS41YzIuNCwxLjIsNC4yLDIuNyw1LjEsNC4zCgkJYzEsMS42LDEuNCwzLjksMS40LDYuN3Y1LjVIMjR2Ny4ySDE0LjN6Ii8+CjwvZz4KPGcgY2xhc3M9InN0MCI+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNzcuNywyOS41YzEuOCwyLDIuOCw0LjksMi44LDguNnYyM2gtOS40VjM5YzAtMS42LTAuNC0yLjktMS4xLTMuOWMtMC43LTEtMS44LTEuNC0zLjEtMS40CgkJYy0yLjgsMC00LjksMS44LTYuMyw1LjR2MjIuMWgtOS40VjM5YzAtMS42LTAuNC0yLjktMS4xLTMuOWMtMC43LTEtMS44LTEuNC0zLjEtMS40Yy0yLjgsMC00LjksMS44LTYuMyw1LjR2MjIuMWgtOS40VjM3LjgKCQljMC0xLjMtMC4zLTIuNC0wLjgtMy4yYy0wLjUtMC44LTEuNC0xLjctMi43LTIuN2w2LjMtNS41YzIuOSwxLjQsNC44LDMuMiw1LjcsNS41YzIuMy0zLjYsNS41LTUuNSw5LjktNS41YzIuNCwwLDQuNCwwLjUsNi4xLDEuNQoJCWMxLjcsMSwyLjksMi40LDMuNiw0LjNjMi4yLTMuOCw1LjUtNS44LDEwLjEtNS44QzczLjEsMjYuNSw3NS44LDI3LjUsNzcuNywyOS41eiIvPgo8L2c+CjxnIGNsYXNzPSJzdDAiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTkwLjQsMjEuMmMtMS4xLTEuMS0xLjYtMi4zLTEuNi0zLjhjMC0xLjQsMC41LTIuNywxLjYtMy44YzEuMS0xLjEsMi4zLTEuNiwzLjgtMS42YzEuNCwwLDIuNywwLjUsMy44LDEuNgoJCXMxLjYsMi4zLDEuNiwzLjhjMCwxLjUtMC41LDIuOC0xLjYsMy44Yy0xLjEsMS4xLTIuMywxLjYtMy44LDEuNkM5Mi44LDIyLjgsOTEuNSwyMi4zLDkwLjQsMjEuMnogTTkxLDU3LjhjLTEtMS42LTEuNC0zLjktMS40LTYuNwoJCVYyNy40aDkuNHYyMy40YzAsMS4zLDAuMywyLjQsMC44LDMuMmMwLjUsMC44LDEuNCwxLjcsMi43LDIuN2wtNi4zLDUuNUM5My43LDYwLjgsOTIsNTkuNCw5MSw1Ny44eiIvPgo8L2c+CjxnIGNsYXNzPSJzdDAiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE3OCwyOC4yaDIuMmw3LjMsMzJjMC43LDAsMS4zLTAuMywxLjgtMC42YzAuNS0wLjQsMC44LTAuOSwxLjEtMS44bDguMy0yNmw4LjIsMjZjMC4zLDAuOCwwLjcsMS40LDEuMSwxLjgKCQljMC41LDAuNCwxLDAuNiwxLjgsMC42bDcuMy0zMmgyLjJMMjExLjQsNjJoLTEuMmMtMS4zLDAtMi40LTAuMy0zLjMtMC45Yy0wLjktMC42LTEuNS0xLjQtMS44LTIuNEwxOTguNiwzOGwtNi41LDIwLjcKCQljLTAuMywxLjEtMC45LDEuOS0xLjgsMi40Yy0wLjksMC42LTIsMC45LTMuMywwLjloLTEuMkwxNzgsMjguMnoiLz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yNTAuOCw1Ni40bDEuNSwxLjRjLTIuOSwzLjMtNy4xLDUtMTIuNiw1Yy00LjgsMC04LjUtMS0xMC44LTNjLTIuNC0yLTMuNi01LTMuNi05VjM5LjQKCQljMC0zLjcsMS4yLTYuNiwzLjYtOC43YzIuNC0yLjEsNS43LTMuMiw5LjgtMy4yYzQuNSwwLDcuOSwxLjEsMTAuMiwzLjJzMy41LDUuMywzLjUsOS40YzAsMi40LTAuNSw0LTEuNSw0LjkKCQljLTEsMC45LTIuOCwxLjQtNS40LDEuNGgtMTguMXY0LjRjMCwzLjQsMSw1LjksMyw3LjZjMiwxLjcsNS4xLDIuNSw5LjIsMi41QzI0NC40LDYwLjksMjQ4LjEsNTkuNCwyNTAuOCw1Ni40eiBNMjMwLjUsMzIuMQoJCWMtMiwxLjgtMy4xLDQuMy0zLjEsNy4zdjUuMWgxOC4xYzEuOCwwLDMuMS0wLjMsMy43LTAuOWMwLjYtMC42LDEtMS44LDEtMy41YzAtMy41LTEtNi4yLTMtOGMtMi0xLjgtNC44LTIuOC04LjUtMi44CgkJQzIzNS4zLDI5LjMsMjMyLjUsMzAuMywyMzAuNSwzMi4xeiIvPgo8L2c+CjxnIGNsYXNzPSJzdDAiPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI2OC44LDYxLjFjLTIuMS0xLjEtMy43LTIuNy00LjgtNC43VjYyaC0yLjJWMTUuM2MwLTAuNy0wLjEtMS4yLTAuMy0xLjZjLTAuMi0wLjQtMC42LTAuOS0xLjItMS40bDEuNC0xLjMKCQljMC45LDAuNSwxLjUsMS4xLDEuOCwxLjhjMC4zLDAuNywwLjUsMS43LDAuNSwyLjl2MTguMWMxLjItMi4xLDIuOC0zLjYsNC44LTQuN2MyLjEtMS4xLDQuNS0xLjYsNy4yLTEuNmMyLjksMCw1LjQsMC43LDcuNiwyLjEKCQljMi4yLDEuNCwzLjksMy4zLDUuMSw1LjhjMS4yLDIuNSwxLjgsNS40LDEuOCw4LjZ2Mi4zYzAsMy4zLTAuNiw2LjEtMS44LDguNmMtMS4yLDIuNS0yLjksNC40LTUuMSw1LjhjLTIuMiwxLjQtNC44LDIuMS03LjYsMi4xCgkJQzI3My4yLDYyLjgsMjcwLjgsNjIuMiwyNjguOCw2MS4xeiBNMjg1LDU2LjljMi4zLTIuNywzLjQtNi4yLDMuNC0xMC42VjQ0YzAtNC40LTEuMS04LTMuNC0xMC42Yy0yLjMtMi43LTUuMy00LTktNAoJCWMtMy4zLDAtNS44LDAuNy03LjcsMi4yYy0xLjksMS41LTMuMywzLjYtNC4zLDYuNHYxNC4zYzEsMi44LDIuNCw0LjksNC4zLDYuNGMxLjksMS41LDQuNCwyLjIsNy43LDIuMgoJCUMyNzkuNyw2MC45LDI4Mi43LDU5LjUsMjg1LDU2Ljl6Ii8+CjwvZz4KPHBhdGggY2xhc3M9InN0MSIgZD0iTTE0MCwxMS4xYy0xNy43LDAtMzIsMTQuMy0zMiwzMnMxNC4zLDMyLDMyLDMyczMyLTE0LjMsMzItMzJTMTU3LjYsMTEuMSwxNDAsMTEuMXogTTE1OC43LDQ4bDMuNC0zLjRoLTE4LjcKCWw3LjUsNy41di00LjlsMi45LDIuOVY1N2gtNi45TDE0NCw1NGg0LjlsLTcuNS03LjV2MTguN2wzLjQtMy40VjY2bC00LjksNC45bC00LjktNC45di00LjJsMy40LDMuNFY0Ni42bC03LjQsNy40aDQuOWwtMi45LDIuOQoJaC02Ljl2LTYuOWwyLjktMi45VjUybDcuNS03LjVoLTE4LjhsMy40LDMuNGgtNC4ybC00LjktNC45bDQuOS00LjloNC4ybC0zLjQsMy40aDE4LjdsLTcuNC03LjR2NC45bC0yLjktMi45di02LjloNi45bDIuOSwyLjloLTQuOQoJbDcuNCw3LjRWMjAuOWwtMy40LDMuNHYtNC4xbDQuOS00LjlsNC45LDQuOXY0LjFsLTMuNC0zLjR2MTguOGw3LjUtNy41SDE0NGwyLjktMi45aDYuOXY2LjlsLTIuOSwyLjl2LTQuOWwtNy40LDcuNGgxOC42bC0zLjQtMy40CgloNC4xbDQuOSw0LjlsLTQuOSw0LjlMMTU4LjcsNDhMMTU4LjcsNDh6Ii8+Cjwvc3ZnPgo=" alt="The tmi-web logo, which featyres the words 'tmi' and 'web' separated by an eight-pointed arrow/star shape inside a circle." /></a>
    <nav>
     <ul>
-      <li><a href="/survey_responses">Responses</a></li>
-      <li><a href="/codebooks">Codebook</a></li>
       <li><a href="/themes">Themes</a></li>
-      <li><a href="/survey_responses/new">Upload</a></li>
+      <li><a href="/codebooks">Codebooks</a></li>
+      <li><a href="/survey_responses">Responses</a></li>
       <li><a href="/stats">Statistics</a></li>
+      <li><a href="/survey_responses/new">Upload</a></li>
       <li><a href="/about">About</a></li>
     </ul>
   </nav>

app/views/themes/index.html.erb

@@ -1,18 +1,14 @@
 <%- title "Themes" %>
 
 <h1>Explore Themes.</h1>
-
-<h2>Themes</h2>
 <div class="tag-collection">
   <% @themes.each do |theme| %>
       <%= link_to theme_path(theme.id) do %>
         <div class="tag zoom-link-light"><%= theme.name %></div>
       <% end %>
   <% end %>
+  <%= link_to new_theme_path do %>
+    <div class="tag-button">New Theme</div>
+  <% end %>
 </div>
 
-<h2>Create a New Theme</h2>
-<%= form_with model: Theme.new, data: { turbo_frame: "tag-collection" } do |f| %>
-  <%= f.text_field :name %>
-  <%= f.submit "Add Theme" %>
-<% end %>

app/views/themes/new.html.erb

@@ -0,0 +1,19 @@
+<%- title "New Theme" %>
+
+<h1>Add a Theme</h1>
+
+<%= form_with model: @theme do |f| %>
+  <fieldset>
+  <%= label :name, "Name" %>
+  <%= f.text_field :name %>
+  </fieldset>
+  <fieldset>
+  <%= label :description, "Description" %>
+  <%= f.text_area :description  %>
+  </fieldset>
+  <fieldset>
+  <%= label :notes, "Notes" %>
+  <%= f.text_area :notes  %>
+  </fieldset>
+  <%= f.submit "Create" %>
+<% end %>

app/views/themes/show.html.erb

@@ -1,14 +1,16 @@
 <%- title "Themes" %>
 
-<h1><%= @theme.name %></h1>
+<h1>Theme: "<%= @theme.name %>"</h1>
 
 <%= render partial: "form", locals: { theme: @theme, success: nil, update_kind: nil } %>
 
+<h2>Categories</h2>
+<p>Categories related to this theme are are highlighted in black below. Click to add or remove a category from this theme. Changes are saved automatically.</p>
+
 <% @contexts.each do |context| %>
   <% contextual_categories = @categories.select{ |c| c.context == context[0] } %>
   <% if contextual_categories.any? %>
-    <h2><%= context[1] %> Categories</h2>
-      <p>Associated categories are highlighted in black. Click to add or remove a category from this theme. Changes are saved automatically.</p>
+    <h3><%= context[1] %></h3>
       <div class="tag-collection">
         <% contextual_categories.sort_by(&:name).each do |category| %>
           <% is_selected = @theme.categories.include? category %>
@@ -22,6 +24,8 @@
   <% end %>
 <% end %>
 
+<%= button_to "Delete This Theme", theme_path(@theme), form: { data: { turbo_confirm: "Are you sure?" } }, method: :delete %>
+
 <%= render partial: "/shared/filtering" %>
 
 <script language="javascript">