Add fonts and design

This commit is contained in:
2023-11-28 14:15:01 +00:00
committed by Daniel Patterson
parent 39e6f36e9a
commit 8ece628b30
16 changed files with 202 additions and 31 deletions

View File

@@ -230,8 +230,9 @@ defmodule WishWeb.CoreComponents do
<button
type={@type}
class={[
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
"phx-submit-loading:opacity-75 bg-purple-400 hover:bg-purple-500 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80",
"border-2 border-black",
@class
]}
{@rest}
@@ -429,7 +430,7 @@ defmodule WishWeb.CoreComponents do
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
<h1 class="text-xl font-display font-bold leading-8 text-zinc-800">
<%= render_slot(@inner_block) %>
</h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">

View File

@@ -1,8 +1,8 @@
<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="/">
wish
<a class="font-display text-6xl font-black text-violet-600" href="/">
Wish
</a>
</div>
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>

View File

@@ -8,15 +8,24 @@
<%= assigns[:page_title] || "Wish" %>
</.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/fonts.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-white antialiased">
<body class="bg-purple-50 antialiased">
<ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
<%= if @current_user do %>
<li class="text-[0.8125rem] leading-6 text-zinc-900">
<%= @current_user.email %>
</li>
<li>
<.link
navigate={~p"/items"}
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
>
Edit list
</.link>
</li>
<li>
<.link
href={~p"/users/settings"}