Added tailwind + UI layout

.gitignore

@@ -35,4 +35,11 @@
 /config/master.key
 
 # Added after default template below
-.byebug_history
+.byebug_history
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+node_modules
+
+# Ignore the build directory
+/app/assets/builds

Gemfile

@@ -91,4 +91,6 @@ gem "discard"
 gem "jwt"
 
 # Used to make HTTP requests easily
-gem 'httparty'
+gem 'httparty'
+
+gem 'tailwindcss-rails'

Gemfile.lock

@@ -279,6 +279,18 @@ GEM
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)
     stringio (3.1.0)
+    tailwindcss-rails (2.3.0)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.3.0-aarch64-linux)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.3.0-arm-linux)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.3.0-arm64-darwin)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.3.0-x86_64-darwin)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.3.0-x86_64-linux)
+      railties (>= 6.0.0)
     thor (1.3.0)
     timeout (0.4.1)
     turbo-rails (2.0.0)
@@ -332,6 +344,7 @@ DEPENDENCIES
   shoulda-matchers
   sprockets-rails
   stimulus-rails
+  tailwindcss-rails
   turbo-rails
   tzinfo-data
   web-console

Procfile.dev

@@ -1 +1,2 @@
-web: bin/rails server -p 3009 -b 0.0.0.0
+web: bin/rails server -p 3009 -b 0.0.0.0
+css: bin/rails tailwindcss:watch

app/assets/config/manifest.js

@@ -2,3 +2,4 @@
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/views/dashboard/index.html.erb

@@ -2,4 +2,8 @@
   <h1 class=" px-10 self-stretch flex-grow-0 flex-shrink-0 text-base font-medium text-left text-[#10151b]">
     Dashboard
   </h1>
+
+  <%= session[:email] %>
+  <%= session[:name] %>
+  <%= session[:organization_name] %>
 </div>

app/views/layouts/_nav.html.erb

@@ -11,29 +11,25 @@
     <div class="flex flex-col justify-start items-start self-stretch flex-grow ">
       <div class="flex flex-col justify-start items-start self-stretch flex-grow gap-4 px-4 py-2 ">
         <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0 gap-3">
-          <% if @account %>
-            <% if @active_tab == 'Dashboard' %>
-              <a href="/dashboard"
-                class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 nav rounded-lg dash-active bg-white border border-[#10151b]/[0.06]"
-                style="box-shadow: 0px 4px 8px 0 rgba(16,21,27,0.05), 0px 1px 3px 0 rgba(16,21,27,0.05);">
-            <% else %>
-              <a href="/dashboard"
-                class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 nav rounded-lg">
-            <% end %>
-              <div class="flex justify-start items-center self-stretch flex-grow relative overflow-hidden gap-2 px-2 py-1 rounded-lg">
-                <div class="dashboard-icon">
-                  <%= image_tag 'dashboard_icon.svg' %>
-                </div>
-                <% if @active_tab == 'Dashboard' %>
-                  <p class="flex-grow w-[200px] text-sm font-medium text-left text-[#10151b]">
-                <% else %>
-                  <p class="flex-grow w-[200px] text-sm font-medium text-left text-[#58626d]">
-                <% end %>
-                  Dashboard
-                </p>
-              </div>
-            </a>
+          <% if @active_tab == 'Dashboard' %>
+            <%= link_to dashboard_path, 'Dashboard', class: "flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 nav rounded-lg dash-active bg-white border border-[#10151b]/[0.06]", style: "box-shadow: 0px 4px 8px 0 rgba(16,21,27,0.05), 0px 1px 3px 0 rgba(16,21,27,0.05);"%>
+          <% else %>
+            <a href="/dashboard"
+              class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 nav rounded-lg">
           <% end %>
+            <div class="flex justify-start items-center self-stretch flex-grow relative overflow-hidden gap-2 px-2 py-1 rounded-lg">
+              <div class="dashboard-icon">
+                <%= image_tag 'dashboard_icon.svg' %>
+              </div>
+              <% if @active_tab == 'Dashboard' %>
+                <p class="flex-grow w-[200px] text-sm font-medium text-left text-[#10151b]">
+              <% else %>
+                <p class="flex-grow w-[200px] text-sm font-medium text-left text-[#58626d]">
+              <% end %>
+                Dashboard
+              </p>
+            </div>
+          </a>
           <a class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 cursor-pointer nav rounded-lg" href="https://www.quicknode.com/docs/bitcoin/bb_getaddress" target="_blank">
             <div class="flex justify-start items-center self-stretch flex-grow relative gap-2 px-2 py-1 rounded-tl-lg rounded-bl-lg">
               <div class="doc-icon">
@@ -53,15 +49,15 @@
               <div class="flex justify-start items-center flex-grow relative gap-2 px-2 py-1 rounded-tl-lg rounded-bl-lg">
                 <%= image_tag 'person_icon.svg' %>
 
-                <p class="flex-grow w-[200px] text-sm text-left text-[#10151b]"><% session[:name] %></p>
+                <p class="flex-grow w-[200px] text-sm text-left text-[#10151b]"><%= session[:name] %></p>
               </div>
             </div>
           <% end %>
           <% if session[:organization_name] %>
             <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0">
               <div class="flex justify-start items-center flex-grow relative gap-2 px-2 py-1 rounded-tl-lg rounded-bl-lg">
                 <%= image_tag 'company_icon.svg' %>
-                <p class="flex-grow w-[200px] text-sm text-left text-[#10151b]"><% session[:organization_name] %></p>
+                <p class="flex-grow w-[200px] text-sm text-left text-[#10151b]"><%= session[:organization_name] %></p>
               </div>
             </div>
           <% end %>

app/views/layouts/application.html.erb

@@ -5,10 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-
-
-    <script src="/js/cdn.tailwindcss.com_3.3.3.js"></script>
-    <script src="/js/[email protected]_dist_chart.umd.min.js"></script>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>

bin/dev

@@ -1,9 +1,16 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 
-if ! foreman version &> /dev/null
-then
+if ! gem list foreman -i --silent; then
   echo "Installing foreman..."
   gem install foreman
 fi
 
-foreman start -f Procfile.dev "$@"
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+# Let the debug gem allow remote connections,
+# but avoid loading until `debugger` is called
+export RUBY_DEBUG_OPEN="true"
+export RUBY_DEBUG_LAZY="true"
+
+exec foreman start -f Procfile.dev "$@"

config/tailwind.config.js

@@ -0,0 +1,23 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}