From 50f71a21e0b863aabb6f07eeb47a2003e254808d Mon Sep 17 00:00:00 2001
From: pierre <dommerc.pierre@gmail.com>
Date: Wed, 10 Jan 2024 18:16:55 +0100
Subject: [PATCH] fix various design divergences

---
 nym-vpn/ui/src/pages/home/ConnectionStatus.tsx | 3 ++-
 nym-vpn/ui/src/pages/home/Home.tsx             | 6 ++++--
 nym-vpn/ui/src/pages/home/HopSelect.tsx        | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
index dd698bc5e0..90cf02abfd 100644
--- a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
+++ b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx
@@ -8,6 +8,7 @@ function ConnectionStatus() {
   const state = useMainState();
 
   const { t } = useTranslation('home');
+
   const statusBadgeDynStyles = {
     Connected: ['text-vert-menthe', 'bg-vert-prasin bg-opacity-10'],
     Disconnected: [
@@ -51,7 +52,7 @@ function ConnectionStatus() {
     }
   };
   return (
-    <div className="h-72 flex flex-col justify-center items-center gap-y-2">
+    <div className="h-full min-h-64 flex flex-col justify-center items-center gap-y-2">
       <div className="flex flex-1 items-end">
         <div
           className={clsx([
diff --git a/nym-vpn/ui/src/pages/home/Home.tsx b/nym-vpn/ui/src/pages/home/Home.tsx
index 75df70ae79..fa62ef31a5 100644
--- a/nym-vpn/ui/src/pages/home/Home.tsx
+++ b/nym-vpn/ui/src/pages/home/Home.tsx
@@ -75,8 +75,10 @@ function Home() {
 
   return (
     <div className="h-full flex flex-col p-4">
-      <ConnectionStatus />
-      <div className="flex grow flex-col justify-between gap-y-6">
+      <div className="grow">
+        <ConnectionStatus />
+      </div>
+      <div className="flex flex-col justify-between gap-y-6">
         <div className="flex flex-col justify-between gap-y-4">
           <NetworkModeSelect />
           <div className="flex flex-col gap-6">
diff --git a/nym-vpn/ui/src/pages/home/HopSelect.tsx b/nym-vpn/ui/src/pages/home/HopSelect.tsx
index 595192c49a..6f3611a9a3 100644
--- a/nym-vpn/ui/src/pages/home/HopSelect.tsx
+++ b/nym-vpn/ui/src/pages/home/HopSelect.tsx
@@ -41,7 +41,7 @@ export default function HopSelect({
       <div className="flex flex-row items-center gap-3">
         <img
           src={`./flags/${country.code.toLowerCase()}.svg`}
-          className="h-8 scale-90 pointer-events-none fill-current"
+          className="h-7 scale-90 pointer-events-none fill-current"
           alt={country.code}
         />
         <div className="text-base">{country.name}</div>