diff --git a/web/src/assets/svgs/header/escrow.svg b/web/src/assets/svgs/header/escrow.svg index a2620fc..27aa715 100644 --- a/web/src/assets/svgs/header/escrow.svg +++ b/web/src/assets/svgs/header/escrow.svg @@ -1,6 +1,3 @@ - - - - - + + diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index ccc7ab8..9e79390 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/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 { diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx index d94f286..1fd8159 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx +++ b/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)}; ` )} `; diff --git a/web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/Info.tsx b/web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/Info.tsx index 0f5dc8b..cd05f0b 100644 --- a/web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/Info.tsx +++ b/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 " + diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx index 55b7194..2128b1e 100644 --- a/web/src/pages/Settings/index.tsx +++ b/web/src/pages/Settings/index.tsx @@ -4,6 +4,7 @@ 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"; @@ -11,7 +12,7 @@ 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; `;