improve design

marc-aurele-besner · marc-aurele-besner · commit 825c155785d9 · 2024-09-01T14:49:20.000-04:00
diff --git a/.example.env b/.example.env
@@ -5,4 +5,7 @@ HASURA_GRAPHQL_ADMIN_SECRET=<hasura-admin-secret>
 
 PHX_HOST="localhost"
 DATABASE_URL="ecto://postgres:postgres@db:5432/fileonchain?ssl=false"
-SECRET_KEY_BASE=<64-bytes-secret>
+SECRET_KEY_BASE=<64-bytes-secret>
+
+SLACK_APP_TOKEN="<slack-app-token>"
+SLACK_LOG_CHANNEL="<slack-channel-id>"
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -16,9 +16,7 @@ module.exports = {
       colors: {
         brand: {
           DEFAULT: "#00CCFF",
-          light: "#33D6FF",
-          dark: "#0099CC",
-          50: "#E6F9FF",
+          50: "#E8F7F6",
           100: "#CCF3FF",
           200: "#99E6FF",
           300: "#66DAFF",
@@ -30,14 +28,30 @@ module.exports = {
           900: "#002933",
         },
         secondary: {
-          DEFAULT: "#FF6B6B",
-          light: "#FF9999",
-          dark: "#CC5555",
+          DEFAULT: "#4ECDC4",
+          50: "#E6F9FF",
+          100: "#D1EFED",
+          200: "#A3E0DC",
+          300: "#76D1CA",
+          400: "#4ECDC4",
+          500: "#33B3AA",
+          600: "#288C85",
+          700: "#1D6560",
+          800: "#133E3B",
+          900: "#091716",
         },
         accent: {
-          DEFAULT: "#4ECDC4",
-          light: "#7FDAD3",
-          dark: "#3DA39B",
+          DEFAULT: "#FF6B6B",
+          50: "#FFF0F0",
+          100: "#FFE1E1",
+          200: "#FFC4C4",
+          300: "#FFA7A7",
+          400: "#FF8989",
+          500: "#FF6B6B",
+          600: "#FF3D3D",
+          700: "#FF0F0F",
+          800: "#E10000",
+          900: "#B30000",
         },
       },
       fontFamily: {
@@ -66,11 +80,20 @@ module.exports = {
       },
       boxShadow: {
         'inner-lg': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+        'brand': '0 4px 6px -1px rgba(0, 204, 255, 0.1), 0 2px 4px -1px rgba(0, 204, 255, 0.06)',
+        'secondary': '0 4px 6px -1px rgba(78, 205, 196, 0.1), 0 2px 4px -1px rgba(78, 205, 196, 0.06)',
+        'accent': '0 4px 6px -1px rgba(255, 107, 107, 0.1), 0 2px 4px -1px rgba(255, 107, 107, 0.06)',
+      },
+      borderWidth: {
+        '3': '3px',
       },
       textarea: {
         base: 'w-full h-64 p-2 border rounded text-sm bg-brand-800 text-brand-200',
         readonly: 'bg-brand-900 text-brand-300',
       },
+      animation: {
+        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
     },
   },
   plugins: [
@@ -122,6 +145,20 @@ module.exports = {
           }
         }
       }, {values})
-    })
+    }),
+    plugin(({ addUtilities }) => {
+      const newUtilities = {
+        '.text-shadow': {
+          textShadow: '0 2px 4px rgba(0,0,0,0.10)',
+        },
+        '.text-shadow-md': {
+          textShadow: '0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08)',
+        },
+        '.text-shadow-lg': {
+          textShadow: '0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08)',
+        },
+      }
+      addUtilities(newUtilities)
+    }),
   ]
 }
