feat: update colors and home icon

Subtract.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3888 2.85031C11.7638 2.66434 12.1989 2.66434 12.5739 2.85031L21.0037 7.06792C21.4462 7.29108 21.7245 7.73709 21.7245 8.22802V20.145H21.7464C21.7462 20.6134 21.3641 20.9999 20.8843 21H15.7689C15.3788 21 15.0562 20.6874 15.0562 20.2932V13.807C15.0562 12.1333 13.6909 10.7792 12.0033 10.7792C10.3159 10.7794 8.95116 12.1334 8.95115 13.807V20.2932C8.95115 20.68 8.63599 21 8.23847 21H3.10101C2.62861 21 2.23837 20.6209 2.23818 20.145V8.22802C2.23819 7.73714 2.51576 7.2911 2.95818 7.06792L11.3888 2.85031Z" fill="white"/>
+<path d="M10.7962 0.268599C11.5012 -0.088374 12.3413 -0.0882526 13.0463 0.261335L23.6142 5.54243C23.9592 5.71352 24.1018 6.1379 23.9218 6.48751C23.7943 6.73297 23.5464 6.87397 23.2839 6.87397C23.179 6.87392 23.0663 6.85189 22.9689 6.79987L12.401 1.51877C12.101 1.37 11.7408 1.37 11.4408 1.51877L1.03036 6.79261C0.677932 6.97088 0.250655 6.82952 0.0781632 6.48751C-0.101845 6.14534 0.0407786 5.72096 0.385795 5.54243L10.7962 0.268599Z" fill="white"/>
+</svg>

src/client/src/assets/icons/subtract-home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3888 2.85031C11.7638 2.66434 12.1989 2.66434 12.5739 2.85031L21.0037 7.06792C21.4462 7.29108 21.7245 7.73709 21.7245 8.22802V20.145H21.7464C21.7462 20.6134 21.3641 20.9999 20.8843 21H15.7689C15.3788 21 15.0562 20.6874 15.0562 20.2932V13.807C15.0562 12.1333 13.6909 10.7792 12.0033 10.7792C10.3159 10.7794 8.95116 12.1334 8.95115 13.807V20.2932C8.95115 20.68 8.63599 21 8.23847 21H3.10101C2.62861 21 2.23837 20.6209 2.23818 20.145V8.22802C2.23819 7.73714 2.51576 7.2911 2.95818 7.06792L11.3888 2.85031Z" fill="white"/>
+<path d="M10.7962 0.268599C11.5012 -0.088374 12.3413 -0.0882526 13.0463 0.261335L23.6142 5.54243C23.9592 5.71352 24.1018 6.1379 23.9218 6.48751C23.7943 6.73297 23.5464 6.87397 23.2839 6.87397C23.179 6.87392 23.0663 6.85189 22.9689 6.79987L12.401 1.51877C12.101 1.37 11.7408 1.37 11.4408 1.51877L1.03036 6.79261C0.677932 6.97088 0.250655 6.82952 0.0781632 6.48751C-0.101845 6.14534 0.0407786 5.72096 0.385795 5.54243L10.7962 0.268599Z" fill="white"/>
+</svg>

src/client/src/components/ListOfSights/SightFrame.jsx

@@ -19,6 +19,7 @@ import { TouchableLayout } from "../TouchableLayout";
 import rotate3DIcon from "../../assets/icons/three-view-rotate.svg";
 import zoom3DIcon from "../../assets/icons/three-view-zoom.svg";
 import pan3DIcon from "../../assets/icons/three-view-pan.svg";
