From 0fd925a7dc475a51abd861273d60200c7bc011ce Mon Sep 17 00:00:00 2001 From: Miguel Ángel Moreno Date: Sun, 1 Dec 2024 22:46:27 +0100 Subject: feat: refine colors and font sizes --- src/frontend/tubo/bookmarks/modals.cljs | 2 +- src/frontend/tubo/items/views.cljs | 81 ++++++++++++++++-------------- src/frontend/tubo/layout/views.cljs | 25 ++++----- src/frontend/tubo/modals/views.cljs | 2 +- src/frontend/tubo/navigation/views.cljs | 2 +- src/frontend/tubo/notifications/views.cljs | 4 +- src/frontend/tubo/queue/views.cljs | 13 ++--- src/frontend/tubo/stream/views.cljs | 19 +++---- 8 files changed, 78 insertions(+), 70 deletions(-) diff --git a/src/frontend/tubo/bookmarks/modals.cljs b/src/frontend/tubo/bookmarks/modals.cljs index b6463a5..89d82be 100644 --- a/src/frontend/tubo/bookmarks/modals.cljs +++ b/src/frontend/tubo/bookmarks/modals.cljs @@ -7,7 +7,7 @@ (defn bookmark-item [{:keys [items name] :as bookmark} item] - [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.hover:bg-gray-100.dark:hover:bg-stone-800 + [:div.flex.w-full.h-24.rounded.px-2.cursor-pointer.hover:bg-neutral-100.dark:hover:bg-neutral-800 {:on-click #(rf/dispatch [(if (vector? item) :bookmark/add-n :bookmark/add) bookmark item])} [:div.w-24 diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs index c89f481..dbd93b4 100644 --- a/src/frontend/tubo/items/views.cljs +++ b/src/frontend/tubo/items/views.cljs @@ -73,7 +73,7 @@ [:a {:href route :title name} [:h1.line-clamp-2.my-1 {:class "[overflow-wrap:anywhere]"} name]] (when (and verified? (not uploader-url)) - [:i.fa-solid.fa-circle-check.pl-2])]) + [:i.fa-solid.fa-circle-check.pl-2.text-sm])]) [:div.flex.justify-between [:div.flex.items-center.my-2 (conj @@ -86,7 +86,7 @@ {:class "[overflow-wrap:anywhere]" :title uploader-name :key url} uploader-name]) (when (and uploader-url verified?) - [:i.fa-solid.fa-circle-check])] + [:i.fa-solid.fa-circle-check.text-xs])] [item-popover item bookmarks]] (when subscriber-count [:div.flex.items-center @@ -105,57 +105,62 @@ (defn list-item-content [{:keys [url name uploader-url uploader-name subscriber-count view-count - stream-count verified? thumbnail-url duration] + stream-count verified? thumbnail-url duration upload-date] :as item} route bookmarks] [:div.w-full - [:div.flex.gap-x-5 + [:div.flex.gap-x-3.xs:gap-x-5 [layout/thumbnail thumbnail-url route name duration :classes [:py-2 :h-28 "xs:h-36" "min-w-[150px]" "max-w-[150px]" "sm:min-w-[250px]" "sm:max-w-[250px]"] :rounded? true] - [:div.flex-auto.mr-2 + [:div.flex.flex-col.flex-auto.xs:mr-2.gap-y-2 (when name [:div.flex.items-center.justify-between.mt-2 [:a {:href route :title name} - [:h1.line-clamp-1.text-xl + [:h1.line-clamp-1.xs:text-xl {:class "[overflow-wrap:anywhere]"} name (when (and verified? (not uploader-url)) [:i.fa-solid.fa-circle-check.pl-3.text-sm])]] [item-popover item bookmarks]]) - [:div.flex.justify-between - [:div.flex.flex-col - [:div.flex.text-neutral-900.dark:text-neutral-400.text-sm.flex-col.xs:flex-row - (when view-count - [:<> - [:div.flex.items-center.h-full - [:p (str (utils/format-quantity view-count) " views")]] - [:span.px-2.hidden.xs:inline-block - {:dangerouslySetInnerHTML {:__html "•"}}]]) - [:span (utils/format-date-ago (:upload-date item))]] - [:div.my-2.xs:my-4.flex.gap-2.items-center - [layout/uploader-avatar item :classes ["w-6" "h-6"]] - (conj - (when uploader-url - [:a - {:href (rfe/href :channel-page nil {:url uploader-url}) - :title uploader-name - :key url}]) - [:h1.text-neutral-900.dark:text-neutral-400.font-bold.line-clamp-1.break-all.text-sm - {:class "[overflow-wrap:anywhere]" :title uploader-name :key url} - uploader-name]) - (when (and uploader-url verified?) - [:i.fa-solid.fa-circle-check.text-sm.text-neutral-400])]]] - [:div.flex.text-neutral-800.dark:text-gray-300.text-sm.flex-col.xs:flex-row - (when subscriber-count - [:<> - [:div.flex.items-center.h-full - [:p (str (utils/format-quantity subscriber-count) " subscribers")]] - [:span.px-2.hidden.xs:inline-block - {:dangerouslySetInnerHTML {:__html "•"}}]]) - (when stream-count - [:span (str (utils/format-quantity stream-count) " streams")])]]]]) + [:div.flex.items-center.justify-between.gap-y-2 + [:div.flex.flex-col.justify-center.gap-y-2.text-neutral-600.dark:text-neutral-400 + (when (or uploader-url uploader-name) + [:div.flex.gap-2.items-center + [layout/uploader-avatar item :classes ["w-6" "h-6"]] + (conj + (when uploader-url + [:a + {:href (rfe/href :channel-page nil {:url uploader-url}) + :title uploader-name + :key url}]) + [:h1.font-semibold.line-clamp-1.break-all.text-sm + {:class "[overflow-wrap:anywhere]" :title uploader-name :key url} + uploader-name]) + (when (and uploader-url verified?) + [:i.fa-solid.fa-circle-check.text-xs])]) + (when (or view-count upload-date) + [:div.flex.text-xs.xs:text-sm.flex-col.xs:flex-row + (when view-count + [:<> + [:div.flex.items-center.h-full + [:p (str (utils/format-quantity view-count) " views")]] + [:span.px-2.hidden.xs:inline-block + {:dangerouslySetInnerHTML {:__html "•"}}]]) + [:span (utils/format-date-ago upload-date)]]) + (when (or subscriber-count stream-count) + [:div.flex.text-xs.xs:text-sm.flex-col.xs:flex-row + (when subscriber-count + [:<> + [:div.flex.items-center.h-full + [:p + (str (utils/format-quantity subscriber-count) " subscribers")]] + [:span.px-2.hidden.xs:inline-block + {:dangerouslySetInnerHTML {:__html "•"}}]]) + (when stream-count + [:span + (str (utils/format-quantity stream-count) " streams")])])]]]]]) (defn related-streams [related-streams next-page-url !layout] diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs index b49f51d..26a5cb9 100644 --- a/src/frontend/tubo/layout/views.cljs +++ b/src/frontend/tubo/layout/views.cljs @@ -15,12 +15,12 @@ (if thumbnail-url [:img.object-cover.min-h-full.max-h-full.min-w-full {:src thumbnail-url :class (when rounded? :rounded)}] - [:div.bg-gray-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded + [:div.bg-neutral-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded [:i.fa-solid.fa-image.text-3xl.text-white]]) (when duration [:div.rounded.p-2.absolute {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}} - [:p.text-white.text-md + [:p.text-white.text-xs.xs:text-base (if (= duration 0) "LIVE" (utils/format-duration duration))]])]]) @@ -90,15 +90,13 @@ (defn primary-button [label on-click left-icon right-icon] [button label on-click left-icon right-icon - :button-classes ["bg-stone-800" "dark:bg-white"] + :button-classes ["bg-neutral-800" "dark:bg-neutral-200"] :label-classes ["text-neutral-300" "dark:text-neutral-900"]]) (defn secondary-button [label on-click left-icon right-icon] [button label on-click left-icon right-icon - :button-classes - ["bg-neutral-100" "dark:bg-transparent" "border" "border-neutral-300" - "dark:border-stone-700"] + :button-classes ["bg-neutral-100" "dark:bg-neutral-800"] :label-classes ["text-neutral-500" "dark:text-white"]]) (defn generic-input @@ -145,7 +143,7 @@ [:span.whitespace-nowrap label]] classes ["relative" "flex" "items-center" "gap-x-3" "hover:bg-neutral-200" - "dark:hover:bg-neutral-700" "py-2" "px-3" + "dark:hover:bg-neutral-700" "py-2" "px-4" "first:rounded-t" "last:rounded-b"]] (if link [:a @@ -153,7 +151,7 @@ :target (when (:external? link) "_blank") :class (str/join " " classes)} content] - [:li.font-semibold + [:li {:on-click on-click :class (str/join " " classes)} (if (vector? item) item content)]))) @@ -161,7 +159,7 @@ (defn menu [active? items & {:keys [right top bottom left] :or {right "15px" top "0px"}}] (when-not (empty? (remove nil? items)) - [:ul.absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white + [:ul.absolute.bg-neutral-100.dark:bg-neutral-800.rounded-t.rounded-b.z-20.flex.flex-col.text-neutral-800.dark:text-white.shadow.shadow-neutral-400.dark:shadow-neutral-900 {:class (when-not active? "hidden") :style {:right right :left left :top top :bottom bottom}} (for [[i item] (map-indexed vector (remove nil? items))] @@ -228,7 +226,7 @@ (defn error [{:keys [_failure parse-error status status-text]} cb] [:div.flex.flex-auto.h-full.items-center.justify-center.p-8 - [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-stone-700.bg-neutral-300.dark:bg-neutral-800.p-8 + [:div.flex.flex-col.gap-y-8.border-border-neutral-300.rounded.dark:border-neutral-700.bg-neutral-300.dark:bg-neutral-800.p-8 [:div.flex.items-center.gap-2.text-xl [:i.fa-solid.fa-circle-exclamation] [:h3.font-bold @@ -249,8 +247,11 @@ (for [[i tab] (map-indexed vector tabs)] (let [selected? (= (:id tab) (:id @!current))] (when tab - [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2.border-transparent - {:class (if selected? :border-white :border-transparent) :key i} + [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2 + {:class (if selected? + "border-neutral-700 dark:border-neutral-100" + "!border-transparent") + :key i} [:button.flex-auto.py-4 {:on-click (when (not selected?) (fn [] diff --git a/src/frontend/tubo/modals/views.cljs b/src/frontend/tubo/modals/views.cljs index 1ff4bb1..de54cbc 100644 --- a/src/frontend/tubo/modals/views.cljs +++ b/src/frontend/tubo/modals/views.cljs @@ -5,7 +5,7 @@ (defn modal-content [title body & extra-buttons] - [:div.bg-white.dark:bg-neutral-900.max-h-full.flex.flex-col.flex-auto.shrink-0.gap-y-5.border.border-neutral-300.dark:border-stone-700.rounded.p-5.z-20 + [:div.bg-white.dark:bg-neutral-900.max-h-full.flex.flex-col.flex-auto.shrink-0.gap-y-5.border.border-neutral-300.dark:border-neutral-700.rounded.p-5.z-20 [:div.flex.justify-between.shrink-0 [:h1.text-xl.font-semibold title] [:button {:on-click #(rf/dispatch [:modals/close])} diff --git a/src/frontend/tubo/navigation/views.cljs b/src/frontend/tubo/navigation/views.cljs index 9cae66e..ea10ed3 100644 --- a/src/frontend/tubo/navigation/views.cljs +++ b/src/frontend/tubo/navigation/views.cljs @@ -42,7 +42,7 @@ (rf/dispatch [:search/change-query input])) (reset! !query input)) :placeholder "Search"}] - [:button.mx-4 {:type "submit"} [:i.fa-solid.fa-search]] + [:button.mx-3 {:type "submit"} [:i.fa-solid.fa-search]] [:button.mx-4.text-xs.absolute.right-8.top-3 {:on-click #(when @!input (set! (.-value @!input) "") diff --git a/src/frontend/tubo/notifications/views.cljs b/src/frontend/tubo/notifications/views.cljs index 66095a6..e4f8a53 100644 --- a/src/frontend/tubo/notifications/views.cljs +++ b/src/frontend/tubo/notifications/views.cljs @@ -5,11 +5,11 @@ (defn notification-content [{:keys [failure parse-error status status-text] :as notification}] (when notification - [:div.relative.flex.justify-center.pl-4.pr-8.py-4.rounded.backdrop-blur.shadow.dark:shadow-neutral-900.shadow-neutral-700 + [:div.relative.flex.justify-center.pl-4.pr-8.py-4.rounded.shadow.dark:shadow-neutral-900.shadow-neutral-400 {:class (case failure :success ["bg-green-600/90" :text-white] :error ["bg-red-600/90" :text-white] - ["dark:bg-stone-800" "dark:text-white" :bg-neutral-300 + ["dark:bg-neutral-800" "dark:text-white" :bg-neutral-100 :text-neutral-800])} [:div.flex.items-center.gap-x-4 (case failure diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs index 7f7a874..ba6fbb5 100644 --- a/src/frontend/tubo/queue/views.cljs +++ b/src/frontend/tubo/queue/views.cljs @@ -11,16 +11,17 @@ (defn item-metadata [{:keys [uploader-name name service-id duration thumbnail-url]} queue-pos i] [:div.flex.cursor-pointer.py-2 - {:class (when (= i queue-pos) ["bg-neutral-200" "dark:bg-stone-800"]) + {:class (when (= i queue-pos) ["bg-neutral-200" "dark:bg-neutral-800"]) :on-click #(rf/dispatch [:queue/change-pos i])} - [:div.flex.items-center.justify-center.min-w-20.w-20.xs:min-w-28.xs:w-28 + [:div.flex.items-center.justify-center.min-w-16.w-16.xs:min-w-28.xs:w-28 [:span.font-bold.text-neutral-400.text-sm (if (= i queue-pos) [:i.fa-solid.fa-play] (inc i))]] - [:div.w-36 - [layout/thumbnail thumbnail-url nil name duration :classes "h-16"]] + [:div.w-32.flex.items-center + [layout/thumbnail thumbnail-url nil name duration :classes + ["h-12" "xs:h-16"]]] [:div.flex.flex-col.pl-4.pr-12.w-full - [:h1.line-clamp-1.w-fit {:title name} name] - [:div.text-neutral-600.dark:text-neutral-300.text-sm.flex.flex-col.xs:flex-row + [:h1.line-clamp-1.w-fit.text-sm.xs:text-lg {:title name} name] + [:div.text-neutral-600.dark:text-neutral-400.text-xs.xs:text-sm.flex.flex-col.xs:flex-row [:span.line-clamp-1 {:title uploader-name} uploader-name] [:span.px-2.hidden.xs:inline-block {:dangerouslySetInnerHTML {:__html "•"}}] diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs index 63184b4..9179017 100644 --- a/src/frontend/tubo/stream/views.cljs +++ b/src/frontend/tubo/stream/views.cljs @@ -100,7 +100,7 @@ [:div.flex.gap-2.py-2 (for [[i tag] (map-indexed vector tags)] ^{:key i} - [:span.bg-neutral-300.dark:bg-neutral-800.rounded-md.p-2.text-sm + [:span.bg-neutral-300.dark:bg-neutral-800.rounded-md.p-2.text-sm.line-clamp-1 (str "#" tag)])]]))) (defn comments @@ -159,14 +159,15 @@ [description stream] [:div.mt-10 [layout/tabs - [{:id :comments - :label "Comments" - :label-fn (fn [label] - [:div.flex.gap-3.items-center.justify-center - [:i.fa-solid.fa-comments] - [:span label] - [:span.dark:bg-neutral-800.rounded.px-2 - comments-length]])} + [{:id :comments + :label "Comments" + :label-fn + (fn [label] + [:div.flex.gap-3.items-center.justify-center + [:i.fa-solid.fa-comments] + [:span label] + [:span.bg-neutral-200.dark:bg-neutral-800.rounded.px-2 + comments-length]])} {:id :related-items :label "Related Items" :label-fn (fn [label] -- cgit v1.2.3