From e9f440ef13ac82f5afdb7bbc35a3c030ccdccea4 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 14 Nov 2023 15:15:11 +0200
Subject: [PATCH] fixed-ui-bugs

---
 .../EditorPage/TextEditor/Popup.jsx           |  4 +-
 .../EditorPage/TextEditor/PopupButton.jsx     |  1 -
 renderer/src/components/Popup/Dialog.jsx      |  2 +-
 renderer/src/components/Popup/index.jsx       |  4 +-
 .../src/components/Projects/CustomList.js     |  4 +-
 .../src/components/Projects/NewProject.js     | 38 ++++++++++---------
 .../CreateProject/AdvancedSettingsDropdown.js |  2 +-
 renderer/src/modules/projects/CustomList.js   |  4 +-
 8 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
index 7440a69ea..76421b07d 100644
--- a/renderer/src/components/EditorPage/TextEditor/Popup.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -39,9 +39,9 @@ const Popup = ({ action, setTriggerVerseInsert }) => {
 
   return (
     <PopUpTemplate
-      buttonStyle="button gap-2  dark:hover:bg-hc-darkgray-300 dark:bg-hc-darkgray-200 dark:text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1 "
+      buttonStyle="button gap-2 text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1"
       buttonText={functionMapping[action].icon}
-      isLarge
+      isSmall
       maxWidth="max-w-xl"
     >
       <div className="inline-block w-full max-w-md p-6 ">
diff --git a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
index 66ca1e208..4da7fdf74 100644
--- a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
@@ -20,7 +20,6 @@ const PopupButton = ({
   console.log({ isPopupOpen });
 
   const handlePopupClose = () => {
-    console.log('handlePopupClose sdf');
     setIsPopupOpen(false);
   };
   console.log({ isPopupOpen });
diff --git a/renderer/src/components/Popup/Dialog.jsx b/renderer/src/components/Popup/Dialog.jsx
index a78820008..956a01557 100644
--- a/renderer/src/components/Popup/Dialog.jsx
+++ b/renderer/src/components/Popup/Dialog.jsx
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef(
       <DialogPrimitive.Content
         ref={ref}
         className={classNames(
-          'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none dark:border-none sm:rounded-lg',
+          'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none sm:rounded-lg',
           className,
         )}
         {...props}
diff --git a/renderer/src/components/Popup/index.jsx b/renderer/src/components/Popup/index.jsx
index eb26e3fe8..d6d769262 100644
--- a/renderer/src/components/Popup/index.jsx
+++ b/renderer/src/components/Popup/index.jsx
@@ -31,8 +31,8 @@ export default function PopUp({
           className={classNames(
             maxWidth || '',
             isLarge ? 'overflow-y-auto' : '',
-            isSmall ? 'min-w-[30%] ' : 'min-w-[50%] ',
-            'scrollbar-h-1/2 relative max-h-[96vh] rounded-xl bg-white px-5 text-left align-middle text-hc-blue-900 shadow-xl transition-all scrollbar-thin scrollbar-track-hc-gray-100 scrollbar-thumb-hc-gray-200  dark:bg-hc-darkgray-50  dark:text-hc-darkgray-400  dark:scrollbar-track-hc-darkgray-50 dark:scrollbar-thumb-hc-darkgray-200',
+            isSmall ? 'min-w-[25%] ' : 'min-w-[50%] ',
+            'relative max-h-[96vh] rounded-xl bg-white px-5 text-left align-middle shadow-xl transition-all border',
           )}
         >
           {children}
diff --git a/renderer/src/components/Projects/CustomList.js b/renderer/src/components/Projects/CustomList.js
index 5a5ecf69e..c1b11e1c8 100644
--- a/renderer/src/components/Projects/CustomList.js
+++ b/renderer/src/components/Projects/CustomList.js
@@ -10,7 +10,7 @@ export default function CustomList({
   const dropdownWidth = width ?? 40;
   return (
     <Listbox value={selected} onChange={setSelected} disabled={!show}>
-      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'relative w-52 lg:w-40 rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
         <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
           <span id={selected?.title} className="block truncate">{selected?.title}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -26,7 +26,7 @@ export default function CustomList({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-44 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
             {options.map((option) => (
               <Listbox.Option
                 key={option.title}
diff --git a/renderer/src/components/Projects/NewProject.js b/renderer/src/components/Projects/NewProject.js
index 35bb28b9c..5babc280c 100644
--- a/renderer/src/components/Projects/NewProject.js
+++ b/renderer/src/components/Projects/NewProject.js
@@ -50,7 +50,7 @@ const solutions = [
 function TargetLanguageTag(props) {
   const { children } = props;
   return (
-    <div className="rounded-full px-3 py-1 ml-28 bg-gray-200 text-xs uppercase font-semibold">{children}</div>
+    <div className="rounded-full px-3 py-1 bg-gray-200 text-xs uppercase font-semibold">{children}</div>
   );
 }
 
@@ -317,10 +317,10 @@ export default function NewProject({ call, project, closeEdit }) {
           </div>
           )
         : (
-          <div className=" rounded-md border shadow-sm mt-4 ml-5 mr-5 mb-5">
+          <div className="rounded-md border shadow-sm mt-4 ml-5 mr-5 mb-5">
             <div className="grid grid-cols-1 lg:grid-cols-3 m-10 gap-5">
 
-              <div>
+              <div className="lg:col-span-1">
                 <h4 className="text-xs font-base mb-2 text-primary  tracking-wide leading-4  font-light">
                   {t('label-project-name')}
                   <span className="text-error">*</span>
@@ -334,7 +334,7 @@ export default function NewProject({ call, project, closeEdit }) {
                     handleProjectName(e);
                   }}
                   disabled={call !== 'new'}
-                  className={classNames(call !== 'new' ? 'bg-gray-200' : '', 'w-52 lg:w-80 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}
+                  className={classNames(call !== 'new' ? 'bg-gray-200' : '', 'w-48 lg:w-full rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}
                 />
                 <span className="text-error">{error.projectName[0]?.message || error.projectName[1]?.message}</span>
                 <h4 className="mt-5 text-xs font-base mb-2 text-primary leading-4 tracking-wide  font-light">{t('label-description')}</h4>
@@ -346,12 +346,12 @@ export default function NewProject({ call, project, closeEdit }) {
                   onChange={(e) => {
                     setNewProjectFields({ ...newProjectFields, description: e.target.value });
                   }}
-                  className="bg-white w-52 lg:w-80 h-28  block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300"
+                  className="bg-white w-48 lg:w-full h-28  block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300"
                 />
                 <span className="text-error">{error.description[0]?.message}</span>
               </div>
 
-              <div className="col-span-2">
+              <div className="lg:col-span-2">
                 <div className="flex gap-5">
                   <div>
                     <h4 className="text-xs font-base mb-2 text-primary  tracking-wide leading-4  font-light">
@@ -373,18 +373,20 @@ export default function NewProject({ call, project, closeEdit }) {
                 </div>
                 <div className="flex gap-5 mt-5 items-center">
                   <div>
-                    {headerDropDown !== 'Audio'
-                      && (
-                      <div className="absolute">
-                        <TargetLanguageTag>
-                          {language.ld ? language.ld : 'LTR'}
-                        </TargetLanguageTag>
-                      </div>
-                    )}
-                    <h4 className="text-xs font-base mb-3 text-primary  tracking-wide leading-4  font-light">
-                      {t('label-target-language')}
-                      <span className="text-error">*</span>
-                    </h4>
+                    <div className="flex gap-4 items-center mb-2">
+                      <h4 className="text-xs font-base  text-primary  tracking-wide leading-4  font-light">
+                        {t('label-target-language')}
+                        <span className="text-error">*</span>
+                      </h4>
+                      {headerDropDown !== 'Audio'
+                        && (
+                          <div>
+                            <TargetLanguageTag>
+                              {language.ld ? language.ld : 'LTR'}
+                            </TargetLanguageTag>
+                          </div>
+                        )}
+                    </div>
                     <CustomMultiComboBox
                       selectedList={[language]}
                       setSelectedList={setLanguage}
diff --git a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
index 2990eb146..7103fb47b 100644
--- a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
+++ b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
@@ -270,7 +270,7 @@ export default function AdvancedSettingsDropdown({ call, project, projectType })
                     show
                   /> */}
 
-                  <div className="py-5 flex gap-3 uppercase text-sm font-medium">
+                  <div className="py-5 flex flex-wrap lg:flex-nowrap gap-3 uppercase text-sm font-medium">
                     <div
                       className={canonSpecification.title === 'All Books' ? 'bg-primary hover:bg-secondary text-white px-3 py-1 rounded-full cursor-pointer whitespace-nowrap' : 'bg-gray-200 hover:bg-primary hover:text-white px-3 py-1 rounded-full cursor-pointer whitespace-nowrap'}
                       onClick={() => selectCanon(canonList[0])}
diff --git a/renderer/src/modules/projects/CustomList.js b/renderer/src/modules/projects/CustomList.js
index a08a9c798..d51086530 100644
--- a/renderer/src/modules/projects/CustomList.js
+++ b/renderer/src/modules/projects/CustomList.js
@@ -10,7 +10,7 @@ export default function CustomList({
   const dropdownWidth = width ?? 40;
   return (
     <Listbox value={selected} onChange={setSelected} disabled={!show}>
-      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'relative w-52 lg:w-40 rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
         <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
           <span className="block truncate">{selected?.title}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -26,7 +26,7 @@ export default function CustomList({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-44 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
             {options.map((option) => (
               <Listbox.Option
                 key={option.title}