Apply unified capitalization to buttons and titles (#3321)

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,11 +358,11 @@ 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={() => {
@@ -370,10 +370,10 @@ function DatePicker({query, site, history}) {
                     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

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

@@ -1,6 +1,6 @@
 <div class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
   <header class="relative">
-    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Email reports</h2>
+    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Email Reports</h2>
     <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Send weekly/monthly analytics reports to as many addresses as you wish</p>
     <%= link(to: "https://plausible.io/docs/email-reports", target: "_blank", rel: "noferrer") do %>
       <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
@@ -112,7 +112,7 @@
 
 <div class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
   <header class="relative">
-    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Traffic spike notifications</h2>
+    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Traffic Spike Notifications</h2>
     <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Get notified when your site has unusually high number of current visitors</p>
     <%= link(to: "https://plausible.io/docs/traffic-spikes", target: "_blank", rel: "noreferrer") do %>
       <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>

lib/plausible_web/templates/site/settings_funnels.html.heex

@@ -12,7 +12,7 @@
     <header class="relative">
       <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Funnels</h2>
       <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
-        Compose goals into funnels
+        Compose Goals into Funnels
       </p>
 
       <%= link(to: "https://plausible.io/docs/funnel-analysis", target: "_blank", rel: "noreferrer") do %>
@@ -35,7 +35,7 @@
     <PlausibleWeb.Components.Site.Feature.toggle
       site={@site}
       setting={:funnels_enabled}
-      label="Show funnels in the dashboard"
+      label="Show Funnels in the Dashboard"
       conn={@conn}
     >
       <%= live_render(@conn, PlausibleWeb.Live.FunnelSettings,

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

@@ -1,8 +1,8 @@
 <div class="shadow sm:rounded-md sm:overflow-hidden">
   <div class="bg-white dark:bg-gray-800 py-6 px-4 space-y-6 sm:p-6">
     <header class="relative">
-      <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Site domain</h2>
-      <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Moving your site to a different domain? We got you!</p>
+      <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Site Domain</h2>
+      <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Moving your Site to a different Domain? We got you!</p>
       <%= link(to: "https://plausible.io/docs/change-domain-name/", target: "_blank", rel: "noreferrer") do %>
         <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
       <% end %>
@@ -14,7 +14,7 @@
       </div>
     </div>
     <span class="inline-flex rounded-md shadow-sm">
-      <%= link "Change domain", to: Routes.site_path(@conn, :change_domain, @site.domain), class: "button" %>
+      <%= link "Change Domain", to: Routes.site_path(@conn, :change_domain, @site.domain), class: "button" %>
     </span>
   </div>
 </div>
@@ -23,8 +23,8 @@
   <div class="shadow sm:rounded-md sm:overflow-hidden">
     <div class="bg-white dark:bg-gray-800 py-6 px-4 space-y-6 sm:p-6">
       <header class="relative">
-        <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Site timezone</h2>
-        <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Update your reporting timezone.</p>
+        <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Site Timezone</h2>
+        <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Update your reporting Timezone.</p>
         <%= link(to: "https://plausible.io/docs/general/", target: "_blank", rel: "noreferrer") do %>
           <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
         <% end %>
@@ -44,8 +44,8 @@
 
 <%= form_for @conn, "/", [class: "shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6"], fn f -> %>
   <header class="relative">
-    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">JavaScript snippet</h2>
-    <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Include this snippet in the <code>&lt;head&gt;</code> of your website.</p>
+    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">JavaScript Snippet</h2>
+    <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Include this Snippet in the <code>&lt;head&gt;</code> of your Website.</p>
 
     <%= link(to: "https://plausible.io/docs/plausible-script", target: "_blank", rel: "noreferrer") do %>
       <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
@@ -103,7 +103,7 @@
               From <%= PlausibleWeb.EmailView.date_format(@site.imported_data.start_date) %> to <%= PlausibleWeb.EmailView.date_format(@site.imported_data.end_date) %>
               </p>
             </div>
-            <%= link("Clear " <> PlausibleWeb.StatsView.large_number_format(@imported_pageviews) <> " imported pageviews", to: "/#{URI.encode_www_form(@site.domain)}/settings/forget-imported", method: :delete, class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150") %>
+            <%= link("Clear " <> PlausibleWeb.StatsView.large_number_format(@imported_pageviews) <> " Imported Pageviews", to: "/#{URI.encode_www_form(@site.domain)}/settings/forget-imported", method: :delete, class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150") %>
           </li>
 
           <% true -> %>

lib/plausible_web/templates/site/settings_goals.html.heex

@@ -8,7 +8,7 @@
       You can also <a
         href={Routes.site_path(@conn, :settings_funnels, @site.domain)}
         class="text-indigo-500 underline"
-      >compose goals into funnels</a>.
+      >compose Goals into Funnels</a>.
     </p>
 
     <%= link(to: "https://plausible.io/docs/goal-conversions", target: "_blank", rel: "noreferrer") do %>
@@ -31,7 +31,7 @@
   <PlausibleWeb.Components.Site.Feature.toggle
     site={@site}
     setting={:conversions_enabled}
-    label="Show goals in the dashboard"
+    label="Show Goals in the Dashboard"
     conn={@conn}
   >
     <%= live_render(@conn, PlausibleWeb.Live.GoalSettings,

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

@@ -30,7 +30,7 @@
 
 <div class="px-4 py-6 bg-white shadow dark:bg-gray-800 sm:rounded-md sm:overflow-hidden sm:p-6">
   <header class="relative">
-    <h2 class="text-lg font-medium text-gray-900 leading-6 dark:text-gray-100">Shared links</h2>
+    <h2 class="text-lg font-medium text-gray-900 leading-6 dark:text-gray-100">Shared Links</h2>
     <p class="mt-1 text-sm text-gray-500 leading-5 dark:text-gray-200">You can share your stats privately by generating a shared link. The links are impossible to guess and you can add password protection for extra security.</p>
     <%= link(to: "https://plausible.io/docs/shared-links", target: "_blank", rel: "noreferrer") do %>
       <svg class="absolute top-0 right-0 w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
@@ -65,13 +65,13 @@
       </div>
     <% end %>
 
-    <%= link("+ New link", to: Routes.site_path(@conn, :new_shared_link, @site.domain), class: "button mt-4") %>
+    <%= link("+ New Link", to: Routes.site_path(@conn, :new_shared_link, @site.domain), class: "button mt-4") %>
   </div>
 </div>
 
 <div class="px-4 py-6 bg-white shadow dark:bg-gray-800 sm:rounded-md sm:overflow-hidden sm:p-6">
   <header class="relative">
-    <h2 class="text-lg font-medium text-gray-900 leading-6 dark:text-gray-100">Embed dashboard</h2>
+    <h2 class="text-lg font-medium text-gray-900 leading-6 dark:text-gray-100">Embed Dashboard</h2>
     <p class="mt-1 text-sm text-gray-500 leading-5 dark:text-gray-200">You can use shared links to embed your stats in any other webpage using an <code>iframe</code>. Copy & paste a shared link into the form below to generate the embed code.</p>
     <%= link(to: "https://plausible.io/docs/embed-dashboard", target: "_blank", rel: "noreferrer") do %>
       <svg class="absolute top-0 right-0 w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
@@ -80,7 +80,7 @@
 
   <div class="max-w-xl mt-4">
     <div>
-      <label for="embed-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Enter shared link</label>
+      <label for="embed-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Enter Shared Link</label>
       <p class="mt-1 text-xs text-gray-500 dark:text-gray-200">Only public shared links without password protection can be embedded</p>
       <div class="mt-1">
         <input type="text" name="embed-link" id="embed-link" onclick="this.select()" class="block w-full border-gray-300 dark:border-gray-700 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
@@ -88,7 +88,7 @@
     </div>
 
     <div class="mt-4">
-      <label for="theme" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Select theme</label>
+      <label for="theme" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Select Theme</label>
       <select id="theme" name="theme" class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300">
         <option selected>Light</option>
         <option>Dark</option>
@@ -97,7 +97,7 @@
     </div>
 
     <div class="mt-4">
-      <label for="background" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Custom background colour (optional)</label>
+      <label for="background" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Custom Background Colour (optional)</label>
       <p class="mt-1 text-xs text-gray-500 dark:text-gray-200">Hint: try using `transparent` background to blend the dashboard with your site background</p>
       <div class="mt-1">
         <input type="text" name="background" id="background" class="block w-full border-gray-300 dark:border-gray-700 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300" placeholder="#F9FAFB">
@@ -106,11 +106,11 @@
   </div>
 
   <input type="hidden" id="base-url" value="<%= plausible_url() %>" />
-  <button id="generate-embed" class="my-4 button">Generate embed code 👇</button>
+  <button id="generate-embed" class="my-4 button">Generate Embed Code 👇</button>
 
   <div class="mt-2">
     <div class="max-w-xl">
-      <label for="embed-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Embed code</label>
+      <label for="embed-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Embed Code</label>
 
       <div class="relative mt-1">
         <textarea id="embed-code" name="embed-code" rows="3" readonly="readonly" onclick="this.select()" class="block w-full max-w-xl border-gray-300 dark:border-gray-700 resize-none shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300"></textarea>

lib/plausible_web/views/layout_view.ex

@@ -32,7 +32,7 @@ defmodule PlausibleWeb.LayoutView do
       end,
       [key: "Custom Properties", value: "properties"],
       [key: "Search Console", value: "search-console"],
-      [key: "Email reports", value: "email-reports"],
+      [key: "Email Reports", value: "email-reports"],
       if !is_selfhost() && conn.assigns[:site].custom_domain do
         [key: "Custom domain", value: "custom-domain"]
       end,

test/plausible_web/controllers/site_controller_test.exs

@@ -323,7 +323,7 @@ defmodule PlausibleWeb.SiteControllerTest do
       conn = get(conn, "/#{site.domain}/settings/general")
       resp = html_response(conn, 200)
 
-      assert resp =~ "Site timezone"
+      assert resp =~ "Site Timezone"
       assert resp =~ "Data Import from Google Analytics"
       assert resp =~ "https://accounts.google.com/o/oauth2/v2/auth?"
       assert resp =~ "analytics.readonly"
@@ -1241,8 +1241,8 @@ defmodule PlausibleWeb.SiteControllerTest do
       conn = get(conn, Routes.site_path(conn, :settings_general, site.domain))
       resp = html_response(conn, 200)
 
-      assert resp =~ "Site domain"
-      assert resp =~ "Change domain"
+      assert resp =~ "Site Domain"
+      assert resp =~ "Change Domain"
       assert resp =~ Routes.site_path(conn, :change_domain, site.domain)
     end
 

test/plausible_web/live/funnel_settings_test.exs

@@ -11,7 +11,7 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do
       conn = get(conn, "/#{site.domain}/settings/funnels")
 
       resp = html_response(conn, 200)
-      assert resp =~ "Compose goals into funnels"
+      assert resp =~ "Compose Goals into Funnels"
       assert resp =~ "From blog to signup"
       assert resp =~ "From signup to blog"
       assert element_exists?(resp, "a[href=\"https://plausible.io/docs/funnel-analysis\"]")

test/plausible_web/live/goal_settings/form_test.exs

@@ -16,19 +16,19 @@ defmodule PlausibleWeb.Live.GoalSettings.FormTest do
       assert element_exists?(html, ~s/a#event-tab/)
 
       pageview_tab = lv |> element(~s/a#pageview-tab/) |> render_click()
-      assert pageview_tab =~ "Page path"
+      assert pageview_tab =~ "Page Path"
 
       event_tab = lv |> element(~s/a#event-tab/) |> render_click()
-      assert event_tab =~ "Event name"
+      assert event_tab =~ "Event Name"
     end
 
     test "escape closes the form", %{conn: conn, site: site} do
       {parent, lv} = get_liveview(conn, site, with_parent?: true)
       html = render(parent)
-      assert html =~ "Goal trigger"
+      assert html =~ "Goal Trigger"
       render_keydown(lv, "cancel-add-goal")
       html = render(parent)
-      refute html =~ "Goal trigger"
+      refute html =~ "Goal Trigger"
     end
   end
 

test/plausible_web/live/goal_settings_test.exs

@@ -12,7 +12,7 @@ defmodule PlausibleWeb.Live.GoalSettingsTest do
 
       resp = html_response(conn, 200)
       assert resp =~ "Define actions that you want your users to take"
-      assert resp =~ "compose goals into funnels"
+      assert resp =~ "compose Goals into Funnels"
       assert resp =~ "/#{site.domain}/settings/funnels"
       assert element_exists?(resp, ~s|a[href="https://plausible.io/docs/goal-conversions"]|)
 
@@ -139,7 +139,7 @@ defmodule PlausibleWeb.Live.GoalSettingsTest do
       lv = get_liveview(conn, site)
       html = lv |> element(~s/button[phx-click="add-goal"]/) |> render_click()
 
-      assert html =~ "Add goal for #{site.domain}"
+      assert html =~ "Add Goal for #{site.domain}"
 
       assert element_exists?(
                html,

test/workers/spike_notifier_test.exs

@@ -38,12 +38,12 @@ defmodule Plausible.Workers.SpikeNotifierTest do
     SpikeNotifier.perform(nil, clickhouse_stub)
 
     assert_email_delivered_with(
-      subject: "Traffic spike on #{site.domain}",
+      subject: "Traffic Spike on #{site.domain}",
       to: [nil: "jerod@example.com"]
     )
 
     assert_email_delivered_with(
-      subject: "Traffic spike on #{site.domain}",
+      subject: "Traffic Spike on #{site.domain}",
       to: [nil: "uku@example.com"]
     )
   end
@@ -77,7 +77,7 @@ defmodule Plausible.Workers.SpikeNotifierTest do
     SpikeNotifier.perform(nil, clickhouse_stub)
 
     assert_email_delivered_with(
-      subject: "Traffic spike on #{site.domain}",
+      subject: "Traffic Spike on #{site.domain}",
       to: [nil: "uku@example.com"]
     )