More styling

assets/images/logo.svg

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256.27863"
+   height="91.198029"
+   viewBox="0 0 67.807053 24.129478"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="3.8187023"
+     inkscape:cx="103.83108"
+     inkscape:cy="83.798101"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="1312"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter22"
+       x="-0.020945052"
+       y="-0.067772631"
+       width="1.0735551"
+       height="1.2361475">
+      <feFlood
+         result="flood"
+         in="SourceGraphic"
+         flood-opacity="1.000000"
+         flood-color="rgb(0,0,0)"
+         id="feFlood21" />
+      <feGaussianBlur
+         result="blur"
+         in="SourceGraphic"
+         stdDeviation="0.000000"
+         id="feGaussianBlur21" />
+      <feOffset
+         result="offset"
+         in="blur"
+         dx="2.000000"
+         dy="1.963746"
+         id="feOffset21" />
+      <feComposite
+         result="comp1"
+         operator="in"
+         in="flood"
+         in2="offset"
+         id="feComposite21" />
+      <feComposite
+         result="comp2"
+         operator="over"
+         in="SourceGraphic"
+         in2="comp1"
+         id="feComposite22" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="filter:url(#filter22)"
+     transform="translate(-44.319593,-67.956586)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;mix-blend-mode:multiply;fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+       x="45.36311"
+       y="88.443802"
+       id="text1"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;fill:#7c3aed;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+         x="45.36311"
+         y="88.443802"
+         rotate="0 0 0 0 0"
+         dy="0">Wish</tspan></text>
+  </g>
+</svg>

assets/logo.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256.27863"
+   height="91.198029"
+   viewBox="0 0 67.807053 24.129478"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="../priv/static/images/logo.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="3.8187023"
+     inkscape:cx="103.83108"
+     inkscape:cy="83.798101"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="1312"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter22"
+       x="-0.020945052"
+       y="-0.067772631"
+       width="1.0735551"
+       height="1.2361475">
+      <feFlood
+         result="flood"
+         in="SourceGraphic"
+         flood-opacity="1.000000"
+         flood-color="rgb(0,0,0)"
+         id="feFlood21" />
+      <feGaussianBlur
+         result="blur"
+         in="SourceGraphic"
+         stdDeviation="0.000000"
+         id="feGaussianBlur21" />
+      <feOffset
+         result="offset"
+         in="blur"
+         dx="2.000000"
+         dy="1.963746"
+         id="feOffset21" />
+      <feComposite
+         result="comp1"
+         operator="in"
+         in="flood"
+         in2="offset"
+         id="feComposite21" />
+      <feComposite
+         result="comp2"
+         operator="over"
+         in="SourceGraphic"
+         in2="comp1"
+         id="feComposite22" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="filter:url(#filter22)"
+     transform="translate(-44.319593,-67.956586)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;mix-blend-mode:multiply;fill:#000000;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+       x="45.36311"
+       y="88.443802"
+       id="text1"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:Fraunces;-inkscape-font-specification:'Fraunces, @opsz=72,SOFT=100,wght=887,WONK=0.00';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;font-variation-settings:'opsz' 72, 'SOFT' 100, 'wght' 887, 'WONK' 0;fill:#7c3aed;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
+         x="45.36311"
+         y="88.443802"
+         rotate="0 0 0 0 0"
+         dy="0">Wish</tspan></text>
+  </g>
+</svg>

lib/wish_web/components/core_components.ex

@@ -230,9 +230,9 @@ defmodule WishWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 bg-purple-400 hover:bg-purple-500 py-2 px-3",
+        "phx-submit-loading:opacity-75 bg-purple-200 hover:bg-purple-300 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "text-sm font-semibold leading-6 text-zinc-800 active:bg-purple-400 active:text-zinc-800/80",
-        "border-2 border-black",
+        "border-2 border-black hover:shadow-sharp transition-shadow",
         @class
       ]}
       {@rest}

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

@@ -1,8 +1,11 @@
 <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 class="font-display text-6xl font-black text-violet-600" href="/">
+      <a
-        Wish
+        class="font-display text-6xl font-black text-violet-600 drop-shadow-[e_0_15px_violet]"
+        href="/"
+      >
+        <img src="/images/logo.svg" />
       </a>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>

lib/wish_web/live/home_live/index.html.heex

@@ -15,7 +15,7 @@
     <div
       :for={item <- @items}
       phx-click={JS.navigate(~p"/details/#{item}")}
-      class="p-3 hover:bg-purple-200 active:bg-purple-300 border-2 border-black hover:shadow-sharp transition cursor-pointer"
+      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
     >
       <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
         <img
@@ -50,10 +50,10 @@
   <div class="flex flex-col mt-4 space-y-4">
     <div
       :for={item <- @items}
-      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 border-2 border-black hover:shadow-sharp transition"
+      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
       phx-click={JS.navigate(~p"/details/#{item}")}
     >
-      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 border border-black">
+      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
         <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
         <%= if item.received && !@current_user do %>
           <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">