Merge pull request #67 from stevebrownlee/develop

Implement radix buttons for weekly teams
stevebrownlee · Jun 4, 2024 · f2d45bd · f2d45bd
2 parents a377020 + 4e7e62b
commit f2d45bd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/people/SettingsDialog.js b/src/components/people/SettingsDialog.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Button } from '@radix-ui/themes'
 
 export const SettingsDialog = ({ toggleSettings, settingsIsOpen, changeMimic, mimic }) => {
     return <dialog id="dialog--settings"
@@ -14,11 +15,11 @@ export const SettingsDialog = ({ toggleSettings, settingsIsOpen, changeMimic, mi
     >
 
         <h1>User Settings</h1>
-        <button onClick={() => changeMimic(!mimic)} className="isometric-button yellow">
+        <Button onClick={() => changeMimic(!mimic)} color="amber">
             {
                 mimic ? "Instructor Interface" : "Student Interface"
             }
-        </button>
+        </Button>
         <button className="fakeLink dialog__close"
             id="closeBtn"
             onClick={toggleSettings}>[ close ]</button>

diff --git a/src/components/teams/WeeklyTeams.js b/src/components/teams/WeeklyTeams.js
@@ -1,4 +1,6 @@
 import React, { useContext, useEffect, useState } from "react"
+import { Button } from '@radix-ui/themes'
+
 import { PeopleContext } from "../people/PeopleProvider"
 import { CohortContext } from "../cohorts/CohortProvider"
 import TeamsRepository from "./TeamsRepository"
@@ -286,28 +288,28 @@ export const WeeklyTeams = () => {
                         onChange={e => setWeeklyPrefix(e.target.value)} />
                 </div>
                 <div className="teamsconfig__auto">
-                    <button className="isometric-button yellow" onClick={() => autoAssignStudents()}>
+                    <Button color="amber" onClick={() => autoAssignStudents()}>
                         Assign By Score
-                    </button>
+                    </Button>
                 </div>
                 <div className="teamsconfig__random">
-                    <button className="isometric-button yellow" onClick={() => autoAssignStudents(true)}>
+                    <Button color="amber" onClick={() => autoAssignStudents(true)}>
                         Random
-                    </button>
+                    </Button>
                 </div>
                 <div className="teamsconfig__save">
-                    <button className="isometric-button blue" onClick={saveTeams}> Save </button>
+                    <Button className="isometric-Button blue" onClick={saveTeams}> Save </Button>
                 </div>
                 <div className="teamsconfig__clear">
-                    <button className="isometric-button red" onClick={() => {
+                    <Button color="red" onClick={() => {
                         localStorage.removeItem("currentCohortTeams")
                         changeCount(6)
                         buildNewTeams()
                         setUnassigned(cohortStudents)
                         clearTeams().then(() => getCohortStudents(activeCohort))
                     }}>
                         Clear
-                    </button>
+                    </Button>
                 </div>
             </section>