From f6aeae158d8d530b005cdf3fdb0b9dc1705fcb80 Mon Sep 17 00:00:00 2001
From: apurvabangali <107414864+apurvabangali@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:59:01 +0530
Subject: [PATCH] fix: change styling on pop up

---
 _dev/elegance.css                             | 11 +---
 assets/css/theme.css                          | 57 ++++++++-----------
 .../hook/set-measurements-button.tpl          | 25 ++++----
 3 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/_dev/elegance.css b/_dev/elegance.css
index 5925f28..9d0b97c 100644
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -69,6 +69,7 @@ input[type="radio"],input[type="checkbox"] {
   cursor: pointer;
   top: 0;
   transition: all 0.25s;
+  border-bottom: #000000;
 }
 .tab-label:hover {
   top: -0.25rem;
@@ -99,13 +100,3 @@ input[type="radio"],input[type="checkbox"] {
   opacity: 1;
   transition: all 0.35s;
 }
-/* For Webkit-based browsers (Chrome, Safari and Opera) */
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* For IE, Edge and Firefox */
-.scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
\ No newline at end of file
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 4075cc9..8e527db 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -871,6 +871,11 @@ select {
   margin-bottom: 0.125rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1117,10 +1122,6 @@ select {
   width: 220px;
 }
 
-.w-\[95px\] {
-  width: 95px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -1130,6 +1131,10 @@ select {
   width: max-content;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1439,6 +1444,11 @@ select {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1463,11 +1473,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .stroke-black {
   stroke: #000;
 }
@@ -1627,14 +1632,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pl-9 {
-  padding-left: 2.25rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1929,6 +1926,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   cursor: pointer;
   top: 0;
   transition: all 0.25s;
+  border-bottom: #000000;
 }
 
 .tab-label:hover {
@@ -1964,21 +1962,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   transition: all 0.35s;
 }
 
-/* For Webkit-based browsers (Chrome, Safari and Opera) */
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* For IE, Edge and Firefox */
-
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
 .file\:mr-4::file-selector-button {
   margin-right: 1rem;
 }
@@ -2225,6 +2208,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .sm\:flex {
     display: flex;
   }
+
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2397,6 +2384,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 100%;
   }
 
+  .lg\:w-44 {
+    width: 11rem;
+  }
+
   .lg\:max-w-full {
     max-width: 100%;
   }
@@ -2453,4 +2444,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .xl\:w-1\/4 {
     width: 25%;
   }
-}
\ No newline at end of file
+}
diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
index d66a2e0..8dc7236 100644
--- a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
+++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
@@ -9,13 +9,13 @@
 </a>
 
 <!-- Modal -->
-<div class="modal modal-set-measurements scrollbar-hide lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
+<div class="modal modal-set-measurements lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
  <div class="wrapper">
   <div class="tabs">
     <div class="tab">
       <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
       <label for="tab-1" class="tab-label">Tab One</label>
-      <div class="tab-content">
+      <div class="tab-content my-12">
       {if isset($currentForm)}
         <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
               <form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
@@ -23,12 +23,12 @@
                   {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
                     <div class="mb-4 flex flex-row form-group ">
                       <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
-                      <div class="md:w-1/2 pr-4 pl-4 js-input-column">
+                      <div class=" pr-4 pl-4 js-input-column">
                         <input 
                           type="text"
                           id="{$attribute.id}"
                           name="{$attribute.id}"
-                          class=" block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
+                          class=" block appearance-none w-56 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
                           pattern="[0-9]+"
                           title="Please enter a positive number" 
                           required
@@ -49,24 +49,23 @@
               <p>No form data available.</p>
             {/if}
             <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
-        <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
+        <button type="button" class="hover:text-white hover:no-underline px-6 py-2  bg-gray-700 text-white text-base font-light" data-dismiss="modal">Close</button>
         
       </div>
     </div>
-    <div class="tab">
+    <div class="tab mb-8">
       <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
       <label for="tab-2" class="tab-label">Tab Two</label>
-      <div class="tab-content">
-         <div class="tab-pane" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
+      <div class="tab-content gap-mb-8">
+         <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
             {if $qrCode}
                 <img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto">
-                <p> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
-                <p> Click on 'Photos Completed' button once your above process is finished. </p>
-                <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
+                <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
+                <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
+                <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap  px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
+                <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2  bg-gray-700 text-white text-base font-light " data-dismiss="modal">Close</button>
             {/if}
           </div>
-         <div class="modal-footer">
-        <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
       </div>
       </div>
     </div>