Add styles for legend

src/modules/Sidebar/Legend.jsx

@@ -11,49 +11,31 @@ const types = [
 
 export function Legend() {
   return (
-    <div className="absolute bottom-[10px] left-[10px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-30px)] overflow-y-auto">
-      <div className="space-y-5">
-        <Title text={"Легенда"} className={"mb-1"} />
-
-        <div className="flex  gap-1 items-center justify-between">
-          <span className="text-sm">Тепловая карта</span>
-
-          <div className="flex">
-            <div
-              className="w-5 h-5 relative"
-              style={{ background: "rgb(204,34,34)" }}
-            >
-              <span className="absolute top-5 left-1">0</span>
-            </div>
-            <div
-              className="w-5 h-5 relative"
-              style={{ background: "rgb(255,221,52)" }}
-            >
-              <span className="absolute top-5 left-1">25</span>
-            </div>
-            <div
-              className="w-5 h-5 relative"
-              style={{ background: "rgb(30,131,42)" }}
-            >
-              <span className="absolute top-5 left-1">40</span>
-            </div>
-          </div>
-        </div>
-
+    <div className="absolute bottom-[20px] left-[20px] bg-white-background w-[250px] rounded-xl p-4 text-xs text-grey">
+      <Title text={"Тип объекта размещения"} className={"mb-1"} />
+      <div className="space-y-2">
         {types.map((type) => (
-          <div
-            className="flex gap-1 items-center justify-between"
-            key={type.id}
-          >
-            <span className="text-sm">{type.name}</span>
-
+          <div className="flex gap-2 items-center" key={type.id}>
             <span
               className="rounded-xl w-3 h-3 inline-block"
               style={{ backgroundColor: type.color }}
-            ></span>
+            />
+            <span>{type.name}</span>
           </div>
         ))}
       </div>
+      <Title text={"Востребованность постамата"} className={"mb-1 mt-3"} />
+      <div
+        className={"w-full h-[10px] rounded-xl"}
+        style={{
+          background:
+            "linear-gradient(to right, rgba(204,34,34,0.5), rgba(255,221,52,0.5), rgba(30,131,42,0.5))",
+        }}
+      />
+      <div className={"w-full flex justify-between"}>
+        <span>мин</span>
+        <span>макс</span>
+      </div>
     </div>
   );
 }

src/modules/Sidebar/Sidebar.jsx

@@ -10,7 +10,7 @@ import { Settings } from "./Settings";
 
 export const Sidebar = () => {
   return (
-    <div className="absolute top-[10px] right-[10px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-30px)] overflow-y-auto">
+    <div className="absolute top-[20px] right-[20px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-30px)] overflow-y-auto">
       <Popover
         placement="leftTop"
         title={"Веса факторов"}