[WIP] began integrating Tailwind and accompanying theme

assets/css/app.css

@@ -2,4 +2,30 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './satoshi';
+
 /* This file is for your main application CSS */
+[x-cloak] {
+  display: none !important;
+}
+
+@layer base {
+  body {
+    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
+  }
+}
+
+@layer components {
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

assets/css/satoshi.css

@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
+ *
+ * Font Styles:
+ * Satoshi Light
+ * Satoshi Light Italic
+ * Satoshi Regular
+ * Satoshi Italic
+ * Satoshi Medium
+ * Satoshi Medium Italic
+ * Satoshi Bold
+ * Satoshi Bold Italic
+ * Satoshi Black
+ * Satoshi Black Italic
+ *
+*/
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Light.woff2'),
+    url('/fonts/satoshi/Satoshi-Light.woff'),
+    url('/fonts/satoshi/Satoshi-Light.ttf');
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-LightItalic.woff'),
+    url('/fonts/satoshi/Satoshi-LightItalic.ttf');
+  font-weight: 300;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Regular.woff2'),
+    url('/fonts/satoshi/Satoshi-Regular.woff'),
+    url('/fonts/satoshi/Satoshi-Regular.ttf');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Italic.woff2'),
+    url('/fonts/satoshi/Satoshi-Italic.woff'),
+    url('/fonts/satoshi/Satoshi-Italic.ttf');
+  font-weight: 400;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Medium.woff2'),
+    url('/fonts/satoshi/Satoshi-Medium.woff'),
+    url('/fonts/satoshi/Satoshi-Medium.ttf');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-MediumItalic.woff'),
+    url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
+  font-weight: 500;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Bold.woff2'),
+    url('/fonts/satoshi/Satoshi-Bold.woff'),
+    url('/fonts/satoshi/Satoshi-Bold.ttf');
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-BoldItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
+    url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
+  font-weight: 700;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-BlackItalic.woff'),
+    url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
+  font-weight: 900;
+  font-display: swap;
+  font-style: italic;
+}

assets/tailwind.config.js

@@ -2,15 +2,288 @@
 // https://tailwindcss.com/docs/configuration
 
 const plugin = require('tailwindcss/plugin')
