Aesthetic change

Author: amotaouakkil123

client/src/components/admin/comments/CommentsTable.tsx

@@ -70,49 +70,51 @@ export default function CommentsTable({
   return (
     <section className="w-[95%] max-w-4xl mx-auto">
       <div className="py-2 flex justify-between">
-        <details className="[&:open>summary]:rounded-b-none [&:open>summary]:border-b-transparent relative">
-          <summary className="border-2 px-2 py-2 rounded-xl flex flex-row items-center gap-x-2 w-min cursor-pointer">
-            Filter <FunnelIcon className="h-8 w-8" />
-          </summary>
-          <form className="flex flex-col border-2 absolute bg-white p-4 rounded-b-xl rounded-tr-xl w-max">
-            <label>
-              <input
-                type="checkbox"
-                value="all"
-                checked={filter.length === 0}
-                onChange={onFilterChange}
-              ></input>
-              All
-            </label>
-            <label>
-              <input
-                type="checkbox"
-                value="unmoderated"
-                checked={filter.includes("unmoderated")}
-                onChange={onFilterChange}
-              ></input>
-              Unmoderated
-            </label>
-            <label>
-              <input
-                type="checkbox"
-                value="approved"
-                checked={filter.includes("approved")}
-                onChange={onFilterChange}
-              ></input>
-              Approved
-            </label>
-            <label>
-              <input
-                type="checkbox"
-                value="rejected"
-                checked={filter.includes("rejected")}
-                onChange={onFilterChange}
-              ></input>
-              Rejected
-            </label>
-          </form>
-        </details>
+        <div className='flex gap-x-4 items-center'>
+          <details className="[&:open>summary]:rounded-b-none [&:open>summary]:border-b-transparent relative">
+            <summary className="border-2 px-2 py-2 rounded-xl flex flex-row items-center gap-x-2 w-min cursor-pointer">
+              Filter <FunnelIcon className="h-8 w-8" />
+            </summary>
+            <form className="flex flex-col border-2 absolute bg-white p-4 rounded-b-xl rounded-tr-xl w-max">
+              <label>
+                <input
+                  type="checkbox"
+                  value="all"
+                  checked={filter.length === 0}
+                  onChange={onFilterChange}
+                ></input>
+                All
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  value="unmoderated"
+                  checked={filter.includes("unmoderated")}
+                  onChange={onFilterChange}
+                ></input>
+                Unmoderated
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  value="approved"
+                  checked={filter.includes("approved")}
+                  onChange={onFilterChange}
+                ></input>
+                Approved
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  value="rejected"
+                  checked={filter.includes("rejected")}
+                  onChange={onFilterChange}
+                ></input>
+                Rejected
+              </label>
+            </form>
+          </details>
+        </div>
         {!!conversation && (
           <NewCommentDialog
             conversation={conversation}
@@ -122,13 +124,10 @@ export default function CommentsTable({
       </div>
       <div>
         <label>
-            <CSVLink
-              data={dataCsv}
-              filename={"conversation.csv"}
-              className="btn btn-primary"
-              target="_blank"
-              >
+            <CSVLink data={dataCsv} filename={"conversation.csv"} target="_blank">
+              <button className='p-2 bg-secondary text-white rounded-md'>
                 Export CSV
+              </button>
             </CSVLink>
           </label>
       </div>