From 2138acc1fd56845b1e4e4be62b6630eb78cf56f8 Mon Sep 17 00:00:00 2001
From: Steve Brownlee <chortlehoort@gmail.com>
Date: Sun, 30 Jun 2024 12:42:00 -0500
Subject: [PATCH] Added Radix buttons for all course management forms

---
 src/components/course/BookForm.js       | 38 ++++++++++-------------
 src/components/course/CourseForm.js     | 33 +++++++++++---------
 src/components/course/ProjectDetails.js | 11 ++++---
 src/components/course/ProjectForm.js    | 40 +++++++++++--------------
 4 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/src/components/course/BookForm.js b/src/components/course/BookForm.js
index 477ce0b..3b66711 100644
--- a/src/components/course/BookForm.js
+++ b/src/components/course/BookForm.js
@@ -1,5 +1,7 @@
 import React, { useContext, useEffect, useState } from "react"
 import { useHistory, useParams } from "react-router-dom"
+
+import { Button } from "@radix-ui/themes"
 import Settings from "../Settings.js"
 import { fetchIt } from "../utils/Fetch.js"
 import { HelpIcon } from "../../svgs/Help.js"
@@ -111,31 +113,23 @@ export const BookForm = () => {
                     />
                 </div>
 
+                <Button style={{ marginTop: "2rem", marginLeft: "auto" }} color="blue"
+                    onClick={evt => {
+                        evt.preventDefault()
 
-                <button type="submit"
-                    className="isometric-button blue"
-                    onClick={
-                        evt => {
-                            evt.preventDefault()
-
-                            if (mode === "create") {
-                                constructNewBook()
-                            }
-                            else {
-                                editBook(book).then(() => history.push(`/courses/${book.course}`))
-                            }
+                        if (mode === "create") {
+                            constructNewBook()
                         }
-                    }> Save </button>
-
-                <button type="submit"
-                    style={{margin: "0 0 0 1rem"}}
-                    className="isometric-button blue"
-                    onClick={
-                        evt => {
-                            evt.preventDefault()
-                            history.push(`/courses/${book.course}`)
+                        else {
+                            editBook(book).then(() => history.push(`/courses/${book.course}`))
                         }
-                    }> Cancel </button>
+                    }}>Save</Button>
+
+                <Button style={{ margin: "2rem 0 0 1rem" }} color="crimson"
+                    onClick={evt => {
+                        evt.preventDefault()
+                        history.push(`/courses/${book.course}`)
+                    }}>Cancel</Button>
             </form>
         </>
     )
diff --git a/src/components/course/CourseForm.js b/src/components/course/CourseForm.js
index c8f7fcd..df1867f 100644
--- a/src/components/course/CourseForm.js
+++ b/src/components/course/CourseForm.js
@@ -1,5 +1,7 @@
 import React, { useContext, useEffect, useState } from "react"
 import { useHistory, useParams } from "react-router-dom"
+
+import { Button } from "@radix-ui/themes"
 import Settings from "../Settings.js"
 import { fetchIt } from "../utils/Fetch.js"
 import { HelpIcon } from "../../svgs/Help.js"
@@ -40,7 +42,7 @@ export const CourseForm = () => {
     return (
         <>
             <form className="courseForm view">
-                <h2 className="courseForm__title">{mode === "edit" ? "Edit": "New"} Course</h2>
+                <h2 className="courseForm__title">{mode === "edit" ? "Edit" : "New"} Course</h2>
                 <div className="form-group">
                     <label htmlFor="name"> Course name </label>
                     <input onChange={updateState}
@@ -52,23 +54,26 @@ export const CourseForm = () => {
                 </div>
                 <div className="form-group">
                     <input id="active" type="checkbox" controltype="boolean" checked={course.active} onChange={updateState} />
-                    <label htmlFor="active" style={{margin: "0 0 0 0.5rem"}}>Active</label>
+                    <label htmlFor="active" style={{ margin: "0 0 0 0.5rem" }}>Active</label>
                 </div>
 
-                <button type="submit"
-                    onClick={
-                        evt => {
-                            evt.preventDefault()
+                <Button style={{ marginTop: "2rem", marginLeft: "auto" }} color="blue"
+                    onClick={evt => {
+                        evt.preventDefault()
 
-                            if (mode === "create") {
-                                createCourse(course).then(() => history.push("/courses"))
-                            }
-                            else {
-                                editCourse(course).then(() => history.push("/courses"))
-                            }
+                        if (mode === "create") {
+                            createCourse(course).then(() => history.push("/courses"))
+                        }
+                        else {
+                            editCourse(course).then(() => history.push("/courses"))
                         }
-                    }
-                    className="isometric-button blue"> Save </button>
+                    }}>Save</Button>
+
+                <Button style={{ margin: "2rem 0 0 1rem" }} color="crimson"
+                    onClick={evt => {
+                        evt.preventDefault()
+                        history.push("/courses")
+                    }}>Cancel</Button>
             </form>
         </>
     )
diff --git a/src/components/course/ProjectDetails.js b/src/components/course/ProjectDetails.js
index f85f61c..f726149 100644
--- a/src/components/course/ProjectDetails.js
+++ b/src/components/course/ProjectDetails.js
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from "react"
 import { Link, useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min.js"
 
+import { Button } from "@radix-ui/themes"
 import { EditIcon } from "../../svgs/EditIcon"
 import { CourseContext } from "./CourseProvider.js"
 import { DeleteIcon } from "../../svgs/DeleteIcon.js"
@@ -36,17 +37,15 @@ export const ProjectDetails = () => {
         </div>
 
         <div className="project__footer">
-            <button style={{ marginTop: "2rem", marginLeft: "auto" }}
-                className="isometric-button yellow"
+            <Button style={{ marginTop: "2rem", marginLeft: "auto" }} color="orange"
                 onClick={() => {
                     history.push(`/projects/edit/${project.id}`)
-                }}>Edit Project</button>
+                }}>Edit Project</Button>
 
-            <button style={{ marginTop: "2rem" }}
-                className="isometric-button red"
+            <Button style={{ margin: "2rem 0 0 1rem" }} color="crimson"
                 onClick={() => {
                     deleteProject(project.id).then(() => history.push(`/books/${project.book.id}`))
-                }}>Delete Project</button>
+                }}>Delete Project</Button>
         </div>
     </article>
 }
diff --git a/src/components/course/ProjectForm.js b/src/components/course/ProjectForm.js
index 3c24585..394cf5d 100644
--- a/src/components/course/ProjectForm.js
+++ b/src/components/course/ProjectForm.js
@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useState } from "react"
 import { useHistory, useParams } from "react-router-dom"
+
 import Settings from "../Settings.js"
+import { Button } from "@radix-ui/themes"
 import { fetchIt } from "../utils/Fetch.js"
 import { HelpIcon } from "../../svgs/Help.js"
 import { CourseContext } from "./CourseProvider.js"
@@ -40,7 +42,7 @@ export const ProjectForm = () => {
     useEffect(() => {
         if (bookId) {
             getBook(bookId).then((book) => {
-                updateProject({...project, book: book.id, course: book.course.id})
+                updateProject({ ...project, book: book.id, course: book.course.id })
                 setTitle(`${book.course.name} > ${book.name} > New Project`)
             })
             setMode("create")
@@ -122,29 +124,23 @@ export const ProjectForm = () => {
                     <label htmlFor="active"> Active </label>
                 </div>
 
-                <button type="submit" className="isometric-button blue"
-                    onClick={
-                        evt => {
-                            evt.preventDefault()
-
-                            if (mode === "create") {
-                                constructNewProject()
-                            }
-                            else {
-                                editProject(project).then(() => history.push(`/books/${project.book}`))
-                            }
+                <Button style={{ marginTop: "2rem", marginLeft: "auto" }} color="blue"
+                    onClick={evt => {
+                        evt.preventDefault()
+
+                        if (mode === "create") {
+                            constructNewProject()
                         }
-                    }> Save </button>
-
-                <button type="submit"
-                    style={{ margin: "0 0 0 1rem" }}
-                    className="isometric-button blue"
-                    onClick={
-                        evt => {
-                            evt.preventDefault()
-                            history.push(`/books/${project.book}`)
+                        else {
+                            editProject(project).then(() => history.push(`/books/${project.book}`))
                         }
-                    }> Cancel </button>
+                    }}>Save</Button>
+
+                <Button style={{ margin: "2rem 0 0 1rem" }} color="crimson"
+                    onClick={evt => {
+                        evt.preventDefault()
+                        history.push(`/books/${project.book}`)
+                    }}>Cancel</Button>
             </form>
         </>
     )