Merge pull request #180 from TogetherCrew/fix/csv-style-button

change some icons and styles

package.json

@@ -53,7 +53,7 @@
     "react-force-graph-2d": "^1.25.0",
     "react-helmet-async": "^1.3.0",
     "react-hotjar": "^5.5.0",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.11.0",
     "react-modern-calendar-datepicker": "^3.1.6",
     "react-router-dom": "^6.4.3",
     "react-timezone-select": "^1.3.2",

src/components/layouts/xs/SidebarXs.tsx

@@ -20,7 +20,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import { Drawer } from '@mui/material';
 
-import { GoThreeBars } from 'react-icons/go';
+import { FaBars } from 'react-icons/fa';
 import { MdKeyboardBackspace } from 'react-icons/md';
 import useAppStore from '../../../store/useStore';
 import { StorageService } from '../../../services/StorageService';
@@ -127,7 +127,7 @@ const Sidebar = () => {
             <p className="text-md font-bold">{guildInfoByDiscord.name}</p>
           </div>
         </div>
-        <GoThreeBars size={30} onClick={handleDrawerOpen} />
+        <FaBars size={30} onClick={handleDrawerOpen} />
       </div>
       <Drawer
         variant="persistent"

src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx

@@ -10,7 +10,7 @@ import {
 import CustomPagination from '../CustomPagination';
 import CustomButton from '../../../../global/CustomButton';
 import clsx from 'clsx';
-import { FaFileCsv } from 'react-icons/fa';
+import { BsFiletypeCsv } from 'react-icons/bs';
 import { Button } from '@mui/material';
 import {
   convertToCSV,
@@ -157,10 +157,10 @@ export default function ActiveMemberBreakdown() {
             Members breakdown
           </h3>
           <Button
-            startIcon={<FaFileCsv />}
+            startIcon={<BsFiletypeCsv />}
             size="small"
-            variant="contained"
-            className="bg-secondary text-white"
+            variant="outlined"
+            className="border-black text-black"
             disableElevation
             onClick={handleDownloadCSV}
           >

src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx

@@ -11,7 +11,7 @@ import CustomPagination from '../CustomPagination';
 import CustomButton from '../../../../global/CustomButton';
 import clsx from 'clsx';
 import { Button } from '@mui/material';
-import { FaFileCsv } from 'react-icons/fa';
+import { BsFiletypeCsv } from 'react-icons/bs';
 import {
   convertToCSV,
   downloadCSVFile,
@@ -170,10 +170,10 @@ export default function DisengagedMembersCompositionBreakdown() {
             Members breakdown
           </h3>
           <Button
-            startIcon={<FaFileCsv />}
+            startIcon={<BsFiletypeCsv />}
             size="small"
-            variant="contained"
-            className="bg-secondary text-white"
+            variant="outlined"
+            className="border-black text-black"
             disableElevation
             onClick={handleDownloadCSV}
           >

src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx

@@ -11,7 +11,7 @@ import CustomPagination from '../CustomPagination';
 import CustomButton from '../../../../global/CustomButton';
 import clsx from 'clsx';
 import { Button } from '@mui/material';
-import { FaFileCsv } from 'react-icons/fa';
+import { BsFiletypeCsv } from 'react-icons/bs';
 import {
   convertToCSV,
   downloadCSVFile,
@@ -158,10 +158,10 @@ export default function OnboardingMembersBreakdown() {
             Members breakdown
           </h3>
           <Button
-            startIcon={<FaFileCsv />}
+            startIcon={<BsFiletypeCsv />}
             size="small"
-            variant="contained"
-            className="bg-secondary text-white"
+            variant="outlined"
+            className="border-black text-black"
             disableElevation
             onClick={handleDownloadCSV}
           >

src/layouts/defaultLayout.tsx

@@ -3,7 +3,6 @@ import Sidebar from '../components/layouts/Sidebar';
 import SidebarXs from '../components/layouts/xs/SidebarXs';
 import useAppStore from '../store/useStore';
 import { StorageService } from '../services/StorageService';
-import { useRouter } from 'next/router';
 import { IUser } from '../utils/types';
 
 type Props = {