Merge branch 'feat/ui/integration' into mock

src/components/Peers/Peers.css

@@ -171,4 +171,14 @@
       }
     }
   }
+
+  .peers-chart {
+    transform: scale(0.5);
+
+    @media (min-width: 1000px) {
+      & {
+        transform: scale(0.73);
+      }
+    }
+  }
 }

src/components/Peers/PeersChart.css

@@ -3,7 +3,6 @@
   width: 350px;
   height: 175px;
   overflow: hidden;
-  transform: scale(0.5);
   margin: auto;
   left: -32px;
 

src/components/Welcome/WelcomeCard.css

@@ -1,13 +1,18 @@
 .welcome-card {
   display: flex;
   flex-direction: column;
+  --codex-welcome-card-background-position: right;
+
+  &.welcome-card--tiny {
+    --codex-welcome-card-background-position: 450px;
+  }
 
   > div {
     padding: 16px;
     background-color: #141414;
     background-image: url(img/welcome.png);
     background-repeat: no-repeat;
-    background-position: right;
+    background-position: var(--codex-welcome-card-background-position);
     flex: 1;
     display: flex;
     flex-direction: column;

src/components/Welcome/WelcomeCard.tsx

@@ -6,10 +6,42 @@ import { Logotype } from "../Logotype/Logotype";
 import { DiscordIcon } from "./DiscordIcon";
 import { Alert } from "@codex-storage/marketplace-ui-components";
 import { AlertIcon } from "../AlertIcon/AlertIcon";
+import { useEffect, useRef } from "react";
+import { classnames } from "../../utils/classnames";
 
 export function WelcomeCard() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onResize = () => {
+      const current = ref.current;
+      if (!current) {
+        return;
+      }
+
+      if (current.clientWidth > 800) {
+        current.classList.remove("welcome-card--tiny");
+      } else {
+        current.classList.add("welcome-card--tiny");
+      }
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [ref.current]);
+
+  const clientWidth = ref.current?.clientWidth || 0;
+
   return (
-    <div className="welcome-card card">
+    <div
+      className={classnames(
+        ["welcome-card card"],
+        ["welcome-card card--tiny", clientWidth <= 800]
+      )}
+      ref={ref}>
       <div className="card">
         <header>
           <div>