Update logo (#100)

* Placeholder commit

* Added new logo to app

* added logo to header of small screens

* Updated favicon

* Added logo to README

* Updated README

README.md

@@ -1,4 +1,20 @@
-# Pinchflat (Alpha)
+<p align="center">  
+  <img 
+    src="priv/static/images/originals/logo-white-wordmark-with-background.png" 
+    alt="Pinchflat Logo by @hernandito"
+    width="700" 
+  />
+</p>
+
+<p align="center">  
+  <sup>
+    <em>logo by <a href="https://github.com/hernandito" target="_blank">@hernandito</a></em>
+  </sup>
+</p>
+
+# Your next YouTube media manager
+
+## Disclaimer
 
 This is alpha software and anything can break at any time. I make not guarantees about the stability of this software, forward-compatibility of updates, or integrity (both related to and independent of Pinchflat). Essentially, use at your own risk and expect there will be rough edges.
 

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

@@ -1,10 +1,9 @@
 <div class="flex h-screen overflow-hidden">
   <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
     <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 px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-        <div class="flex items-center">
-          <img src={~p"/images/logo.png?cachebust=2024-02-29"} alt="Pinchflat" class="w-9 h-9" />
-          <h2 class="text-xl font-bold text-white pl-2">Pinchflat</h2>
+      <div class="w-65 px-4 py-2 shadow-2 md:px-6">
+        <div class="flex items-center gap-2 py-2">
+          <img src={~p"/images/logo.png?cachebust=2024-03-20"} alt="Pinchflat" class="w-auto" />
         </div>
       </div>
     </header>

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

@@ -1,18 +1,18 @@
-<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+<header class="sticky top-0 z-999 flex h-20 w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
   <div class="flex flex-grow items-center justify-between lg:justify-end px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-    <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+    <div class="flex items-center gap-2 sm:gap-4 lg:hidden w-2/6">
+      <section class="pr-1">
+        <img src={~p"/images/icon.png?cachebust=2024-03-20"} alt="Pinchflat" class="w-10" />
+      </section>
+
       <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"
+        class="z-99999 block mx-2 rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
         @click.stop="sidebarVisible = !sidebarVisible"
       >
         <.icon name="hero-bars-3" />
       </button>
-      <a class="hidden sm:flex items-center lg:hidden" href="/">
-        <img src={~p"/images/logo.png?cachebust=2024-02-29"} alt="Pinchflat" class="w-9 h-9" />
-        <h2 class="text-xl font-bold text-white pl-2">Pinchflat</h2>
-      </a>
     </div>
-    <div class="bg-meta-4 rounded-md">
+    <div class="bg-meta-4 rounded-md w-4/6 lg:w-3/6 xl:w-2/6">
       <div class="relative">
         <span class="absolute left-2 top-1/2 -translate-y-1/2 flex">
           <.icon name="hero-magnifying-glass" />
@@ -23,7 +23,7 @@
             name="q"
             value={@params["q"]}
             placeholder="Type to search..."
-            class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none lg:w-125"
+            class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none"
           />
         </form>
       </div>

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

@@ -1,24 +1,23 @@
 <aside
   x-bind:class="sidebarVisible ? 'translate-x-0' : '-translate-x-full'"
   class={[
-    "-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-60 flex-col overflow-y-hidden justify-between",
+    "-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-65 flex-col overflow-y-hidden justify-between",
     "bg-black duration-300 ease-linear shadow-lg sm:shadow-none dark:bg-boxdark lg:static lg:translate-x-0"
   ]}
   @click.outside="sidebarVisible = false"
 >
   <section>
-    <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+    <div class="flex items-center justify-between gap-2 px-6 py-4">
       <a href="/" class="flex items-center">
-        <img src={~p"/images/logo.png?cachebust=2024-02-29"} alt="Pinchflat" class="w-9 h-9" />
-        <h2 class="text-xl font-bold text-white pl-2">Pinchflat</h2>
+        <img src={~p"/images/logo.png?cachebust=2024-03-20"} alt="Pinchflat" class="w-auto" />
       </a>
 
-      <button class="block lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
+      <button class="block mt-3 lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
         <.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">
+      <nav class="mt-3 px-4 py-4 lg:px-6">
         <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
         <div class="flex flex-col justify-between">
           <ul class="mb-6 flex flex-col gap-1.5">
@@ -31,7 +30,7 @@
     </div>
   </section>
   <section>
-    <nav class="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+    <nav class="px-4 py-4 lg:px-6">
       <ul class="mb-6 flex flex-col gap-1.5">
         <.sidebar_item
           icon="hero-code-bracket"

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

@@ -8,7 +8,7 @@
       <%= assigns[:page_title] || "Pinchflat" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
-    <link rel="icon" type="image/x-icon" href={~p"/favicon.ico?cachebust=2024-02-29"} />
+    <link rel="icon" type="image/x-icon" href={~p"/favicon.ico?cachebust=2024-03-20"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>