From 82135a872418c4506788ca1ce186980ae30e582b Mon Sep 17 00:00:00 2001 From: Josh Brown Date: Mon, 29 Apr 2024 16:12:05 +0100 Subject: [PATCH 1/5] Create reusable newsletter signup component --- app/controllers/signups_controller.rb | 7 +++++++ app/helpers/signups_helper.rb | 7 +++++++ app/views/pages/index.html.erb | 3 ++- app/views/signups/_form.html.erb | 13 ++++++++++++ app/views/signups/create.html.erb | 3 +++ app/views/signups/new.html.erb | 3 +++ config/routes.rb | 1 + config/tailwind.config.js | 23 +++++++++++++++++++++ test/controllers/signups_controller_test.rb | 7 +++++++ 9 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 app/controllers/signups_controller.rb create mode 100644 app/helpers/signups_helper.rb create mode 100644 app/views/signups/_form.html.erb create mode 100644 app/views/signups/create.html.erb create mode 100644 app/views/signups/new.html.erb create mode 100644 test/controllers/signups_controller_test.rb diff --git a/app/controllers/signups_controller.rb b/app/controllers/signups_controller.rb new file mode 100644 index 00000000..3b401eb1 --- /dev/null +++ b/app/controllers/signups_controller.rb @@ -0,0 +1,7 @@ +class SignupsController < ApplicationController + def new + end + + def create + end +end diff --git a/app/helpers/signups_helper.rb b/app/helpers/signups_helper.rb new file mode 100644 index 00000000..5eea6a0f --- /dev/null +++ b/app/helpers/signups_helper.rb @@ -0,0 +1,7 @@ +module SignupsHelper + def render_signup_form + turbo_frame_tag "signup_form" do + render "signups/form" + end + end +end diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb index 7949e372..11474034 100644 --- a/app/views/pages/index.html.erb +++ b/app/views/pages/index.html.erb @@ -1,5 +1,5 @@
-
+
Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> is a fully* *your finances are secure open-source
<%= link_to "https://github.com/maybe-finance/maybe", class: "px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] bg-neutral-100 rounded-l-md border-neutral-200 flex items-center justify-center" do %> @@ -9,4 +9,5 @@
OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %>
+ <%= render_signup_form %>
diff --git a/app/views/signups/_form.html.erb b/app/views/signups/_form.html.erb new file mode 100644 index 00000000..09cb0e53 --- /dev/null +++ b/app/views/signups/_form.html.erb @@ -0,0 +1,13 @@ +<%= + form_with( + url: signups_path, + ) do |f| +%> +
+ <%= f.email_field :email, placeholder: "Enter your email address", class: "flex-1 border-0 px-2 focus:ring-0 text-sm" %> + <%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %> +
+ +

This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

+<% end %> + diff --git a/app/views/signups/create.html.erb b/app/views/signups/create.html.erb new file mode 100644 index 00000000..9bc3dfb5 --- /dev/null +++ b/app/views/signups/create.html.erb @@ -0,0 +1,3 @@ + +

Success! You're on the waitlist.

+ diff --git a/app/views/signups/new.html.erb b/app/views/signups/new.html.erb new file mode 100644 index 00000000..9fbc5ac5 --- /dev/null +++ b/app/views/signups/new.html.erb @@ -0,0 +1,3 @@ + + <%= render "form" %> + diff --git a/config/routes.rb b/config/routes.rb index 94a4378e..0b6efede 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,5 +1,6 @@ Rails.application.routes.draw do # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html + resources :signups, only: [:new, :create] # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. # Can be used by load balancers and uptime monitors to verify that the app is live. diff --git a/config/tailwind.config.js b/config/tailwind.config.js index 39364deb..f41d6b34 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -8,6 +8,29 @@ module.exports = { './app/views/**/*.{erb,haml,html,slim}' ], theme: { + boxShadow: { + none: "0 0 #0000", + inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", + xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)", + sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)", + md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)", + lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)", + xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)", + "2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)", + "3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)", + }, + borderRadius: { + none: "0", + full: "9999px", + xs: "2px", + sm: "4px", + md: "8px", + DEFAULT: "8px", + lg: "10px", + xl: "12px", + "2xl": "16px", + "3xl": "24px", + }, extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], diff --git a/test/controllers/signups_controller_test.rb b/test/controllers/signups_controller_test.rb new file mode 100644 index 00000000..90fb96d7 --- /dev/null +++ b/test/controllers/signups_controller_test.rb @@ -0,0 +1,7 @@ +require "test_helper" + +class SignupsControllerTest < ActionDispatch::IntegrationTest + # test "the truth" do + # assert true + # end +end From a2437cdfa6a0391e21184a1f9c1f87964a15cadc Mon Sep 17 00:00:00 2001 From: Josh Brown Date: Mon, 29 Apr 2024 16:21:46 +0100 Subject: [PATCH 2/5] Make component more flexible for use in different layouts --- app/helpers/signups_helper.rb | 4 ++-- app/views/layouts/application.html.erb | 2 +- app/views/pages/index.html.erb | 2 +- app/views/signups/_form.html.erb | 3 ++- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/helpers/signups_helper.rb b/app/helpers/signups_helper.rb index 5eea6a0f..1ac5d0ab 100644 --- a/app/helpers/signups_helper.rb +++ b/app/helpers/signups_helper.rb @@ -1,7 +1,7 @@ module SignupsHelper - def render_signup_form + def render_signup_form(centered: false) turbo_frame_tag "signup_form" do - render "signups/form" + render "signups/form", centered: centered end end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 50d08068..a33861be 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -42,7 +42,7 @@ <%= yield %>
- + <%= render_signup_form %>
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb index 11474034..a0902266 100644 --- a/app/views/pages/index.html.erb +++ b/app/views/pages/index.html.erb @@ -9,5 +9,5 @@
OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %> - <%= render_signup_form %> + <%= render_signup_form(centered: true) %> diff --git a/app/views/signups/_form.html.erb b/app/views/signups/_form.html.erb index 09cb0e53..7d45749b 100644 --- a/app/views/signups/_form.html.erb +++ b/app/views/signups/_form.html.erb @@ -1,3 +1,4 @@ +<%# locals: (centered: false) -%> <%= form_with( url: signups_path, @@ -8,6 +9,6 @@ <%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %> -

