From 36419f8b1a9c564a8e2b8cff20c9558709f574e1 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 17:29:57 +0300
Subject: [PATCH 01/10] Add .idea folder to gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index f5918a4..88b85ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/

From 53f3961a0c36dc69488462ac17dfaf39b05dac23 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 17:32:54 +0300
Subject: [PATCH 02/10] Add a bit of bottom margin to the Contributors Social
 Icon

---
 src/components/ContributorsCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContributorsCard.jsx b/src/components/ContributorsCard.jsx
index 049e64a..fc38469 100644
--- a/src/components/ContributorsCard.jsx
+++ b/src/components/ContributorsCard.jsx
@@ -110,7 +110,7 @@ import {
             <Flex direction="row" alignItems="start" fontFamily="Syne">
               <SocialIcon
                 url={data.github}
-                style={{ marginRight: "0.5rem" }}
+                style={{ marginRight: "0.5rem", marginBottom: "0.5rem" }}
               />
             </Flex>
           </AccordionPanel>

From 10e7825f3d7edc21a1aa4dd4842bb311e9ef5465 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 17:51:01 +0300
Subject: [PATCH 03/10] Do not show dependabot as a contributor on the About
 Page

---
 src/pages/AboutSettingsPage.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/AboutSettingsPage.jsx b/src/pages/AboutSettingsPage.jsx
index 1445e65..d68d213 100644
--- a/src/pages/AboutSettingsPage.jsx
+++ b/src/pages/AboutSettingsPage.jsx
@@ -139,7 +139,8 @@ function AboutSettingsPage() {
       </Text>
       <Accordion allowToggle mt="1rem">
         {contributors.map((data) => (
-          <ContributorsCard data={data} key={data.name} />
+            // Do not render if the name is "dependabot[bot]"
+            data.name === "dependabot[bot]" ? null : <ContributorsCard data={data} key={data.name} />
         ))}
       </Accordion>
     </Box>

From bbcab077ef4a7b73b2f1b9154f9a4b44a5759961 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:08:01 +0300
Subject: [PATCH 04/10] remove useless comment i added before

---
 src/pages/AboutSettingsPage.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/AboutSettingsPage.jsx b/src/pages/AboutSettingsPage.jsx
index d68d213..d5b24b0 100644
--- a/src/pages/AboutSettingsPage.jsx
+++ b/src/pages/AboutSettingsPage.jsx
@@ -139,7 +139,6 @@ function AboutSettingsPage() {
       </Text>
       <Accordion allowToggle mt="1rem">
         {contributors.map((data) => (
-            // Do not render if the name is "dependabot[bot]"
             data.name === "dependabot[bot]" ? null : <ContributorsCard data={data} key={data.name} />
         ))}
       </Accordion>

From 56fb3b6ca1e473e5368084493a84b39381648ce4 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:08:24 +0300
Subject: [PATCH 05/10] Add number of contributions for contributors

---
 src/components/ContributorsCard.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ContributorsCard.jsx b/src/components/ContributorsCard.jsx
index fc38469..c5b15b3 100644
--- a/src/components/ContributorsCard.jsx
+++ b/src/components/ContributorsCard.jsx
@@ -45,9 +45,10 @@ import {
     Image,
     Text,
     useColorModeValue,
-    Flex,
-  } from "@chakra-ui/react";
+    Flex, Stat, StatLabel, StatNumber, StatHelpText,
+} from "@chakra-ui/react";
   import { SocialIcon } from "react-social-icons";
+import {RiGitRepositoryCommitsLine} from "react-icons/ri";
   
   export default function ContributorsCard ({ data }) {
     const SelectBorderColor = () => {
@@ -61,6 +62,7 @@ import {
     return (
       <Box
         w={{ sm: "95%", md: "75%", lg: "50%" }}
+        style={{ marginBottom: "1rem" }}
         borderRadius="20"
         overflow="hidden"
         border="2px"
@@ -103,6 +105,14 @@ import {
               >
                 {data.name}
               </Text>
+
+                <Stat>
+                    <StatNumber style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
+                        <RiGitRepositoryCommitsLine />
+                        {data.contributions}
+                    </StatNumber>
+                    <StatHelpText>Contributions</StatHelpText>
+                </Stat>
               <AccordionIcon />
             </AccordionButton>
           </Flex>

From 043b0075a5a78aaf6eb3f508826d9951a08cb134 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:14:02 +0300
Subject: [PATCH 06/10] Also add padding on project members

---
 src/components/ProjectMembersCard.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ProjectMembersCard.jsx b/src/components/ProjectMembersCard.jsx
index 7496a40..c8544d0 100644
--- a/src/components/ProjectMembersCard.jsx
+++ b/src/components/ProjectMembersCard.jsx
@@ -61,6 +61,7 @@ export default function ProjectMembersCard({ data }) {
   return (
     <Box
       w={{ sm: "95%", md: "75%", lg: "50%" }}
+      style={{ marginBottom: "1rem" }}
       borderRadius="20"
       overflow="hidden"
       border="2px"

From 11ebceaf4710d5a666de2cdc89f9c9dd85e46757 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:14:21 +0300
Subject: [PATCH 07/10] Make the contributors card commits better on mobile

---
 src/components/ContributorsCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ContributorsCard.jsx b/src/components/ContributorsCard.jsx
index c5b15b3..96a4833 100644
--- a/src/components/ContributorsCard.jsx
+++ b/src/components/ContributorsCard.jsx
@@ -107,11 +107,11 @@ import {RiGitRepositoryCommitsLine} from "react-icons/ri";
               </Text>
 
                 <Stat>
-                    <StatNumber style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
+                    <StatNumber fontSize={{ base: "xs", sm: "sm", md: "md" }} style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
                         <RiGitRepositoryCommitsLine />
                         {data.contributions}
                     </StatNumber>
-                    <StatHelpText>Contributions</StatHelpText>
+                    <StatHelpText fontSize={{ base: "xs", sm: "sm", md: "md" }}>Commits</StatHelpText>
                 </Stat>
               <AccordionIcon />
             </AccordionButton>

From 5deb7efa4ec0518c9e49e27249d3da756f7d9c64 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:26:35 +0300
Subject: [PATCH 08/10] Make Contributors card not be an accordion

Since all we display on the accordion is only the github repo we can make it so the link is on the name of the contributor so the user does not need to click again to open the accordion to view the contributor's github
---
 src/components/ContributorsCard.jsx | 59 ++++++++++++++++-------------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/ContributorsCard.jsx b/src/components/ContributorsCard.jsx
index 96a4833..2951784 100644
--- a/src/components/ContributorsCard.jsx
+++ b/src/components/ContributorsCard.jsx
@@ -45,10 +45,13 @@ import {
     Image,
     Text,
     useColorModeValue,
-    Flex, Stat, StatLabel, StatNumber, StatHelpText,
+    Flex, Stat, StatLabel, StatNumber, StatHelpText, Link,
 } from "@chakra-ui/react";
   import { SocialIcon } from "react-social-icons";
+import {FaGithub} from "react-icons/fa";
 import {RiGitRepositoryCommitsLine} from "react-icons/ri";
+
+import {ExternalLinkIcon} from "@chakra-ui/icons";
   
   export default function ContributorsCard ({ data }) {
     const SelectBorderColor = () => {
@@ -88,23 +91,26 @@ import {RiGitRepositoryCommitsLine} from "react-icons/ri";
               overflow="hidden"
               gap={3}
             >
-              <Image
-                src={data.img}
-                width="60px"
-                height="60px"
-                borderRadius="full"
-              />
-              <Text
-                w="100%"
-                display="flex"
-                direction="row"
-                alignItems="center"
-                justifyContent="start"
-                fontWeight="bold"
-                fontSize={{ sm: 14, md: 16, lg: 18 }}
-              >
-                {data.name}
-              </Text>
+                <Image
+                  src={data.img}
+                  width="60px"
+                  height="60px"
+                  borderRadius="full"
+                />
+                <Text
+                    w="100%"
+                    display="flex"
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="start"
+                    fontWeight="bold"
+                    fontSize={{ sm: 14, md: 16, lg: 18 }}
+                >
+                    <Link href={data.github} isExternal>
+                        <ExternalLinkIcon mx='2px' as={FaGithub} /> {data.name}
+                    </Link>
+                </Text>
+
 
                 <Stat>
                     <StatNumber fontSize={{ base: "xs", sm: "sm", md: "md" }} style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
@@ -113,17 +119,16 @@ import {RiGitRepositoryCommitsLine} from "react-icons/ri";
                     </StatNumber>
                     <StatHelpText fontSize={{ base: "xs", sm: "sm", md: "md" }}>Commits</StatHelpText>
                 </Stat>
-              <AccordionIcon />
             </AccordionButton>
           </Flex>
-          <AccordionPanel bgColor="transparent" pb={0}>
-            <Flex direction="row" alignItems="start" fontFamily="Syne">
-              <SocialIcon
-                url={data.github}
-                style={{ marginRight: "0.5rem", marginBottom: "0.5rem" }}
-              />
-            </Flex>
-          </AccordionPanel>
+          {/*<AccordionPanel bgColor="transparent" pb={0}>*/}
+          {/*  <Flex direction="row" alignItems="start" fontFamily="Syne">*/}
+          {/*    <SocialIcon*/}
+          {/*      url={data.github}*/}
+          {/*      style={{ marginRight: "0.5rem", marginBottom: "0.5rem" }}*/}
+          {/*    />*/}
+          {/*  </Flex>*/}
+          {/*</AccordionPanel>*/}
         </AccordionItem>
       </Box>
     );

From 14417b5ca395de450b26d5813f32222ff8f13ead Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:27:10 +0300
Subject: [PATCH 09/10] remove commented code

---
 src/components/ContributorsCard.jsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/components/ContributorsCard.jsx b/src/components/ContributorsCard.jsx
index 2951784..831d5d1 100644
--- a/src/components/ContributorsCard.jsx
+++ b/src/components/ContributorsCard.jsx
@@ -110,8 +110,6 @@ import {ExternalLinkIcon} from "@chakra-ui/icons";
                         <ExternalLinkIcon mx='2px' as={FaGithub} /> {data.name}
                     </Link>
                 </Text>
-
-
                 <Stat>
                     <StatNumber fontSize={{ base: "xs", sm: "sm", md: "md" }} style={{display: "flex", flexDirection: "row", alignItems: "center", gap: "0.5rem"}}>
                         <RiGitRepositoryCommitsLine />
@@ -121,14 +119,6 @@ import {ExternalLinkIcon} from "@chakra-ui/icons";
                 </Stat>
             </AccordionButton>
           </Flex>
-          {/*<AccordionPanel bgColor="transparent" pb={0}>*/}
-          {/*  <Flex direction="row" alignItems="start" fontFamily="Syne">*/}
-          {/*    <SocialIcon*/}
-          {/*      url={data.github}*/}
-          {/*      style={{ marginRight: "0.5rem", marginBottom: "0.5rem" }}*/}
-          {/*    />*/}
-          {/*  </Flex>*/}
-          {/*</AccordionPanel>*/}
         </AccordionItem>
       </Box>
     );

From 2c3be0fb14fb4541b35eed62f90a2e8be9b2e202 Mon Sep 17 00:00:00 2001
From: Archontis Kostis <arxontisk02@gmail.com>
Date: Mon, 19 Aug 2024 18:53:58 +0300
Subject: [PATCH 10/10] Make the frequently asked questions page more beautiful

---
 src/components/FAQCard.jsx | 82 +++++++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/src/components/FAQCard.jsx b/src/components/FAQCard.jsx
index a9a9c1f..314ec4e 100644
--- a/src/components/FAQCard.jsx
+++ b/src/components/FAQCard.jsx
@@ -47,34 +47,60 @@ import {
 } from "@chakra-ui/react";
 
 export default function FAQCard({ data }) {
+  // Call useColorModeValue at the top level
+  const borderColor = useColorModeValue("#0050e0", "#f3f3f3");
+  const textColor = useColorModeValue("white", "black");
+  const panelBgColor = useColorModeValue("white", "#2D3748");
+  const hoverBgColor = useColorModeValue("#276ff8", "#d0d0d0");
+
   return (
-    <Box mx={"0.5rem"} mb={"1rem"}>
-      <AccordionItem border="none">
-        <AccordionButton
-          _hover={{ bgColor: "transparent" }}
-          margin="0 auto"
-          width="80vw"
-          textAlign="center"
-          marginBottom="0.3em"
-          color={useColorModeValue("black", "white")}
-          border={"solid 2px"}
-          borderRadius="1rem"
-          borderColor={useColorModeValue("#0050e0", "#f3f3f3")}
-          bgColor="transparent"
-        >
-          <Box flex="1" textAlign="center">
-            <Text fontFamily="Syne" as={"span"}>
-              {data.question}
-            </Text>
-          </Box>
-          <AccordionIcon />
-        </AccordionButton>
-        <AccordionPanel>
-          <Box margin="0 auto" width="80vw" fontFamily="Syne" border="none">
-            {data.panel}
-          </Box>
-        </AccordionPanel>
-      </AccordionItem>
-    </Box>
+      <Box
+          mx={{ base: "0.5rem", md: "1rem" }}
+          mb="1rem"
+          borderRadius="lg"
+          overflow="hidden"
+          boxShadow="md"
+      >
+        <AccordionItem border="none">
+          {({ isExpanded }) => (
+              <>
+                <AccordionButton
+                    _hover={{ bgColor: hoverBgColor }}
+                    bgColor={borderColor}
+                    color={textColor}
+                    border={`0px solid ${borderColor}`}
+                    borderRadius="md"
+                    p={4}
+                    textAlign="left"
+                    _focus={{ boxShadow: "outline" }}
+                    _expanded={{ borderColor }}
+                >
+                  <Box flex="1" textAlign="left">
+                    <Text
+                        fontFamily="Syne"
+                        fontSize={{ base: "md", md: "lg" }}
+                        fontWeight="bold"
+                        noOfLines={isExpanded ? 1 : 2}
+                    >
+                      {data.question}
+                    </Text>
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+                <AccordionPanel
+                    bgColor={panelBgColor}
+                    p={4}
+                    fontFamily="Syne"
+                    fontSize={{ base: "sm", md: "md" }}
+                    borderTop={`0px solid ${borderColor}`} // Border at the top of the panel
+                    textAlign={"left"}
+                >
+                  {data.panel}
+                </AccordionPanel>
+              </>
+          )}
+        </AccordionItem>
+      </Box>
   );
 }
+