Skip to content

Commit 825c155

Browse files
marc-aurele-besnermarc-aurele-besner
committed
improve design
1 parent 51ceedf commit 825c155

File tree

9 files changed

+126
-36
lines changed

9 files changed

+126
-36
lines changed

‎.example.env

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,7 @@ HASURA_GRAPHQL_ADMIN_SECRET=<hasura-admin-secret>
55

66
PHX_HOST="localhost"
77
DATABASE_URL="ecto://postgres:postgres@db:5432/fileonchain?ssl=false"
8-
SECRET_KEY_BASE=<64-bytes-secret>
8+
SECRET_KEY_BASE=<64-bytes-secret>
9+
10+
SLACK_APP_TOKEN="<slack-app-token>"
11+
SLACK_LOG_CHANNEL="<slack-channel-id>"

‎assets/tailwind.config.js

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ module.exports = {
1616
colors: {
1717
brand: {
1818
DEFAULT: "#00CCFF",
19-
light: "#33D6FF",
20-
dark: "#0099CC",
21-
50: "#E6F9FF",
19+
50: "#E8F7F6",
2220
100: "#CCF3FF",
2321
200: "#99E6FF",
2422
300: "#66DAFF",
@@ -30,14 +28,30 @@ module.exports = {
3028
900: "#002933",
3129
},
3230
secondary: {
33-
DEFAULT: "#FF6B6B",
34-
light: "#FF9999",
35-
dark: "#CC5555",
31+
DEFAULT: "#4ECDC4",
32+
50: "#E6F9FF",
33+
100: "#D1EFED",
34+
200: "#A3E0DC",
35+
300: "#76D1CA",
36+
400: "#4ECDC4",
37+
500: "#33B3AA",
38+
600: "#288C85",
39+
700: "#1D6560",
40+
800: "#133E3B",
41+
900: "#091716",
3642
},
3743
accent: {
38-
DEFAULT: "#4ECDC4",
39-
light: "#7FDAD3",
40-
dark: "#3DA39B",
44+
DEFAULT: "#FF6B6B",
45+
50: "#FFF0F0",
46+
100: "#FFE1E1",
47+
200: "#FFC4C4",
48+
300: "#FFA7A7",
49+
400: "#FF8989",
50+
500: "#FF6B6B",
51+
600: "#FF3D3D",
52+
700: "#FF0F0F",
53+
800: "#E10000",
54+
900: "#B30000",
4155
},
4256
},
4357
fontFamily: {
@@ -66,11 +80,20 @@ module.exports = {
6680
},
6781
boxShadow: {
6882
'inner-lg': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
83+
'brand': '0 4px 6px -1px rgba(0, 204, 255, 0.1), 0 2px 4px -1px rgba(0, 204, 255, 0.06)',
84+
'secondary': '0 4px 6px -1px rgba(78, 205, 196, 0.1), 0 2px 4px -1px rgba(78, 205, 196, 0.06)',
85+
'accent': '0 4px 6px -1px rgba(255, 107, 107, 0.1), 0 2px 4px -1px rgba(255, 107, 107, 0.06)',
86+
},
87+
borderWidth: {
88+
'3': '3px',
6989
},
7090
textarea: {
7191
base: 'w-full h-64 p-2 border rounded text-sm bg-brand-800 text-brand-200',
7292
readonly: 'bg-brand-900 text-brand-300',
7393
},
94+
animation: {
95+
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
96+
},
7497
},
7598
},
7699
plugins: [
@@ -122,6 +145,20 @@ module.exports = {
122145
}
123146
}
124147
}, {values})
125-
})
148+
}),
149+
plugin(({ addUtilities }) => {
150+
const newUtilities = {
151+
'.text-shadow': {
152+
textShadow: '0 2px 4px rgba(0,0,0,0.10)',
153+
},
154+
'.text-shadow-md': {
155+
textShadow: '0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08)',
156+
},
157+
'.text-shadow-lg': {
158+
textShadow: '0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08)',
159+
},
160+
}
161+
addUtilities(newUtilities)
162+
}),
126163
]
127164
}

