chore: ui improvements

web/src/layout/Header/Logo.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
 
 const StyledEscrowLogo = styled(EscrowLogo)`
   ${hoverShortTransitionTiming}
-  max-height: 40px;
+  max-height: 48px;
   width: auto;
 
   &:hover {

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,12 +1,16 @@
 import React, { useRef, useState } from "react";
 import styled, { css } from "styled-components";
+
 import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 import { Tabs } from "@kleros/ui-components-library";
+
 import General from "./General";
 import NotificationSettings from "./Notifications";
 import { ISettings } from "../../index";
-import { useLocation, useNavigate } from "react-router-dom";
 
 const Container = styled.div`
   display: flex;
@@ -19,7 +23,6 @@ const Container = styled.div`
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
-  background-color: ${({ theme }) => theme.whiteBackground};
   border: 1px solid ${({ theme }) => theme.stroke};
   border-radius: 3px;
   overflow-y: auto;
@@ -44,13 +47,14 @@ const StyledSettingsText = styled.div`
 `;
 
 const StyledTabs = styled(Tabs)`
-  padding: 0 calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
+  padding: 0 ${responsiveSize(8, 32, 300)};
   width: 86vw;
   max-width: 660px;
-
+  align-self: center;
+
   ${landscapeStyle(
     () => css`
-      width: calc(300px + (424 - 300) * ((100vw - 300px) / (1250 - 300)));
+      width: ${responsiveSize(300, 424, 300)};
     `
   )}
 `;

web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/Info.tsx

@@ -26,9 +26,9 @@ const Info: React.FC = () => {
         title={escrowType === "general" ? "General Escrow" : "Crypto Swap"}
         msg={
           escrowType === "general"
-            ? "Hiring an outside contractor? Use the General Escrow to safeguard your " +
-              "transactions. Use this option if you want to define the agreement " +
-              "under your own terms."
+            ? "Hiring an outside contractor? Making a P2P or OTC trade? Use the " +
+              "General Escrow to safeguard your transactions. Define the agreement " +
+              "under your own terms. Protected by Kleros Court to ensure a fair trade."
             : "Want to protect your crypto transaction? Use this option to create a " +
               "safe cross-chain swap. One person escrows an asset based on " +
               "Ethereum and the funds are released once assets on another " +

web/src/pages/Settings/index.tsx

@@ -4,14 +4,15 @@ import styled from "styled-components";
 import { Route, Routes } from "react-router-dom";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 
 import EmailConfirmation from "./EmailConfirmation";
 
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;