feat: change logo to svg icon

3 files changed, 12 insertions, 11 deletions

diff --git a/src/backend/tubo/handler.clj b/src/backend/tubo/handler.clj
index 8813457..021dfb6 100644
--- a/src/backend/tubo/handler.clj
+++ b/src/backend/tubo/handler.clj
@@ -19,7 +19,7 @@
       {:name "viewport"
        :content "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"}]
      [:title "Tubo"]
-     [:link {:rel "icon" :type "image/png" :href "/images/tubo.png"}]
+     [:link {:rel "icon" :type "image/png" :href "/icons/tubo.svg"}]
      (hiccup/include-css "/styles/tubo.css")]
     [:body
      [:div#app]
diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs
index 7fc8853..0b894ec 100644
--- a/src/frontend/tubo/components/layout.cljs
+++ b/src/frontend/tubo/components/layout.cljs
@@ -2,7 +2,8 @@
   (:require
    [reagent.core :as r]
    [re-frame.core :as rf]
-   [tubo.utils :as utils]))
+   [tubo.utils :as utils]
+   [svgreq.core :as svgreq]))
 
 (defn thumbnail
   [thumbnail-url route name duration & {:keys [classes rounded?] :or {classes "h-44 xs:h-28" rounded? true}}]
@@ -20,11 +21,11 @@
           "LIVE"
           (utils/format-duration duration))]])]])
 
-(defn logo []
-  [:img.mb-1
-   {:src   "/images/tubo.png"
-    :style {:maxHeight "25px" :maxWidth "40px"}
-    :title "Tubo"}])
+(defn logo
+  [& {:keys [height width]}]
+  (r/create-element
+   (svgreq/embed "resources/public/icons" "tubo" nil)
+   (js-obj "height" width "width" height)))
 
 (defn loading-icon
   [service-color & styles]
diff --git a/src/frontend/tubo/components/navigation.cljs b/src/frontend/tubo/components/navigation.cljs
index 2d2216f..cfa5345 100644
--- a/src/frontend/tubo/components/navigation.cljs
+++ b/src/frontend/tubo/components/navigation.cljs
@@ -104,9 +104,9 @@
    [layout/focus-overlay #(rf/dispatch [::events/toggle-mobile-nav]) show-mobile-nav?]
    [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-20
     {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))}
-    [:div.flex.justify-center.py-8.items-center.text-white {:style {:background service-color}}
-     [layout/logo]
      [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]]
+    [:div.flex.justify-center.py-4.items-center.text-white {:style {:background service-color}}
+     [layout/logo :height 75 :width 75]
     [services-dropdown services service-id service-color]
     [:div.relative.py-4
      [:ul.flex.font-roboto.flex-col
@@ -139,10 +139,10 @@
     [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20.font-nunito
      {:style {:background service-color}}
      [:div.flex.flex-auto.items-center
-      [:div.ml-4
+      [:div.ml-2
        [:a.font-bold
         {:href (rfe/href ::routes/home)}
-        [layout/logo]]]
+        [layout/logo :height 35 :width 35]]]
       [search-form]
       [:div.flex.flex-auto.justify-end.lg:justify-between
        {:class (when show-search-form? "hidden")}