requested ui changes (#254)

Co-authored-by: Yannick M <[email protected]>
bible-technology · Nov 24, 2023 · c0ec080 · c0ec080
1 parent fc461ce
commit c0ec080
Show file tree

Hide file tree

Showing 14 changed files with 313 additions and 215 deletions.
diff --git a/renderer/public/icons/new.svg b/renderer/public/icons/new.svg
diff --git a/renderer/src/components/MenuDropdown/MenuDropdown.js b/renderer/src/components/MenuDropdown/MenuDropdown.js
@@ -13,7 +13,9 @@ import {
   fontList as fontsArray,
 } from 'font-detect-rhl';
 
-export default function MenuDropdown({ selectedFont, setSelectedFont, buttonStyle }) {
+export default function MenuDropdown({
+ selectedFont, setSelectedFont, buttonStyle,
+}) {
   const detectedFonts = useDetectFonts({ fonts: fontsArray });
   const [query, setQuery] = useState('');
   const [isOpen, setIsOpen] = useState(false);

diff --git a/renderer/src/components/Projects/NewProject.js b/renderer/src/components/Projects/NewProject.js
@@ -65,7 +65,7 @@ function BibleHeaderTagDropDown(headerDropDown, handleDropDown, call) {
         <button
           type="button"
           aria-label="open-popover"
-          className="flex justify-center items-center px-3 py-2 text-white ml-5
+          className="flex justify-center items-center px-3 py-2 text-white
           font-bold text-xs rounded-full leading-3 tracking-wider uppercase bg-primary"
         >
           {/* <div className="">{headerDropDown}</div> */}
@@ -305,7 +305,7 @@ export default function NewProject({ call, project, closeEdit }) {
   return (
     <ProjectsLayout
       title={call === 'new' ? t('new-project-page') : t('edit-project')}
-      header={BibleHeaderTagDropDown(headerDropDown, handleDropDown, call)}
+      // header={BibleHeaderTagDropDown(headerDropDown, handleDropDown, call)}
     >
       {loading === true
         ? (
@@ -318,8 +318,11 @@ export default function NewProject({ call, project, closeEdit }) {
           )
         : (
           <div className="rounded-md border shadow-sm mt-4 ml-5 mr-5 mb-5">
+            <div className="space-y-2 m-10">
+              <span className="text-xs font-base mb-2 text-primary leading-4 tracking-wide  font-light">Project Type</span>
+              {BibleHeaderTagDropDown(headerDropDown, handleDropDown, call)}
+            </div>
             <div className="grid grid-cols-1 lg:grid-cols-3 m-10 gap-5">
-
               <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')}
@@ -350,7 +353,6 @@ export default function NewProject({ call, project, closeEdit }) {
                 />
                 <span className="text-error">{error.description[0]?.message}</span>
               </div>
-
               <div className="lg:col-span-2">
                 <div className="flex gap-5">
                   <div>

diff --git a/renderer/src/components/Projects/ProjectList.js b/renderer/src/components/Projects/ProjectList.js
@@ -14,6 +14,7 @@ import SearchTags from './SearchTags';
 import NewProject from './NewProject';
 import * as logger from '../../logger';
 import ProjectRow from './ProjectRow';
+import { ProjectContext } from '../context/ProjectContext';
 
 export default function ProjectList() {
   const { t } = useTranslation();
@@ -35,15 +36,15 @@ export default function ProjectList() {
       FetchProjects,
     },
   } = useContext(AutographaContext);
-  const [openPopUp, setOpenPopUp] = useState(false);
+  const { states: { openExportPopUp }, actions: { setOpenExportPopUp } } = useContext(ProjectContext);
   const [currentProject, setCurrentProject] = useState();
   const [filteredProjects, setFilteredProjects] = useState(projects);
-  const openExportPopUp = (project) => {
+  const handleExportPopUp = (project) => {
     setCurrentProject(project);
-    setOpenPopUp(true);
+    setOpenExportPopUp(true);
   };
   const closeExportPopUp = () => {
-    setOpenPopUp(false);
+    setOpenExportPopUp(false);
   };
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -88,7 +89,7 @@ export default function ProjectList() {
                           orderBy={orderBy}
                           onRequestSort={handleRequestSort}
                         />
-                        <ProjectRow projects={filteredProjects} order={order} orderBy={orderBy} showArchived={showArchived} openExportPopUp={openExportPopUp} setCurrentProject={setCurrentProject} handleClickStarred={handleClickStarred} />
+                        <ProjectRow projects={projects} filteredProjects={filteredProjects} order={order} orderBy={orderBy} showArchived={showArchived} openExportPopUp={handleExportPopUp} setCurrentProject={setCurrentProject} handleClickStarred={handleClickStarred} />
                       </table>
                       {(!projects) && <div><LoadingScreen /></div>}
                     </div>
@@ -100,7 +101,7 @@ export default function ProjectList() {
 
         </ProjectsLayout>
       ) : <NewProject call="edit" project={currentProject} closeEdit={() => closeEditProject()} />}
-      <ExportProjectPopUp open={openPopUp} closePopUp={closeExportPopUp} project={currentProject} />
+      <ExportProjectPopUp open={openExportPopUp} closePopUp={closeExportPopUp} project={currentProject} />
     </>
   );
 }