From 4e7e62b2bc38d5817a9e081b67f7c66f65802a13 Mon Sep 17 00:00:00 2001
From: Steve Brownlee <chortlehoort@gmail.com>
Date: Tue, 4 Jun 2024 11:44:23 -0500
Subject: [PATCH] Implement radix buttons for weekly teams

---
 src/components/people/SettingsDialog.js |  5 +++--
 src/components/teams/WeeklyTeams.js     | 16 +++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/people/SettingsDialog.js b/src/components/people/SettingsDialog.js
index c4fa1eb..58530d3 100644
--- 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
index 90f5910..3971676 100644
--- 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,20 +288,20 @@ 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()
@@ -307,7 +309,7 @@ export const WeeklyTeams = () => {
                         clearTeams().then(() => getCohortStudents(activeCohort))
                     }}>
                         Clear
-                    </button>
+                    </Button>
                 </div>
             </section>