From 9c771b57a33e5a611a7edb1d68eff837a753f6ad Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Sun, 27 Aug 2023 22:16:17 +0200 Subject: feat(frontend): Add initial light-theme support Currently just based on prefers-color-scheme --- src/frontend/tubo/components/comments.cljs | 2 +- src/frontend/tubo/components/items.cljs | 6 +++--- src/frontend/tubo/views.cljs | 30 +++++++++++++++--------------- src/frontend/tubo/views/stream.cljs | 8 ++++---- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/frontend/tubo/components/comments.cljs b/src/frontend/tubo/components/comments.cljs index fb540ae..b107bac 100644 --- a/src/frontend/tubo/components/comments.cljs +++ b/src/frontend/tubo/components/comments.cljs @@ -24,7 +24,7 @@ (when uploader-name [:div.flex.items-center [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} - [:h1.text-gray-300.font-bold uploader-name]] + [:h1.text-neutral-800.dark:text-gray-300.font-bold uploader-name]] (when stream-position [:p.mx-1.text-xs (str "at " (util/format-duration stream-position))])]) (when uploader-verified? diff --git a/src/frontend/tubo/components/items.cljs b/src/frontend/tubo/components/items.cljs index 95e2251..c4b68d8 100644 --- a/src/frontend/tubo/components/items.cljs +++ b/src/frontend/tubo/components/items.cljs @@ -13,7 +13,7 @@ [:img.rounded.object-cover.min-h-full.max-h-full.min-w-full {:src thumbnail-url}] (when duration [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}} - [:p {:style {:fontSize "14px"}} + [:p.text-white {:style {:fontSize "14px"}} (if (= duration 0) "LIVE" (util/format-duration duration))]])]]) @@ -31,8 +31,8 @@ [:div.flex.items-center.my-2 (if uploader-url [:a {:href (rfe/href :tubo.routes/channel nil {:url uploader-url}) :title uploader-name} - [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name]] - [:h1.line-clamp-1.text-gray-300.font-bold.pr-2 uploader-name]) + [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name]] + [:h1.line-clamp-1.text-neutral-800.dark:text-gray-300.font-bold.pr-2 uploader-name]) (when verified? [:i.fa-solid.fa-circle-check])]) (when subscriber-count diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs index 07fd64f..8ee51f9 100644 --- a/src/frontend/tubo/views.cljs +++ b/src/frontend/tubo/views.cljs @@ -37,49 +37,49 @@ :params {} :query {:q global-search :serviceId service-id}}]))} [:div - [:input.bg-transparent.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto - {:type "text" - :value global-search - :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)]) + [:input.bg-transparent.text-white.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto + {:type "text" + :value global-search + :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)]) :placeholder "Search for something"}]] [:div.flex.items-center.px-2 [:button.text-white {:type "submit"} [:i.fas.fa-search]]]] - [:div.cursor-pointer.px-2.ml:hidden + [:div.cursor-pointer.px-2.ml:hidden.text-white {:on-click #(rf/dispatch [::events/toggle-mobile-nav])} [:i.fa-solid.fa-bars]] - [:div.bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8 + [:div.bg-white.dark:bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8 {:class (str "ease-in-out delay-75 transition-[right] " - "ml:w-full ml:flex ml:min-h-0 ml:relative ml:text-white ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 " + "ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 " (if mobile-nav? "right-0" "right-[-245px]"))} [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2 {:on-click #(rf/dispatch [::events/toggle-mobile-nav])} [:i.fa-solid.fa-close.text-xl]] [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row - [:div.w-full.box-border.z-10 + [:div.w-full.box-border.z-10.ml:text-white [: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 (js/parseInt (.. % -target -value))]) - :value service-id - :style {:background "transparent"}} + :value service-id + :style {:background "transparent"}} (when services (for [service services] [:option.bg-neutral-900.border-none {:value (:id service) :key (:id service)} (-> service :info :name)]))]] - [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0 + [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white [:i.fa-solid.fa-caret-down]]] [:div.relative.flex-auto.ml:pl-4 - [:ul.flex.font-roboto.flex-col.ml:flex-row + [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white (for [kiosk available-kiosks] [:li.px-5.py-2 {:key kiosk} [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id - :kioskId kiosk})} + :kioskId kiosk})} kiosk]])]]]]])) (defn footer [] [:footer - [:div.bg-black.text-gray-300.p-5.text-center.w-full + [:div.bg-neutral-300.dark:bg-black.dark:text-gray-300.p-5.text-center.w-full [:div.flex.flex-col.justify-center.items-center [:div.flex.items-center.justify-center [:div.items-center @@ -89,7 +89,7 @@ (defn app [] (let [current-match @(rf/subscribe [:current-match])] - [:div.min-h-screen.flex.flex-col.h-full.text-white.bg-neutral-900.relative + [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative [navbar current-match] [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}} (when-let [view (-> current-match :data :view)] diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs index e3a0222..2a7c180 100644 --- a/src/frontend/tubo/views/stream.cljs +++ b/src/frontend/tubo/views/stream.cljs @@ -22,7 +22,7 @@ {:keys [content id] :as stream-format} @(rf/subscribe [:stream-format]) page-loading? @(rf/subscribe [:show-page-loading]) service-color @(rf/subscribe [:service-color])] - [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto + [:div.flex.flex-col.items-center.justify-center.dark:text-white.flex-auto (if page-loading? [loading/loading-icon service-color "text-5xl"] [:div.w-full.pb-4.relative {:class "ml:w-4/5 xl:w-3/5"} @@ -40,7 +40,7 @@ [:div.px-4.ml:p-0 [:div.flex.flex.w-full.mt-3 (when stream-format - [:div.relative.flex.bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black + [:div.relative.flex.dark:bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.pl-4.pr-8.w-full {:on-change #(rf/dispatch [::events/change-stream-format (.. % -target -value)]) :value id @@ -52,12 +52,12 @@ [:div.flex.absolute.min-h-full.top-0.right-4.items-center.justify-end {:style {:zIndex "-1"}} [:i.fa-solid.fa-caret-down]]]) - [:button.border.rounded.border-black.px-3.py-1.bg-stone-800 + [:button.border.rounded.border-black.px-3.py-1.dark:bg-stone-800 {:on-click #(rf/dispatch [::events/switch-to-global-player {:uploader-name uploader-name :uploader-url uploader-url :name name :url url :stream content :service-color service-color}])} [:i.fa-solid.fa-headphones]] - [:button.border.rounded.border-black.px-3.py-1.bg-stone-800.mx-2 + [:button.border.rounded.border-black.px-3.py-1.dark:bg-stone-800.mx-2 [:a {:href url} [:i.fa-solid.fa-external-link-alt]]]] [:div.flex.flex-col.py-1.comments -- cgit v1.2.3