‎config/config.exs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ config :logger, :console,
6666
# Use Jason for JSON parsing in Phoenix
6767
config :phoenix, :json_library, Jason
6868

69+
# Slack configuration
70+
config :fileonchain, :slack,
71+
api_token: System.get_env("SLACK_API_TOKEN"),
72+
channel: System.get_env("SLACK_CHANNEL")
73+
6974
# Import environment specific config. This must remain at the bottom
7075
# of this file so it overrides the configuration defined above.
7176
import_config "#{config_env()}.exs"

‎lib/fileonchain/notifications/slack.ex

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
defmodule Fileonchain.Notifications.Slack do
2+
use HTTPoison.Base
3+
4+
@base_url "https://slack.com/api/chat.postMessage"
5+
6+
def send_message(message) do
7+
body = Jason.encode!(%{
8+
channel: System.get_env("SLACK_CHANNEL"),
9+
text: message
10+
})
11+
12+
headers = [
13+
{"Authorization", "Bearer #{System.get_env("SLACK_API_TOKEN")}"},
14+
{"Content-Type", "application/json"}
15+
]
16+
17+
case post(@base_url, body, headers) do
18+
{:ok, %HTTPoison.Response{status_code: 200, body: body}} ->
19+
{:ok, Jason.decode!(body)}
20+
{:error, %HTTPoison.Error{reason: reason}} ->
21+
{:error, reason}
22+
end
23+
end
24+
end

‎lib/fileonchain_web/components/core_components.ex

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -231,8 +231,10 @@ defmodule FileonchainWeb.CoreComponents do
231231
<button
232232
type={@type}
233233
class={[
234-
"phx-submit-loading:opacity-75 rounded-lg bg-secondary hover:bg-secondary-dark py-2 px-3",
234+
"phx-submit-loading:opacity-75 rounded-lg bg-secondary hover:bg-secondary-600 py-2 px-3",
235235
"text-sm font-semibold leading-6 text-white active:text-white/80",
236+
"transition duration-150 ease-in-out",
237+
"shadow-secondary hover:shadow-brand",
236238
@class
237239
]}
238240
{@rest}
@@ -380,7 +382,9 @@ defmodule FileonchainWeb.CoreComponents do
380382
"mt-2 block w-full rounded-lg text-brand-900 focus:ring-2 focus:ring-secondary sm:text-sm sm:leading-6",
381383
"phx-no-feedback:border-brand-300 phx-no-feedback:focus:border-secondary",
382384
"border-brand-300 focus:border-secondary",
383-
@errors != [] && "border-secondary-light focus:border-secondary-light"
385+
"transition duration-150 ease-in-out",
386+
"shadow-sm hover:shadow-brand",
387+
@errors != [] && "border-accent focus:border-accent"
384388
]}
385389
{@rest}
386390
/>
@@ -428,7 +432,7 @@ defmodule FileonchainWeb.CoreComponents do
428432

