Apply unified capitalization to buttons and titles (#3321)

Author: aerosol

assets/js/dashboard/datepicker.js

@@ -101,7 +101,7 @@ function renderArrow(query, site, period, prevDate, nextDate) {
   );
 }
 
-function DatePickerArrows({site, query}) {
+function DatePickerArrows({ site, query }) {
   if (query.period === "year") {
     const prevDate = formatISO(shiftMonths(query.date, -12));
     const nextDate = formatISO(shiftMonths(query.date, 12));
@@ -122,7 +122,7 @@ function DatePickerArrows({site, query}) {
   return null
 }
 
-function DisplayPeriod({query, site}) {
+function DisplayPeriod({ query, site }) {
   if (query.period === "day") {
     if (isToday(site, query.date)) {
       return "Today";
@@ -154,7 +154,7 @@ function DisplayPeriod({query, site}) {
   return 'Realtime'
 }
 
-function DatePicker({query, site, history}) {
+function DatePicker({ query, site, history }) {
   const [open, setOpen] = useState(false)
   const [mode, setMode] = useState('menu')
   const dropDownNode = useRef(null)
@@ -208,21 +208,21 @@ function DatePicker({query, site, history}) {
     setOpen(false);
 
     const keybindings = {
-      d: {date: false, period: 'day'},
-      e: {date: formatISO(shiftDays(nowForSite(site), -1)), period: 'day'},
-      r: {period: 'realtime'},
-      w: {date: false, period: '7d'},
-      m: {date: false, period: 'month'},
-      y: {date: false, period: 'year'},
-      t: {date: false, period: '30d'},
-      s: {date: false, period: '6mo'},
-      l: {date: false, period: '12mo'},
-      a: {date: false, period: 'all'},
+      d: { date: false, period: 'day' },
+      e: { date: formatISO(shiftDays(nowForSite(site), -1)), period: 'day' },
+      r: { period: 'realtime' },
+      w: { date: false, period: '7d' },
+      m: { date: false, period: 'month' },
+      y: { date: false, period: 'year' },
+      t: { date: false, period: '30d' },
+      s: { date: false, period: '6mo' },
+      l: { date: false, period: '12mo' },
+      a: { date: false, period: 'all' },
     }
 
     const redirect = keybindings[e.key.toLowerCase()]
     if (redirect) {
-      navigateToQuery(history, query, {...newSearch, ...redirect})
+      navigateToQuery(history, query, { ...newSearch, ...redirect })
     } else if (e.key.toLowerCase() === 'x') {
       toggleComparisons(history, query, site)
     } else if (e.key.toLowerCase() === 'c') {
@@ -240,7 +240,7 @@ function DatePicker({query, site, history}) {
   })
 
   useEffect(() => {
-    if (mode === 'calendar' && open)   {
+    if (mode === 'calendar' && open) {
       openCalendar()
     }
   }, [mode])
@@ -260,9 +260,9 @@ function DatePicker({query, site, history}) {
       [from, to] = [parseNaiveDate(from), parseNaiveDate(to)]
 
       if (from.isSame(to)) {
-        navigateToQuery( history, query, { period: 'day', date: formatISO(from), from: false, to: false })
+        navigateToQuery(history, query, { period: 'day', date: formatISO(from), from: false, to: false })
       } else {
-        navigateToQuery( history, query, { period: 'custom', date: false, from: formatISO(from), to: formatISO(to) })
+        navigateToQuery(history, query, { period: 'custom', date: false, from: formatISO(from), to: formatISO(to) })
       }
     }
 
@@ -305,10 +305,10 @@ function DatePicker({query, site, history}) {
 
     return (
       <QueryLink
-        to={{from: false, to: false, period, ...opts}}
+        to={{ from: false, to: false, period, ...opts }}
         onClick={() => setOpen(false)}
         query={query}
-        className={`${boldClass  } px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900
+        className={`${boldClass} px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900
           dark:hover:bg-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
       >
         {text}
@@ -333,12 +333,12 @@ function DatePicker({query, site, history}) {
               {renderLink("realtime", "Realtime")}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              {renderLink("7d", "Last 7 days")}
-              {renderLink("30d", "Last 30 days")}
+              {renderLink("7d", "Last 7 Days")}
+              {renderLink("30d", "Last 30 Days")}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
-              { renderLink('month', 'Month to Date') }
-              { renderLink('month', 'Last month', {date: lastMonth(site)}) }
+              {renderLink('month', 'Month to Date')}
+              {renderLink('month', 'Last Month', { date: lastMonth(site) })}
             </div>
             <div className="py-1 border-b border-gray-200 dark:border-gray-500 date-option-group">
               {renderLink("year", "Year to Date")}
@@ -358,22 +358,22 @@ function DatePicker({query, site, history}) {
                 aria-expanded="false"
                 aria-controls="calendar"
               >
-                Custom range
+                Custom Range
                 <span className='font-normal'>C</span>
               </span>
             </div>
-            { !COMPARISON_DISABLED_PERIODS.includes(query.period) &&
+            {!COMPARISON_DISABLED_PERIODS.includes(query.period) &&
               <div className="py-1 date-option-group border-t border-gray-200 dark:border-gray-500">
                 <span
                   onClick={() => {
                     toggleComparisons(history, query, site)
                     setOpen(false)
                   }}
                   className="px-4 py-2 text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer flex items-center justify-between">
-                  { isComparisonEnabled(query.comparison) ? 'Disable comparison' : 'Compare' }
+                  {isComparisonEnabled(query.comparison) ? 'Disable comparison' : 'Compare'}
                   <span className='font-normal'>X</span>
                 </span>
-              </div> }
+              </div>}
           </div>
         </div>
       );
@@ -388,7 +388,8 @@ function DatePicker({query, site, history}) {
               minDate: site.statsBegin,
               showMonths: 1,
               static: true,
-              animate: true}}
+              animate: true
+            }}
             ref={calendar}
             className="invisible"
             onClose={setCustomDate}

assets/js/dashboard/site-switcher.js

@@ -169,7 +169,7 @@ export default class SiteSwitcher extends React.Component {
               role="menuitem"
             >
               <Cog8ToothIcon className="mr-2 h-4 w-4 text-gray-500 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 group-focus:text-gray-500 dark:group-focus:text-gray-200" />
-              Site settings
+              Site Settings
             </a>
           </div>
           <div className="border-t border-gray-200 dark:border-gray-500"></div>
@@ -217,7 +217,7 @@ export default class SiteSwitcher extends React.Component {
             className="flex px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100"
             role="menuitem"
           >
-            View all
+            View All
           </a>
         </React.Fragment>
       )

lib/plausible_web/email.ex

@@ -114,7 +114,7 @@ defmodule PlausibleWeb.Email do
     base_email()
     |> to(email)
     |> tag("spike-notification")
-    |> subject("Traffic spike on #{site.domain}")
+    |> subject("Traffic Spike on #{site.domain}")
     |> render("spike_notification.html", %{
       site: site,
       current_visitors: current_visitors,

lib/plausible_web/live/funnel_settings.ex

@@ -55,7 +55,7 @@ defmodule PlausibleWeb.Live.FunnelSettings do
             id="funnels-list"
             funnels={@funnels}
           />
-          <button type="button" class="button mt-6" phx-click="add-funnel">+ Add funnel</button>
+          <button type="button" class="button mt-6" phx-click="add-funnel">+ Add Funnel</button>
         </div>
 
         <div :if={@goal_count < Funnel.min_steps()}>

lib/plausible_web/live/funnel_settings/form.ex

@@ -49,15 +49,18 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
           phx-target="#funnel-form"
           onkeydown="return event.key != 'Enter';"
         >
-          <%= label(f, "Funnel name",
-            class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          ) %>
+          <label
+            for={f[:name].name}
+            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+          >
+            Funnel Name
+          </label>
           <.input field={f[:name]} />
 
           <div id="steps-builder">
-            <%= label(f, "Funnel Steps",
-              class: "mt-6 block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            ) %>
+            <label class="mt-6 block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Funnel Steps
+            </label>
 
             <div :for={step_idx <- @step_ids} class="flex mb-3">
               <div class="w-2/5 flex-1">
@@ -131,7 +134,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
         class="focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-900 dark:text-gray-300 block w-7/12 rounded-md sm:text-sm border-gray-300 dark:border-gray-500"
       />
 
-      <.error :for={{msg, _} <- @field.errors}>Funnel name <%= msg %></.error>
+      <.error :for={{msg, _} <- @field.errors}>Funnel Name <%= msg %></.error>
     </div>
     """
   end

lib/plausible_web/live/goal_settings/form.ex

@@ -50,7 +50,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
           phx-submit="save-goal"
           phx-click-away="cancel-add-goal"
         >
-          <h2 class="text-xl font-black dark:text-gray-100">Add goal for <%= @domain %></h2>
+          <h2 class="text-xl font-black dark:text-gray-100">Add Goal for <%= @domain %></h2>
 
           <.tabs tabs={@tabs} />
 
@@ -59,7 +59,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
 
           <div class="py-4">
             <button type="submit" class="button text-base font-bold w-full">
-              Add goal →
+              Add Goal →
             </button>
           </div>
         </.form>
@@ -75,7 +75,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     ~H"""
     <div class="py-2">
       <.label for="page_path_input">
-        Page path
+        Page Path
       </.label>
 
       <.live_component
@@ -106,7 +106,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     <div class="my-6">
       <div id="event-fields">
         <div class="pb-6 text-xs text-gray-700 dark:text-gray-200 text-justify rounded-md">
-          Custom events are not tracked by default - you have to configure them on your site to be sent to Plausible. See examples and learn more in <a
+          Custom Events are not tracked by default - you have to configure them on your site to be sent to Plausible. See examples and learn more in <a
             class="text-indigo-500 hover:underline"
             target="_blank"
             rel="noreferrer"
@@ -118,7 +118,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
           <.input
             autofocus
             field={@f[:event_name]}
-            label="Event name"
+            label="Event Name"
             class="focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-900 dark:text-gray-300 block w-7/12 rounded-md sm:text-sm border-gray-300 dark:border-gray-500 w-full p-2 mt-2"
             placeholder="e.g. Signup"
             autocomplete="off"
@@ -156,13 +156,13 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
               class="ml-3 font-medium text-gray-900 dark:text-gray-200"
               id="enable-revenue-tracking"
             >
-              Enable revenue tracking
+              Enable Revenue Tracking
             </span>
           </div>
 
           <div class="rounded-md bg-yellow-50 dark:bg-yellow-900 p-4" x-show="active">
             <p class="text-xs text-yellow-700 dark:text-yellow-50 text-justify">
-              Revenue tracking is an upcoming premium feature that's free-to-use
+              Revenue Tracking is an upcoming premium feature that's free-to-use
               during the private preview. Pricing will be announced soon. See
               examples and learn more in <a
                 class="font-medium text-yellow underline hover:text-yellow-600"
@@ -196,7 +196,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
 
   def tabs(assigns) do
     ~H"""
-    <div class="mt-6 font-medium dark:text-gray-100">Goal trigger</div>
+    <div class="mt-6 font-medium dark:text-gray-100">Goal Trigger</div>
     <div class="my-3 w-full flex rounded border border-gray-300 dark:border-gray-500">
       <.custom_events_tab tabs={@tabs} />
       <.pageviews_tab tabs={@tabs} />
@@ -216,7 +216,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
       id="event-tab"
       phx-click="switch-tab"
     >
-      Custom event
+      Custom Event
     </a>
     """
   end

lib/plausible_web/templates/layout/site_settings.html.eex

@@ -1,6 +1,6 @@
 <%= render_layout "app.html", assigns do %>
   <div class="container pt-6">
-    <%= link("← Back to stats", to: "/#{URI.encode_www_form(@site.domain)}", class: "text-sm text-indigo-600 font-bold") %>
+    <%= link("← Back to Stats", to: "/#{URI.encode_www_form(@site.domain)}", class: "text-sm text-indigo-600 font-bold") %>
     <div class="pb-5 border-b border-gray-200 dark:border-gray-500">
       <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
         Settings for <%= @site.domain %>

lib/plausible_web/templates/site/change_domain.html.eex

@@ -15,15 +15,15 @@
     </div>
 
     <p class="text-sm sm:text-sm text-gray-700 dark:text-gray-300">
-    <span class="font-bold dark:text-gray-100">Once you change your domain, you must update the JavaScript snippet on your site within 72 hours to guarantee continuous tracking</span>. If you're using the API, please also make sure to update your API credentials.</p> 
+    <span class="font-bold dark:text-gray-100">Once you change your domain, you must update the JavaScript snippet on your site within 72 hours to guarantee continuous tracking</span>. If you're using the API, please also make sure to update your API credentials.</p>
     <p class="text-sm sm:text-sm text-gray-700 dark:text-gray-300 mt-4">
     Visit our <a target="_blank" href="https://plausible.io/docs/change-domain-name/" class="text-indigo-500">documentation</a> for details.
     </p>
 
-    <%= submit "Change domain and add new snippet →", class: "button mt-4 w-full" %>
+    <%= submit "Change Domain and add new Snippet →", class: "button mt-4 w-full" %>
 
   <div class="text-center mt-8">
-    <%= link "Back to site settings", to: Routes.site_path(@conn, :settings_general, @site.domain), class: "text-indigo-500 w-full text-center" %>
+    <%= link "Back to Site Settings", to: Routes.site_path(@conn, :settings_general, @site.domain), class: "text-indigo-500 w-full text-center" %>
   </div>
   <% end %>
 </div>

lib/plausible_web/templates/site/index.html.eex

@@ -25,9 +25,9 @@
 
   <div class="mt-6 pb-5 border-b border-gray-200 dark:border-gray-500 flex items-center justify-between">
     <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:text-3xl sm:leading-9 sm:truncate flex-shrink-0">
-      My sites
+      My Sites
     </h2>
-    <a href="/sites/new" class="button my-2 sm:my-0 w-auto">+ Add a website</a>
+    <a href="/sites/new" class="button my-2 sm:my-0 w-auto">+ Add Website</a>
   </div>
 
   <ul class="my-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">

lib/plausible_web/templates/site/settings_danger_zone.html.eex

@@ -4,11 +4,11 @@
       <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Danger zone</h2>
       <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Destructive actions below can result in irrecoverable data loss. Be careful.</p>
     </div>
-    <%= if @conn.assigns[:current_user_role] == :owner do %> 
+    <%= if @conn.assigns[:current_user_role] == :owner do %>
       <li class="py-4 flex items-center justify-between space-x-4">
         <div class="flex flex-col">
           <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
-          Transfer site ownership
+          Transfer Site Ownership
           </p>
           <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
           Transfer ownership of the site to a different account
@@ -22,7 +22,7 @@
     <li class="py-4 flex items-center justify-between space-x-4">
       <div class="flex flex-col">
         <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
-        Reset stats
+        Reset Stats
         </p>
         <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
         Reset all stats but keep the site configuration intact
@@ -35,7 +35,7 @@
     <li class="py-4 flex items-center justify-between space-x-4">
       <div class="flex max-w-md flex-col">
         <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
-        Delete site
+        Delete Site
         </p>
         <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
         Permanently remove all stats and the site configuration too