New Design System + Codebase Refresh (#1823)

Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones

app/assets/images/logomark-color.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+  <path d="M8.39804 24.0315H4.09584C3.07641 24.0315 2.25 24.8609 2.25 25.8841C2.25 26.9072 3.07641 27.7367 4.09584 27.7367H8.39804C9.41747 27.7367 10.2439 26.9072 10.2439 25.8841C10.2439 24.8609 9.41747 24.0315 8.39804 24.0315Z" fill="#F23E94"/>
+  <path d="M27.6403 27.7359H31.9425C32.9619 27.7359 33.7883 26.9065 33.7883 25.8833C33.7883 24.8601 32.9619 24.0307 31.9425 24.0307H27.6403C26.6209 24.0307 25.7945 24.8601 25.7945 25.8833C25.7945 26.9065 26.6209 27.7359 27.6403 27.7359Z" fill="#F23E94"/>
+  <path d="M19.7588 24.0189H16.2567C15.2373 24.0189 14.4109 24.8483 14.4109 25.8715C14.4109 26.8947 15.2373 27.7241 16.2567 27.7241H19.7588C20.7783 27.7241 21.6047 26.8947 21.6047 25.8715C21.6047 24.8483 20.7783 24.0189 19.7588 24.0189Z" fill="#F23E94"/>
+  <path d="M25.9683 22.4047H30.1112C31.1306 22.4047 31.957 21.5753 31.957 20.5521C31.957 19.529 31.1306 18.6995 30.1112 18.6995H25.9683C24.9489 18.6995 24.1225 19.529 24.1225 20.5521C24.1225 21.5753 24.9489 22.4047 25.9683 22.4047Z" fill="#6927DA"/>
+  <path d="M9.99971 18.6993H5.85685C4.83742 18.6993 4.01101 19.5288 4.01101 20.5519C4.01101 21.5751 4.83742 22.4045 5.85685 22.4045H9.99971C11.0191 22.4045 11.8455 21.5751 11.8455 20.5519C11.8455 19.5288 11.0191 18.6993 9.99971 18.6993Z" fill="#6927DA"/>
+  <path d="M21.0888 18.6875H14.924C13.9045 18.6875 13.0781 19.517 13.0781 20.5401C13.0781 21.5633 13.9045 22.3927 14.924 22.3927H21.0888C22.1082 22.3927 22.9346 21.5633 22.9346 20.5401C22.9346 19.517 22.1082 18.6875 21.0888 18.6875Z" fill="#6927DA"/>
+  <path d="M15.5578 13.2072H7.69136C6.67193 13.2072 5.84552 14.0366 5.84552 15.0598C5.84552 16.0829 6.67193 16.9123 7.69136 16.9123H15.5578C16.5772 16.9123 17.4036 16.0829 17.4036 15.0598C17.4036 14.0366 16.5772 13.2072 15.5578 13.2072Z" fill="#1570EF"/>
+  <path d="M20.9094 16.9116H28.2735C29.2929 16.9116 30.1193 16.0821 30.1193 15.059C30.1193 14.0358 29.2929 13.2064 28.2735 13.2064L20.9094 13.2064C19.89 13.2064 19.0636 14.0358 19.0636 15.059C19.0636 16.0821 19.89 16.9116 20.9094 16.9116Z" fill="#1570EF"/>
+  <path d="M26.5036 7.875H22.3515C21.3321 7.875 20.5057 8.70443 20.5057 9.72759C20.5057 10.7507 21.3321 11.5802 22.3515 11.5802H26.5036C27.523 11.5802 28.3494 10.7507 28.3494 9.72759C28.3494 8.70443 27.523 7.875 26.5036 7.875Z" fill="#22CCEE"/>
+  <path d="M13.6077 7.875H9.45557C8.43614 7.875 7.60973 8.70443 7.60973 9.72759C7.60973 10.7507 8.43614 11.5802 9.45557 11.5802H13.6077C14.6271 11.5802 15.4535 10.7507 15.4535 9.72759C15.4535 8.70443 14.6271 7.875 13.6077 7.875Z" fill="#22CCEE"/>
+</svg>

app/assets/tailwind/application.css

@@ -8,7 +8,7 @@
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 
-@utility combobox {
+.combobox {
   .hw-combobox__main__wrapper,
   .hw-combobox__input {
     @apply w-full;
@@ -40,6 +40,35 @@
   --hw-handle-offset-right: 0px;
 }
 
+/* Typography */
+.prose {
+  @apply max-w-none;
+
+  h2 {
+    @apply text-xl font-medium;
+  }
+
+  h3 {
+    @apply text-lg font-medium;
+  }
+
+  li {
+    @apply m-0;
+  }
+
+  details {
+    @apply mb-4 rounded-xl mt-3.5;
+  }
+
+  summary {
+    @apply flex items-center gap-1;
+  }
+
+  video {
+    @apply m-0 rounded-b-xl;
+  }
+}
+
 .prose--github-release-notes {
   .octicon {
     @apply inline-block overflow-visible align-text-bottom fill-current;

app/assets/tailwind/maybe-design-system.css

@@ -256,23 +256,43 @@
 }
 
 @utility bg-surface {
-  @apply bg-gray-50 hover:bg-gray-100;
+  @apply bg-gray-50;
+}
+
+@utility bg-surface-hover {
+  @apply bg-gray-100;
 }
 
 @utility bg-surface-inset {
-  @apply bg-gray-100 hover:bg-gray-200;
+  @apply bg-gray-100;
+}
+
+@utility bg-surface-inset-hover {
+  @apply bg-gray-200;
 }
 
 @utility bg-container {
-  @apply bg-white hover:bg-gray-50;
+  @apply bg-white;
+}
+
+@utility bg-container-hover {
+  @apply bg-gray-50;
 }
 
 @utility bg-container-inset {
-  @apply bg-gray-50 hover:bg-gray-100;
+  @apply bg-gray-50;
+}
+
+@utility bg-container-inset-hover {
+  @apply bg-gray-100;
 }
 
 @utility bg-inverse {
-  @apply bg-gray-800 hover:bg-gray-700;
+  @apply bg-gray-800;
+}
+
+@utility bg-inverse-hover {
+  @apply bg-gray-700;
 }
 
 @utility bg-overlay {
@@ -291,7 +311,19 @@
   @apply border-alpha-black-100;
 }
 
+@utility border-subdued {
+  @apply border-alpha-black-50;
+}
+
 @layer base {
+  form>button {
+    @apply cursor-pointer;
+  }
+
+  hr {
+    @apply text-gray-200;
+  }
+
   details>summary::-webkit-details-marker {
     @apply hidden;
   }
@@ -337,7 +369,7 @@
   }
   
   .btn--ghost {
-    @apply border border-transparent text-gray-900 hover:bg-gray-50;
+    @apply border border-transparent text-gray-900 hover:bg-gray-100;
   }
 
   .btn--destructive {
@@ -412,35 +444,6 @@
     @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
   }
 
-  /* Typography */
-  .prose {
-    @apply max-w-none;
-  
-    h2 {
-      @apply text-xl font-medium;
-    }
-  
-    h3 {
-      @apply text-lg font-medium;
-    }
-  
-    li {
-      @apply m-0;
-    }
-  
-    details {
-      @apply mb-4 rounded-xl mt-3.5;
-    }
-  
-    summary {
-      @apply flex items-center gap-1;
-    }
-  
-    video {
-      @apply m-0 rounded-b-xl;
-    }
-  }
-
   /* Tooltips */
   .tooltip {
     @apply hidden absolute;