feat: change logo to svg icon

7 files changed, 37 insertions, 14 deletions

diff --git a/deps.edn b/deps.edn
index bc72efb..461ad9f 100644
--- a/deps.edn
+++ b/deps.edn
@@ -26,6 +26,7 @@
                 cljs-ajax/cljs-ajax {:mvn/version "0.8.4"}
                 akiroz.re-frame/storage {:mvn/version "0.1.4"}
                 re-frame-utils/re-frame-utils {:mvn/version "0.1.0"}
-                nano-id/nano-id {:mvn/version "1.1.0"}}
+                nano-id/nano-id {:mvn/version "1.1.0"}
+                com.github.scopews/svgreq {:mvn/version "1.1.0"}}
    :main-opts ["-m" "shadow.cljs.devtools.cli"]}
   :run {:main-opts ["-m" "tubo.core"]}}}
diff --git a/resources/src/icons/tubo.svg b/resources/src/icons/tubo.svg
new file mode 100644
index 0000000..f606eab
--- /dev/null
+++ b/resources/src/icons/tubo.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#shadow)">
+    <path
+        fill="transparent"
+        d="M 164.02313,148.5 45.976869,215.31446 V 81.68554 Z"
+        stroke="#ffffff"
+        stroke-width="25"
+        />
+  </g>
+  <filter id="shadow" x="-20%" y="-40%" width="180%" height="180%" >
+      <feDropShadow dx="15" dy="15" stdDeviation="8" flood-color="black" flood-opacity="0.4" />
+    </filter>
+</svg>
diff --git a/resources/src/images/tubo.png b/resources/src/images/tubo.png
deleted file mode 100644
index f519f7f..0000000
--- a/resources/src/images/tubo.png
+++ /dev/null
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")}
diff --git a/webpack.config.js b/webpack.config.js
index c8bc893..e662148 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,8 +19,8 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         {
-          from: path.resolve(__dirname, "resources/src/images"),
-          to: "images"
+          from: path.resolve(__dirname, "resources/src/icons"),
+          to: "icons"
         }
       ]
     })