visual fixes (#58)

Author: firmianaw

src/api.ts

@@ -3,8 +3,8 @@ import axios from 'axios';
 const instance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL
     ? import.meta.env.VITE_BASE_URL
-    : //  : 'http://127.0.0.1:3000',
-      'https://points-api.illinoiswcs.org',
+    : 'http://127.0.0.1:3000',
+  // 'https://points-api.illinoiswcs.org',
   withCredentials: true
 });
 

src/pages/Events/EventQRCode.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React, { useRef } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
-import { Button } from '@chakra-ui/react';
+import { Button, HStack } from '@chakra-ui/react';
+import { FiDownload } from 'react-icons/fi';
 
 interface EventQRCodeProps {
   eventKey: string;
@@ -37,8 +38,8 @@ const EventQRCode: React.FC<EventQRCodeProps> = ({
     // set attributes on the cloned SVG
     clonedSvg.setAttribute('viewBox', `0 0 ${size} ${size}`);
     clonedSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-    clonedSvg.setAttribute('width', `${size}px`); // Add px unit
-    clonedSvg.setAttribute('height', `${size}px`); // Add px unit
+    clonedSvg.setAttribute('width', `${size}px`);
+    clonedSvg.setAttribute('height', `${size}px`);
 
     // add style to force size
     clonedSvg.style.width = `${size}px`;
@@ -136,17 +137,19 @@ const EventQRCode: React.FC<EventQRCodeProps> = ({
           fgColor={color}
           bgColor={inNotification ? '#d1fae5' : '#ffffff'}
           level="H"
-          title={`QR Code for event ${eventKey}`}
+          title={`QR code for event key ${eventKey}`}
         />
       </div>
-      <div style={{ marginTop: '10px' }}>
-        <Button onClick={downloadPNG} mr={3} mt={5}>
-          Download as PNG
+      <HStack justifyContent={'space-between'} mt={8}>
+        <Button onClick={downloadPNG}>
+          <FiDownload />
+          &nbsp;Save as PNG
         </Button>
-        <Button onClick={downloadSVG} mt={5}>
-          Download as SVG
+        <Button onClick={downloadSVG}>
+          <FiDownload />
+          &nbsp;Save as SVG
         </Button>
-      </div>
+      </HStack>
     </div>
   );
 };

src/pages/Events/QRCodeModal/index.tsx

@@ -28,16 +28,17 @@ const QRCodeModal = (props: QRCodeModalProps): React.ReactElement => {
   return (
     <Modal isOpen={open} onClose={clearAndToggle} isCentered>
       <ModalOverlay />
-      <ModalContent p="10" minW="30%">
+      <ModalContent p="10">
         <ModalCloseButton />
         <ModalHeader>
-          <HStack>
-            <Box>
-              {event?.name} QR Code | {event?.key}
-            </Box>
+          <Box>{event?.name} QR Code</Box>
+        </ModalHeader>
+        <ModalBody>
+          <HStack justifyContent="space-between" mb={4}>
+            <Box>Event Key: {event?.key}</Box>
             <Box>
               <Switch
-                size="lg"
+                size="md"
                 onChange={() => {
                   handleToggleColor();
                 }}
@@ -50,13 +51,11 @@ const QRCodeModal = (props: QRCodeModalProps): React.ReactElement => {
               />
             </Box>
           </HStack>
-        </ModalHeader>
-        <ModalBody>
           {event?.key ? (
             <Box>
               <EventQRCode
                 eventKey={event?.key}
-                size={256}
+                size={320}
                 color={isToggled ? '#d4696a' : '#000000'}
               />
             </Box>

src/pages/Events/index.tsx

@@ -156,7 +156,7 @@ const Events = (): React.ReactElement => {
                     }}
                     mb="5"
                   >
-                    Show QR code
+                    Show QR Code
                   </Button>
                 </Box>
               )}