create new classNames in Home & Post in App; delte direction and alig…

…n props ; add/modify custom CSS classes using Tailwind in css index; b00tc4mp#136
Eduardolans · Jul 25, 2024 · 8f57b82 · 8f57b82
1 parent 7acac30
commit 8f57b82
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 34 deletions.
diff --git a/staff/eduardo-sanchez/socialcode/app/src/components/library/View.jsx b/staff/eduardo-sanchez/socialcode/app/src/components/library/View.jsx
@@ -1,6 +1,6 @@
-function View({ tag: Tag = 'div', className, children, direction = 'column', align = 'center' }) {
+function View({ tag: Tag = 'div', className, children }) {
 
-    return <Tag className={`View ${className ? className : ''} ${direction === 'column' ? 'View column' : 'View row'} ${align === 'center' ? 'View center' : ''}`}>{children}</Tag>
+    return <Tag className={`View ${className ? className : ''}`}>{children}</Tag>
 }
 
 export default View
@@ -24,3 +24,11 @@ export default View
 // }
 
 // export default View;
+
+
+// function View({ tag: Tag = 'div', className, children, direction = 'column', align = 'center' }) {
+
+//     return <Tag className={`View ${className ? className : ''} ${direction === 'column' ? 'View column' : 'View row'} ${align === 'center' ? 'View center' : ''}`}>{children}</Tag>
+// }
+
+// export default View
diff --git a/staff/eduardo-sanchez/socialcode/app/src/index.css b/staff/eduardo-sanchez/socialcode/app/src/index.css
@@ -46,7 +46,11 @@
   }
 
   .Image {
-    @apply w-full;
+    @apply min-w-fit;
+  }
+
+  .Image-Container {
+    @apply flex justify-center w-4/5;
   }
 
   .SubmitButton {
@@ -75,35 +79,14 @@
     @apply text-green-500;
   }
 
-  /* .View {
-    @apply flex flex-col items-center;
-  } */
-
   .View {
     @apply flex gap-[1rem];
   }
 
-  .View.column {
-    @apply flex-col;
-  }
-
-  .View.row {
-    @apply flex-row gap-[1rem];
-  }
-
-  .View.center {
-    @apply items-center;
-  }
-
   .View h2 {
     @apply text-[blue]
   }
 
-  /* 
-  .View button {
-    @apply flex justify-center;
-  } */
-
   .CreatePostForm {
     @apply fixed bottom-[3rem] w-full left-0 box-border bg-[var(--second-color)];
   }
@@ -117,7 +100,27 @@
   }
 
   .PostList {
-    @apply m-[60px_10px];
+    @apply flex flex-col justify-center items-center m-20 w-4/6;
+  }
+
+  .Post {
+    @apply flex flex-col w-[22rem] justify-start items-center;
+  }
+
+  .Post-Header {
+    @apply flex w-[100%] justify-between;
+  }
+
+  .Post-Description {
+    @apply flex w-full justify-start;
+  }
+
+  .Main {
+    @apply flex flex-col justify-center items-center;
+  }
+
+  .Date {
+    @apply flex justify-between w-full;
   }
 
 

diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/Home.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/Home.jsx
@@ -58,20 +58,20 @@ function Home({ onUserLoggedOut }) {
         setView('')
     }
 
-    return <View>
+    return <>
         <Header>
             <Heading level="3">{name}</Heading>
             <Button onClick={handleLogout}>Logout</Button>
         </Header>
 
-        <View tag="main">
+        <View className="Main" tag="main">
             <PostList refreshStamp={postListRefreshStamp} />
 
             {view === 'create-post' && <CreatePostForm onCancelCreatePostClick={handleCancelCreatePostClick} onPostCreated={handlePostCreated} />}
         </View>
 
         <Footer onCreatePostClick={handleCreatePostClick} />
-    </View>
+    </>
 }
 
 export default Home
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Post.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/components/Post.jsx
@@ -43,22 +43,22 @@ function Post({ post, onPostDeleted, onPostLikeToggled }) {
         }
     }
 
-    return <View tag="article" align="">
-        <View direction='row'>
-            <Text>{post.author.username}</Text>
+    return <View className="Post" tag="article" align="">
+        <View className="Post-Header">
+            <Text className="Author">{post.author.username}</Text>
 
             <Heading level="2">{post.title}</Heading>
         </View>
 
-        <Image src={post.image} />
+        <div className='Image-Container'><Image src={post.image} /></div>
 
-        <Text>{post.description}</Text>
+        <Text className="Post-Description">{post.description}</Text>
 
         <View direction='row'>
             <Button onClick={handleToggleLikePost}>{`${post.likes.includes(logic.getUserId()) ? '❤️' : '🤍'} ${post.likes.length} like${post.likes.length === 1 ? '' : 's'}`}</Button>
         </View>
 
-        <View direction='row'>
+        <View className="Date">
             <Time>{post.date}</Time>
 
             {post.author.id === logic.getUserId() && <Button onClick={handleDeletePost}>Delete</Button>}