429433
def header(assigns) do
430434
~H"""
431-
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
435+
<header class={["border-b-3 border-brand-600 pb-5 mb-5", @actions != [] && "flex items-center justify-between gap-6", @class]}>
432436
<div>
433437
<h1 class="text-lg font-semibold leading-8 text-brand-200">
434438
<%= render_slot(@inner_block) %>
@@ -474,12 +478,12 @@ defmodule FileonchainWeb.CoreComponents do
474478
end
475479

476480
~H"""
477-
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 mt-6 bg-brand-800 rounded-lg">
481+
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 mt-6 bg-brand-800 rounded-lg shadow-brand">
478482
<table class="w-full mt-11 sm:w-full">
479-
<thead class="text-sm text-left leading-6 text-brand-200">
483+
<thead class="text-sm text-left leading-6 text-brand-200 bg-brand-700">
480484
<tr>
481-
<th :for={col <- @col} class="pb-4 pr-6 font-normal p-4 border-b border-brand-700"><%= col[:label] %></th>
482-
<th :if={@action != []} class="relative p-0 pb-4">
485+
<th :for={col <- @col} class="p-4 font-semibold"><%= col[:label] %></th>
486+
<th :if={@action != []} class="relative p-4">
483487
<span class="sr-only"><%= gettext("Actions") %></span>
484488
</th>
485489
</tr>
@@ -489,25 +493,25 @@ defmodule FileonchainWeb.CoreComponents do
489493
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
490494
class="relative divide-y divide-brand-700 border-t border-brand-700 text-sm leading-6 text-white"
491495
>
492-
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-brand-800 transition-colors duration-200">
496+
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-brand-700 transition-colors duration-200">
493497
<td
494498
:for={{col, i} <- Enum.with_index(@col)}
495499
phx-click={@row_click && @row_click.(row)}
496-
class={["relative p-0", @row_click && "hover:cursor-pointer"]}
500+
class={["relative p-4", @row_click && "hover:cursor-pointer"]}
497501
>
498502
<div class="block py-4 pr-6">
499-
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-brand-800 sm:rounded-l-xl" />
500-
<span class={["relative", i == 0 && "font-semibold text-brand-300"]}>
503+
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-brand-700 sm:rounded-l-xl" />
504+
<span class={["relative", i == 0 && "font-semibold text-secondary"]}>
501505
<%= render_slot(col, @row_item.(row)) %>
502506
</span>
503507
</div>
504508
</td>
505-
<td :if={@action != []} class="relative w-14 p-0 pr-4">
509+
<td :if={@action != []} class="relative w-14 p-4">
506510
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
507-
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-brand-800 sm:rounded-r-xl" />
511+
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-brand-700 sm:rounded-r-xl" />
508512
<span
509513
:for={action <- @action}
510-
class="relative ml-4 font-semibold leading-6 text-brand-300 hover:text-brand-100"
514+
class="relative ml-4 font-semibold leading-6 text-accent hover:text-accent-300"
511515
>
512516
<%= render_slot(action, @row_item.(row)) %>
513517
</span>
@@ -562,9 +566,9 @@ defmodule FileonchainWeb.CoreComponents do
562566
<div class="mt-16">
563567
<.link
564568
navigate={@navigate}
565-
class="text-sm font-semibold leading-6 text-brand-300 hover:text-brand-100"
569+
class="text-sm font-semibold leading-6 text-secondary hover:text-secondary-300 flex items-center"
566570
>
567-
<.icon name="hero-arrow-left-solid" class="h-3 w-3" />
571+
<.icon name="hero-arrow-left-solid" class="h-4 w-4 mr-1" />
568572
<%= render_slot(@inner_block) %>
569573
</.link>
570574
</div>

