Removing btn daisy classnames.

app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx

@@ -212,25 +212,22 @@ export function BundleEditor({
   const { name: nameOfBundle } = sortedBundleList[activeTab];
   return (
     <Card>
-      <Title className={'w-full flex items-center pb-2'}>
-        Current Tab:{' '}
+      <div className={'w-full flex items-center pb-2'}>
+        <Title>Current Tab: </Title>
         <RenameButton
           onClick={handleOpen}
           currentName={nameOfBundle}
           className={'mx-2 '}
         />
-        <TwoStageClick
-          onClick={() => deleteBundle(activeBundleAndId.id)}
-          className={'btn-sm'}
-        >
+        <TwoStageClick onClick={() => deleteBundle(activeBundleAndId.id)}>
           <TrashIcon className={'h-4 w-4'}></TrashIcon>
         </TwoStageClick>
         <span className={'grow'}></span>
         <span className={'grow-0'}>
           Curriculum Bundles - Year {yearGroup} - Total All Bundles:{' '}
           <Badge color={badgeColor}>{sumOfAllBundles}</Badge>
         </span>
-      </Title>
+      </div>
       <Tab.Group selectedIndex={activeTab} onChange={setActiveTab}>
         <div className={'w-full flex items-center mb-2'}>
           <Tab.List as={Fragment}>

app/electives/commit-changes.tsx

@@ -16,6 +16,7 @@ import {
   ConfirmActionModal,
   useModal
 } from '../generic/components/modals/confirm-action-modal';
+import { Button } from '@nextui-org/react';
 
 interface Props {
   children: React.ReactNode;
@@ -43,11 +44,6 @@ const CommitChanges = ({ children }: Props) => {
 
   const dispatch = useContext(ElectiveDispatchContext);
 
-  const assignmentConflictCount = useSearchParams()?.get('assignmentConflict');
-
-  const conflictCountInt =
-    assignmentConflictCount && parseInt(assignmentConflictCount);
-
   async function handleCommitClick() {
     setCommitPending(true);
 
@@ -75,22 +71,17 @@ const CommitChanges = ({ children }: Props) => {
   );
 
   return (
-    <div className="indicator mx-2">
+    <>
       <Tooltip enabled={showTooltips}>
         <TooltipTrigger>
-          <button
-            className={`btn normal-case`}
-            disabled={!enabled}
+          <Button
+            isDisabled={!enabled}
+            color={'default'}
             onClick={() => openModal()}
           >
-            {!enabled && conflictCountInt && (
-              <span className="indicator-item badge badge-error">
-                {conflictCountInt}
-              </span>
-            )}
             {children}
             {spinner}
-          </button>
+          </Button>
         </TooltipTrigger>
         <TooltipContent>
           <StandardTooltipContentOld>
@@ -111,7 +102,7 @@ const CommitChanges = ({ children }: Props) => {
       >
         <p>Commit changes to the database</p>
       </ConfirmActionModal>
-    </div>
+    </>
   );
 };
 

app/generic/components/buttons/rename-button.tsx

@@ -1,5 +1,6 @@
 import { PencilSquareIcon } from '@heroicons/react/20/solid';
 import React from 'react';
+import { Button, ButtonProps } from '@nextui-org/react';
 
 export type GenericButtonProps = React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -9,17 +10,19 @@ export type GenericButtonProps = React.DetailedHTMLProps<
 export function RenameButton({
   currentName,
   className,
-  ...props
+  ...buttonProps
 }: {
   currentName?: string;
-} & GenericButtonProps) {
+} & ButtonProps) {
   return (
-    <button
-      className={`btn btn-primary btn-outline btn-sm ${className}`}
-      {...props}
+    <Button
+      className={` ${className}`}
+      size={'sm'}
+      variant={'ghost'}
+      {...buttonProps}
     >
       {currentName && currentName}
       <PencilSquareIcon className={'w-4 h-4'}></PencilSquareIcon>
-    </button>
+    </Button>
   );
 }

app/generic/components/buttons/two-stage-click.tsx

@@ -2,18 +2,19 @@ import React, { useRef, useState } from 'react';
 import { Badge } from '@tremor/react';
 import { offset, useFloating } from '@floating-ui/react';
 import { GenericButtonProps } from './rename-button';
+import { Button } from '@nextui-org/react';
 
 export function TwoStageClick({
   children,
   onClick,
-  standardAppearance = 'btn-outline',
-  primedAppearance = 'btn-error',
+  standardAppearance = 'ghost',
+  primedAppearance = 'danger',
   primedMessage = 'Confirm delete?',
   className,
   ...props
 }: {
-  standardAppearance?: 'btn-outline' | 'btn-ghost';
-  primedAppearance?: 'btn-error' | 'btn-primary';
+  standardAppearance?: 'light' | 'ghost';
+  primedAppearance?: 'danger' | 'primary';
   primedMessage?: string;
 } & GenericButtonProps) {
   const [clickPrimed, setClickPrimed] = useState(false);
@@ -35,29 +36,28 @@ export function TwoStageClick({
   };
 
   return (
-    <button
-      className={`z-10 relative btn transition-colors duration-500  ${
-        clickPrimed ? primedAppearance : standardAppearance
-      } ${className}`}
-      {...props}
-      onClick={guardClick}
-      ref={refs.setReference}
-    >
+    <div className={'w-fit h-fit'} ref={refs.setReference}>
+      <Button
+        className={`z-10 relative transition-colors duration-500 ${className}`}
+        /*{...props}*/
+        color={clickPrimed ? primedAppearance : 'default'}
+        variant={standardAppearance}
+        size={'sm'}
+        onClick={guardClick}
+      >
+        {children}
+      </Button>
       {clickPrimed && (
         <div
           ref={refs.setFloating}
           style={floatingStyles}
           className={'bg-white bg-opacity-100 w-fit h-fit rounded-md'}
         >
-          <Badge
-            color={primedAppearance === 'btn-error' ? 'red' : 'blue'}
-            onClick={guardClick}
-          >
+          <Badge color={'red'} onClick={guardClick}>
             {primedMessage}
           </Badge>
         </div>
       )}
-      {children}
-    </button>
+    </div>
   );
 }

app/generic/components/zoom/zoom-button.tsx

@@ -3,20 +3,21 @@ import { useContext } from 'react';
 import { ZoomDispatchContext, ZoomType } from './zoom-context';
 
 import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
+import { Button } from '@nextui-org/react';
 
 export default function ZoomButton({ direction }: { direction: ZoomType }) {
   const zoomDispatchContext = useContext(ZoomDispatchContext);
   const callback = zoomDispatchContext[direction];
   return (
-    <button
-      className="btn min-h-0 h-fit min-w-0 w-fit p-0 rounded-full"
+    <Button
+      className=" min-h-0 h-fit min-w-0 w-fit p-0 rounded-full"
       onClick={callback}
     >
       {direction == 'increment' ? (
         <PlusCircleIcon className="h-5 w-5"></PlusCircleIcon>
       ) : (
         <MinusCircleIcon className="h-5 w-5"></MinusCircleIcon>
       )}
-    </button>
+    </Button>
   );
 }

app/graphing/editing/buttons/graph-edit-button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button, ButtonProps } from '@nextui-org/react';
 
 export function GraphEditButton({
   noNodeSelected,
@@ -7,12 +8,9 @@ export function GraphEditButton({
 }: {
   noNodeSelected: boolean;
   children: string;
-} & React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->) {
+} & ButtonProps) {
   return (
-    <button className={'btn btn-primary btn-outline'} {...buttonProps}>
+    <Button variant={'ghost'} color={'primary'} {...buttonProps}>
       {children}
       {noNodeSelected && (
         <span
@@ -21,6 +19,6 @@ export function GraphEditButton({
           Select more nodes!
         </span>
       )}
-    </button>
+    </Button>
   );
 }

app/graphing/graph-types/organization/curriculum-delivery-details.tsx

@@ -11,6 +11,7 @@ import { useSumAllSchemasMemo } from '../../../curriculum/delivery-models/functi
 import { useSchemaBundleAssignmentContext } from '../../../curriculum/delivery-models/functions/use-schema-bundle-assignment-context';
 import { RenameModal } from '../../../generic/components/modals/rename-modal';
 import { GenericButtonProps } from '../../../generic/components/buttons/rename-button';
+import { Button, ButtonProps } from '@nextui-org/react';
 
 export const LeftCol =
   'text-xs w-full text-center h-full flex items-center justify-center';
@@ -59,10 +60,10 @@ export default function CurriculumDeliveryDetails({
       <div className={'grid grid-cols-6 gap-1 mb-1'}>
         <div className={LeftCol}>Block:</div>
         <div className={'col-start-2 col-span-5'}>
-          <button className={'btn btn-xs w-full'} onClick={openModal}>
+          <Button className={'w-full '} onClick={openModal} size={'sm'}>
             <PencilSquareIcon className={'w-4 h-4'}></PencilSquareIcon>
             {node.data.name} - Total Periods: {totalAllocation}
-          </button>
+          </Button>
         </div>
       </div>
       <div
@@ -90,10 +91,7 @@ export default function CurriculumDeliveryDetails({
           }}
         >
           <Listbox value={assignmentOptional} onChange={handleAssignmentChange}>
-            <Listbox.Button
-              as={NodeDetailsListBoxButton}
-              // className={'btn w-full h-full relative px-1'}
-            >
+            <Listbox.Button as={NodeDetailsListBoxButton}>
               <table className={'text-left w-full'}>
                 <thead className={'text-sm border-b-2'}>
                   <tr>
@@ -149,17 +147,18 @@ function CourseSummary({
 
 export const NodeDetailsListBoxButton = forwardRef(
   function NodeDetailsListBoxButton(
-    { children, ...props }: Omit<GenericButtonProps, 'className'>,
+    { children, ...props }: Omit<ButtonProps, 'className'>,
     ref: React.ForwardedRef<HTMLButtonElement>
   ) {
     return (
-      <button
-        className={'btn w-full h-full relative px-1'}
+      <Button
+        className={'w-full h-full relative px-1'}
+        radius={'sm'}
         {...props}
         ref={ref}
       >
         {children}
-      </button>
+      </Button>
     );
   }
 );

app/graphing/graph-types/work-task-types/rename-work-task-type.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren } from 'react';
+import { LeftCol } from '../organization/curriculum-delivery-details';
+import { DataNode } from '../../../api/zod-mods';
+import { WorkTaskTypeDto } from '../../../api/dtos/WorkTaskTypeDtoSchema';
+import { useNodeNameEditing } from '../../editing/functions/use-node-name-editing';
+import { Button } from '@nextui-org/react';
+import { PencilSquareIcon } from '@heroicons/react/20/solid';
+import { RenameModal } from '../../../generic/components/modals/rename-modal';
+
+export const WorkTaskTypeDtoDetailsListenerKey = 'work-task-type-details';
+
+export function ColumnOne({ children }: PropsWithChildren) {
+  return <div className={LeftCol}>{children}</div>;
+}
+
+export function ColumnsTwoToFour({ children }: PropsWithChildren) {
+  return <div className={'col-start-2 col-span-3'}>{children}</div>;
+}
+
+export function RenameWorkTaskType({ node }: { node: DataNode<WorkTaskTypeDto> }) {
+  const {
+    id,
+    data: { name }
+  } = node;
+  const listenerKey = `${WorkTaskTypeDtoDetailsListenerKey}:${id}`;
+  const { openModal, renameModalProps } = useNodeNameEditing(node, listenerKey);
+  return (
+    <>
+      <ColumnOne>Name:</ColumnOne>
+      <ColumnsTwoToFour>
+        <Button
+          onClick={openModal}
+          className={'text-xs w-full overflow-hidden flex flex-nowrap'}
+        >
+          <span className={' truncate ...'}>{name}</span>
+          <PencilSquareIcon className={'h-4 w-4'}></PencilSquareIcon>
+        </Button>
+      </ColumnsTwoToFour>
+      <RenameModal {...renameModalProps} />
+    </>
+  );
+}