diff --git a/config/config.exs b/config/config.exs
@@ -66,6 +66,11 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
+# Slack configuration
+config :fileonchain, :slack,
+  api_token: System.get_env("SLACK_API_TOKEN"),
+  channel: System.get_env("SLACK_CHANNEL")
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"
diff --git a/lib/fileonchain/notifications/slack.ex b/lib/fileonchain/notifications/slack.ex
@@ -0,0 +1,24 @@
+defmodule Fileonchain.Notifications.Slack do
+  use HTTPoison.Base
+
+  @base_url "https://slack.com/api/chat.postMessage"
+
+  def send_message(message) do
+    body = Jason.encode!(%{
+      channel: System.get_env("SLACK_CHANNEL"),
+      text: message
+    })
+
+    headers = [
+      {"Authorization", "Bearer #{System.get_env("SLACK_API_TOKEN")}"},
+      {"Content-Type", "application/json"}
+    ]
+
+    case post(@base_url, body, headers) do
+      {:ok, %HTTPoison.Response{status_code: 200, body: body}} ->
+        {:ok, Jason.decode!(body)}
+      {:error, %HTTPoison.Error{reason: reason}} ->
+        {:error, reason}
+    end
+  end
+end
diff --git a/lib/fileonchain_web/components/core_components.ex b/lib/fileonchain_web/components/core_components.ex
@@ -231,8 +231,10 @@ defmodule FileonchainWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-secondary hover:bg-secondary-dark py-2 px-3",
+        "phx-submit-loading:opacity-75 rounded-lg bg-secondary hover:bg-secondary-600 py-2 px-3",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "transition duration-150 ease-in-out",
+        "shadow-secondary hover:shadow-brand",
         @class
       ]}
       {@rest}
@@ -380,7 +382,9 @@ defmodule FileonchainWeb.CoreComponents do
           "mt-2 block w-full rounded-lg text-brand-900 focus:ring-2 focus:ring-secondary sm:text-sm sm:leading-6",
           "phx-no-feedback:border-brand-300 phx-no-feedback:focus:border-secondary",
           "border-brand-300 focus:border-secondary",
-          @errors != [] && "border-secondary-light focus:border-secondary-light"
+          "transition duration-150 ease-in-out",
+          "shadow-sm hover:shadow-brand",
+          @errors != [] && "border-accent focus:border-accent"
         ]}
         {@rest}
       />
@@ -428,7 +432,7 @@ defmodule FileonchainWeb.CoreComponents do
 
   def header(assigns) do
     ~H"""
-    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+    <header class={["border-b-3 border-brand-600 pb-5 mb-5", @actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
         <h1 class="text-lg font-semibold leading-8 text-brand-200">
           <%= render_slot(@inner_block) %>
@@ -474,12 +478,12 @@ defmodule FileonchainWeb.CoreComponents do
       end
 
     ~H"""
-    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 mt-6 bg-brand-800 rounded-lg">
+    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 mt-6 bg-brand-800 rounded-lg shadow-brand">
       <table class="w-full mt-11 sm:w-full">
-        <thead class="text-sm text-left leading-6 text-brand-200">
+        <thead class="text-sm text-left leading-6 text-brand-200 bg-brand-700">
           <tr>
-            <th :for={col <- @col} class="pb-4 pr-6 font-normal p-4 border-b border-brand-700"><%= col[:label] %></th>
-            <th :if={@action != []} class="relative p-0 pb-4">
+            <th :for={col <- @col} class="p-4 font-semibold"><%= col[:label] %></th>
+            <th :if={@action != []} class="relative p-4">
               <span class="sr-only"><%= gettext("Actions") %></span>
             </th>
           </tr>
@@ -489,25 +493,25 @@ defmodule FileonchainWeb.CoreComponents do
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
           class="relative divide-y divide-brand-700 border-t border-brand-700 text-sm leading-6 text-white"
         >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-brand-800 transition-colors duration-200">
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-brand-700 transition-colors duration-200">
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
-              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
+              class={["relative p-4", @row_click && "hover:cursor-pointer"]}
             >
               <div class="block py-4 pr-6">
-                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-brand-800 sm:rounded-l-xl" />
-                <span class={["relative", i == 0 && "font-semibold text-brand-300"]}>
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-brand-700 sm:rounded-l-xl" />
+                <span class={["relative", i == 0 && "font-semibold text-secondary"]}>
                   <%= render_slot(col, @row_item.(row)) %>
                 </span>
               </div>
             </td>
-            <td :if={@action != []} class="relative w-14 p-0 pr-4">
+            <td :if={@action != []} class="relative w-14 p-4">
               <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
-                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-brand-800 sm:rounded-r-xl" />
+                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-brand-700 sm:rounded-r-xl" />
                 <span
                   :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-brand-300 hover:text-brand-100"
+                  class="relative ml-4 font-semibold leading-6 text-accent hover:text-accent-300"
                 >
                   <%= render_slot(action, @row_item.(row)) %>
                 </span>
@@ -562,9 +566,9 @@ defmodule FileonchainWeb.CoreComponents do
     <div class="mt-16">
       <.link
         navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-brand-300 hover:text-brand-100"
+        class="text-sm font-semibold leading-6 text-secondary hover:text-secondary-300 flex items-center"
       >