+import subtractHomeIcon from "../../assets/icons/subtract-home.svg";
 
 const Watermark = ({ path }) => {
   if (!path) return null;
@@ -379,7 +380,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
                 <div
                   className="cluster-sights-list"
                   style={{
-                    background: `linear-gradient(to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(179, 165, 152, 0.4)`,
+                    background: `linear-gradient(to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(0, 111, 58, 0.4)`,
                     backdropFilter: "blur(10px)",
                     borderRadius: "8px",
                     width: 200,
@@ -638,42 +639,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
             }}
             onPointerUp={() => { setSelectedSection(0); setIsFullscreen3D(false); }}
           >
-            <svg
+            <img src={subtractHomeIcon} alt="" width="24" height="21" style={{ display: "block" }} />
-              width="20"
-              height="25"
-              viewBox="0 0 20 25"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              style={{ display: "block" }}
-            >
-              <defs>
-                <linearGradient
-                  id="sightFrameGradient3"
-                  x1="0%"
-                  y1="0%"
-                  x2="100%"
-                  y2="100%"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop offset="0%" stopColor="rgba(255, 255, 255, 0.2)" />
-                  <stop offset="100%" stopColor="rgba(255, 255, 255, 0)" />
-                </linearGradient>
-                <clipPath id="clip0_662_97446">
-                  <rect
-                    width="20"
-                    height="25"
-                    fill="white"
-                    transform="translate(12.5 0.5) rotate(90)"
-                  />
-                </clipPath>
-              </defs>
-              <g clipPath="url(#clip0_662_97446)">
-                <path
-                  d="M4.03158 11.0738C4.21879 11.2087 4.34702 11.2766 4.44531 11.3747C6.93048 13.8687 9.41098 16.3665 11.8962 18.8605C12.3408 19.3067 12.5186 19.8207 12.3361 20.4339C12.0281 21.4658 10.7776 21.8393 9.95295 21.1498C9.86309 21.0743 9.78165 20.9894 9.69928 20.9064C6.85279 18.0446 4.00537 15.1817 1.15982 12.3189C0.280876 11.4341 0.281813 10.6456 1.16169 9.75982C4.04 6.86305 6.91457 3.96155 9.80786 1.07986C10.0597 0.828952 10.4144 0.619547 10.7561 0.537482C11.4019 0.382786 12.015 0.72142 12.3193 1.28644C12.6263 1.85334 12.5392 2.56079 12.0806 3.05129C11.7286 3.4286 11.3561 3.78704 10.991 4.15209C8.79601 6.35557 6.60194 8.55904 4.40599 10.7606C4.32362 10.8436 4.22721 10.9106 4.03158 11.0729L4.03158 11.0738Z"
-                  fill="url(#sightFrameGradient3)"
-                />
-              </g>
-            </svg>
           </div>
         )}
         {contentError ? (

src/client/src/components/side-menu/BackButtonSVG.jsx

@@ -1,20 +1,16 @@
+import subtractHomeIcon from "../../assets/icons/subtract-home.svg";
+
 function BackButtonSVG({ onPointerUp }) {
   return (
-    <svg
+    <img
+      src={subtractHomeIcon}
+      alt=""
+      width="24"
+      height="21"
       onPointerUp={onPointerUp}
       className="sight-frame-get-back"
-      width="13"
+      style={{ cursor: "pointer", display: "block" }}
-      height="22"
-      viewBox="0 0 13 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{ cursor: "pointer", transform: "rotate(-90deg)" }}
-    >
-      <path
-        d="M4.03042 11.0738C4.21763 11.2087 4.34586 11.2766 4.44415 11.3747C6.92933 13.8687 9.40982 16.3665 11.895 18.8605C12.3396 19.3066 12.5175 19.8207 12.3349 20.4339C12.027 21.4658 10.7764 21.8393 9.95179 21.1498C9.86193 21.0743 9.78049 20.9894 9.69812 20.9064C6.85163 18.0446 4.00421 15.1817 1.15866 12.3189C0.279718 11.4341 0.280654 10.6456 1.16053 9.75982C4.03884 6.86305 6.91341 3.96155 9.8067 1.07986C10.0585 0.828952 10.4133 0.619547 10.7549 0.537482C11.4008 0.382786 12.0139 0.72142 12.3181 1.28644C12.6251 1.85334 12.5381 2.56079 12.0794 3.05129C11.7275 3.4286 11.3549 3.78704 10.9899 4.15209C8.79485 6.35557 6.60078 8.55904 4.40483 10.7606C4.32246 10.8436 4.22605 10.9106 4.03042 11.0729L4.03042 11.0738Z"
-        fill="white"
     />
-    </svg>
   );
 }
 

src/client/src/styles/RouteWidget.css

@@ -34,7 +34,7 @@
       rgba(255, 255, 255, 0.2) 0%,
       rgba(255, 255, 255, 0) 100%
     ),
-    rgba(179, 165, 152, 0.4);
+    rgba(0, 111, 58, 0.4);
   backdrop-filter: blur(10px);
   pointer-events: auto;
   z-index: 10000001;

src/client/src/styles/WeatherWidget.css

@@ -19,7 +19,7 @@
       rgba(255, 255, 255, 0.2) 0%,
       rgba(255, 255, 255, 0) 100%
     ),
