feat(frontend): further tweak various styles

5 files changed, 48 insertions, 43 deletions

diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs
index c5c4b68..8a21351 100644
--- a/src/frontend/tubo/components/comments.cljs
+++ b/src/frontend/tubo/components/comments.cljs
@@ -22,15 +22,17 @@
      (when pinned?
        [:i.fa-solid.fa-thumbtack.mr-2.text-xs])
      (when uploader-name
-       [:div.flex.items-center
+       [:div.flex.items-stretch
         [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
-         [:h1.text-neutral-800.dark:text-gray-300.font-bold uploader-name]]
+         [:h1.text-neutral-800.dark:text-gray-300.font-bold.line-clamp-1 uploader-name]]
         (when stream-position
-          [:p.mx-1.text-xs (str "at " (util/format-duration stream-position))])])
+          [:div.text-neutral-600.dark:text-neutral-300.flex.items-center
+           [:span.mx-2.mb-1.text-xs {:dangerouslySetInnerHTML {:__html "•"}}]
+           [:span.text-xs.whitespace-nowrap (util/format-duration stream-position)]])])
      (when uploader-verified?
        [:i.fa-solid.fa-circle-check.ml-2])]
     [:div.my-2
-     [:p {:dangerouslySetInnerHTML {:__html text}}]]
+     [:p.break-words {:dangerouslySetInnerHTML {:__html text}}]]
     [:div..flex.items-center.my-2
      [:div.mr-4
       [:p (util/format-date upload-date)]]
diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index a48854c..4934990 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -5,7 +5,7 @@
 
 (defn back-button [service-color]
   [:div.flex.items-center
-   [:button.py-4.px-2
+   [:button.py-4.pl-2.sm:pl-0
     {:on-click #(rf/dispatch [::events/history-back])}
     [:i.fa-solid.fa-chevron-left
      {:style {:color service-color}}]
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 9f684e1..622984a 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -187,11 +187,6 @@
    (:show-media-queue db)))
 
 (rf/reg-sub
- :theme
- (fn [db _]
-   (:theme db)))
-
-(rf/reg-sub
  :settings
  (fn [db _]
    (:settings db)))
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 736a60d..8f052ca 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -13,20 +13,23 @@
 (defonce kiosks (rf/dispatch [::events/get-kiosks 0]))
 
 (defn mobile-nav
-  [show-mobile-nav? service-id services available-kiosks]
+  [show-mobile-nav? service-id service-color services available-kiosks]
   [:<>
-   [:div.w-full.fixed.min-h-screen.right-0.top-0
+   [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out
     {:class    "bg-black/50"
-     :style    {:visibility (when-not show-mobile-nav? "hidden")}
+     :style    {:visibility (when-not show-mobile-nav? "hidden")
+                :opacity (if show-mobile-nav? "1" "0")}
      :on-click #(rf/dispatch [::events/toggle-mobile-nav])}]
    [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900
     {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))}
-    [:div.flex.justify-center.py-8.items-center
-     [:img.mb-1 {:src   "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"}
-                 :title "Tubo"}]
-     [:h3.text-3xl.font-bold.px-4 "Tubo"]]
-    [:div.relative.flex.flex-col.items-center-justify-center
-     [:div.w-full.box-border.z-10.ml:text-white
+    [:div.flex.justify-center.py-8.items-center.text-white {:style {:background service-color}}
+     [:img.mb-1
+      {:src   "/images/tubo.png"
+       :style {:maxHeight "25px" :maxWidth "40px"}
+       :title "Tubo"}]
+     [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]]
+    [:div.relative.flex.flex-col.items-center-justify-center.text-white {:style {:background service-color}}
+     [:div.w-full.box-border.z-10
       [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
        {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))])
         :value     service-id
@@ -38,19 +41,25 @@
             (-> service :info :name)]))]]
      [:div.flex.absolute.min-h-full.top-0.right-6.items-center.justify-end.z-0
       [:i.fa-solid.fa-caret-down]]]
-    [:div.relative.pb-4
+    [:div.relative.py-4
      [:ul.flex.font-roboto.flex-col
       (for [kiosk available-kiosks]
         [:li.px-5.py-2 {:key kiosk}
          [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
                                                   :kioskId   kiosk})}
-          kiosk]])]]
+          [:i.fa-solid.fa-fire.text-neutral-600.dark:text-neutral-300]
+          [:span.ml-7 kiosk]]])]]
     [:div.relative.dark:border-neutral-800.border-gray-300.pt-4
      {:class "border-t-[1px]"}
      [:ul.flex.font-roboto
       [:li.px-5.py-2
        [:a {:href (rfe/href ::routes/settings)}
-        "Settings"]]]]]])
+        [:i.fa-solid.fa-cog.text-neutral-600.dark:text-neutral-300]
+        [:span.ml-7 "Settings"]]]
+      [:li.px-5.py-2
+       [:a {:href "https://github.com/migalmoreno/tubo" :target "_blank"}
+        [:i.fa-brands.fa-github]
+        [:span.ml-7 "Source"]]]]]]])
 
 (defn navbar
   [{{:keys [serviceId]} :query-params}]
@@ -82,14 +91,14 @@
                                           :params {}
                                           :query  {:q search-query :serviceId service-id}}])))}
            [:div.relative
-            [:input.bg-transparent.text-white.border-none.rounded.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
+            [:input.bg-transparent.text-white.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.w-40.xs:w-auto
              {:type          "text"
               :ref #(reset! !input %)
               :default-value @!query
               :on-change     #(let [input (.. % -target -value)]
                                 (when-not (empty? input) (rf/dispatch [::events/change-search-query input]))
                                 (reset! !query input))
-              :placeholder   "Search for something"}]
+              :placeholder   "Search"}]
             [:button.mx-2.text-xs.text-white.absolute.right-0.top-3
              {:type     "button"
               :on-click #(when @!input
@@ -98,7 +107,7 @@
                            (.focus @!input))
               :class    (when (empty? @!query) "invisible")}
              [:i.fa-solid.fa-circle-xmark]]]
