made bootstrap colors more flexible, styled calendar table better

assets/css/_bs-colors.scss

@@ -0,0 +1,35 @@
+// Colors
+$primary: #662c91;
+$secondary: #ee6c4d;
+$success: #3f784c;
+$info: #3f84e5;
+$warning: #fcca46;
+$light: $gray-200;
+$dark: $gray-800;
+
+// Create your own map
+$custom-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  "gray": $gray-500,
+);
+
+// $custom-colors: (
+//   "custom-color": #900
+// );
+
+// Merge the maps
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+// misc
+$navbar-dark-color: rgba($white, 0.75);
+$navbar-dark-hover-color: rgba($white, 0.9);
+$navbar-dark-active-color: $white;
+$navbar-dark-disabled-color: rgba($white, 0.45);
+$navbar-dark-toggler-border-color: rgba($white, 0.3);

assets/css/_bs-custom.scss

@@ -14,10 +14,3 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto,
 // Features
 $enable-shadows: true;
 $enable-negative-margins: true;
-
-// Colors
-$primary: #662c91;
-$secondary: #ee6c4d;
-$success: #3f784c;
-$info: #3f84e5;
-$warning: #fcca46;

assets/css/_bs-load.scss

@@ -0,0 +1,50 @@
+/* Bootstrap custom variable overrides */
+@import "bs-custom";
+
+// Required || Configuration
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+
+/* Bootstrap custom variable overrides */
+@import "bs-colors";
+
+// Required || Configuration -- CONTINUED
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/utilities";
+
+// Optional || Layout & components
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/transitions";
+@import "../node_modules/bootstrap/scss/dropdown";
+// @import "../node_modules/bootstrap/scss/button-group";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/card";
+// @import "../node_modules/bootstrap/scss/accordion";
+// @import "../node_modules/bootstrap/scss/breadcrumb";
+@import "../node_modules/bootstrap/scss/pagination";
+// @import "../node_modules/bootstrap/scss/badge";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/progress";
+// @import "../node_modules/bootstrap/scss/list-group";
+@import "../node_modules/bootstrap/scss/close";
+// @import "../node_modules/bootstrap/scss/toasts";
+@import "../node_modules/bootstrap/scss/modal";
+// @import "../node_modules/bootstrap/scss/tooltip";
+// @import "../node_modules/bootstrap/scss/popover";
+// @import "../node_modules/bootstrap/scss/carousel";
+@import "../node_modules/bootstrap/scss/spinners";
+
+// Helpers
+@import "../node_modules/bootstrap/scss/helpers";
+
+// Utilities
+@import "../node_modules/bootstrap/scss/utilities/api";

assets/css/app.scss

@@ -1,11 +1,8 @@
 /* Fonts */
 @import "fonts";
 
-/* Bootstrap custom variable overrides */
-@import "bs-custom";
-
-/* Bootstrap v5 scss */
-@import "~bootstrap/scss/bootstrap";
+/* Load Bootstrap v5 and customizations */
+@import "bs-load";
 
 /*SVG ICON SYSTEM*/
 @import "svg-icons";

lib/shift73k_web/live/shift_assign_live/index.ex

@@ -24,7 +24,6 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
     |> rotate_week()
     |> Keyword.values()
     |> Enum.map(&Timex.day_shortname/1)
-    |> IO.inspect(label: "day names...")
   end
 
   defp week_rows(cursor_date, week_start_at) do
@@ -37,12 +36,10 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
       cursor_date
       |> Timex.end_of_month()
       |> Timex.end_of_week(week_start_at)
-      |> IO.inspect(label: "last found")
 
     Interval.new(from: first, until: last, right_open: false)
     |> Enum.map(& &1)
     |> Enum.chunk_every(7)
-    |> IO.inspect(label: "week rows")
   end
 
   defp assign_day_names(socket) do
@@ -51,9 +48,7 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
   end
 
   defp assign_init_dates(socket, today) do
-    socket
-    |> assign(:current_date, today)
-    |> assign(:cursor_date, today)
+    assign(socket, [current_date: today, cursor_date: today])
   end
 
   defp assign_week_rows(socket) do
@@ -63,4 +58,25 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
     assign(socket, :week_rows, week_rows(cursor_date, week_start_at))
   end
 
+  def handle_event("prev-month", _, socket) do
+    cursor_date = Timex.shift(socket.assigns.cursor_date, months: -1)
+
+    assigns = [
+      cursor_date: cursor_date,
+      week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
+    ]
+
+    {:noreply, assign(socket, assigns)}
+  end
+
+  def handle_event("next-month", _, socket) do
+    cursor_date = Timex.shift(socket.assigns.cursor_date, months: 1)
+
+    assigns = [
+      cursor_date: cursor_date,
+      week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
+    ]
+
+    {:noreply, assign(socket, assigns)}
+  end
 end

lib/shift73k_web/live/shift_assign_live/index.html.leex

@@ -6,7 +6,7 @@
 <%# month navigation %>
 <div class="d-flex justify-content-between align-items-baseline mt-4">
   <h3 class="ms-4 text-muted mb-0">
-    <%= Timex.format!(@current_date, "%B %Y", :strftime) %>
+    <%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>
   </h3>
   <div class="me-4">
     <a href="#" phx-click="prev-month" class="btn btn-primary">
@@ -35,11 +35,19 @@
     <%= for week <- @week_rows do %>
       <tr>
       <%= for day <- week do %>
-        <%= if Timex.compare(day, @current_date, :days) == 0 do %>
-        <td width="14%" style="height: 5rem;" class="bg-info text-white">
-        <% else %>
-        <td width="14%" style="height: 5rem;">
+        <%= cond do %>
+
+          <% Timex.compare(day, @current_date, :days) == 0 -> %>
+            <td width="14%" style="height: 6rem;" class="bg-info text-white">
+
+          <% day.month != @cursor_date.month -> %>
+            <td width="14%" style="height: 6rem;" class="bg-light text-gray">
+
+          <% true -> %>
+            <td width="14%" style="height: 6rem;">
+
         <% end %>
+
           <%= Timex.format!(day, "%d", :strftime) %>
         </td>
       <% end %>