+const defaultTheme = require('tailwindcss/defaultTheme')
 const fs = require('fs')
 const path = require('path')
 
 module.exports = {
   content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'],
+  darkMode: 'class',
   theme: {
+    fontFamily: {
+      satoshi: ['Satoshi', 'sans-serif']
+    },
+    screens: {
+      '2xsm': '375px',
+      xsm: '425px',
+      '3xl': '2000px',
+      ...defaultTheme.screens
+    },
     extend: {
       colors: {
-        brand: '#FD4F00'
+        current: 'currentColor',
+        transparent: 'transparent',
+        white: '#FFFFFF',
+        black: '#1C2434',
+        'black-2': '#010101',
+        body: '#64748B',
+        bodydark: '#AEB7C0',
+        bodydark1: '#DEE4EE',
+        bodydark2: '#8A99AF',
+        primary: '#3C50E0',
+        secondary: '#80CAEE',
+        stroke: '#E2E8F0',
+        gray: '#EFF4FB',
+        graydark: '#333A48',
+        'gray-2': '#F7F9FC',
+        'gray-3': '#FAFAFA',
+        whiten: '#F1F5F9',
+        whiter: '#F5F7FD',
+        boxdark: '#24303F',
+        'boxdark-2': '#1A222C',
+        strokedark: '#2E3A47',
+        'form-strokedark': '#3d4d60',
+        'form-input': '#1d2a39',
+        'meta-1': '#DC3545',
+        'meta-2': '#EFF2F7',
+        'meta-3': '#10B981',
+        'meta-4': '#313D4A',
+        'meta-5': '#259AE6',
+        'meta-6': '#FFBA00',
+        'meta-7': '#FF6766',
+        'meta-8': '#F0950C',
+        'meta-9': '#E5E7EB',
+        success: '#219653',
+        danger: '#D34053',
+        warning: '#FFA70B'
+      },
+      fontSize: {
+        'title-xxl': ['44px', '55px'],
+        'title-xl': ['36px', '45px'],
+        'title-xl2': ['33px', '45px'],
+        'title-lg': ['28px', '35px'],
+        'title-md': ['24px', '30px'],
+        'title-md2': ['26px', '30px'],
+        'title-sm': ['20px', '26px'],
+        'title-xsm': ['18px', '24px']
+      },
+      spacing: {
+        4.5: '1.125rem',
+        5.5: '1.375rem',
+        6.5: '1.625rem',
+        7.5: '1.875rem',
+        8.5: '2.125rem',
+        9.5: '2.375rem',
+        10.5: '2.625rem',
+        11: '2.75rem',
+        11.5: '2.875rem',
+        12.5: '3.125rem',
+        13: '3.25rem',
+        13.5: '3.375rem',
+        14: '3.5rem',
+        14.5: '3.625rem',
+        15: '3.75rem',
+        15.5: '3.875rem',
+        16: '4rem',
+        16.5: '4.125rem',
+        17: '4.25rem',
+        17.5: '4.375rem',
+        18: '4.5rem',
+        18.5: '4.625rem',
+        19: '4.75rem',
+        19.5: '4.875rem',
+        21: '5.25rem',
+        21.5: '5.375rem',
+        22: '5.5rem',
+        22.5: '5.625rem',
+        24.5: '6.125rem',
+        25: '6.25rem',
+        25.5: '6.375rem',
+        26: '6.5rem',
+        27: '6.75rem',
+        27.5: '6.875rem',
+        29: '7.25rem',
+        29.5: '7.375rem',
+        30: '7.5rem',
+        31: '7.75rem',
+        32.5: '8.125rem',
+        34: '8.5rem',
+        34.5: '8.625rem',
+        35: '8.75rem',
+        36.5: '9.125rem',
+        37.5: '9.375rem',
+        39: '9.75rem',
+        39.5: '9.875rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        46: '11.5rem',
+        47.5: '11.875rem',
+        49: '12.25rem',
+        50: '12.5rem',
+        52: '13rem',
+        52.5: '13.125rem',
+        54: '13.5rem',
+        54.5: '13.625rem',
+        55: '13.75rem',
+        55.5: '13.875rem',
+        59: '14.75rem',
+        60: '15rem',
+        62.5: '15.625rem',
+        65: '16.25rem',
+        67: '16.75rem',
+        67.5: '16.875rem',
+        70: '17.5rem',
+        72.5: '18.125rem',
+        73: '18.25rem',
+        75: '18.75rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        95: '23.75rem',
+        100: '25rem',
+        115: '28.75rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        150: '37.5rem',
+        171.5: '42.875rem',
+        180: '45rem',
+        187.5: '46.875rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem'
+      },
+      maxWidth: {
+        2.5: '0.625rem',
+        3: '0.75rem',
+        4: '1rem',
+        11: '2.75rem',
+        13: '3.25rem',
+        14: '3.5rem',
+        15: '3.75rem',
+        22.5: '5.625rem',
+        25: '6.25rem',
+        30: '7.5rem',
+        34: '8.5rem',
+        35: '8.75rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        60: '15rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        142.5: '35.625rem',
+        150: '37.5rem',
+        180: '45rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem',
+        270: '67.5rem',
+        280: '70rem',
+        292.5: '73.125rem'
+      },
+      maxHeight: {
+        35: '8.75rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        550: '34.375rem',
+        300: '18.75rem'
+      },
+      minWidth: {
+        22.5: '5.625rem',
+        42.5: '10.625rem',
+        47.5: '11.875rem',
+        75: '18.75rem'
+      },
+      zIndex: {
+        999999: '999999',
+        99999: '99999',
+        9999: '9999',
+        999: '999',
+        99: '99',
+        9: '9',
+        1: '1'
+      },
+      opacity: {
+        65: '.65'
+      },
+      transitionProperty: { width: 'width', stroke: 'stroke' },
+      borderWidth: {
+        6: '6px'
+      },
+      boxShadow: {
+        default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
+        card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
+        'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
+        switcher:
+          '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
+        'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
+        1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+        3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
+        4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
+        5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+        6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
+        7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
+        8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)'
+      },
+      dropShadow: {
+        1: '0px 1px 0px #E2E8F0',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)'
+      },
+      keyframes: {
+        linspin: {
+          '100%': { transform: 'rotate(360deg)' }
+        },
+        easespin: {
+          '12.5%': { transform: 'rotate(135deg)' },
+          '25%': { transform: 'rotate(270deg)' },
+          '37.5%': { transform: 'rotate(405deg)' },
+          '50%': { transform: 'rotate(540deg)' },
+          '62.5%': { transform: 'rotate(675deg)' },
+          '75%': { transform: 'rotate(810deg)' },
+          '87.5%': { transform: 'rotate(945deg)' },
+          '100%': { transform: 'rotate(1080deg)' }
+        },
+        'left-spin': {
+          '0%': { transform: 'rotate(130deg)' },
+          '50%': { transform: 'rotate(-5deg)' },
+          '100%': { transform: 'rotate(130deg)' }
+        },
+        'right-spin': {
+          '0%': { transform: 'rotate(-130deg)' },
+          '50%': { transform: 'rotate(5deg)' },
+          '100%': { transform: 'rotate(-130deg)' }
+        },
+        rotating: {
+          '0%, 100%': { transform: 'rotate(360deg)' },
+          '50%': { transform: 'rotate(0deg)' }
+        },
+        topbottom: {
+          '0%, 100%': { transform: 'translate3d(0, -100%, 0)' },
+          '50%': { transform: 'translate3d(0, 0, 0)' }
+        },
+        bottomtop: {
+          '0%, 100%': { transform: 'translate3d(0, 0, 0)' },
+          '50%': { transform: 'translate3d(0, -100%, 0)' }
+        }
+      },
+      animation: {
+        linspin: 'linspin 1568.2353ms linear infinite',
+        easespin: 'easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'left-spin': 'left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'right-spin': 'right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
+        rotating: 'rotating 30s linear infinite',
+        topbottom: 'topbottom 60s infinite alternate linear',
+        bottomtop: 'bottomtop 60s infinite alternate linear',
+        'spin-1.5': 'spin 1.5s linear infinite',
+        'spin-2': 'spin 2s linear infinite',
+        'spin-3': 'spin 3s linear infinite'
       }
     }
   },

