refactor: 💨

README.md

@@ -1,8 +1,8 @@
 <div align="center">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="./resources/logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="./resources/logo-light.svg">
-    <img src="./resources/logo-light.svg" alt="Jumble Logo" width="400" />
+    <source media="(prefers-color-scheme: dark)" srcset="./readme-resources/logo-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="./readme-resources/logo-light.svg">
+    <img src="./readme-resources/logo-light.svg" alt="Jumble Logo" width="400" />
   </picture>
   <p>logo designed by <a href="http://wolfertdan.com/">Daniel David</a></p>
 </div>
@@ -20,11 +20,11 @@ A user-friendly Nostr client focused on relay feed browsing and relay discovery
 
 ## Screenshots
 
-<img src="./screenshots/01.png" alt="Jumble Screenshot 01" width="650" />
+<img src="./readme-resources/01.png" alt="Jumble Screenshot 01" width="650" />
 <div> 
-  <img src="./screenshots/02.png" alt="Jumble Screenshot 02" width="200" />
-  <img src="./screenshots/03.png" alt="Jumble Screenshot 03" width="200" />
-  <img src="./screenshots/04.png" alt="Jumble Screenshot 04" width="200" />
+  <img src="./readme-resources/02.png" alt="Jumble Screenshot 02" width="200" />
+  <img src="./readme-resources/03.png" alt="Jumble Screenshot 03" width="200" />
+  <img src="./readme-resources/04.png" alt="Jumble Screenshot 04" width="200" />
 </div>
 
 ## Run Locally

resources/small-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1080 1228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path id="path1" d="M360.047,1225.75c-31.046,-3.901 -75.11,-14.46 -106.756,-25.58c-101.676,-35.727 -175.164,-93.066 -215.387,-168.055c-12.079,-22.521 -30.071,-71.422 -27.297,-74.195c0.736,-0.736 11.648,5.578 24.249,14.031c135.436,90.86 301.047,169.043 465.056,219.547l32.77,10.091l-20.27,7.416c-43.455,15.896 -105.159,22.678 -152.365,16.745Zm166.293,-59.234c-168.523,-50.004 -331.475,-126.514 -481.755,-226.196c-37.737,-25.031 -41.489,-28.372 -43.419,-38.663c-3.585,-19.109 1.498,-83.894 9.798,-124.886c7.343,-36.266 27.664,-106.034 32.278,-110.818c2.023,-2.099 217.924,48.207 221.274,51.557c0.975,0.975 -1.132,11.339 -4.682,23.032c-24.542,80.842 -27.217,127.586 -9.935,173.593c22.507,59.917 114.521,99.888 177.281,77.012c29.23,-10.654 56.593,-41.085 82.629,-91.894c29.288,-57.155 32.348,-64.988 196.483,-503.076c81.138,-216.562 148.499,-394.821 149.692,-396.131c2.1,-2.304 217.949,76.926 223.076,81.884c2.056,1.988 -262.476,712.505 -307.806,826.747c-18.422,46.426 -56.939,123.045 -77.918,154.993c-10.157,15.469 -30.753,40.901 -45.769,56.515c-27.821,28.93 -66.46,58.952 -75.447,58.621c-2.738,-0.106 -23.339,-5.631 -45.78,-12.29Z" style="fill-rule:nonzero;"/></svg>

src/assets/Icon.tsx

@@ -1,24 +0,0 @@
-export default function Icon({ className }: { className?: string }) {
-  return (
-    <svg
-      viewBox="0 0 1080 1228"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      xmlSpace="preserve"
-      style={{
-        fill: 'currentcolor',
-        fillRule: 'evenodd',
-        clipRule: 'evenodd',
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 2
-      }}
-      className={className}
-    >
-      <path
-        id="Icon-Curve-Cut"
-        d="M360.047,1225.75c-31.046,-3.901 -75.11,-14.46 -106.756,-25.58c-101.676,-35.727 -175.164,-93.066 -215.387,-168.055c-12.079,-22.521 -30.071,-71.422 -27.297,-74.195c0.736,-0.736 11.648,5.578 24.249,14.031c135.436,90.86 301.047,169.043 465.056,219.547l32.77,10.091l-20.27,7.416c-43.455,15.896 -105.159,22.678 -152.365,16.745Zm166.293,-59.234c-168.523,-50.004 -331.475,-126.514 -481.755,-226.196c-37.737,-25.031 -41.489,-28.372 -43.419,-38.663c-3.585,-19.109 1.498,-83.894 9.798,-124.886c7.343,-36.266 27.664,-106.034 32.278,-110.818c2.023,-2.099 217.924,48.207 221.274,51.557c0.975,0.975 -1.132,11.339 -4.682,23.032c-24.542,80.842 -27.217,127.586 -9.935,173.593c22.507,59.917 114.521,99.888 177.281,77.012c29.23,-10.654 56.593,-41.085 82.629,-91.894c29.288,-57.155 32.348,-64.988 196.483,-503.076c81.138,-216.562 148.499,-394.821 149.692,-396.131c2.1,-2.304 217.949,76.926 223.076,81.884c2.056,1.988 -262.476,712.505 -307.806,826.747c-18.422,46.426 -56.939,123.045 -77.918,154.993c-10.157,15.469 -30.753,40.901 -45.769,56.515c-27.821,28.93 -66.46,58.952 -75.447,58.621c-2.738,-0.106 -23.339,-5.631 -45.78,-12.29Z"
-      />
-    </svg>
-  )
-}

src/components/Sidebar/index.tsx

@@ -1,10 +1,10 @@
-import Icon from '@/assets/Icon'
-import Logo from '@/assets/Logo'
+import LogoUrl from '../../../resources/logo.svg'
+import SmallLogoUrl from '../../../resources/small-logo.svg'
 import AccountButton from './AccountButton'
+import RelaysButton from './ExploreButton'
 import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationButton'
 import PostButton from './PostButton'
-import RelaysButton from './ExploreButton'
 import SearchButton from './SearchButton'
 import SettingsButton from './SettingsButton'
 
@@ -13,8 +13,8 @@ export default function PrimaryPageSidebar() {
     <div className="w-16 xl:w-52 hidden sm:flex flex-col pb-2 pt-4 px-2 justify-between h-full shrink-0">
       <div className="space-y-2">
         <div className="px-3 xl:px-4 mb-6 w-full">
-          <Icon className="xl:hidden" />
-          <Logo className="max-xl:hidden" />
+          <img src={LogoUrl} className="max-xl:hidden" />
+          <img src={SmallLogoUrl} className="xl:hidden" />
         </div>
         <HomeButton />
         <RelaysButton />