-           [:div.flex.items-center.px-2.text-white
+           [:div.flex.items-center.text-white
             [:button.mx-2
              {:type "submit"}
              [:i.fa-solid.fa-search]]
@@ -108,7 +117,7 @@
           [:div.cursor-pointer.px-2.ml:hidden.text-white
            {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
            [:i.fa-solid.fa-bars]]
-          [mobile-nav show-mobile-nav? service-id services available-kiosks]
+          [mobile-nav show-mobile-nav? service-id service-color services available-kiosks]
           [:div.hidden.ml:flex.w-full
            [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
             [:div.w-full.box-border.z-10.ml:text-white
@@ -126,7 +135,7 @@
            [:div.relative.flex-auto.ml:pl-4
             [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
              (for [kiosk available-kiosks]
-               [:li.px-4.py-2 {:key kiosk}
+               [:li.px-3.py-2 {:key kiosk}
                 [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
                                                          :kioskId   kiosk})}
                  kiosk]])]]]]]))))
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
index 8024a13..1727da1 100644
--- a/src/frontend/tubo/views/stream.cljs
+++ b/src/frontend/tubo/views/stream.cljs
@@ -49,10 +49,10 @@
           [:button.px-3.py-1.mx-2
            [:a.block.sm:inline-block {:href url}
             [:i.fa-solid.fa-external-link-alt]]
-           [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Original"]]
+           [:span.mx-3 "Original"]]
           (when stream-format
-            [:div.relative.flex.flex-col.items-center.justify-center.z-10.mr-2
-             [:select.border-none.focus:ring-transparent.dark:bg-blend-color-dodge.pl-4.pr-8.w-full
+            [:div.relative.flex.flex-col.items-center.justify-center.text-neutral-600.dark:text-neutral-300
+             [:select.border-none.focus:ring-transparent.dark:bg-blend-color-dodge.pr-8.w-full.text-ellipsis.text-sm.sm:text-base
               {:on-change #(rf/dispatch [::events/change-stream-format (.. % -target -value)])
                :value     id
                :style     {:background "transparent"}}
@@ -61,40 +61,39 @@
                   [:option.dark:bg-neutral-900.border-none {:value id :key i}
                    (str (or resolution "audio-only") " " format (when-not resolution (str " " averageBitrate "kbit/s")))]))]
              [:div.flex.absolute.min-h-full.top-0.right-4.items-center.justify-end
-              {:style {:zIndex "-1"}}
               [:i.fa-solid.fa-caret-down]]])]
          [:div.flex.flex-col
           [:div.min-w-full.pb-3
            [:h1.text-2xl.font-extrabold.line-clamp-1 name]]
           [:div.flex.justify-between.py-2
-           [:div.flex.items-center.flex-auto
+           [:div.flex.items-center
             (when uploader-avatar
               [:div.relative.w-16.h-16
                [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name}
                 [:img.rounded-full.object-cover.max-w-full.min-h-full {:src uploader-avatar :alt uploader-name}]]])
-            [:div.mx-2
+            [:div.mx-3
              [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url})} uploader-name]
              (when subscriber-count
                [:div.flex.my-2.items-center
                 [:i.fa-solid.fa-users.text-xs]
                 [:p.mx-2 (util/format-quantity subscriber-count)]])]]
-           [:div.flex.flex-col.items-end
+           [:div.flex.flex-col.items-end.flex-auto
             (when view-count
-              [:div
-               [:i.fa-solid.fa-eye.text-xs]
+              [:div.sm:text-base.text-sm.mb-1
+               [:i.fa-solid.fa-eye]
                [:span.ml-2 (.toLocaleString view-count)]])
             [:div.flex
              (when like-count
-               [:div.items-center
-                [:i.fa-solid.fa-thumbs-up.text-xs]
+               [:div.items-center.sm:text-base.text-sm
+                [:i.fa-solid.fa-thumbs-up]
                 [:span.ml-2 (.toLocaleString like-count)]])
              (when dislike-count
-               [:div.ml-2.items-center
-                [:i.fa-solid.fa-thumbs-down.text-xs]
+               [:div.ml-2.items-center.sm:text-base.text-sm
+                [:i.fa-solid.fa-thumbs-down]
                 [:span.ml-2 dislike-count]])]
             (when upload-date
-              [:div
-               [:i.fa-solid.fa-calendar.mx-2.text-xs]
+              [:div.sm:text-base.text-sm.mt-1
+               [:i.fa-solid.fa-calendar.mx-2]
                [:span
                 (-> upload-date
                     js/Date.parse
@@ -103,7 +102,7 @@
           (when (and show-description? description)
             [:div.py-3.flex.flex-wrap.min-w-full
              [:div {:dangerouslySetInnerHTML {:__html description}
-                    :class (when (not show-description) "line-clamp-1")}]
+                    :class (when (not show-description) "line-clamp-2")}]
              [:div.flex.justify-center.font-bold.min-w-full.pt-4.cursor-pointer
               [:button
                {:on-click #(rf/dispatch [::events/toggle-stream-layout :show-description])}