‎lib/fileonchain_web/controllers/page_html/home.html.heex

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
<div class="sm:text-center lg:text-left">
2222
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
2323
<span class="block xl:inline">Fileonchain</span>
24-
<span class="block text-brand-400 xl:inline">Secure File Storage</span>
24+
<span class="block text-secondary-400 xl:inline">Secure File Storage</span>
2525
</h1>
2626
<p class="mt-3 text-base text-brand-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">Allows anyone to upload small and large files to any substrate network, making them permanently available on-chain ⛓️.</p>
2727
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
28-
<div class="rounded-md shadow">
29-
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 md:py-4 md:text-lg md:px-10">
28+
<div class="rounded-md shadow-brand">
29+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary-600 hover:bg-secondary-700 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">
3030
Get started
3131
</a>
3232
</div>
3333
<div class="mt-3 sm:mt-0 sm:ml-3">
34-
<a href="https://www.youtube.com/watch?v=o7fz7lqIdgo" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-700 bg-brand-100 hover:bg-brand-200 md:py-4 md:text-lg md:px-10">Live demo</a>
34+
<a href="https://www.youtube.com/watch?v=o7fz7lqIdgo" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-700 bg-accent-100 hover:bg-accent-200 md:py-4 md:text-lg md:px-10 transition duration-150 ease-in-out">Live demo</a>
3535
</div>
3636
</div>
3737
</div>
@@ -46,14 +46,14 @@
4646
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
4747
<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
4848
<span class="block">Ready to dive in?</span>
49-
<span class="block text-brand-400">Start your free trial today.</span>
49+
<span class="block text-secondary-400">Start your free trial today.</span>
5050
</h2>
5151
<div class="mt-8 flex justify-center">
52-
<div class="inline-flex rounded-md shadow">
53-
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700">Get started</a>
52+
<div class="inline-flex rounded-md shadow-secondary">
53+
<a href={if @connected_user, do: "/files/new", else: "/users/register"} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary-600 hover:bg-secondary-700 transition duration-150 ease-in-out">Get started</a>
5454
</div>
5555
<div class="ml-3 inline-flex">
56-
<a href="https://www.canva.com/design/DAGGzsyvreI/nlvCgcaMf1EmWGtRCBj8uA/edit?utm_content=DAGGzsyvreI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-brand-700 bg-brand-100 hover:bg-brand-200">Learn more</a>
56+
<a href="https://www.canva.com/design/DAGGzsyvreI/nlvCgcaMf1EmWGtRCBj8uA/edit?utm_content=DAGGzsyvreI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-brand-700 bg-accent-100 hover:bg-accent-200 transition duration-150 ease-in-out">Learn more</a>
5757
</div>
5858
</div>
5959
</div>

‎lib/fileonchain_web/live/user_registration_live.ex

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
defmodule FileonchainWeb.UserRegistrationLive do
22
use FileonchainWeb, :live_view
3+
require Logger
34

45
alias Fileonchain.Accounts
56
alias Fileonchain.Accounts.User
7+
alias Fileonchain.Notifications.Slack
68

79
def render(assigns) do
810
~H"""
@@ -57,18 +59,32 @@ defmodule FileonchainWeb.UserRegistrationLive do
5759
end
5860

5961
def handle_event("save", %{"user" => user_params}, socket) do
62+
Logger.info("Attempting to register new user with params: #{inspect(user_params)}")
6063
case Accounts.register_user(user_params) do
6164
{:ok, user} ->
65+
Logger.info("User registered successfully: #{user.email}")
6266
{:ok, _} =
6367
Accounts.deliver_user_confirmation_instructions(
6468
user,
6569
&url(~p"/users/confirm/#{&1}")
6670
)
6771

72+
# Send Slack notification
73+
case Slack.send_message("New user registered: #{user.email}") do
74+
{:ok, _} ->
75+
Logger.info("Slack notification sent for new user: #{user.email}")
76+
:ok
77+
{:error, reason} ->
78+
# Log the error, but don't interrupt the user registration process
79+
Logger.error("Failed to send Slack notification: #{inspect(reason)}")
80+
end
81+
6882
changeset = Accounts.change_user_registration(user)
83+
Logger.info("User registration process completed for: #{user.email}")
6984
{:noreply, socket |> assign(trigger_submit: true) |> assign_form(changeset)}
7085

7186
{:error, %Ecto.Changeset{} = changeset} ->
87+
Logger.warning("User registration failed: #{inspect(changeset.errors)}")
7288
{:noreply, socket |> assign(check_errors: true) |> assign_form(changeset)}
7389
end
7490
end

‎mix.exs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ defmodule Fileonchain.MixProject do
6161
{:jason, "~> 1.4.4"},
6262
{:dns_cluster, "~> 0.1.3"},
6363
{:bandit, "~> 1.5.7"},
64-
{:blake3, "~> 1.0.0"}
64+
{:blake3, "~> 1.0.0"},
65+
{:httpoison, "~> 2.2.1"}
6566
]
6667
end
6768

‎priv/static/images/hero-image.jpg

1.85 MB
Loading

0 commit comments

Comments
 (0)