Merge pull request #295 from acekyd/gh-pages

Collapse all branches to a main branch
acekyd · Mar 6, 2024 · cf25ceb · cf25ceb
2 parents 788ba22 + 2da32fb
commit cf25ceb
Show file tree

Hide file tree

Showing 34 changed files with 463 additions and 156 deletions.
diff --git a/app/components/AlphabetFilter/AlphabetFilter.js b/app/components/AlphabetFilter/AlphabetFilter.js
@@ -1,20 +1,27 @@
-import { ChevronUpIcon, ChevronDownIcon } from '@chakra-ui/icons';
-import { Button, Center, SimpleGrid, Flex } from '@chakra-ui/react';
-import React, {useState} from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import { Button, Center, SimpleGrid, Flex } from "@chakra-ui/react";
 
-const AlphabetFilter = ({selectedLetter, setSelectedLetter, isMobile = false, isExpanded, setIsExpanded}) => {
+const AlphabetFilter = ({
+  selectedLetter,
+  setSelectedLetter,
+  isMobile = false,
+  isExpanded,
+  setIsExpanded,
+}) => {
   const visibleChar = isMobile && !isExpanded ? 7 : 26;
-  const alphabetsCharCodes = Array.from(Array(visibleChar)).map((element, index) => index + 65);
+  const alphabetsCharCodes = Array.from(Array(visibleChar)).map(
+    (element, index) => index + 65
+  );
   const filterAlphabetsStrings = alphabetsCharCodes.map((charCode) =>
-      String.fromCharCode(charCode)
+    String.fromCharCode(charCode)
   );
 
   // custom code for merging
   const gridClasses = {};
 
   const filterProjects = (letter) => {
-    if(letter === selectedLetter) {
-      setSelectedLetter('')
+    if (letter === selectedLetter) {
+      setSelectedLetter("");
     } else {
       setSelectedLetter(letter);
     }
@@ -29,75 +36,107 @@ const AlphabetFilter = ({selectedLetter, setSelectedLetter, isMobile = false, is
     setIsExpanded(true);
   };
 
-  if(setIsExpanded) {
+  if (setIsExpanded) {
     gridClasses.borderBottom = "0.5px solid #E2E3E3";
     gridClasses.pb = "1rem";
     gridClasses.width = "100vw";
+    gridClasses.height = "280px";
   }
 
   const collapseCode = isExpanded ? (
     <Center
-                borderX="1px solid #E2E3E3"
-                justifyContent="center"
-                alignItems="center"
-                cursor="pointer"
-            >
-                <Button background="none" padding={0} _hover={{ background: '#f4f4f4' }} onClick={collapse}>
-                <ChevronUpIcon color="#B8BAB9" boxSize="1.5rem" />
-                </Button>
-            </Center>
-  ) : '';
+      borderX="1px solid #E2E3E3"
+      justifyContent="center"
+      alignItems="center"
+      cursor="pointer"
+    >
+      <Button
+        background="none"
+        padding={0}
+        _hover={{ background: "#f4f4f4" }}
+        onClick={collapse}
+      >
+        <ChevronUpIcon color="#B8BAB9" boxSize="1.5rem" />
+      </Button>
+    </Center>
+  ) : (
+    ""
+  );
 
-  if(isMobile && !isExpanded) {
+  if (isMobile && !isExpanded) {
     return (
-        <Center borderBottom="0.5px solid #E2E3E3" pb="1rem" width="100vw" background="#FFFFFF">
-          <Flex gap="3px">
-            {filterAlphabetsStrings.map((letter) => (
-                <Center key={letter} borderLeft="0.5px solid #E2E3E3" padding="0 0.2rem">
-                  <Button
-                      background="none"
-                      padding={0}
-                      style={{ backgroundColor: letter === selectedLetter && '#f4f4f4' }}
-                      color="#B8BAB9"
-                      fontWeight="800"
-                      _hover={{ background: '#f4f4f4' }}
-                      onClick={() => filterProjects(letter)}
-                  >
-                    {letter}
-                  </Button>
-                </Center>
-            ))}
-
-            <Center borderLeft="0.5px solid #E2E3E3" padding="0 0.2rem">
-              <Button background="none" padding={0} _hover={{ background: '#f4f4f4' }} onClick={expand}>
-                <ChevronDownIcon color="#B8BAB9" boxSize="1.5rem" />
+      <Center
+        borderBottom="0.5px solid #E2E3E3"
+        pb="1rem"
+        width="100vw"
+        background="#FFFFFF"
+      >
+        <Flex gap="3px">
+          {filterAlphabetsStrings.map((letter) => (
+            <Center
+              key={letter}
+              borderLeft="0.5px solid #E2E3E3"
+              padding="0 0.2rem"
+              height="fit-content"
+            >
+              <Button
+                background="none"
+                padding={0}
+                style={{
+                  backgroundColor: letter === selectedLetter && "#f4f4f4",
+                }}
+                color="#B8BAB9"
+                fontWeight="800"
+                _hover={{ background: "#f4f4f4" }}
+                onClick={() => filterProjects(letter)}
+              >
+                {letter}
               </Button>
             </Center>
-          </Flex>
-        </Center>
+          ))}
+
+          <Center borderLeft="0.5px solid #E2E3E3" padding="0 0.2rem">
+            <Button
+              background="none"
+              padding={0}
+              _hover={{ background: "#f4f4f4" }}
+              onClick={expand}
+            >
+              <ChevronDownIcon color="#B8BAB9" boxSize="1.5rem" />
+            </Button>
+          </Center>
+        </Flex>
+      </Center>
     );
   }
 
   return (
-      <SimpleGrid columns={{ base: 8, md: 26 }} rowGap={6} background="#FFFFFF" mt="0.5rem" pt="2rem" {...gridClasses}>
-        {filterAlphabetsStrings.map((letter) => (
-            <Center key={letter} borderLeft="1px solid #E2E3E3" padding="0rem 1rem">
-              <Button
-                  background="none"
-                  style={{ backgroundColor: letter === selectedLetter && '#f4f4f4' }}
-                  color="#B8BAB9"
-                  fontWeight="800"
-                  _hover={{ background: '#f4f4f4' }}
-                  onClick={() => filterProjects(letter)}
-              >
-                {letter}
-              </Button>
-            </Center>
-        ))}
+    <SimpleGrid
+      columns={{ base: 8, md: 26 }}
+      rowGap={6}
+      background="#FFFFFF"
+      mt="0.5rem"
+      pt="2rem"
+      {...gridClasses}
+    >
+      {filterAlphabetsStrings.map((letter) => (
+        <Center key={letter} borderLeft="1px solid #E2E3E3" padding="0rem 1rem">
+          <Button
+            background="none"
+            style={{ backgroundColor: letter === selectedLetter && "#f4f4f4" }}
+            color="#B8BAB9"
+            fontWeight="800"
+            _hover={{ background: "#f4f4f4" }}
+            onClick={() => filterProjects(letter)}
+          >
+            {letter}
+          </Button>
+        </Center>
+      ))}
 
-        {collapseCode}
-      </SimpleGrid>
+      {collapseCode}
+    </SimpleGrid>
   );
 };
 
-export default AlphabetFilter;
+export default AlphabetFilter;
diff --git a/app/components/Blog/ArticleCard.tsx b/app/components/Blog/ArticleCard.tsx
@@ -28,6 +28,8 @@ const ArticleCard = ({ image, slug, title, excerpt }: CardProps) => {
             borderRadius="8px 8px 0 0"
             alt={`${title}'s cover image`}
             height="280px"
+            objectFit="cover"
+            objectPosition={{ lg: "top", base: "top" }}
           />
           <Text
             color="#292F2E"

diff --git a/app/components/Blog/ArticleList.tsx b/app/components/Blog/ArticleList.tsx
@@ -73,12 +73,12 @@ export const ArticleList = ({ data }: ArticleProps) => {
               ml="1.2rem"
               textTransform="capitalize"
             >
-              all articles
+              all creators
             </Heading>
 
             {filteredArticles.length === 0 ? (
               <Text textAlign="center" fontSize="16px" my="3rem" px="1.2rem">
-                We couldn&apos;t find any article with this title:
+                We couldn&apos;t find any creators with this title:
                 <Text as="span" color="#008463">
                   {searchTerm}
                 </Text>
@@ -110,14 +110,14 @@ export const ArticleList = ({ data }: ArticleProps) => {
           <SecondaryButton
             link=""
             type="button"
-            text="load more articles"
+            text="load more creators"
             onClick={onLoadMoreArticles}
           />
         ) : (
-          <Text>You&apos;re at the end of our articles list</Text>
+          <Text>You&apos;re at the end of our creators list</Text>
         )}
 
-        <Box my="10rem">{/* <BlogNewsletter /> */}</Box>
+        <Box>{/* <BlogNewsletter /> */}</Box>
       </Flex>
     </Box>
   );

diff --git a/app/components/Blog/BlogPost.tsx b/app/components/Blog/BlogPost.tsx
@@ -38,13 +38,15 @@ export const BlogPost = ({
         mb="8rem"
         flexFlow="column"
         justifyContent="center"
-        px={{ base: ".5rem", md: "22rem", lg: "32rem" }}
         mt={{ base: "-8rem", md: "-8rem", lg: "-20rem" }}
+        px={{ base: ".5rem", md: "8rem", lg: "12rem", xl: "32rem" }}
       >
         <Image
           height={{ lg: "592px", base: "100%" }}
           alt="cover image"
           src={coverImage}
+          objectFit="cover"
+          objectPosition={{ lg: "top", base: "top" }}
         />
         <Box>
           <Text

diff --git a/app/components/BlogHero.tsx b/app/components/BlogHero.tsx
@@ -18,8 +18,8 @@ const BlogHero = ({ onChange }: BlogHeroProps) => {
       width={{
         base: "22.875rem",
         sm: "22.875rem",
-        md: "22.875rem",
-        lg: "74.938rem",
+        md: "44.875rem",
+        lg: "58.938rem",
         xl: "74.938rem",
         "2xl": "74.938rem",
       }}

diff --git a/app/components/ProjectsHero.tsx b/app/components/ProjectsHero.tsx
@@ -18,8 +18,8 @@ const ProjectsHero = ({ onChange }: ProjectsHeroProps) => {
       width={{
         base: "22.875rem",
         sm: "22.875rem",
-        md: "22.875rem",
-        lg: "74.938rem",
+        md: "44.875rem",
+        lg: "58.938rem",
         xl: "74.938rem",
         "2xl": "74.938rem",
       }}

diff --git a/app/components/SearchArticles.tsx b/app/components/SearchArticles.tsx
@@ -31,7 +31,7 @@ const SearchArticles = ({ onChange }: SearchProps) => {
         <Image src={SearchIcon.src} w="1.2rem" height="1.2rem" alt="" />
         <Input
           variant="unstyled"
-          placeholder="Search Articles"
+          placeholder="Search Creators"
           onChange={(e) => onChange(e)}
           _placeholder={{ color: "#B8BAB9", fontSize: "sm" }}
         />

diff --git a/app/components/featured-articles/feature-article-main.tsx b/app/components/featured-articles/feature-article-main.tsx
@@ -11,7 +11,7 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
       width={{
         base: "22.875rem",
         sm: "22.875rem",
-        md: "22.875rem",
+        md: "44.8rem",
         lg: "36.5rem",
         xl: "36.5rem",
         "2xl": "36.5rem",
@@ -21,7 +21,7 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
         sm: "28.688rem",
         md: "28.688rem",
         lg: "42.438rem",
-        xl: "42.438rem",
+        // xl: "42.438rem",
         "2xl": "42.438rem",
       }}
       padding={{ base: 5, sm: 5, md: 5, lg: 6, xl: 6, "2xl": 6 }}
@@ -35,7 +35,7 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
           width={{
             base: "20.375rem",
             sm: "20.375rem",
-            md: "20.375rem",
+            md: "44.375rem",
             lg: "33.5rem",
             xl: "33.5rem",
             "2xl": "33.5rem",
@@ -57,10 +57,12 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
       </Box>
       <Link href={`/creators/${slug}`} as={NextLink}>
         <Text
+          my={{ md: ".5em", xl: "0", lg: "0", base: "0" }}
+          px={{ md: ".5em", xl: "0", lg: "0", base: "0" }}
           width={{
             base: "20.375rem",
             sm: "20.375rem",
-            md: "20.375rem",
+            md: "44.375rem",
             lg: "33.5rem",
             xl: "33.5rem",
             "2xl": "33.5rem",
@@ -76,7 +78,7 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
           fontSize={{
             base: "1rem",
             sm: "1rem",
-            md: "1rem",
+            md: "1.8rem",
             lg: "1.5rem",
             xl: "1.5rem",
             "2xl": "1.5rem",
@@ -85,7 +87,7 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
           lineHeight={{
             base: "1.75rem",
             sm: "1.75rem",
-            md: "1.75rem",
+            md: "2rem",
             lg: "2rem",
             xl: "2rem",
             "2xl": "2rem",
@@ -96,10 +98,11 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
         </Text>
       </Link>
       <Text
+        px={{ md: ".9em", xl: "0", lg: "0", base: "0" }}
         width={{
           base: "20.375rem",
           sm: "20.375rem",
-          md: "20.375rem",
+          md: "44.375rem",
           lg: "33.5rem",
           xl: "33.5rem",
           "2xl": "33.5rem",
@@ -115,10 +118,10 @@ const FeaturedArticleMain = ({ image, slug, title, excerpt }: CardProps) => {
         fontSize={{
           base: "0.875rem",
           sm: "0.875rem",
-          md: "0.875rem",
+          md: "1rem",
           lg: "1rem",
           xl: "1rem",
-          "2xl": "1rem",
+          "2xl": "1.1rem",
         }}
         lineHeight="1.75rem"
         color="#949796"

diff --git a/app/components/featured-articles/feature-article-other.tsx b/app/components/featured-articles/feature-article-other.tsx
@@ -71,6 +71,7 @@ const FeatureArticleOther = ({ slug, title, image, excerpt }: CardProps) => {
           "2xl": 8,
         }}
         objectFit="cover"
+        objectPosition={{ lg: "top", base: "top" }}
       />
 
       <VStack width={{ lg: "22.188rem", xl: "22.188rem", "2xl": "22.188rem" }}>