svg icon

docs/src/pages/index.tsx

@@ -7,17 +7,17 @@ function HomepageHeader() {
 
   return (
     <header>
-      <div className="left-0 top-[calc(45%)] w-screen h-screen absolute -z-10">
+      <div className="top-[calc(30%)] h-full w-full absolute -z-10">
         <img
-          src={isDarkTheme ? 'img/logomark-dark.png' : 'img/logomark-light.png'}
+          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
           className="h-full w-full mb-2 antialiased -z-10"
           alt="Immich logo"
         />
-        <div className="w-screen h-screen absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
+        <div className="w-full h-full absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
       </div>
       <section className="text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80">
         <img
-          src={isDarkTheme ? 'img/logomark-dark.png' : 'img/logomark-light.png'}
+          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
           className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
           alt="Immich logo"
         />
@@ -64,7 +64,7 @@ function HomepageHeader() {
         </div>
 
         <img
-          src={isDarkTheme ? 'img/logomark-dark.png' : 'img/logomark-light.png'}
+          src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
           className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
           alt="Immich logo"
         />
@@ -92,7 +92,7 @@ function HomepageHeader() {
           src={isDarkTheme ? '/img/app-qrcode-dark.svg' : '/img/app-qrcode-light.svg'}
           alt="app qr code"
           width={'150px'}
-          className="shadow-lg p-3 my-8"
+          className="shadow-lg p-3 my-8 dark:bg-immich-dark-bg"
         />
       </section>
     </header>

docs/static/img/logomark-dark.svg

@@ -0,0 +1,9 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" fill="black"/>
+<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" stroke="#494D56"/>
+<path d="M45.4161 33.5746C50.122 37.7636 53.9145 42.2527 56.3552 46.4834C60.5471 38.9453 63.3483 29.988 63.3836 24.283C63.3836 24.2426 63.3836 24.2059 63.3836 24.1716C63.3836 15.7298 55.0082 12.4445 47.7934 12.4445C40.5786 12.4445 32.2032 15.7298 32.2032 24.1716C32.2032 24.2867 32.2032 24.441 32.2032 24.6271C36.2247 26.4247 40.9915 29.6366 45.4161 33.5746Z" fill="#FA2921"/>
+<path d="M19.7453 56.5954C22.6865 53.3052 27.1988 49.7394 32.2908 46.7247C37.708 43.5189 43.1264 41.2793 47.8822 40.2543C42.0473 33.9163 34.4404 28.4697 29.0536 26.6733C29.0159 26.6611 28.9806 26.6501 28.9489 26.639C20.9632 24.0308 15.2671 31.024 13.0384 37.9229C10.8096 44.8218 11.3285 53.8464 19.3142 56.4546C19.4226 56.4901 19.5687 56.5379 19.7453 56.5954Z" fill="#ED79B5"/>
+<path d="M82.6335 37.8066C80.4047 30.9077 74.7086 23.9145 66.7229 26.5227C66.6133 26.5582 66.4672 26.606 66.2918 26.6635C65.8351 31.0632 64.2701 36.6151 61.9123 42.063C59.4046 47.8573 56.3295 52.8717 53.0814 56.5122C61.5067 58.1922 70.8455 58.1016 76.2529 56.3726C76.2907 56.3603 76.326 56.3481 76.3577 56.3383C84.3434 53.7289 84.8622 44.7042 82.6335 37.8066Z" fill="#FFB400"/>
+<path d="M40.6736 63.34C39.3157 57.1697 38.8712 51.2958 39.3705 46.432C31.5723 50.0529 24.0701 55.644 20.7051 60.2396C20.682 60.2714 20.6601 60.302 20.6406 60.329C15.7057 67.1593 20.5602 74.7672 26.3975 79.0297C32.2337 83.2934 40.9306 85.5857 45.8667 78.7554C45.9349 78.6623 46.0251 78.5374 46.1334 78.3868C43.9303 74.5578 41.95 69.1405 40.6736 63.34Z" fill="#1E83F7"/>
+<path d="M74.8999 59.888C70.5971 60.8113 64.862 61.0305 58.9796 60.4587C52.7233 59.8513 47.0309 58.4603 42.5832 56.479C43.5977 65.0542 46.5693 73.9564 49.8759 78.5936C49.8991 78.6255 49.921 78.6561 49.9405 78.683C54.8754 85.5133 63.5723 83.2211 69.4096 78.9573C75.2458 74.6936 80.1015 67.0857 75.1666 60.2566C75.0984 60.1636 75.0083 60.0387 74.8999 59.888Z" fill="#18C249"/>
+</svg>

docs/static/img/logomark-light.svg

@@ -0,0 +1,9 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.417391" y="0.417391" width="95.1652" height="95.1652" rx="47.5826" fill="white"/>
+<rect x="0.417391" y="0.417391" width="95.1652" height="95.1652" rx="47.5826" stroke="#E9EAEC" stroke-width="0.834783"/>
+<path d="M45.416 33.5745C50.1219 37.7635 53.9144 42.2526 56.3551 46.4832C60.5471 38.9452 63.3482 29.9879 63.3835 24.2829C63.3835 24.2425 63.3835 24.2057 63.3835 24.1715C63.3835 15.7297 55.0081 12.4443 47.7933 12.4443C40.5786 12.4443 32.2031 15.7297 32.2031 24.1715C32.2031 24.2866 32.2031 24.4409 32.2031 24.627C36.2246 26.4246 40.9914 29.6364 45.416 33.5745Z" fill="#FA2921"/>
+<path d="M19.7443 56.5951C22.6855 53.3048 27.1978 49.739 32.2898 46.7243C37.707 43.5185 43.1254 41.2789 47.8812 40.254C42.0463 33.9159 34.4394 28.4693 29.0527 26.673C29.0149 26.6607 28.9796 26.6497 28.9479 26.6387C20.9622 24.0305 15.2661 31.0236 13.0374 37.9225C10.8087 44.8214 11.3275 53.846 19.3132 56.4542C19.4216 56.4897 19.5677 56.5375 19.7443 56.5951Z" fill="#ED79B5"/>
+<path d="M82.6341 37.8063C80.4054 30.9074 74.7093 23.9143 66.7236 26.5225C66.614 26.558 66.4679 26.6057 66.2925 26.6633C65.8358 31.0629 64.2708 36.6149 61.9129 42.0627C59.4053 47.8571 56.3301 52.8715 53.082 56.5119C61.5074 58.1919 70.8462 58.1013 76.2536 56.3723C76.2914 56.3601 76.3267 56.3478 76.3583 56.338C84.344 53.7286 84.8629 44.704 82.6341 37.8063Z" fill="#FFB400"/>
+<path d="M40.6729 63.3397C39.315 57.1694 38.8704 51.2954 39.3698 46.4316C31.5716 50.0525 24.0694 55.6436 20.7044 60.2392C20.6812 60.271 20.6593 60.3017 20.6398 60.3286C15.7049 67.1589 20.5595 74.7668 26.3968 79.0293C32.2329 83.293 40.9299 85.5853 45.866 78.755C45.9342 78.6619 46.0243 78.537 46.1327 78.3864C43.9295 74.5574 41.9493 69.1402 40.6729 63.3397Z" fill="#1E83F7"/>
+<path d="M74.9007 59.8885C70.5979 60.8118 64.8628 61.031 58.9804 60.4591C52.7241 59.8518 47.0317 58.4607 42.584 56.4795C43.5985 65.0547 46.5701 73.9569 49.8767 78.5941C49.8998 78.626 49.9218 78.6566 49.9413 78.6835C54.8761 85.5138 63.5731 83.2215 69.4104 78.9578C75.2466 74.6941 80.1023 67.0862 75.1674 60.2571C75.0992 60.164 75.0091 60.0391 74.9007 59.8885Z" fill="#18C249"/>
+</svg>