fix(ui): modal text color (#1421)

Co-authored-by: Tienson Qin <[email protected]>

src/main/frontend/components/commit.cljs

@@ -35,7 +35,7 @@
     [:div
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left.mb-2
-       [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+       [:h3#modal-headline.text-lg.leading-6.font-medium
         "Your commit message:"]]]
 
      [:input#commit-message.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2

src/main/frontend/components/encryption.cljs

@@ -22,7 +22,7 @@
       [:div
        [:div.sm:flex.sm:items-start
         [:div.mt-3.text-center.sm:mt-0.sm:text-left
-         [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+         [:h3#modal-headline.text-lg.leading-6.font-medium
           "This graph is encrypted with " [:a {:href "https://age-encryption.org/" :target "_blank" :rel "noopener"} "age-encryption.org/v1"]]]]
 
        [:div.mt-1
@@ -113,7 +113,7 @@
     [:div.sm:w-96
      [:div.sm:flex.sm:items-start
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
-       [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+       [:h3#modal-headline.text-lg.leading-6.font-medium
         "Do you want to create an encrypted graph?"]]]
 
      [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
@@ -145,7 +145,7 @@
       [:div
        [:div.sm:flex.sm:items-start
         [:div.mt-3.text-center.sm:mt-0.sm:text-left
-         [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+         [:h3#modal-headline.text-lg.leading-6.font-medium
           "Enter your password"]]]
 
        [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2

src/main/frontend/components/page.cljs

@@ -155,7 +155,7 @@
             :stroke-linejoin "round"
             :stroke-linecap "round"}]]]
         [:div.mt-3.text-center.sm:mt-0.sm:ml-4.sm:text-left
-         [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+         [:h3#modal-headline.text-lg.leading-6.font-medium
           (t :page/delete-confirmation)]]]
 
        [:div.mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
@@ -179,7 +179,7 @@
       [:div.w-full.sm:max-w-lg.sm:w-96
        [:div.sm:flex.sm:items-start
         [:div.mt-3.text-center.sm:mt-0.sm:text-left
-         [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+         [:h3#modal-headline.text-lg.leading-6.font-medium
           (t :page/rename-to page-name)]]]
 
        [:input.form-input.block.w-full.sm:text-sm.sm:leading-5.my-2

src/main/frontend/components/project.cljs

@@ -21,7 +21,7 @@
           :stroke-linejoin "round",
           :stroke-linecap "round"}]]]
       [:div.mt-3.text-center.sm:mt-0.sm:ml-4.sm:text-left
-       [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900
+       [:h3#modal-headline.text-lg.leading-6.font-medium
         "Setup a public project on Logseq"]
        [:div.mt-2
         [:p.text-sm.leading-5.text-gray-500

src/main/frontend/components/reference.cljs

@@ -25,7 +25,7 @@
       [:div.mx-auto.flex-shrink-0.flex.items-center.justify-center.h-12.w-12.rounded-full.bg-gray-200.text-gray-500.sm:mx-0.sm:h-10.sm:w-10
        (svg/filter-icon)]
       [:div.mt-3.text-center.sm:mt-0.sm:ml-4.sm:text-left
-       [:h3#modal-headline.text-lg.leading-6.font-medium.text-gray-900 "Filter"]
+       [:h3#modal-headline.text-lg.leading-6.font-medium "Filter"]
        [:span.text-xs
         "Click to include and shift-click to exclude. Click again to remove."]]]
      [:div.mt-5.sm:mt-4.sm:flex.sm.gap-1.flex-wrap

src/main/frontend/components/settings.css

@@ -1,7 +1,5 @@
 .cp__settings {
   &-main {
-    padding: 24px;
-
     > h1.title {
       margin-bottom: 2rem;
     }

src/main/frontend/components/sidebar.css

@@ -53,8 +53,7 @@
 }
 
 .settings-modal {
-  max-height: 80vh;
-  overflow-y: auto;
+  margin: -15px;
 }
 
 .cp__sidebar-layout {

src/main/frontend/ui.css

@@ -66,12 +66,17 @@
   }
 
   &-panel {
+    @apply relative rounded-md shadow-xl;
+
+    overflow: hidden;
+    background: var(--ls-secondary-background-color);
+
+    .panel-content {
+      overflow-y: auto;
+      max-height: 80vh;
       max-width: 768px;
-      @apply relative rounded-md shadow-xl;
-      background: var(--ls-secondary-background-color);
-      .panel-content {
-          padding: 2rem;
-      }
+      padding: 2rem;
+    }
   }
 
   &-close {