Change to use theme

Author: alan412

src/reactComponents/FileManageModal.tsx

@@ -62,6 +62,7 @@ const ACTIONS_COLUMN_WIDTH = 120;
  */
 export default function FileManageModal(props: FileManageModalProps) {
   const {t} = I18Next.useTranslation();
+  const { token } = Antd.theme.useToken();
   const [modules, setModules] = React.useState<Module[]>([]);
   const [newItemName, setNewItemName] = React.useState('');
   const [currentRecord, setCurrentRecord] = React.useState<Module | null>(null);
@@ -407,7 +408,7 @@ export default function FileManageModal(props: FileManageModalProps) {
       >
         <div style={{
           marginBottom: 16,
-          border: '1px solid #d9d9d9',
+          border: `1px solid ${token.colorBorder}`,
           borderRadius: '6px',
           padding: '12px',
         }}>

src/reactComponents/ProjectManageModal.tsx

@@ -67,6 +67,7 @@ const CONTAINER_PADDING = '12px';
  */
 export default function ProjectManageModal(props: ProjectManageModalProps): React.JSX.Element {
   const {t} = I18Next.useTranslation();
+  const { token } = Antd.theme.useToken();
   const [allProjectNames, setAllProjectNames] = React.useState<string[]>([]);
   const [allProjectRecords, setAllProjectRecords] = React.useState<ProjectRecord[]>([]);
   const [newItemName, setNewItemName] = React.useState('');
@@ -232,7 +233,7 @@ export default function ProjectManageModal(props: ProjectManageModalProps): Reac
   /** Creates the container style object. */
   const getContainerStyle = (): React.CSSProperties => ({
     marginBottom: ALERT_MARGIN_BOTTOM,
-    border: '1px solid #d9d9d9',
+    border: `1px solid ${token.colorBorder}`,
     borderRadius: CONTAINER_BORDER_RADIUS,
     padding: CONTAINER_PADDING,
   });