refactor: improve the color of button at info panel footer

src/components/Footer/index.tsx

@@ -49,9 +49,8 @@ const Footer: React.FC = () => {
           openState={infoPanelState.donate}
           title="Buy us a coffee"
           icon={IconCoffee}
-          btnColor="bg-yellow-300"
-          iconColor="text-yellow-500"
-          iconBackgroundColor="bg-yellow-100"
+          buttonClassName="bg-yellow-500 hover:bg-yellow-400"
+          iconClassName="bg-amber-100 text-amber-500"
           onClose={() => handleCloseInfoPanel('donate')}
         >
           <p className="text-sm text-gray-500 dark:text-gray-300">
@@ -76,9 +75,8 @@ const Footer: React.FC = () => {
           openState={infoPanelState.vsc}
           title="VSCode 摸🐟插件"
           icon={IconTerminal2}
-          btnColor="bg-blue-400"
-          iconColor="text-blue-600"
-          iconBackgroundColor="bg-blue-300"
+          buttonClassName="bg-blue-500 hover:bg-blue-400"
+          iconClassName="text-blue-600 bg-blue-300"
           onClose={() => handleCloseInfoPanel('vsc')}
         >
           <p className="text-sm text-gray-500  dark:text-gray-400">
@@ -100,9 +98,8 @@ const Footer: React.FC = () => {
           openState={infoPanelState.community}
           title="用户反馈社群"
           icon={IconBrandWechat}
-          btnColor="bg-cyan-400"
-          iconColor="text-cyan-600"
-          iconBackgroundColor="bg-cyan-300"
+          buttonClassName="bg-cyan-500 hover:bg-cyan-400"
+          iconClassName="text-cyan-600 bg-cyan-300"
           onClose={() => handleCloseInfoPanel('community')}
         >
           <p className="text-sm text-gray-500  dark:text-gray-400">
@@ -128,9 +125,8 @@ const Footer: React.FC = () => {
           openState={infoPanelState.redBook}
           title="小红书社群"
           icon="redBookLogo"
-          btnColor="bg-rose-500"
-          iconColor="#ff2e4d"
-          iconBackgroundColor="bg-rose-300"
+          buttonClassName="bg-rose-500 hover:bg-red-400"
+          iconClassName="bg-rose-300"
           onClose={() => handleCloseInfoPanel('redBook')}
         >
           <p className="text-sm text-gray-500  dark:text-gray-400">

src/components/InfoPanel/index.tsx

@@ -9,22 +9,12 @@ type InfoPanelProps = {
   onClose: () => void
   title: string
   icon: ElementType<TablerIconsProps> | 'redBookLogo'
-  iconColor: string
-  iconBackgroundColor: string
-  btnColor: string
+  iconClassName: string
+  buttonClassName: string
   children: React.ReactNode
 }
 
-const InfoPanel: React.FC<InfoPanelProps> = ({
-  openState,
-  title,
-  onClose,
-  icon: Icon,
-  iconBackgroundColor,
-  iconColor,
-  btnColor,
-  children,
-}) => {
+const InfoPanel: React.FC<InfoPanelProps> = ({ openState, title, onClose, icon: Icon, iconClassName, buttonClassName, children }) => {
   return (
     <Transition.Root show={openState} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={() => onClose()}>
@@ -55,10 +45,13 @@ const InfoPanel: React.FC<InfoPanelProps> = ({
                 <div className="bg-white px-4 pb-4 pt-5 dark:bg-gray-800 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div
-                      className={`${iconBackgroundColor} mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full dark:bg-opacity-50 sm:mx-0 sm:h-10 sm:w-10`}
+                      className={classNames(
+                        iconClassName,
+                        `mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full dark:bg-opacity-50 sm:mx-0 sm:h-10 sm:w-10`,
+                      )}
                     >
                       {Icon !== 'redBookLogo' ? (
-                        <Icon className={classNames('h-6 w-6 stroke-current dark:bg-opacity-100', iconColor)} />
+                        <Icon className="h-6 w-6 stroke-current dark:bg-opacity-100" />
                       ) : (
                         <img src={redBookLogo} alt="redBookLogo" className="h-6 w-6" />
                       )}
@@ -72,11 +65,7 @@ const InfoPanel: React.FC<InfoPanelProps> = ({
                   </div>
                 </div>
                 <div className="bg-gray-50 px-4 py-3 dark:bg-gray-700  sm:flex sm:flex-row-reverse sm:px-6">
-                  <button
-                    type="button"
-                    className={`${btnColor}  mt-3 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none  dark:bg-opacity-70 dark:text-opacity-80 sm:ml-3 sm:mt-0 sm:w-auto  sm:w-auto sm:text-sm`}
-                    onClick={() => onClose()}
-                  >
+                  <button type="button" className={classNames(buttonClassName, 'btn-info-panel')} onClick={() => onClose()}>
                     关闭
                   </button>
                 </div>

src/index.css

@@ -82,6 +82,13 @@ body,
     @apply flex items-center justify-center rounded-lg bg-indigo-400 px-6 py-1 text-lg text-white hover:opacity-90 focus:outline-none dark:text-opacity-80;
   }
 
+  .btn-info-panel {
+    @apply mt-3 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm
+      font-semibold text-white shadow-sm transition-colors focus:outline-none
+      dark:bg-opacity-70 dark:text-opacity-80 sm:ml-3 sm:mt-0 sm:w-auto
+      sm:text-sm;
+  }
+
   .tooltip {
     @apply whitespace-nowrap rounded-lg bg-white px-2 py-1 text-xs text-gray-500 shadow-md dark:bg-gray-700 dark:text-gray-300;
   }

src/pages/Gallery-N/DictRequest.tsx

@@ -20,9 +20,8 @@ export default function DictRequest() {
           openState={showPanel}
           title="申请词典"
           icon={IconBook2}
-          btnColor="bg-indigo-300"
-          iconColor="text-indigo-500"
-          iconBackgroundColor="bg-indigo-100"
+          buttonClassName="bg-indigo-500 hover:bg-indigo-400"
+          iconClassName="text-indigo-500 bg-indigo-100"
           onClose={onClosePanel}
         >
           <p className="text-sm text-gray-600 dark:text-gray-300">