Apply unified capitalization to buttons and titles (#3321)

2024-11-23 03:04:43 +03:00 · 2023-09-05 14:43:01 +02:00 · 2023-09-05 14:43:01 +02:00 · 29d0f82182
commit 29d0f82182
parent 5ff8526844
21 changed files with 98 additions and 94 deletions
--- a/assets/js/dashboard/datepicker.js
+++ b/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}
--- a/assets/js/dashboard/site-switcher.js
+++ b/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>
      )
--- a/lib/plausible_web/email.ex
+++ b/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,
--- a/lib/plausible_web/live/funnel_settings.ex
+++ b/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()}>
--- a/lib/plausible_web/live/funnel_settings/form.ex
+++ b/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
--- a/lib/plausible_web/live/goal_settings/form.ex
+++ b/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
--- a/lib/plausible_web/templates/layout/site_settings.html.eex
+++ b/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 %>
--- a/lib/plausible_web/templates/site/change_domain.html.eex
+++ b/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>
--- a/lib/plausible_web/templates/site/index.html.eex
+++ b/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">
--- a/lib/plausible_web/templates/site/settings_danger_zone.html.eex
+++ b/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
--- a/lib/plausible_web/templates/site/settings_email_reports.html.eex
+++ b/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>
--- a/lib/plausible_web/templates/site/settings_funnels.html.heex
+++ b/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,
--- a/lib/plausible_web/templates/site/settings_general.html.eex
+++ b/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 -> %>
--- a/lib/plausible_web/templates/site/settings_goals.html.heex
+++ b/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,
--- a/lib/plausible_web/templates/site/settings_visibility.html.eex
+++ b/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>
--- a/lib/plausible_web/views/layout_view.ex
+++ b/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,
--- a/test/plausible_web/controllers/site_controller_test.exs
+++ b/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

--- a/test/plausible_web/live/funnel_settings_test.exs
+++ b/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\"]")
--- a/test/plausible_web/live/goal_settings/form_test.exs
+++ b/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

--- a/test/plausible_web/live/goal_settings_test.exs
+++ b/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,
--- a/test/workers/spike_notifier_test.exs
+++ b/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"]
    )