lib/pinchflat_web/components/core_components.ex

@@ -425,7 +425,7 @@ defmodule PinchflatWeb.CoreComponents do
   slot :subtitle
   slot :actions
 
-  def header(assigns) do
+  def old_header(assigns) do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>

lib/pinchflat_web/components/layouts.ex

@@ -2,4 +2,28 @@ defmodule PinchflatWeb.Layouts do
   use PinchflatWeb, :html
 
   embed_templates "layouts/*"
+  embed_templates "layouts/partials/*"
+
+  attr :icon, :string, required: true
+  attr :text, :string, required: true
+  attr :navigate, :any, required: true
+
+  def sidebar_item(assigns) do
+    # I'm testing out grouping classes here. Tentative order: font, layout, animation, state-modifiers
+    ~H"""
+    <li>
+      <.link
+        navigate={@navigate}
+        class={[
+          "font-medium text-bodydark1",
+          "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
+          "duration-300 ease-in-out",
+          "hover:bg-graydark dark:hover:bg-meta-4"
+        ]}
+      >
+        <.icon name={@icon} /> <%= @text %>
+      </.link>
+    </li>
+    """
+  end
 end

lib/pinchflat_web/components/layouts/_app.html.heex

@@ -0,0 +1,32 @@
+<header class="px-4 sm:px-6 lg:px-8">
+  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+    <div class="flex items-center gap-4">
+      <a href="/">
+        <img src={~p"/images/logo.svg"} width="36" />
+      </a>
+      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
+        v<%= Application.spec(:phoenix, :vsn) %>
+      </p>
+    </div>
+    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
+        @elixirphoenix
+      </a>
+      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
+        GitHub
+      </a>
+      <a
+        href="https://hexdocs.pm/phoenix/overview.html"
+        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
+      >
+        Get Started <span aria-hidden="true">&rarr;</span>
+      </a>
+    </div>
+  </div>
+</header>
+<main class="px-4 py-20 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-2xl">
+    <.flash_group flash={@flash} />
+    <%= @inner_content %>
+  </div>
+</main>

lib/pinchflat_web/components/layouts/app.html.heex

@@ -1,32 +1,13 @@
-<header class="px-4 sm:px-6 lg:px-8">
+<div class="flex h-screen overflow-hidden">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+  <.sidebar />
-    <div class="flex items-center gap-4">
+
-      <a href="/">
+  <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
-        <img src={~p"/images/logo.svg"} width="36" />
+    <.header />
-      </a>
+    <main>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
+      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
-        v<%= Application.spec(:phoenix, :vsn) %>
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
-      </p>
+        </div>
-    </div>
+      </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+    </main>
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
   </div>
