Improve appearance

Author: s3cur3

lib/cbt_web/live/new_journal_entry_live.ex

@@ -43,9 +43,9 @@ defmodule CbtWeb.NewJournalEntryLive do
               <label
                 for={"mood-rating-#{rating}"}
                 class={[
-                  "cursor-pointer p-2 rounded-full transition-colors border-2",
+                  "cursor-pointer w-10 h-10 rounded-full transition-colors border flex flex-col items-center justify-center",
                   if(@form[:mood_rating].value == rating,
-                    do: "bg-blue-100 border-blue-500 ring-2 ring-blue-300 text-blue-900",
+                    do: "bg-blue-100 border-blue-200 text-blue-900",
                     else: "hover:bg-gray-100 border-transparent"
                   )
                 ]}
@@ -54,7 +54,7 @@ defmodule CbtWeb.NewJournalEntryLive do
               </label>
               <span class={[
                 "text-xs mt-1",
-                if(@form[:mood_rating].value == rating, do: "text-blue-700 font-semibold", else: "text-gray-600")
+                if(@form[:mood_rating].value == rating, do: "text-blue-600", else: "text-gray-600")
               ]}>
                 {mood_label(rating)}
               </span>

priv/static/assets/app.css

@@ -1095,6 +1095,18 @@ select {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1147,6 +1159,18 @@ select {
   width: 100%;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1379,6 +1403,16 @@ select {
   border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -1445,6 +1479,10 @@ select {
   padding: 1rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1659,6 +1697,11 @@ select {
   color: rgb(24 24 27 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
 .underline {
   text-decoration-line: underline;
 }