improve(ui): polish built-in icon

src/main/frontend/components/page.cljs

@@ -927,10 +927,14 @@
              {:class (util/classnames [{:is-first (= 1 @*current-page)
                                         :is-last  (= @*current-page total-pages)}])}
              (when has-prev?
-               [:a.py-4.pr-2.fade-link {:on-click #(to-page (dec @*current-page))} (ui/icon "caret-left") (str " " (t :paginates/prev))])
+               [:a.py-4.pr-2.fade-link.flex.items-center
+                {:on-click #(to-page (dec @*current-page))}
+                (ui/icon "caret-left") (str " " (t :paginates/prev))])
              [:span.opacity-60 (str @*current-page "/" total-pages)]
              (when has-next?
-               [:a.py-4.pl-2.fade-link {:on-click #(to-page (inc @*current-page))} (str (t :paginates/next) " ") (ui/icon "caret-right")])]]
+               [:a.py-4.pl-2.fade-link.flex.items-center
+                {:on-click #(to-page (inc @*current-page))} (str (t :paginates/next) " ")
+                (ui/icon "caret-right")])]]
 
            (ui/dropdown-with-links
             (fn [{:keys [toggle-fn]}]
@@ -1010,6 +1014,8 @@
           [:span]
           [:span.flex.items-center
            (when has-prev?
-             [:a.py-4.text-sm.fade-link {:on-click #(to-page (dec @*current-page))} (ui/icon "caret-left") (str " " (t :paginates/prev))])
+             [:a.py-4.text-sm.fade-link.flex.items-center {:on-click #(to-page (dec @*current-page))}
+              (ui/icon "caret-left") (str " " (t :paginates/prev))])
            (when has-next?
-             [:a.py-4.pl-2.text-sm.fade-link {:on-click #(to-page (inc @*current-page))} (str (t :paginates/next) " ") (ui/icon "caret-right")])]]]))]))
+             [:a.py-4.pl-2.text-sm.fade-link.flex.items-center {:on-click #(to-page (inc @*current-page))} (str (t :paginates/next) " ")
+              (ui/icon "caret-right")])]]]))]))

src/main/frontend/components/repo.cljs

@@ -228,7 +228,9 @@
                                              (check-multiple-windows? state)
                                              (toggle-fn))
                                  :title    repo-path}       ;; show full path on hover
-                                (ui/icon "database mr-2" {:style {:font-size 16} :id "database-icon"})
+                                [:span.flex.pr-2.relative
+                                 {:style {:top 2}}
+                                 (ui/icon "database" {:size 16 :id "database-icon"})]
                                 [:div.graphs
                                  [:span#repo-switch.block.pr-2.whitespace-nowrap
                                   [:span [:span#repo-name.font-medium

src/main/frontend/components/settings.cljs

@@ -700,7 +700,7 @@
                       (not (file-sync-handler/synced-file-graph? current-repo)))
                  [:git "git" (t :settings-page/tab-version-control) (ui/icon "history" {:style {:font-size 20}})])
                [:advanced "advanced" (t :settings-page/tab-advanced) (ui/icon "bulb" {:style {:font-size 20}})]
-               [:features "features" (t :settings-page/tab-features) (ui/icon "app-feature" {:style {:font-size 20}
+               [:features "features" (t :settings-page/tab-features) (ui/icon "app-feature" {:style {:font-size 18}
                                                                                              :extension? true})]
                (when plugins-of-settings
                  [:plugins-setting "plugins" (t :settings-of-plugins) (ui/icon "puzzle")])]]

src/main/frontend/components/settings.css

@@ -41,10 +41,8 @@
             color: var(--ls-primary-text-color);
 
             > i {
-              width: 20px;
-              height: 20px;
               overflow: hidden;
-              opacity: .8;
+              opacity: .9;
             }
 
             > strong {
@@ -290,22 +288,17 @@
   }
 }
 
-/* Styles for the category icon on the left of settings-modal */
-.cp__settings-inner > aside ul > li > a > i {
-  margin-right: 4px;
-}
-
 html.is-native-android,
 html.is-native-iphone,
 html.is-native-iphone-without-notch {
 
   .cp__settings-inner {
     > article {
-      padding-bottom: 0px;
+      padding-bottom: 0;
     }
 
     .panel-wrap {
-      padding-bottom: 0px;
+      padding-bottom: 0;
     }
   }
 }