-</header>
+</div>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
-    <%= @inner_content %>
-  </div>
-</main>

lib/pinchflat_web/components/layouts/partials/header.html.heex

@@ -0,0 +1,42 @@
+<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+  <div class="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+    <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+      <button
+        class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+        @click.stop="sidebarToggle = !sidebarToggle"
+      >
+        <.icon name="hero-bars-3" />
+      </button>
+      <a class="block flex-shrink-0 lg:hidden" href="#">
+        <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+      </a>
+    </div>
+    <div class="hidden sm:block">
+      <%!-- Aspirational (for now) --%>
+      <div class="relative">
+        <span class="absolute left-0 top-1/2 -translate-y-1/2">
+          <.icon name="hero-magnifying-glass" />
+        </span>
+
+        <input
+          type="text"
+          placeholder="Type to search..."
+          class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none xl:w-125"
+        />
+      </div>
+    </div>
+    <div class="flex items-center gap-3 2xsm:gap-7">
+      <ul class="flex items-center gap-2 2xsm:gap-4">
+        <li class="relative">
+          <%!-- Aspirational (for now) --%>
+          <a
+            class="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
+            href="#"
+          >
+            <.icon name="hero-cog-8-tooth" />
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</header>

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -0,0 +1,29 @@
+<aside
+  x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
+  class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
+  @click.outside="sidebarToggle = false"
+>
+  <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+    <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+
+    <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
+      <.icon name="hero-arrow-left" class="fill-current" />
+    </button>
+  </div>
+  <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+    <nav class="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+      <div>
+        <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
+        <ul class="mb-6 flex flex-col gap-1.5">
+          <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/media_sources/sources"} />
+
+          <.sidebar_item
+            icon="hero-adjustments-vertical"
+            text="Media Profiles"
+            navigate={~p"/media_profiles"}
+          />
+        </ul>
+      </div>
+    </nav>
+  </div>
+</aside>

lib/pinchflat_web/components/layouts/root.html.heex

@@ -11,7 +11,11 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body
+    x-data="{ 'darkMode': true, 'sidebarToggle': false }"
+    x-init="darkMode = true;"
+    x-bind:class="{'dark text-bodydark bg-boxdark-2': darkMode === true}"
+  >
     <%= @inner_content %>
   </body>
 </html>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex

@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   Edit Media profile <%= @media_profile.id %>
   <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
 

lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex

@@ -1,11 +1,11 @@
-<.header>
+<.old_header>
   Listing Media profiles
   <:actions>
     <.link href={~p"/media_profiles/new"}>
       <.button>New Media profile</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.table
   id="media_profiles"

lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex

@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   New Media profile
   <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
 

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -1,4 +1,4 @@
-<.header>
+<.old_header>
   Media profile <%= @media_profile.id %>
   <:subtitle>This is a media_profile record from your database.</:subtitle>
   <:actions>
@@ -6,7 +6,7 @@
       <.button>Edit media_profile</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.list_items_from_map map={Map.from_struct(@media_profile)} />
 

lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex

@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   Edit Source <%= @source.id %>
   <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.source_form
   changeset={@changeset}

lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex

@@ -1,11 +1,11 @@
-<.header>
+<.old_header>
   Listing Sources
   <:actions>
     <.link href={~p"/media_sources/sources/new"}>
       <.button>New Source</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.table id="sources" rows={@sources} row_click={&JS.navigate(~p"/media_sources/sources/#{&1}")}>
   <:col :let={source} label="Collection Name"><%= source.collection_name %></:col>

lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex

@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   New Source
   <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.source_form
   changeset={@changeset}

lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex

@@ -1,4 +1,4 @@
-<.header>
+<.old_header>
   Source <%= @source.id %>
   <:subtitle>This is a source record from your database.</:subtitle>
   <:actions>
@@ -6,7 +6,7 @@
       <.button>Edit source</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <h3 class="mt-14">Relationships</h3>
 <.list>

lib/pinchflat_web/controllers/page_controller.ex

@@ -4,6 +4,6 @@ defmodule PinchflatWeb.PageController do
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.
-    render(conn, :home, layout: false)
+    render(conn, :home)
   end
 end