From 69772dbd5a9d70166be8e0504c8dc9e5e31af806 Mon Sep 17 00:00:00 2001
From: Kr3mu <kr3mu.mail@gmail.com>
Date: Sun, 31 Aug 2025 20:49:32 +0200
Subject: [PATCH] Updates the UI of esx_menu_dialog to match esx_menu_default,
 replace absolute units with vh

---
 [core]/esx_menu_dialog/html/css/app.css | 168 ++++++++++++------------
 [core]/esx_menu_dialog/html/ui.html     |   1 -
 2 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/[core]/esx_menu_dialog/html/css/app.css b/[core]/esx_menu_dialog/html/css/app.css
index 20b39923..211a71e2 100644
--- a/[core]/esx_menu_dialog/html/css/app.css
+++ b/[core]/esx_menu_dialog/html/css/app.css
@@ -1,132 +1,132 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
 #controls {
-    font-family: montserrat;
-    font-size: 3em;
-    color: #fff;
-    position: absolute;
-    bottom: 40;
-    right: 40;
+  font-family: "Poppins", sans-serif;
+  font-size: 2.77vh;
+  color: #fff;
+  position: absolute;
+  bottom: 3.7vh;
+  right: 3.7vh;
 }
 
 .controls {
-    display: none;
+  display: none;
 }
 
 .dialog {
-    font-family: montserrat;
-    background: rgba(33, 33, 33, 0.8);
-    color: #fff;
-    position: absolute;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    overflow: hidden;
-    top: 50%;
-    left: 50%;
-    width: 600px;
-    height: 152px;
-    transform: translate(-50%, -50%);
+  font-family: "Poppins", sans-serif;
+  background: #212121;
+  color: #fff;
+  position: absolute;
+  border-radius: 0.46vh;
+  overflow: hidden;
+  top: 50%;
+  left: 50%;
+  width: 55.6vh;
+  height: 14.1vh;
+  padding-bottom: 1vh;
+  transform: translate(-50%, -50%);
 }
 
 .head {
-    display: flex;
-    flex-basis: 100%;
-    align-items: center;
-    color: #fff;
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.6vh;
+  font-weight: 500;
+  text-transform: uppercase;
 }
 
 .dialog.big {
-    height: 200px;
+  height: 18.5vh;
 }
 
 .dialog .head {
-    background: rgba(25, 25, 25, 0.9);
-    text-align: center;
-    height: 40px;
+  background: #161616;
+  text-align: center;
+  height: 3.7vh;
 }
 
 .dialog .head span::before {
-    content: "";
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
+  content: "";
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
 }
 
 .dialog input[type="text"] {
-    width: 60%;
-    height: 32px;
-    outline: 0;
-    background: none;
-    text-align: center;
-    margin-top: 26px;
-    margin-left: 125px;
-    font-size: large;
-    transition: all 0.2s ease-in-out;
-    color: white;
-    border: 0.5px solid #ffffff3b;
-    border-radius: 0px;
+  width: 60%;
+  height: 2.96vh;
+  outline: 0;
+  background: none;
+  text-align: center;
+  margin-top: 2.4vh;
+  margin-left: 11.6vh;
+  font-size: 1.48vh;
+  transition: all 0.2s ease-in-out;
+  color: white;
+  border: 0.05vh solid #ffffff3b;
+  border-radius: 0.3vh;
 }
 
 .dialog input[type="text"]:active,
 .dialog input[type="text"]:hover {
-    color: white;
+  color: white;
 }
 
 .dialog textarea {
-    width: 100%;
-    height: 128px;
+  width: 100%;
+  height: 11.85vh;
 }
 
 .dialog button[name="submit"] {
-    width: 17.6%;
-    height: 32px;
-    margin-left: 160px;
-    font-weight: 300;
-    color: rgb(37, 34, 53);
-    border-radius: 10px;
-    text-transform: uppercase;
-    background: rgb(50, 79, 208);
-    outline: 0;
-    border: none;
-    transition: all 0.2s ease-in-out;
+  width: 17.6%;
+  height: 2.96vh;
+  margin-left: 14.8vh;
+  font-weight: 500;
+
+  color: #fb9b04;
+  border-radius: 0.5vh;
+  font-size: 1.2vh;
+  background: #fb9c0433;
+  outline: 0;
+  border: none;
+  transition: all 0.2s ease-in-out;
 }
 
 .dialog button {
-    z-index: 9999;
-    transform: translate(-0%, 50%);
+  z-index: 9999;
+  transform: translate(-0%, 50%);
 }
 
 .dialog button[name="cancel"] {
-    width: 17.6%;
-    height: 32px;
-    margin-left: 60px;
-    border: none;
-    text-transform: uppercase;
-    font-weight: 200;
-    border-radius: 10px;
-    color: rgb(53, 34, 34);
-    outline: 0;
-    background: #c74545;
-    transition: all 0.2s ease-in-out;
+  width: 17.6%;
+  height: 2.96vh;
+  margin-left: 5.6vh;
+
+  font-weight: 500;
+
+  color: #fefefe;
+  border-radius: 0.5vh;
+  font-size: 1.2vh;
+  background: #94949433;
+  outline: 0;
+  border: none;
+  transition: all 0.2s ease-in-out;
 }
 
 .dialog button[name="cancel"]:hover {
-    letter-spacing: 1px;
-    color: #ffffff;
-    width: 17.6%;
+  letter-spacing: 0.09vh;
+  transform: scale(1.05) translate(-0%, 50%);
 }
 
 .dialog button[name="submit"]:hover {
-    letter-spacing: 1px;
-    color: white;
-    width: 17.6%;
+  letter-spacing: 0.09vh;
+  transform: scale(1.05) translate(-0%, 50%);
 }
 
-.head::before,
-.head::after {
-    content: "";
-    flex-grow: 1;
-    background: #00e1ff;
-    height: 2px;
-    margin: 0px 3px;
+* {
+  font-family: Poppins !important;
 }
diff --git a/[core]/esx_menu_dialog/html/ui.html b/[core]/esx_menu_dialog/html/ui.html
index ddbde089..cbc05619 100644
--- a/[core]/esx_menu_dialog/html/ui.html
+++ b/[core]/esx_menu_dialog/html/ui.html
@@ -3,7 +3,6 @@
         <meta charset="utf-8" />
         <link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap" rel="stylesheet" />
     </head>
 
     <body>