-    rgba(179, 165, 152, 0.4);
+    rgba(0, 111, 58, 0.4);
 }
 
 .weather-widget-time {

src/widgets/SightTabs/RightWidgetTab/SightFramePreview.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useRef, useState } from "react";
+import subtractHomeIcon from "./subtract-home.svg";
 import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
 import { ReactMarkdownComponent } from "../../ReactMarkdown";
 import { ThreeViewErrorBoundary } from "../../MediaViewer/ThreeViewErrorBoundary";
@@ -285,42 +286,7 @@ export function SightFramePreview({
             type="button"
             onClick={() => onSectionChange(-1)}
           >
-            <svg
+            <img src={subtractHomeIcon} alt="" width="24" height="21" style={{ display: "block" }} />
-              width="20"
-              height="25"
-              viewBox="0 0 20 25"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              style={{ display: "block" }}
-            >
-              <defs>
-                <linearGradient
-                  id="sfpGradient"
-                  x1="0%"
-                  y1="0%"
-                  x2="100%"
-                  y2="100%"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop offset="0%" stopColor="rgba(255, 255, 255, 0.2)" />
-                  <stop offset="100%" stopColor="rgba(255, 255, 255, 0)" />
-                </linearGradient>
-                <clipPath id="sfpClip">
-                  <rect
-                    width="20"
-                    height="25"
-                    fill="white"
-                    transform="translate(12.5 0.5) rotate(90)"
-                  />
-                </clipPath>
-              </defs>
-              <g clipPath="url(#sfpClip)">
-                <path
-                  d="M4.03158 11.0738C4.21879 11.2087 4.34702 11.2766 4.44531 11.3747C6.93048 13.8687 9.41098 16.3665 11.8962 18.8605C12.3408 19.3067 12.5186 19.8207 12.3361 20.4339C12.0281 21.4658 10.7776 21.8393 9.95295 21.1498C9.86309 21.0743 9.78165 20.9894 9.69928 20.9064C6.85279 18.0446 4.00537 15.1817 1.15982 12.3189C0.280876 11.4341 0.281813 10.6456 1.16169 9.75982C4.04 6.86305 6.91457 3.96155 9.80786 1.07986C10.0597 0.828952 10.4144 0.619547 10.7561 0.537482C11.4019 0.382786 12.015 0.72142 12.3193 1.28644C12.6263 1.85334 12.5392 2.56079 12.0806 3.05129C11.7286 3.4286 11.3561 3.78704 10.991 4.15209C8.79601 6.35557 6.60194 8.55904 4.40599 10.7606C4.32362 10.8436 4.22721 10.9106 4.03158 11.0729L4.03158 11.0738Z"
-                  fill="url(#sfpGradient)"
-                />
-              </g>
-            </svg>
           </button>
         )}
 

src/widgets/SightTabs/RightWidgetTab/subtract-home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3888 2.85031C11.7638 2.66434 12.1989 2.66434 12.5739 2.85031L21.0037 7.06792C21.4462 7.29108 21.7245 7.73709 21.7245 8.22802V20.145H21.7464C21.7462 20.6134 21.3641 20.9999 20.8843 21H15.7689C15.3788 21 15.0562 20.6874 15.0562 20.2932V13.807C15.0562 12.1333 13.6909 10.7792 12.0033 10.7792C10.3159 10.7794 8.95116 12.1334 8.95115 13.807V20.2932C8.95115 20.68 8.63599 21 8.23847 21H3.10101C2.62861 21 2.23837 20.6209 2.23818 20.145V8.22802C2.23819 7.73714 2.51576 7.2911 2.95818 7.06792L11.3888 2.85031Z" fill="white"/>
+<path d="M10.7962 0.268599C11.5012 -0.088374 12.3413 -0.0882526 13.0463 0.261335L23.6142 5.54243C23.9592 5.71352 24.1018 6.1379 23.9218 6.48751C23.7943 6.73297 23.5464 6.87397 23.2839 6.87397C23.179 6.87392 23.0663 6.85189 22.9689 6.79987L12.401 1.51877C12.101 1.37 11.7408 1.37 11.4408 1.51877L1.03036 6.79261C0.677932 6.97088 0.250655 6.82952 0.0781632 6.48751C-0.101845 6.14534 0.0407786 5.72096 0.385795 5.54243L10.7962 0.268599Z" fill="white"/>
+</svg>