fix: CSS tweaks, multiple variants indicator

app/controllers/themes_controller.rb

@@ -49,7 +49,6 @@ def show
                        name: @theme.radical,
                        description: @theme.description.present? && ": #{@theme.description}"
 
-    @multi = @theme.variants.length > 1
     @screenshot = @variant.screenshots.find_by(mode: @mode)
     @url = @theme.url.nil? ? "https://melpa.org/#/#{@theme.name}" : @theme.url
   end

app/models/theme.rb

@@ -112,6 +112,10 @@ def capture_artifacts!(new_attrs)
     end
   end
 
+  def multi?
+    variants.count > 1
+  end
+
   def thumbnail
     @lisp = Mode.find_by(name: 'Lisp')
     variants.first.screenshots.find_by(mode: @lisp)

app/views/application/_footer.html.haml

@@ -1,4 +1,4 @@
-.footer.bg-gray-900.text-gray-300.text-sm.p-6
+.footer.bg-gray-900.text-gray-300.text-sm.p-6.mt-6
   .container.mx-auto
     %p
       PeachMelpa is open-source. Please consider

app/views/application/_header.html.haml

@@ -2,4 +2,3 @@
   .brand.flex.justify-center.space-x-3
     %h1.font-bold.text-xl= link_to 'Peach Melpa', root_path
     .logo.h-8.w-8= image_tag 'logo.png', { alt: "PeachMelpa logo" }
-  %h2.text-lg.text-gray-600.my-1= @header

app/views/components/_button.html.haml

@@ -1,2 +1,2 @@
-%a.inline-block.transform.transition-all.hover:bg-white.hover:scale-105.hover:rotate-1.hover:text-black.text-gray-600.p-4.shadow-md.mr-5.bg-gray-50.rounded-md{href: link}
+%a.inline-block.transform.transition-all.hover:bg-white.hover:scale-105.hover:rotate-1.hover:text-black.text-gray-600.p-4.shadow-md.bg-gray-50.rounded-md{href: link}
   = text

app/views/themes/index.html.haml

@@ -7,13 +7,16 @@
       .theme.group.transform.hover:scale-105.hover:-rotate-1.transition-all.hover:shadow-xl.rounded-t-md.overflow-hidden.shadow-md.sm:w-full.m-6{class: "lg:w-1/5 md:w-1/4"}
         = link_to theme do
           %img{src: url_for(theme.preview), alt: "preview for #{theme.name}"}
-          .meta.py-6.bg-white
+          .meta.py-6.bg-white.h-full
             .px-6
               %span= theme.radical
               .text-xs.text-gray-500
                 updated
                 = time_ago_in_words(theme.updated_at)
                 ago
+              - if theme.multi?
+                %span.text-xs.text-gray-800
+                  multiple variants ⭐
 .pagination.my-6.text-center
   - if @previous
     = render partial: "components/button", locals: { link: @previous, text: "⟵ Previous page" }

app/views/themes/show.html.haml

@@ -1,31 +1,25 @@
-.theme{data: { controller: 'theme' }}
-  %h3.description
-    = link_to @theme.description, @url, { class: "link" }
-  %section.variants
-    .modes.selector
+.theme.p-4{data: { controller: 'theme' }}
+  %h2.text-2xl= @theme.name
+  %h3.text-lg=@theme.description
+  = link_to @url, @url, class: "underline text-sm text-gray-600 hover:text-black"
+
+  %section
+    .modes.selector.container.mx-auto.py-4
       - if @previous_mode
-        = link_to "⟵", theme_path(@theme, lang: @previous_mode.extension, variant: @variant), class: 'button'
-      - else
-        = link_to "⟵", "#", { class: 'disabled button' }
-      %h3.mode.button= @mode.name
+        = render 'components/button', link: theme_path(@theme, lang: @previous_mode.extension, variant: @variant), text: "⟵"
+      %h3.inline-block.text-lg.p-4=@mode.name
       - if @next_mode
-        = link_to "⟶", theme_path(@theme, lang: @next_mode.extension, variant: @variant), class: 'button'
-      - else
-        %a.button.disabled
-          ⟶
-    - if @multi
-      .variants.selector
+        = render 'components/button', link: theme_path(@theme, lang: @next_mode.extension, variant: @variant), text: "⟶"
+
+    - if @theme.multi?
+      .modes.selector.container.mx-auto.py-4
         - if @previous
-          = link_to "⟵", theme_path(@theme, variant: @previous, lang: @mode.extension), class: 'button'
-        - else
-          = link_to "⟵", "#", { class: 'disabled button' }
-        %h3.name.button= @variant.name
+          = render 'components/button', link: theme_path(@theme, variant: @previous, lang: @mode.extension), text: "⟵"
+        %h3.inline-block.text-lg.p-4= @variant.name
         - if @next
-          = link_to "⟶", theme_path(@theme, variant: @next, lang: @mode.extension), class: 'button'
-        - else
-          %a.button.disabled
-            ⟶
-    .gallery{data: { target: 'theme.gallery'}}
-      %img{src: url_for(@screenshot.image)}
+          = render 'components/button', link: theme_path(@theme, variant: @next, lang: @mode.extension), text: "⟶"
+
+    %img.rounded{src: url_for(@screenshot.image)}
 
-= link_to '⟵ Back', themes_path, { class: 'button back' }
+.container.mx-auto.text-center
+  = render 'components/button', link: themes_path, text: '⟵ Back'