From 14a7e362197307cd69701829db35e488fd17d300 Mon Sep 17 00:00:00 2001
From: Thiago Hernandez <thiago.hernandez@gmail.com>
Date: Tue, 2 Jul 2024 13:00:37 +0200
Subject: [PATCH] Fix: Added new styles to input group

---
 src/renderer/modules/KeysTabs/DelayTab.tsx | 40 +++++++---------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/renderer/modules/KeysTabs/DelayTab.tsx b/src/renderer/modules/KeysTabs/DelayTab.tsx
index 1e482ffd2..448ad2a07 100644
--- a/src/renderer/modules/KeysTabs/DelayTab.tsx
+++ b/src/renderer/modules/KeysTabs/DelayTab.tsx
@@ -9,21 +9,6 @@ import { Button } from "@Renderer/components/atoms/Button";
 import Heading from "@Renderer/components/atoms/Heading";
 
 const Styles = Styled.div`
-display: flex;
-flex-wrap: wrap;
-height: inherit;
-h4 {
-    font-size: 16px;
-    flex: 0 0 100%;
-    width: 100%;
-}
-.description {
-  margin-top: 8px;
-  font-size: 14px;
-  color: ${({ theme }) => theme.styles.macro.descriptionColor};
-  flex: 0 0 100%;
-  width: 100%;
-}
 .form-control {
     color: ${({ theme }) => theme.styles.form.inputColor};
     background: ${({ theme }) => theme.styles.form.inputBackgroundColor};
@@ -39,7 +24,6 @@ h4 {
     margin-bottom: 0;
 }
 .input-group {
-    max-width: 280px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     .input-group-text {
@@ -66,10 +50,9 @@ h4 {
   text-align: right;
 }
 .inputGroupRandom {
-  position: relative;
   .inputIcon {
     position: absolute;
-    top: 33%;
+    top: 50%;
     left: 95px;
     transform: translate3d(0, -50%, 0);
     width: 32px;
@@ -174,9 +157,9 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
   render() {
     const { fixedSelected, fixedValue, randomValue } = this.state;
     return (
-      <Styles>
+      <Styles className="flex flex-wrap h-[inherit]">
         <div className="tabContentWrapper">
-          <Heading renderAs="h4" headingLevel={4}>
+          <Heading renderAs="h4" headingLevel={4} className="flex w-full">
             {i18n.editor.macros.delayTabs.title}
           </Heading>
           <div className="formWrapper">
@@ -206,7 +189,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
           <div className="inputsWrapper mt-3">
             {fixedSelected ? (
               <div className="inputGroupFixed">
-                <div className="input-group max-w-72 relative flex flex-wrap w-full items-stretch">
+                <div className="input-group max-w-full relative flex flex-wrap w-full items-stretch">
                   <input
                     placeholder={i18n.editor.macros.delayTabs.title}
                     min={0}
@@ -222,13 +205,16 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     ms
                   </div>
                 </div>
-                <p className="description">{i18n.editor.macros.delayTabs.minMaxDescription}</p>
+
+                <p className="description mt-2 text-sm w-full text-gray-400 dark:text-gray-200">
+                  {i18n.editor.macros.delayTabs.minMaxDescription}
+                </p>
               </div>
             ) : (
-              <div className="inputGroupRandom">
-                <div className="input-group max-w-72 relative flex flex-wrap w-full items-stretch">
+              <div className="inputGroupRandom relative">
+                <div className="input-group max-w-full relative flex flex-wrap w-full items-stretch">
                   <input
-                    className="inputMin form-control"
+                    className="inputMin form-control w-[120px]"
                     placeholder="Min."
                     min={0}
                     type="number"
@@ -238,7 +224,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     value={randomValue.min}
                   />
                   <input
-                    className="inputMax form-control"
+                    className="inputMax form-control  w-[120px]"
                     placeholder="Max"
                     min={1}
                     type="number"
@@ -251,7 +237,7 @@ class DelayTab extends React.Component<DelayTabProps, DelayTabState> {
                     ms
                   </div>
                 </div>
-                <div className="inputIcon">
+                <div className="inputIcon absolute top-1/2 left-1/2 rounded w-8 h-8 p-1 z-10 bg-gray-25 dark:bg-gray-800/20 transform translate-x-[-50%] before:translate-y-[-50%]">
                   <IconMediaShuffle />
                 </div>
                 <p className="description">{i18n.editor.macros.delayTabs.minMaxDescription}</p>