This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

+

">This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

<% end %> From 6e9cd19857b122d6f42dc312edb504c30d8d2165 Mon Sep 17 00:00:00 2001 From: Josh Brown Date: Mon, 29 Apr 2024 16:26:07 +0100 Subject: [PATCH 3/5] Fix lint issue --- config/routes.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/routes.rb b/config/routes.rb index 0b6efede..be799be9 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,6 +1,6 @@ Rails.application.routes.draw do # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html - resources :signups, only: [:new, :create] + resources :signups, only: [ :new, :create ] # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. # Can be used by load balancers and uptime monitors to verify that the app is live. From 95471b6282261eaaab6a56851c4c4b3ce30a3965 Mon Sep 17 00:00:00 2001 From: Josh Brown Date: Mon, 29 Apr 2024 16:29:58 +0100 Subject: [PATCH 4/5] Fix lint issue --- app/views/signups/_form.html.erb | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/views/signups/_form.html.erb b/app/views/signups/_form.html.erb index 7d45749b..38305b99 100644 --- a/app/views/signups/_form.html.erb +++ b/app/views/signups/_form.html.erb @@ -1,9 +1,5 @@ <%# locals: (centered: false) -%> -<%= - form_with( - url: signups_path, - ) do |f| -%> +<%= form_with( url: signups_path ) do |f| %>
<%= f.email_field :email, placeholder: "Enter your email address", class: "flex-1 border-0 px-2 focus:ring-0 text-sm" %> <%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %> @@ -11,4 +7,3 @@

">This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

<% end %> - From 44fbdd5a69e8a3bf2bdb169347fdb1e83f50ab6c Mon Sep 17 00:00:00 2001 From: Josh Brown Date: Mon, 29 Apr 2024 16:39:33 +0100 Subject: [PATCH 5/5] Refactor centering of component --- app/helpers/signups_helper.rb | 4 ++-- app/views/layouts/application.html.erb | 4 +++- app/views/pages/index.html.erb | 4 +++- app/views/signups/_form.html.erb | 5 ++--- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/app/helpers/signups_helper.rb b/app/helpers/signups_helper.rb index 1ac5d0ab..5eea6a0f 100644 --- a/app/helpers/signups_helper.rb +++ b/app/helpers/signups_helper.rb @@ -1,7 +1,7 @@ module SignupsHelper - def render_signup_form(centered: false) + def render_signup_form turbo_frame_tag "signup_form" do - render "signups/form", centered: centered + render "signups/form" end end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index a33861be..5c614b04 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -42,7 +42,9 @@ <%= yield %>
- <%= render_signup_form %> +
+ <%= render_signup_form %> +
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb index a0902266..40d25677 100644 --- a/app/views/pages/index.html.erb +++ b/app/views/pages/index.html.erb @@ -9,5 +9,7 @@
OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %> - <%= render_signup_form(centered: true) %> +
+ <%= render_signup_form %> +
diff --git a/app/views/signups/_form.html.erb b/app/views/signups/_form.html.erb index 38305b99..1bbc70bd 100644 --- a/app/views/signups/_form.html.erb +++ b/app/views/signups/_form.html.erb @@ -1,9 +1,8 @@ -<%# locals: (centered: false) -%> <%= form_with( url: signups_path ) do |f| %> -
+
<%= f.email_field :email, placeholder: "Enter your email address", class: "flex-1 border-0 px-2 focus:ring-0 text-sm" %> <%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %>
-

">This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

+

This waitlist is for a hosted version of the app. Don't want to wait? Self-host an early version of Maybe.

<% end %>