bullet_train-themes-tester 1.0

data/app/assets/stylesheets/tester/tailwind/dark-mode.css

@@ -0,0 +1,218 @@
+@layer utilities {
+  @media (prefers-color-scheme: dark) {
+    /**
+     * Color overrides
+     **/
+    .bg-primary-900 {
+      /* TODO We can't really do this. We need to just append a transparency class to these elements. */
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+
+    .bg-dark-gradient {
+      &:before {
+        background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
+      }
+      background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
+    }
+
+    /**
+     * General
+     **/
+    .button {
+      @apply ring-offset-darkPrimary-700;
+    }
+
+    .table {
+      th {
+        @apply text-darkPrimary-400;
+      }
+
+      tbody {
+        @apply border-gray-500;
+
+        tr {
+          border-top: 1px solid theme('colors.darkPrimary.500');
+        }
+
+        td {
+          @apply text-gray-400;
+
+          a,
+          input[type="submit"] {
+            @apply text-darkAccent-200;
+          }
+        }
+      }
+    }
+
+    /**
+     * Form components
+     **/
+    .button-secondary {
+      @apply text-darkAccent-200;
+    }
+
+    .button-alternative {
+      @apply bg-black-400 border-black-400 text-white;
+
+      &:hover {
+        @apply bg-black-300 border-black-200 text-white;
+      }
+    }
+
+    /**
+     * Custom components
+     **/
+    /* Color picker */
+    .pcr-app {
+      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
+
+      .pcr-interaction .pcr-result {
+        @apply text-darkPrimary-300 border border-solid border-darkPrimary-900 bg-darkPrimary-800;
+
+        &:focus {
+          box-shadow: 0 0 0 1px theme('colors.primary.500'), 0 0 0 3px theme('colors.primary.500');
+        }
+      }
+    }
+
+    /* Date range picker */
+    .daterangepicker {
+      @apply bg-darkPrimary-800 border-darkPrimary-900;
+
+      &::before {
+        border-bottom-color: theme('colors.darkPrimary.900');
+      }
+
+      &::after {
+        border-bottom-color: theme('colors.darkPrimary.800');
+      }
+
+      .calendar-table {
+        @apply bg-darkPrimary-800 text-darkPrimary-300;
+
+        /* navigation arrows */
+        .available {
+          span {
+            @apply border-primary-500;
+          }
+        }
+      }
+
+      /* Clear and Apply buttons wrapper */
+      .drp-buttons {
+        border-top-color: theme('colors.darkPrimary.900');
+        @apply text-darkPrimary-300;
+      }
+
+      th {
+        &.available:hover {
+          @apply bg-darkPrimary-600;
+        }
+      }
+
+      td {
+        &.off {
+          @apply bg-darkPrimary-800 text-white;
+        }
+
+        &.available:hover {
+          @apply bg-darkPrimary-600;
+        }
+      }
+
+      .hourselect, .minuteselect, .ampmselect {
+        @apply text-darkPrimary-300 border-darkPrimary-900 bg-darkPrimary-800 !important;
+      }
+    }
+
+    /* Phone field */
+    .iti__country-list {
+      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
+    }
+
+    /* Select2 */
+    .select2-container {
+      .select2-selection__rendered {
+        @apply text-darkPrimary-300 !important;
+      }
+
+      .select2-dropdown {
+        @apply bg-darkPrimary-700;
+      }
+
+      .select2-search__field {
+        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+      }
+
+      .select2-selection--multiple, .select2-selection--single {
+        @apply bg-darkPrimary-800 focus:ring-primary-500 border-darkPrimary-900 !important;
+        @apply text-darkPrimary-300;
+      }
+
+      /* For the selected options in the multiple select2 component */
+      .select2-selection__choice {
+        @apply bg-primary-500 border-primary-500 !important;
+        @apply text-white;
+
+        .select2-selection__choice__remove {
+          @apply text-white;
+
+          &:hover {
+            @apply text-white;
+          }
+        }
+      }
+
+      .select2-results__option {
+        @apply text-darkPrimary-300;
+      }
+    }
+
+    /* Trix Editor */
+    trix-editor {
+      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+
+      &:focus, &:active {
+        @apply border-primary-500 !important;
+      }
+    }
+
+    trix-toolbar {
+      .trix-button-group, .trix-button {
+        @apply border-darkPrimary-900 !important;
+      }
+    }
+
+    .tribute-container {
+      ul {
+        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+      }
+    }
+
+    .trix-dialogs {
+      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+    }
+
+    .trix-content a[href^="bullettrain://"] {
+      @apply text-white bg-darkPrimary-500;
+    }
+
+    /* CKEditor */
+    .ck {
+      --ck-color-base-background: theme('colors.darkPrimary.800');
+      --ck-color-base-border: theme('colors.darkPrimary.900');
+      --ck-color-toolbar-background: theme('colors.darkPrimary.800');
+      --ck-color-toolbar-border: theme('colors.darkPrimary.900');
+      --ck-color-text: theme('colors.darkPrimary.300');
+
+      .ck-editor__editable:not(.ck-editor__nested-editable) {
+        @apply shadow-none;
+
+        &.ck-focused {
+          @apply shadow-none;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/tester/tailwind/utilities.css

@@ -0,0 +1,49 @@
+@layer utilities {
+  .text-2xs {
+    @apply uppercase;
+    font-size: 0.65rem;
+    line-height: 0.9rem;
+    letter-spacing: 1px;
+  }
+
+  .space-y {
+    @apply space-y-5;
+  }
+
+  .space-x {
+    @apply space-x-3;
+  }
+
+  .gap-y {
+    @apply gap-y-5;
+  }
+
+  .gap-x {
+    @apply gap-x-4;
+  }
+
+  .bg-dark-gradient {
+    background-image: linear-gradient(to bottom, var(--primary-700) 0%, var(--primary-800) 100%);
+  }
+
+  .bg-dark-awesome-gradient {
+    background-image: linear-gradient(to bottom right, darken(#D7BBEA, 45%) 10%, #0e369a 100%);
+  }
+
+  .bg-light-gradient {
+    &:before {
+      content: "";
+      position: fixed;
+      z-index: -1;
+      background: linear-gradient(to bottom right, var(--light-gradient-from), var(--light-gradient-to));
+      top: 0px;
+      left: 0px;
+      bottom: 0px;
+      right: 0px;
+    }
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+}

data/app/assets/stylesheets/tester/turn.css

@@ -0,0 +1,44 @@
+[data-turn-exit],
+[data-turn-enter] {
+  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
+  animation-fill-mode: forwards;
+}
+
+html.turn-exit [data-turn-exit] {
+  animation-name: fade-out-up;
+  animation-duration: .3s;
+}
+
+html.turn-enter [data-turn-enter] {
+  animation-name: fade-in-up;
+  animation-duration: .6s;
+}
+
+html.turn-before-exit [data-turn-exit],
+html.turn-exit [data-turn-exit] {
+  will-change: transform, opacity;
+}
+
+@keyframes fade-out-up {
+  0% {
+   opacity: 1;
+   transform: translateZ(0)
+  }
+
+  100% {
+   opacity: 0;
+   transform: translate3d(0, -4rem, 0)
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+   opacity: 0;
+   transform: translate3d(0, 4rem, 0)
+  }
+
+  100% {
+   opacity: 1;
+   transform: translateZ(0)
+  }
+}

data/app/assets/stylesheets/tester.tailwind.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "tester/application";

data/app/views/themes/tester/_alert.html.erb

@@ -0,0 +1,13 @@
+<% color ||= 'yellow' %>
+
+<div class="rounded-md bg-<%= color %>-400 border border-<%= color %>-500 py-4 px-5 mb-3">
+  <h3 class="text-sm text-<%= color %>-900 font-light">
+    <%= yield %>
+  </h3>
+</div>
+
+<% # we have to list out the evaluations we want possible above so purgecss includes them in production. %>
+<% if false %>
+  <div class="bg-yellow-400 border-yellow-500 text-yellow-900"></div>
+  <div class="bg-red-400 border-red-500 text-red-900"></div>
+<% end %>

data/app/views/themes/tester/_box.html.erb

@@ -0,0 +1,66 @@
+<% yield p = np %>
+
+<% divider ||= nil %>
+<% no_background ||= false %>
+<% title_size ||= "text-xl" %>
+<% body = p.content_for(:body) || p.content_for(:raw_body) %>
+<% pagy ||= nil %>
+
+<div class="<%= "bg-white rounded-md shadow dark:bg-darkPrimary-700" unless no_background %> overflow-hidden">
+  <div class="py-6 px-8 space-y-2 <%= 'border-b shadow-sm dark:border-darkPrimary-600' if divider %>">
+    <% if p.content_for? :title %>
+      <h2 class="<%= title_size %> font-semibold dark:text-white">
+        <%= p.content_for :title %>
+      </h2>
+    <% end %>
+
+    <% if p.content_for? :description %>
+      <p class="text-gray-400 font-light leading-normal">
+        <%= p.content_for :description %>
+      </p>
+    <% end %>
+  </div>
+
+  <div class="space-y-4">
+    <% if p.content_for? :table %>
+      <div class="box-table <%= divider ? 'mt-4' : '-mt-1' %> pb-0.5">
+        <%= p.content_for :table %>
+      </div>
+    <% end %>
+
+    <% if body %>
+      <div class="<%= "pt-7 px-8 space-y-7 #{p.content_for?(:actions) ? 'pb-3' : 'pb-7'}" unless p.content_for?(:raw_body) %>">
+        <div class="space-y-4 <%= '-mt-4' unless divider %>">
+          <%= body %>
+        </div>
+      </div>
+    <% end %>
+
+    <% if p.content_for? :actions || pagy %>
+      <div class="pb-7 px-8 space-y-7">
+        <div class="sm:flex">
+          <div class="flex-1 space-x">
+            <%= p.content_for :actions %>
+          </div>
+          <% if pagy && pagy.pages > 1 %>
+            <div class="flex-0 mt-3 sm:mt-0">
+              <%== pagy_nav(pagy) %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if p.content_for? :footer %>
+    <div class="py-4 px-8 bg-gray-50 border-t dark:bg-darkPrimary-800 dark:border-darkPrimary-600">
+      <%= p.content_for :footer %>
+    </div>
+  <% end %>
+
+  <% if p.content_for? :raw_footer %>
+    <div class="bg-gray-50 dark:bg-darkPrimary-800">
+      <%= p.content_for :raw_footer %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/tester/_breadcrumb.html.erb

@@ -0,0 +1,23 @@
+<% first ||= false %>
+<% url ||= nil %>
+
+<% # convert [:account, model] "urls" to strings. %>
+<% url = url.is_a?(String) ? url : main_app.url_for(url) if url %>
+
+<li>
+  <div class="flex items-center">
+    <!-- Heroicon name: chevron-right -->
+    <svg class="flex-shrink-0 h-3 w-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+    </svg>
+
+    <% item_style = "ml-3 text-gray-500 uppercase text-2xs tracking-widest" %>
+
+    <% # don't link to the same page we're already on. %>
+    <% if url && url != request.url %>
+      <%= link_to label, url, class: "#{item_style} hover:text-gray-700 hover:underline dark:text-primary-300" %>
+    <% else %>
+      <span class="<%= item_style %>"><%= label %></span>
+    <% end %>
+  </div>
+</li>

data/app/views/themes/tester/_cell.html.erb

@@ -0,0 +1,41 @@
+<% yield p = np %>
+
+<% completion_percent ||= nil %>
+
+<div class="py-4 px-8 w-full space-y-3">
+  <div class="flex space-x-4">
+    <% if p.content_for? :memberships %>
+      <div class="flex-0">
+        <%= p.content_for :memberships %>
+      </div>
+    <% end %>
+
+    <div class="flex-1">
+      <div class="flex">
+        <div class="flex-1 space-y-4 py-1">
+          <div>
+            <%= p.content_for :title %>
+          </div>
+        </div>
+
+        <% if p.content_for? :actions %>
+          <div class="flex-0">
+            <%= p.content_for :actions %>
+          </div>
+        <% end %>
+      </div>
+
+      <% if completion_percent %>
+        <div class="mt-3 h-4 bg-gray-100 shadow-inner rounded w-full">
+          <div class="h-4 animate-pulse bg-primary-500 rounded" style="width: <%= completion_percent %>%"></div>
+        </div>
+      <% end %>
+
+      <% if p.content_for? :status %>
+        <div class="<% "mt-2" if completion_percent %> uppercase text-xs text-gray-400">
+          <%= p.content_for :status %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/themes/tester/_decision_line.html.erb

@@ -0,0 +1,12 @@
+<% label ||= t('global.or') %>
+
+<div class="relative">
+  <div class="absolute inset-0 flex items-center">
+    <div class="w-full border-t border-gray-300 dark:border-gray-500"></div>
+  </div>
+  <div class="relative flex justify-center">
+    <span class="px-2 bg-white text-gray-500 uppercase text-xs dark:text-gray-300 dark:bg-darkPrimary-700">
+      <%= label %>
+    </span>
+  </div>
+</div>

data/app/views/themes/tester/_line.html.erb

@@ -0,0 +1,3 @@
+<div class="border-b border-gray-200 pb-4 dark:border-gray-500" style="position: relative;">
+  <div style="background-color: var(--primary-500); width: 26px; height: 4px; position: absolute; left: 0; bottom: -2px; border: 1px solid var(--primary-500); border-radius: 1px;"></div>
+</div>

data/app/views/themes/tester/_notices.html.erb

@@ -0,0 +1,15 @@
+<% attributes ||= [] %>
+<% attributes.select! { |attribute| form.object.errors[attribute].any? } %>
+
+<% if notice.present? %>
+  <%= render 'account/shared/alert' do %>
+    <%= notice %>
+  <% end %>
+<% end %>
+
+<% if alert.present? || flash[:error] %>
+  <%= render 'account/shared/alert', color: 'red' do %>
+    <%= alert %>
+    <%= flash[:error] %>
+  <% end %>
+<% end %>

data/app/views/themes/tester/_page.html.erb

@@ -0,0 +1,12 @@
+<% yield p = np %>
+
+<%= render 'account/shared/title' do |cp| %>
+  <% cp.content_for :title, p.content_for(:title) %>
+  <% cp.content_for :actions, p.content_for(:actions) %>
+<% end %>
+
+<%= render 'account/shared/notices' %>
+
+<div class="space-y-8 py-4 xl:py-8 xl:px-8">
+  <%= p.yield :body %>
+</div>

data/app/views/themes/tester/_title.html.erb

@@ -0,0 +1,18 @@
+<% yield p = np %>
+
+<div class="flex flex-row items-center">
+  <div class="flex-auto">
+    <h1 class="font-semibold text-base dark:text-white">
+      <%= p.content_for(:title) %>
+    </h1>
+  </div>
+  <div class="flex-auto text-right leading-none">
+    <% if p.content_for? :actions %>
+      <%= p.content_for :actions %>
+    <% end %>
+  </div>
+</div>
+
+<div class="mb-4">
+  <%= render "shared/line" %>
+</div>

data/app/views/themes/tester/attributes/_base.html.erb

@@ -0,0 +1,30 @@
+<% yield p = np %>
+
+<% url ||= nil %>
+<% strategy ||= current_attributes_strategy || :none %>
+
+<% body = capture do %>
+  <% if url.present? %>
+    <% link_to url do %>
+      <%= p.content_for :body %>
+    <% end %>
+  <% else %>
+    <%= p.content_for :body %>
+  <% end %>
+<% end %>
+
+<% case strategy %>
+<% when :label %>
+  <div>
+    <label class="block text-2xs font-semibold py-2 dark:text-white">
+      <%= p.content_for :heading %>
+    </label>
+    <div class="dark:text-gray-400">
+      <%= body %>
+    </div>
+  </div>
+
+<% else %>
+  <%= body %>
+
+<% end %>

data/app/views/themes/tester/attributes/_block.html.erb

@@ -0,0 +1,9 @@
+<% object ||= current_attributes_object %>
+<% strategy ||= current_attributes_strategy || :none %>
+<% url ||= nil %>
+
+<% if object.send(attribute).present? %>
+  <%= render 'shared/attributes/attribute', object: object, attribute: attribute, strategy: strategy, url: url do %>
+    <pre><%= object.send(attribute) %></pre>
+  <% end %>
+<% end %>

data/app/views/themes/tester/breadcrumbs/_actions.html.erb

@@ -0,0 +1,22 @@
+<% yield p = np %>
+
+<% p.helpers do
+  def account_controller_name_with_namespace
+    params[:controller].gsub(/^account\//, '')
+  end
+end %>
+
+<%
+# don't add controller-specific actions in this file. instead, include them right below where this partial is
+# included. see `app/views/account/teams/_breadcrumbs.html.erb` for an example.
+%>
+
+<% if p.account_controller_name_with_namespace == only_for %>
+  <% label = if action_name == 'edit'
+    ot("#{p.account_controller_name_with_namespace}.breadcrumbs.edit") || t('breadcrumbs.actions.edit')
+  elsif action_name == 'new'
+    ot("#{p.account_controller_name_with_namespace}.breadcrumbs.new") || t('breadcrumbs.actions.new')
+  end %>
+
+  <%= render 'account/shared/breadcrumb', label: label if label %>
+<% end %>

data/app/views/themes/tester/commentary/_box.html.erb

@@ -0,0 +1,13 @@
+<% yield p = np %>
+
+<div class="-m-0.5">
+  <div class="border-2 border-dashed rounded-lg border-yellow-300 bg-yellow-100 dark:bg-opacity-10 dark:border-yellow-200 dark:border-opacity-70 -m-3 p-3 xl:py-4 xl:px-4 xl:-mx-4">
+    <%= p.content_for :content %>
+
+    <div class="py-3 px-3 space-y-2 pt-6">
+      <p class="text-yellow-600 dark:text-yellow-200 font-light leading-normal">
+        <%= p.content_for :commentary %>
+      </p>
+    </div>
+  </div>
+</div>

data/app/views/themes/tester/conversations/_card.html.erb

@@ -0,0 +1,21 @@
+<% conversation ||= subscription.conversation %>
+
+<div class="<%= 'border-l-primary-500 border-l-4 border-primary-600' if subscription.unread? %>">
+
+  <%= link_to [:account, current_user, :conversations, :subscriptions, conversation_id: subscription.conversation.id], class: "#{current_conversation ? 'bg-gray-100 border-l ' : 'bg-white'} h-28 p-1 flex border-b-2 cursor-pointer hover:no-underline  hover:bg-gray-50 relative items-center" do %>
+    <div class="md:w-1/4 w-1/5 lg:inline-block md:hidden flex-shrink-0">
+      <img src="<%= membership_profile_photo_url(conversation.last_message&.membership || current_membership)  %>" title="<%= current_membership.name %>" alt="<%= current_membership.name %>" class="md:w-14 md:h-14 w-12 h-12 rounded-full mx-auto border-1 border-white border-2 flex-none">
+    </div>
+    <div class="w-4/5 md:w-full lg:w-4/5 pl-4 pr-1 flex-initial truncate">
+      <p class="text-xs text-gray-300 text-right hover:no-underline"><%= "#{time_ago_in_words conversation.last_message.created_at} ago" unless conversation.last_message.nil? %></p>
+      <h2 class="<%= subscription.unread? ? 'font-bold text-gray-800' : 'font-semibold text-gray-600' %> "><%= conversation.subject&.label_string %></h2>
+      <div class="text-gray-300">
+        <%= conversation.last_message&.user&.label_string %>
+      </div>
+      <div class="h-8 text-gray-400 text-sm pt-1 hover:no-underline truncate">
+        <%= Nokogiri::HTML.fragment(conversation.last_message.body).text unless conversation.last_message.nil? %>
+      </div>
+    </div>
+
+  <% end %>
+</div>

data/app/views/themes/tester/conversations/_comment.html.erb

@@ -0,0 +1,26 @@
+<% new_message ||= false %>
+<% current_user_message = message.membership.user == current_user %>
+<% avatar = capture do %>
+  <img src="<%= membership_profile_photo_url(message.membership) %>" title="<%= message.membership.name %>" alt="<%= message.membership.name %>" class="w-10 h-10 rounded-full <%= current_user_message ? 'order-2' : 'order-1' %>">
+<% end %>
+
+<div class="flex py-3 px-2  text-gray-700 <%= message.reply? ? 'border w-full bg-gray-50 rounded-md' : 'border-b' %> <%= 'opacity-30' if new_message %>">
+  <div class="mr-3 min-w-max"><%= avatar %></div>
+  <div class="flex flex-col w-full">
+    <div class=""><span class="uppercase font-bold text-gray-500"><%= message.user.name %></span><span class="font-extralight text-xs text-gray-400"> &bull; <%= time_ago_in_words message.created_at %> ago</span></div>
+    <div class="py-2"><%= trix_sanitize message.body %></div>
+    <% if message.replies.any? %>
+      <div class="space-y-2 mt-2 mb-2">
+        <% message.replies.oldest.each do |reply| %>
+          <%= render 'account/shared/comment', message: reply %>
+        <% end %>
+      </div>
+    <% end %>
+    <% unless message.reply? %>
+      <%= turbo_frame_tag "reply_#{message.id}" do %>
+        <%= link_to "Reply", [:reply, :account, message], class: "font-light text-sm text-gray-400 hover:text-gray-500 pt-2" %>
+      <% end %>
+    <% end %>
+  </div>
+
+</div>