-        <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
+        <.icon name="hero-arrow-left-solid" class="h-4 w-4 mr-1" />
         <%= render_slot(@inner_block) %>
       </.link>
     </div>
diff --git a/lib/fileonchain_web/controllers/page_html/home.html.heex b/lib/fileonchain_web/controllers/page_html/home.html.heex
@@ -21,17 +21,17 @@
         <div class="sm:text-center lg:text-left">
           <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
             <span class="block xl:inline">Fileonchain</span>
-            <span class="block text-brand-400 xl:inline">Secure File Storage</span>
+            <span class="block text-secondary-400 xl:inline">Secure File Storage</span>
           </h1>
           <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>
           <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
-            <div class="rounded-md shadow">
-              <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">
+            <div class="rounded-md shadow-brand">
+              <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">
                 Get started
               </a>
             </div>
             <div class="mt-3 sm:mt-0 sm:ml-3">
-              <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>
+              <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>
             </div>
           </div>
         </div>
@@ -46,14 +46,14 @@
   <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
     <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
       <span class="block">Ready to dive in?</span>
-      <span class="block text-brand-400">Start your free trial today.</span>
+      <span class="block text-secondary-400">Start your free trial today.</span>
     </h2>
     <div class="mt-8 flex justify-center">
-      <div class="inline-flex rounded-md shadow">
-        <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>
+      <div class="inline-flex rounded-md shadow-secondary">
+        <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>
       </div>
       <div class="ml-3 inline-flex">
-        <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>
+        <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>
       </div>
     </div>
   </div>
diff --git a/lib/fileonchain_web/live/user_registration_live.ex b/lib/fileonchain_web/live/user_registration_live.ex
@@ -1,8 +1,10 @@
 defmodule FileonchainWeb.UserRegistrationLive do
   use FileonchainWeb, :live_view
+  require Logger
 
   alias Fileonchain.Accounts
   alias Fileonchain.Accounts.User
+  alias Fileonchain.Notifications.Slack
 
   def render(assigns) do
     ~H"""
@@ -57,18 +59,32 @@ defmodule FileonchainWeb.UserRegistrationLive do
   end
 
   def handle_event("save", %{"user" => user_params}, socket) do
+    Logger.info("Attempting to register new user with params: #{inspect(user_params)}")
     case Accounts.register_user(user_params) do
       {:ok, user} ->
+        Logger.info("User registered successfully: #{user.email}")
         {:ok, _} =
           Accounts.deliver_user_confirmation_instructions(
             user,
             &url(~p"/users/confirm/#{&1}")
           )
 
+        # Send Slack notification
+        case Slack.send_message("New user registered: #{user.email}") do
+          {:ok, _} ->
+            Logger.info("Slack notification sent for new user: #{user.email}")
+            :ok
+          {:error, reason} ->
+            # Log the error, but don't interrupt the user registration process
+            Logger.error("Failed to send Slack notification: #{inspect(reason)}")
+        end
+
         changeset = Accounts.change_user_registration(user)
+        Logger.info("User registration process completed for: #{user.email}")
         {:noreply, socket |> assign(trigger_submit: true) |> assign_form(changeset)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
+        Logger.warning("User registration failed: #{inspect(changeset.errors)}")
         {:noreply, socket |> assign(check_errors: true) |> assign_form(changeset)}
     end
   end
diff --git a/mix.exs b/mix.exs
@@ -61,7 +61,8 @@ defmodule Fileonchain.MixProject do
       {:jason, "~> 1.4.4"},
       {:dns_cluster, "~> 0.1.3"},
       {:bandit, "~> 1.5.7"},
-      {:blake3, "~> 1.0.0"}
+      {:blake3, "~> 1.0.0"},
+      {:httpoison, "~> 2.2.1"}
     ]
   end
 
diff --git a/priv/static/images/hero-image.jpg b/priv/static/images/hero-image.jpg

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,8 @@ defmodule Fileonchain.MixProject do`
`61`	`61`	`{:jason, "~> 1.4.4"},`
`62`	`62`	`{:dns_cluster, "~> 0.1.3"},`
`63`	`63`	`{:bandit, "~> 1.5.7"},`
`64`		`- {:blake3, "~> 1.0.0"}`
	`64`	`+ {:blake3, "~> 1.0.0"},`
	`65`	`+ {:httpoison, "~> 2.2.1"}`
`65`	`66`	`]`
`66`	`67`	`end`
`67`	`68`