Bump up opacity on icons to increase contrast

resources/css/common.css

@@ -126,7 +126,7 @@ html[data-theme='light'] {
   --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
   --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
-  --ls-icon-color: #c1bdb7;
+  --ls-icon-color: #908e8b;
   --ls-search-icon-color: var(--ls-icon-color);
   --ls-a-chosen-bg: #f4f5f7;
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
@@ -722,7 +722,7 @@ hr {
 
 .cp__header-logo,
 .fade-link {
-  opacity: 0.3;
+  opacity: 0.6;
   transition: 0.3s;
 }
 

src/main/frontend/components/header.cljs

@@ -168,12 +168,12 @@
        (logo {:white? white?})
 
        (when (util/electron?)
-         [:a.mr-1.opacity-30.hover:opacity-100.it.navigation
+         [:a.mr-1.opacity-60.hover:opacity-100.it.navigation
           {:style {:margin-left -10}
            :title "Go Back" :on-click #(js/window.history.back)} (svg/arrow-left)])
 
        (when (util/electron?)
-         [:a.opacity-30.hover:opacity-100.it.navigation
+         [:a.opacity-60.hover:opacity-100.it.navigation
           {:style {:margin-right 15}
            :title "Go Forward" :on-click #(js/window.history.forward)} (svg/arrow-right)])
 

src/main/frontend/components/header.css

@@ -95,4 +95,5 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 7ch;
+  color: var(--ls-icon-color, #045591);
 }

src/main/frontend/components/page.cljs

@@ -368,13 +368,13 @@
                                     (remove nil?)))]
                    [:div.flex.flex-row
                     (plugins/hook-ui-slot :page-head-actions-slotted nil)
-                    [:a.opacity-30.hover:opacity-100.page-op.mr-1
+                    [:a.opacity-60.hover:opacity-100.page-op.mr-1
                      {:title "Search in current page"
                       :on-click #(route-handler/go-to-search! :page)}
                      svg/search]
                     (ui/dropdown-with-links
                      (fn [{:keys [toggle-fn]}]
-                       [:a.cp__vertial-menu-button
+                       [:a.cp__vertical-menu-button
                         {:title    "More options"
                          :on-click toggle-fn}
                         (svg/vertical-dots nil)])

src/main/frontend/components/page.css

@@ -29,16 +29,16 @@
   }
 }
 
-.cp__vertial-menu-button {
-    opacity: 0.3;
+.cp__vertical-menu-button {
+    opacity: 60%;
     display: block;
 }
 
-.cp__vertial-menu-button:hover {
+.cp__vertical-menu-button:hover {
     opacity: 1;
 }
 
-.cp__vertial-menu-button svg {
+.cp__vertical-menu-button svg {
     width: 20px;
     height: 20px;
 }

src/main/frontend/components/repo.cljs

@@ -99,7 +99,7 @@
       (when-not (= repo config/local-repo)
         (if (and nfs-repo? (nfs-handler/supported?))
           (let [syncing? (state/sub :graph/syncing?)]
-            [:div.ml-3.mr-1.mt-1.opacity-30.refresh.hover:opacity-100 {:class (if syncing? "loader" "initial")}
+            [:div.ml-3.mr-1.mt-1.opacity-60.refresh.hover:opacity-100 {:class (if syncing? "loader" "initial")}
              [:a
               {:on-click #(nfs-handler/refresh! repo refresh-cb)
                :title (str "Import files from the local directory: " (config/get-local-dir repo) ".\nVersion: "

src/main/frontend/components/right_sidebar.cljs

@@ -28,7 +28,7 @@
 (rum/defc toggle
   []
   (when-not (util/mobile?)
-    [:a.opacity-50.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
+    [:a.opacity-60.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
     (svg/menu)]))
 
 (rum/defc block-cp < rum/reactive

src/main/frontend/components/search.css

@@ -10,7 +10,7 @@
 
 #search-wrapper svg {
     color: var(--ls-search-icon-color, #9fa6b2);
-    opacity: 0.3;
+    opacity: 0.6;
     transition: .3s;
 }