logos pop up on phone and discord url when clicked on web

td-org-uit-no · Mar 2, 2024 · f828d43 · f828d43
1 parent f59d055
commit f828d43
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 31 deletions.
diff --git a/src/components/molecules/footer/Footer.tsx b/src/components/molecules/footer/Footer.tsx
@@ -7,9 +7,6 @@ import {
   Image,
   Link,
   Text,
-  Show,
-  Divider,
-  Center,
   Box,
   Heading,
   Flex,
@@ -133,15 +130,8 @@ const Footer: React.FC = () => {
           />
         </FooterList>
       </Flex>
-      <Show below="lg">
-        <Center>
-          <Divider my=".5rem" width="80vw" />
-        </Center>
-      </Show>
       <SponsorBanner />
-      <Show above="lg">
-        <FooterLogos />
-      </Show>
+      <FooterLogos />
     </Flex>
   );
 };

diff --git a/src/components/molecules/footer/footerLogos/FooterLogos.tsx b/src/components/molecules/footer/footerLogos/FooterLogos.tsx
@@ -1,10 +1,11 @@
 import styles from './footerLogos.module.scss';
-import { FaFacebook, FaLinkedin } from 'react-icons/fa';
+import { FaDiscord, FaFacebook, FaLinkedin } from 'react-icons/fa';
 import { AiFillGithub } from 'react-icons/ai';
 import { Icon } from '@iconify/react';
 import Modal from 'components/molecules/modal/Modal';
 import discordInvite from 'assets/IFI-discord-invite.png';
 import useModal from 'hooks/useModal';
+import { Show } from '@chakra-ui/react';
 
 const FooterLogos = () => {
   const { isOpen, onOpen, onClose } = useModal();
@@ -33,24 +34,43 @@ const FooterLogos = () => {
               }}
             />
           </div>
-          <div className={styles.logoItem}>
-            <Icon
-              icon="simple-icons:discord"
-              width={'2.5em'}
-              height={'2.5em'}
-              color={'#F8D2CC'}
-              onClick={onOpen}
-            />
-            <Modal
-              title="Invitasjon til vår discord"
-              isOpen={isOpen}
-              onClose={onClose}
-              minWidth={45}>
-              <div>
-                <img src={discordInvite} alt="Link to discord" />
-              </div>
-            </Modal>
-          </div>
+          <Show above="lg">
+            <div className={styles.logoItem}>
+              <Icon
+                icon="simple-icons:discord"
+                width={'2.5em'}
+                height={'2.5em'}
+                color={'#F8D2CC'}
+                onClick={onOpen}
+              />
+              <Modal
+                title="Invitasjon til vår discord! Klikk eller scan"
+                isOpen={isOpen}
+                onClose={onClose}
+                minWidth={45}>
+                <div>
+                  <a href="https://discord.com/invite/F4r4nzGWZE">
+                    {' '}
+                    <img src={discordInvite} alt="Link to discord" />
+                  </a>
+                </div>
+              </Modal>
+            </div>
+          </Show>
+          <Show below="lg">
+            <div className={styles.logoItem}>
+              <FaDiscord
+                size={'2.5em'}
+                color={'#F8D2CC'}
+                onClick={() => {
+                  window.open(
+                    'https://discord.com/invite/F4r4nzGWZE',
+                    '_blank'
+                  );
+                }}
+              />
+            </div>
+          </Show>
           <div className={styles.logoItem}>
             <FaFacebook
               size={'2.5em'}

diff --git a/src/components/molecules/footer/footerLogos/footerLogos.module.scss b/src/components/molecules/footer/footerLogos/footerLogos.module.scss
@@ -23,6 +23,9 @@
 
 @media screen and (max-width: 800px) {
   .logosContainer {
-    display: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-top: 0.5rem;
   }
 }