From 4078e4541c55e1b5f467636d993dfeb1f6822777 Mon Sep 17 00:00:00 2001
From: Ar Rakin <rakinar2@onesoftnet.eu.org>
Date: Sat, 14 Oct 2023 09:43:44 +0600
Subject: [PATCH] fix: message rule card title spacing on mobile

---
 .../MessageRuleManagement/MessageRuleCard.tsx | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/MessageRuleManagement/MessageRuleCard.tsx b/src/components/MessageRuleManagement/MessageRuleCard.tsx
index e0a7c52..2c42837 100644
--- a/src/components/MessageRuleManagement/MessageRuleCard.tsx
+++ b/src/components/MessageRuleManagement/MessageRuleCard.tsx
@@ -1,22 +1,23 @@
 /*
-* This file is part of SudoBot Dashboard.
-*
-* Copyright (C) 2021-2023 OSN Developers.
-*
-* SudoBot Dashboard is free software; you can redistribute it and/or modify it
-* under the terms of the GNU Affero General Public License as published by
-* the Free Software Foundation, either version 3 of the License, or
-* (at your option) any later version.
-*
-* SudoBot Dashboard is distributed in the hope that it will be useful, but
-* WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-* GNU Affero General Public License for more details.
-*
-* You should have received a copy of the GNU Affero General Public License
-* along with SudoBot Dashboard. If not, see <https://www.gnu.org/licenses/>.
-*/
+ * This file is part of SudoBot Dashboard.
+ *
+ * Copyright (C) 2021-2023 OSN Developers.
+ *
+ * SudoBot Dashboard is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * SudoBot Dashboard is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with SudoBot Dashboard. If not, see <https://www.gnu.org/licenses/>.
+ */
 
+import useIsDesktop from "@/hooks/useIsDesktop";
 import { SettingCardProps } from "@/types/SetttingCardProps";
 import { Button } from "@mui/material";
 import { Card, CardBody, CardHeader } from "@nextui-org/react";
@@ -33,6 +34,7 @@ const MessageRuleCard: FC<SettingCardProps> = ({
     const [state, setState] = useState(() => ({
         enabled: !!config?.message_rules?.enabled,
     }));
+    const isDesktop = useIsDesktop();
 
     return (
         <Card>
@@ -42,12 +44,12 @@ const MessageRuleCard: FC<SettingCardProps> = ({
                         <h4 className="font-bold text-large pl-2">
                             Message Rules
                         </h4>
-                        <h4 className="font-bold bg-[#007bff] py-1 px-3 rounded-lg">
+                        <h4 className="font-bold text-[10px] bg-[#007bff] py-1 px-3 rounded-lg">
                             BETA
                         </h4>
                     </div>
                     <div className="flex items-center gap-3">
-                        {state.enabled && (
+                        {state.enabled && isDesktop && (
                             <Button startIcon={<MdAdd />}>Create</Button>
                         )}
                         <Switch
@@ -71,6 +73,12 @@ const MessageRuleCard: FC<SettingCardProps> = ({
                 </p>
 
                 <MessageRules rules={config?.message_rules?.rules ?? []} />
+
+                <div className="flex items-center justify-end mt-3">
+                    {state.enabled && !isDesktop && (
+                        <Button startIcon={<MdAdd />}>Create</Button>
+                    )}
+                </div>
             </CardBody>
         </Card>
     );