ux improvements

nfa1 · Aug 25, 2024 · 11b1a8f · 11b1a8f
1 parent 8db2c32
commit 11b1a8f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 32 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,6 +1,6 @@
 vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-index.html,1724499268298,3d4408a748e8b1f5d10c674a827c0721f042d253f015547be3c50dec75770577
-assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724499268298,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
-assets/index-DI5JVsUB.js,1724499268297,7bf01dc8bb3627a0ef32bb72ee1758ca8205b82b040b0d82e634e30f0499c597
+index.html,1724519372624,990e9c4883f5c2f61d7e820aea835f614698a2ca3c2cbbcb59a3aa137ee87704
+assets/index-BvQ6TMY8.js,1724519372623,50737d9aa1473a057e4bbc149da0f718542e172b0290288c420f30cff296b85d
+assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724519372623,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
diff --git a/index.jsx b/index.jsx
@@ -0,0 +1,30 @@
+// Import the Web5 module from the '@web5/api' package
+import { Web5 } from '@web5/api';
+
+// Asynchronous function to handle Web5 operations
+async function web5Operations() {
+  // Connect to Web5 and retrieve the DID (Decentralized Identifier) for Alice
+  const { web5, did: aliceDid } = await Web5.connect();
+
+  try {
+    // Create a new record with the specified data and message format
+    const { record } = await web5.dwn.records.create({
+      data: 'Hello Web5',
+      message: {
+        dataFormat: 'text/plain',
+      },
+    });
+
+    // Read the data from the created record
+    const readResult = await record.data.text();
+
+    // Log the read result to the console
+    console.log('Read Result:', readResult);
+  } catch (error) {
+    // Handle any errors that occur during record creation or reading
+    console.error('Error:', error);
+  }
+}
+
+// Execute the web5Operations function
+web5Operations();
diff --git a/src/AppContent.jsx b/src/AppContent.jsx
@@ -15,6 +15,7 @@ import {
   ModalCloseButton,
   Container,
   AspectRatio,
+  Spinner,
 } from '@chakra-ui/react';
 import bannerImage from './LeetMigo_banner_main_01.png';
 
@@ -55,25 +56,30 @@ const AppContent = () => {
     }
   }, []);
 
-  // Set a consistent max width for all buttons
-  const buttonSizeProps = { width: '100%', maxW: { base: '100%', md: '300px' } };
+  const commonButtonStyles = {
+    colorScheme: 'blue',
+    variant: 'solid',
+    size: 'lg',
+    borderRadius: 'full',
+    width: '100%',
+    maxW: { base: '100%', md: '300px' },
+    _hover: { transform: 'scale(1.05)', boxShadow: 'lg' },
+    _focus: { boxShadow: 'outline' },
+  };
 
   return (
     <Box minH="100vh" color="white" bg="gray.900" position="relative">
       <Container maxW="container.md" pt={8} px={{ base: 4, md: 8 }} pb={16}>
         <VStack spacing={8} align="center" justify="center">
-
-          {/* LeetMigo Header and Description */}
-          <Box textAlign="center">
-            <Text fontSize={{ base: '2xl', md: '3xl' }} fontWeight="bold" lineHeight="shorter">
+          <Box textAlign="center" px={{ base: 2, md: 4 }}>
+            <Text fontSize={{ base: 'lg', md: 'xl' }} fontWeight="extrabold" lineHeight="shorter">
               LeetMigo 👾
             </Text>
-            <Text fontSize={{ base: 'md', md: 'lg' }} mt={4} lineHeight="tall">
+            <Text fontSize={{ base: 'sm', md: 'md' }} mt={2} fontWeight="semibold">
               the world's first decentralized platform for dsa interview prep, made for non-trad, cracked techies and frens
             </Text>
           </Box>
 
-          {/* Banner Image with Aspect Ratio */}
           <AspectRatio ratio={16 / 9} width="100%" maxW="800px" borderRadius="md">
             <Image 
               src={bannerImage} 
@@ -83,43 +89,38 @@ const AppContent = () => {
             />
           </AspectRatio>
 
-          {/* Waitlist Form (GetLaunchList Widget) */}
+          {!widgetRef.current && <Spinner color="blue.500" size="xl" />}
           <Box width="100%" maxW="400px">
             <div className="launchlist-widget" data-key-id="pI1JRr" data-height="180px"></div>
           </Box>
 
-          {/* Free LeetCode Grind 75 Study Spreadsheet Button */}
           <Button 
             as="a" 
             href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing" 
-            variant="outline"
-            colorScheme="blue"
-            size="lg" 
             target="_blank" 
             rel="noopener noreferrer" 
-            {...buttonSizeProps}
+            {...commonButtonStyles}
+            colorScheme="teal"
           >
             Free LeetCode Grind 75 Study Spreadsheet
           </Button>
 
-          {/* Features Coming Soon */}
           <VStack align="center" spacing={4} width="100%">
             <Text fontSize="lg" fontWeight="bold" textAlign="center">
               features coming soon:
             </Text>
             <HStack spacing={4} justify="center" width="100%">
-              <Button variant="outline" colorScheme="blue" {...buttonSizeProps}>
+              <Button {...commonButtonStyles}>
                 learn
               </Button>
-              <Button variant="outline" colorScheme="blue" {...buttonSizeProps}>
+              <Button {...commonButtonStyles}>
                 collab
               </Button>
             </HStack>
           </VStack>
         </VStack>
       </Container>
 
-      {/* GDPR Banner */}
       {!gdprAccepted && (
         <Box
           position="fixed"
@@ -134,30 +135,26 @@ const AppContent = () => {
         >
           <Text mb={2}>we use cookies for a based experience. continue to use this site and we'll assume you think it's kino.</Text>
           <HStack spacing={2} justify="center">
-            <Button size="sm" colorScheme="gray" onClick={handleGdprAccept}>
-              ok
-            </Button>
-            <Button size="sm" colorScheme="gray" onClick={() => alert('please accept the gdpr terms (grudgingly).')}>
-              no
+            <Button {...commonButtonStyles} size="sm" colorScheme="gray" onClick={handleGdprAccept}>
+              accept
             </Button>
-            <Button size="sm" colorScheme="gray" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
-              privacy policy
+            <Button {...commonButtonStyles} size="sm" colorScheme="gray" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
+              dismiss
             </Button>
           </HStack>
         </Box>
       )}
 
-      {/* Privacy Policy Modal */}
       <Modal isOpen={isPrivacyPolicyOpen} onClose={() => setIsPrivacyPolicyOpen(false)}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent p={4} borderRadius="md">
           <ModalHeader>Privacy Policy</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            {/* Add your privacy policy content here */}
+            {/* Privacy policy content here */}
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" mr={3} onClick={() => setIsPrivacyPolicyOpen(false)}>
+            <Button {...commonButtonStyles} onClick={() => setIsPrivacyPolicyOpen(false)}>
               Close
             </Button>
           </ModalFooter>