Merge pull request #294 from kaf-lamed-beyt/web-dev

fix(ui): refactor layout styles
acekyd · Mar 6, 2024 · 224a417 · 224a417
2 parents 3cb2bbd + e55b7cc
commit 224a417
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 19 deletions.
diff --git a/app/components/Blog/ArticleList.tsx b/app/components/Blog/ArticleList.tsx
@@ -117,7 +117,7 @@ export const ArticleList = ({ data }: ArticleProps) => {
           <Text>You&apos;re at the end of our articles list</Text>
         )}
 
-        <Box my="10rem">{/* <BlogNewsletter /> */}</Box>
+        <Box>{/* <BlogNewsletter /> */}</Box>
       </Flex>
     </Box>
   );

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/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/index.tsx b/app/components/featured-articles/index.tsx
@@ -9,27 +9,34 @@ export interface FeaturedArticleProps {
 
 const FeaturedArticles = ({ data }: FeaturedArticleProps) => {
   return (
-    <VStack alignItems="flex-start" justifyContent="center" gap="2.5rem">
+    <VStack
+      alignItems="flex-start"
+      justifyContent="center"
+      gap="2.5rem"
+      width="100%"
+    >
       <Heading
         fontWeight="800"
         lineHeight="2.5rem"
         fontSize="1.75rem"
         color="#292F2E"
+        px={{ md: ".8em", base: ".8em", lg: "" }}
       >
         Featured Articles
       </Heading>
-
       <Box
+        px="1em"
         display="flex"
         flexDirection={{
           base: "column",
           sm: "column",
-          md: "column",
+          md: "row",
           lg: "row",
           xl: "row",
           "2xl": "row",
         }}
-        gap="2rem"
+        flexWrap={{ md: "wrap", lg: "nowrap", base: "wrap" }}
+        gap={{ xl: "2rem", lg: ".8rem", md: ".8rem" }}
       >
         <FeaturedArticleMain
           slug={data[0].slug}

diff --git a/app/components/pages/components/homepage-client.js b/app/components/pages/components/homepage-client.js
@@ -42,7 +42,10 @@ export const Home = ({ data, projects }) => {
 
         <SimpleGrid columns={{ sm: 1, md: 2, xl: 3 }} spacing="1rem" my="1rem">
           {[25, 55, 70, 91, 154, 200].map((index) => (
-            <ProjectCard key={projects[index].repoLink} project={projects[index]} />
+            <ProjectCard
+              key={projects[index].repoLink}
+              project={projects[index]}
+            />
           ))}
         </SimpleGrid>