From a15049e93b34d9347e6dc6c93b295bc3203b9990 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Tue, 31 Oct 2023 12:46:38 +0000
Subject: [PATCH 01/10] feat: Added ProfileImage component

Renamed Image compnent to CaptionImage
---
 .../children/{image => CaptionImage}/helpers.js  |  0
 .../children/{image => CaptionImage}/index.js    |  4 ++--
 .../children/{image => CaptionImage}/styles.js   |  0
 app/src/app/children/ProfileImage/index.js       | 16 ++++++++++++++++
 app/src/app/children/ProfileImage/styles.js      |  4 ++++
 app/src/app/index.js                             |  9 ++++++---
 6 files changed, 28 insertions(+), 5 deletions(-)
 rename app/src/app/children/{image => CaptionImage}/helpers.js (100%)
 rename app/src/app/children/{image => CaptionImage}/index.js (81%)
 rename app/src/app/children/{image => CaptionImage}/styles.js (100%)
 create mode 100755 app/src/app/children/ProfileImage/index.js
 create mode 100644 app/src/app/children/ProfileImage/styles.js

diff --git a/app/src/app/children/image/helpers.js b/app/src/app/children/CaptionImage/helpers.js
similarity index 100%
rename from app/src/app/children/image/helpers.js
rename to app/src/app/children/CaptionImage/helpers.js
diff --git a/app/src/app/children/image/index.js b/app/src/app/children/CaptionImage/index.js
similarity index 81%
rename from app/src/app/children/image/index.js
rename to app/src/app/children/CaptionImage/index.js
index cfeae9f..2355d37 100755
--- a/app/src/app/children/image/index.js
+++ b/app/src/app/children/CaptionImage/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styles from './styles'
 import {getCaptionFromEdges} from './helpers'
 
-const Image = (props) => {
+const CaptionImage = (props) => {
   const {data} = props
   return (
     <img
@@ -13,4 +13,4 @@ const Image = (props) => {
   )
 }
 
-export default Image
+export default CaptionImage
diff --git a/app/src/app/children/image/styles.js b/app/src/app/children/CaptionImage/styles.js
similarity index 100%
rename from app/src/app/children/image/styles.js
rename to app/src/app/children/CaptionImage/styles.js
diff --git a/app/src/app/children/ProfileImage/index.js b/app/src/app/children/ProfileImage/index.js
new file mode 100755
index 0000000..d531985
--- /dev/null
+++ b/app/src/app/children/ProfileImage/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './styles'
+// import {getCaptionFromEdges} from './helpers'
+
+const ProfileImage = (props) => {
+  const {data} = props
+  return (
+    <img
+      src={data.owner.profile_pic_url}
+      style={styles}
+      alt= "User Profile Picture" 
+    />
+  )
+}
+
+export default ProfileImage
diff --git a/app/src/app/children/ProfileImage/styles.js b/app/src/app/children/ProfileImage/styles.js
new file mode 100644
index 0000000..a81ef20
--- /dev/null
+++ b/app/src/app/children/ProfileImage/styles.js
@@ -0,0 +1,4 @@
+export default {
+  width: '10%',
+  display: 'block'
+}
diff --git a/app/src/app/index.js b/app/src/app/index.js
index a5c5ed1..ec720dc 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -1,17 +1,20 @@
 import React from 'react'
-import Image from './children/image'
+import CaptionImage from './children/CaptionImage'
+import ProfileImage from './children/ProfileImage'
 import LikeButton from './children/like_button'
 import styles from './styles'
 
 const App = (props) => {
   const { data } = props
+  console.log(data)
   return (
     <main style={styles.main}>
       <div style={styles.image}>
-        <Image data={data} />
+        <CaptionImage data={data} ></CaptionImage>
       </div>
       <div style={styles.text}>
-        <p>User block</p>
+        <ProfileImage data={data}></ProfileImage>
+        <p>{data.owner.username}</p>
         <p>Comments block</p>
         <LikeButton />
       </div>

From 828c4bfd2c16a61959f113796a3ff6a639f3ea1b Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Tue, 31 Oct 2023 15:39:08 +0000
Subject: [PATCH 02/10] feat: Added UserInfoHeaderComponent

---
 .../children}/ProfileImage/index.js           |  1 -
 .../children}/ProfileImage/styles.js          |  0
 app/src/app/children/UserInfoHeader/index.js  | 21 +++++++++++++++++++
 app/src/app/children/UserInfoHeader/styles.js | 17 +++++++++++++++
 app/src/app/index.js                          |  6 ++----
 5 files changed, 40 insertions(+), 5 deletions(-)
 rename app/src/app/children/{ => UserInfoHeader/children}/ProfileImage/index.js (84%)
 rename app/src/app/children/{ => UserInfoHeader/children}/ProfileImage/styles.js (100%)
 create mode 100644 app/src/app/children/UserInfoHeader/index.js
 create mode 100644 app/src/app/children/UserInfoHeader/styles.js

diff --git a/app/src/app/children/ProfileImage/index.js b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
similarity index 84%
rename from app/src/app/children/ProfileImage/index.js
rename to app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
index d531985..61e8c08 100755
--- a/app/src/app/children/ProfileImage/index.js
+++ b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import styles from './styles'
-// import {getCaptionFromEdges} from './helpers'
 
 const ProfileImage = (props) => {
   const {data} = props
diff --git a/app/src/app/children/ProfileImage/styles.js b/app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js
similarity index 100%
rename from app/src/app/children/ProfileImage/styles.js
rename to app/src/app/children/UserInfoHeader/children/ProfileImage/styles.js
diff --git a/app/src/app/children/UserInfoHeader/index.js b/app/src/app/children/UserInfoHeader/index.js
new file mode 100644
index 0000000..b770c09
--- /dev/null
+++ b/app/src/app/children/UserInfoHeader/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import {containerStyle,infoTextStyle,textUserNameStyle } from './styles'
+import ProfileImage from './children/ProfileImage'
+
+
+const UserInfoHeader = (props) => {
+  const { data } = props
+  console.log(data)
+  return (
+      <div style={containerStyle} >
+        <ProfileImage data={data}></ProfileImage>
+        <div style={infoTextStyle}>
+            <p style ={textUserNameStyle}>{data.owner.username}</p>
+            <p>{data.location.name}</p>
+        </div>
+      </div>
+    
+  )
+}
+
+export default UserInfoHeader
diff --git a/app/src/app/children/UserInfoHeader/styles.js b/app/src/app/children/UserInfoHeader/styles.js
new file mode 100644
index 0000000..78ca3a3
--- /dev/null
+++ b/app/src/app/children/UserInfoHeader/styles.js
@@ -0,0 +1,17 @@
+const containerStyle = {
+    display: 'flex',            
+    alignItems: 'center',
+    
+}
+
+const infoTextStyle = {
+    marginLeft: '0.5em',
+    lineHeight: '0.5em'
+}
+
+const textUserNameStyle ={
+    fontWeight: 'bold'
+}
+
+
+export {containerStyle,infoTextStyle,textUserNameStyle}
\ No newline at end of file
diff --git a/app/src/app/index.js b/app/src/app/index.js
index ec720dc..e020801 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import CaptionImage from './children/CaptionImage'
-import ProfileImage from './children/ProfileImage'
+import UserInfoHeader from './children/UserInfoHeader'
 import LikeButton from './children/like_button'
 import styles from './styles'
 
@@ -13,9 +13,7 @@ const App = (props) => {
         <CaptionImage data={data} ></CaptionImage>
       </div>
       <div style={styles.text}>
-        <ProfileImage data={data}></ProfileImage>
-        <p>{data.owner.username}</p>
-        <p>Comments block</p>
+        <UserInfoHeader data ={data}></UserInfoHeader>
         <LikeButton />
       </div>
     </main>

From ef15ebdfba76fc9fba52dab3f6540ae5dbcfb808 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 12:41:27 +0000
Subject: [PATCH 03/10] feat: Added CommentSection component and its children
 components

---
 .../CommentList/children/Comment/helpers.js   | 21 +++++++++++++++
 .../CommentList/children/Comment/index.js     | 19 +++++++++++++
 .../CommentList/children/Comment/style.js     | 27 +++++++++++++++++++
 .../children/CommentList/index.js             | 16 +++++++++++
 .../children/CommentList/style.js             | 11 ++++++++
 app/src/app/children/CommentSection/index.js  | 14 ++++++++++
 app/src/app/children/CommentSection/styles.js |  8 ++++++
 7 files changed, 116 insertions(+)
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/index.js
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/style.js
 create mode 100644 app/src/app/children/CommentSection/index.js
 create mode 100644 app/src/app/children/CommentSection/styles.js

diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
new file mode 100644
index 0000000..5ca62d9
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
@@ -0,0 +1,21 @@
+const processText = (text) => {
+   
+    const hashtagRegex = /#(\w+)/g;
+    const usernameRegex = /@(\w+)/g;
+
+    
+    const textWithHashtags = text.replace(
+        hashtagRegex,
+        '<a href="#" style="color: blue; text-decoration: underline">#$1</a>'
+    );
+
+    const textWithLinks = textWithHashtags.replace(
+        usernameRegex,
+        '<a href="#" style="color: blue; text-decoration: underline">@$1</a>'
+    );
+
+    //Okay to use here since we know the HTML source 
+    return <div dangerouslySetInnerHTML={{ __html: textWithLinks }} />;
+};
+
+export {processText}
\ No newline at end of file
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
new file mode 100644
index 0000000..15600a5
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { containerStyle, usernameStyle, textStyle, heartStyle } from './style'
+import { processText } from './helpers'
+import LikeButton from '../../../../../like_button_mini'
+const Comment = (props) => {
+    const { comment } = props
+
+    return (
+        <div style={containerStyle}  >
+            <p style={usernameStyle}>{comment.node.owner.username}</p>
+            <p style={textStyle}>{processText(comment.node.text)}</p>
+            <div style={heartStyle}>
+                <LikeButton></LikeButton>
+            </div>
+        </div>
+    )
+}
+
+export default Comment
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
new file mode 100644
index 0000000..b0eb6cf
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
@@ -0,0 +1,27 @@
+const containerStyle = {
+   
+    display: 'flex',     
+    paddingLeft:'2vw',
+    paddingRight:'2vw',      
+}
+
+
+const heartStyle ={
+
+    alignSelf: 'center',
+    
+    
+}
+
+const textStyle = {
+    marginLeft: '0.5em',
+    flex: 1, 
+}
+
+const usernameStyle ={
+     
+    fontWeight: 'bold'
+}
+
+
+export {containerStyle,usernameStyle,textStyle,heartStyle}
\ No newline at end of file
diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js
new file mode 100644
index 0000000..ecd74f1
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import Comment from './children/Comment'
+import { containerStyle } from './style'
+
+const CommentList = (props) => {
+    const { data } = props
+    return (
+        <div style={containerStyle} >
+            {data.edge_media_to_comment.edges.map((comment, index) => (
+                <Comment key={index} comment={comment}></Comment>
+        ))}
+        </div>
+    )
+}
+
+export default CommentList
diff --git a/app/src/app/children/CommentSection/children/CommentList/style.js b/app/src/app/children/CommentSection/children/CommentList/style.js
new file mode 100644
index 0000000..82952af
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/style.js
@@ -0,0 +1,11 @@
+const containerStyle = {
+    maxHeight: '60vh',
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'scroll',
+    alignContent: 'flex-start',
+  
+  };
+
+
+export {containerStyle}
\ No newline at end of file
diff --git a/app/src/app/children/CommentSection/index.js b/app/src/app/children/CommentSection/index.js
new file mode 100644
index 0000000..d706682
--- /dev/null
+++ b/app/src/app/children/CommentSection/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import CommentList from './children/CommentList'
+
+
+const CommentSection = (props) => {
+  const { data } = props
+  return (
+    <div>
+      <CommentList data = {data}></CommentList>
+    </div>
+  )
+}
+
+export default CommentSection
diff --git a/app/src/app/children/CommentSection/styles.js b/app/src/app/children/CommentSection/styles.js
new file mode 100644
index 0000000..c82a22c
--- /dev/null
+++ b/app/src/app/children/CommentSection/styles.js
@@ -0,0 +1,8 @@
+const containerStyle = {
+    display: 'flex',            
+    alignItems: 'center',
+    
+
+}
+
+export {containerStyle}
\ No newline at end of file

From 7d4490bce4227de2cad6b4c5dd915a0f9f1026c5 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 12:41:58 +0000
Subject: [PATCH 04/10] feat: Added PostFooter component and its children
 components

---
 app/src/app/children/PostFooter/helpers.js | 29 ++++++++++++++++++++++
 app/src/app/children/PostFooter/index.js   | 22 ++++++++++++++++
 app/src/app/children/PostFooter/styles.js  | 26 +++++++++++++++++++
 3 files changed, 77 insertions(+)
 create mode 100644 app/src/app/children/PostFooter/helpers.js
 create mode 100644 app/src/app/children/PostFooter/index.js
 create mode 100644 app/src/app/children/PostFooter/styles.js

diff --git a/app/src/app/children/PostFooter/helpers.js b/app/src/app/children/PostFooter/helpers.js
new file mode 100644
index 0000000..078198f
--- /dev/null
+++ b/app/src/app/children/PostFooter/helpers.js
@@ -0,0 +1,29 @@
+export default function timeSincePost(epochTime) {
+    const currentTime = Math.floor(Date.now() / 1000);
+
+    const timeElapsed = currentTime - epochTime;
+
+    if (timeElapsed < 60) {
+        return timeElapsed + ' seconds ago';
+    } else if (timeElapsed < 3600) {
+        const minutes = Math.floor(timeElapsed / 60);
+        return minutes + (minutes === 1 ? ' minute' : ' minutes') + ' ago';
+    } else if (timeElapsed < 86400) {
+        const hours = Math.floor(timeElapsed / 3600);
+        return hours + (hours === 1 ? ' hour' : ' hours') + ' ago';
+    } else if (timeElapsed < 604800) {
+        const days = Math.floor(timeElapsed / 86400);
+        return days + (days === 1 ? ' day' : ' days') + ' ago';
+    } else if (timeElapsed < 2419200) {
+        const weeks = Math.floor(timeElapsed / 604800);
+        return weeks + (weeks === 1 ? ' week' : ' weeks') + ' ago';
+    } else {
+        const years = Math.floor(timeElapsed / 31536000); 
+        return years + (years === 1 ? ' year' : ' years') + ' ago';
+    }
+}
+
+
+
+
+
diff --git a/app/src/app/children/PostFooter/index.js b/app/src/app/children/PostFooter/index.js
new file mode 100644
index 0000000..bb9a813
--- /dev/null
+++ b/app/src/app/children/PostFooter/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import LikeButton from '../like_button'
+import styles from './styles'
+import timeSincePost from './helpers'
+const PostFooter = (props) => {
+    const { data } = props
+
+    return (
+        <div style={styles.container} >
+            <div style={styles.postInfoStyle}>
+                <p style={styles.likesTextStyle}>{data.edge_media_preview_like.count} likes</p>
+                <p style={styles.timeTextStyle}>{timeSincePost(data.taken_at_timestamp)}</p>
+            </div>
+            <div style={styles.heartStyle}>
+                <LikeButton ></LikeButton>
+            </div>
+        </div>
+
+    )
+}
+
+export default PostFooter
diff --git a/app/src/app/children/PostFooter/styles.js b/app/src/app/children/PostFooter/styles.js
new file mode 100644
index 0000000..c1bf3d4
--- /dev/null
+++ b/app/src/app/children/PostFooter/styles.js
@@ -0,0 +1,26 @@
+export default {
+
+    heartStyle: {
+       paddingTop:'2vh',
+       paddingBottom:'1vh'
+    },
+  
+    container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingLeft: '2vw',
+        paddingRight: "1vw",
+        marginTop:"3vh"
+    },
+    timeTextStyle: {
+        color:'grey',
+        paddingTop:'0.5vw',
+        margin:'0',
+    },
+    likesTextStyle: {
+        paddingTop:'0.5vw',
+        margin:'0',
+        fontWeight: 'bold'
+    }
+
+}

From f760fcc248c4fa54203f80ac06713bcc9cd50e9b Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 12:43:05 +0000
Subject: [PATCH 05/10] feat: added like_button_mini component and implemented
 button logic

---
 app/src/app/children/UserInfoHeader/styles.js |  3 ++-
 .../like_button/children/liked_icon/index.js  |  2 +-
 .../children/unliked_icon/index.js            | 23 ++++++++++++-----
 app/src/app/children/like_button/index.js     | 22 ++++++++++++----
 app/src/app/children/like_button/styles.js    |  8 ++++++
 .../children/liked_icon/index.js              | 11 ++++++++
 .../children/unliked_icon/index.js            | 11 ++++++++
 .../app/children/like_button_mini/index.js    | 20 +++++++++++++++
 .../app/children/like_button_mini/styles.js   |  8 ++++++
 app/src/app/index.js                          | 10 +++++---
 app/src/app/styles.js                         | 25 ++++++++++++++-----
 11 files changed, 121 insertions(+), 22 deletions(-)
 create mode 100644 app/src/app/children/like_button/styles.js
 create mode 100644 app/src/app/children/like_button_mini/children/liked_icon/index.js
 create mode 100644 app/src/app/children/like_button_mini/children/unliked_icon/index.js
 create mode 100644 app/src/app/children/like_button_mini/index.js
 create mode 100644 app/src/app/children/like_button_mini/styles.js

diff --git a/app/src/app/children/UserInfoHeader/styles.js b/app/src/app/children/UserInfoHeader/styles.js
index 78ca3a3..0fa1409 100644
--- a/app/src/app/children/UserInfoHeader/styles.js
+++ b/app/src/app/children/UserInfoHeader/styles.js
@@ -1,7 +1,8 @@
 const containerStyle = {
     display: 'flex',            
     alignItems: 'center',
-    
+    paddingLeft:'2vw',
+    paddingTop:'2vh'
 }
 
 const infoTextStyle = {
diff --git a/app/src/app/children/like_button/children/liked_icon/index.js b/app/src/app/children/like_button/children/liked_icon/index.js
index f25b47f..93071cd 100644
--- a/app/src/app/children/like_button/children/liked_icon/index.js
+++ b/app/src/app/children/like_button/children/liked_icon/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const LikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#ed4956" fill="#ed4956" height="24" role="img" viewBox="0 0 48 48" width="24">
+    <svg aria-label="" color="#ed4956" fill="#ed4956" height="40" role="img" viewBox="0 0 48 48" width="50">
       <path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
     </svg>
   )
diff --git a/app/src/app/children/like_button/children/unliked_icon/index.js b/app/src/app/children/like_button/children/unliked_icon/index.js
index 660c1c1..9bd5403 100644
--- a/app/src/app/children/like_button/children/unliked_icon/index.js
+++ b/app/src/app/children/like_button/children/unliked_icon/index.js
@@ -1,11 +1,22 @@
-import React from 'react'
+import React from 'react';
 
 const UnlikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#8e8e8e" fill="#8e8e8e" height="24" role="img" viewBox="0 0 48 48" width="24">
-      <path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg
+      aria-label=""
+      fill="#ffffff"
+      height="40"
+      role="img"
+      viewBox="0 0 48 48"
+      width="50"
+    >
+      <path
+        d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"
+        stroke="#8e8e8e"
+        strokeWidth="2"
+      />
     </svg>
-  )
-}
+  );
+};
 
-export default UnlikedIcon
+export default UnlikedIcon;
diff --git a/app/src/app/children/like_button/index.js b/app/src/app/children/like_button/index.js
index 6403576..719d83b 100644
--- a/app/src/app/children/like_button/index.js
+++ b/app/src/app/children/like_button/index.js
@@ -1,8 +1,20 @@
-import React from 'react'
-import LikedIcon from './children/liked_icon'
+import React, { useState } from 'react';
+import LikedIcon from './children/liked_icon';
+import UnlikedIcon from './children/unliked_icon'
+import styles from './styles';
 
 const LikeButton = (props) => {
-  return <LikedIcon />
-}
+  const [liked, setLiked] = useState(false);
 
-export default LikeButton
+  const toggleLike = () => {
+    setLiked((prevLiked) => !prevLiked);
+  };
+
+  return (
+    <button style={styles.button} onClick={toggleLike}>
+      {liked ? <LikedIcon /> : <UnlikedIcon></UnlikedIcon>} 
+    </button>
+  );
+};
+
+export default LikeButton;
\ No newline at end of file
diff --git a/app/src/app/children/like_button/styles.js b/app/src/app/children/like_button/styles.js
new file mode 100644
index 0000000..024f081
--- /dev/null
+++ b/app/src/app/children/like_button/styles.js
@@ -0,0 +1,8 @@
+export default {
+    button: {
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+    }
+}
diff --git a/app/src/app/children/like_button_mini/children/liked_icon/index.js b/app/src/app/children/like_button_mini/children/liked_icon/index.js
new file mode 100644
index 0000000..154acba
--- /dev/null
+++ b/app/src/app/children/like_button_mini/children/liked_icon/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LikedIcon = (props) => {
+  return (
+    <svg aria-label="" color="#ed4956" fill="#ed4956" height="2vh" role="img" viewBox="0 0 48 48" width="40">
+      <path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    </svg>
+  )
+}
+
+export default LikedIcon
diff --git a/app/src/app/children/like_button_mini/children/unliked_icon/index.js b/app/src/app/children/like_button_mini/children/unliked_icon/index.js
new file mode 100644
index 0000000..aace954
--- /dev/null
+++ b/app/src/app/children/like_button_mini/children/unliked_icon/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const UnlikedIcon = (props) => {
+  return (
+    <svg aria-label="" color="#8e8e8e" fill="#8e8e8e" height="2vh" role="img" viewBox="0 0 48 48" width="40">
+      <path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    </svg>
+  )
+}
+
+export default UnlikedIcon
diff --git a/app/src/app/children/like_button_mini/index.js b/app/src/app/children/like_button_mini/index.js
new file mode 100644
index 0000000..719d83b
--- /dev/null
+++ b/app/src/app/children/like_button_mini/index.js
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import LikedIcon from './children/liked_icon';
+import UnlikedIcon from './children/unliked_icon'
+import styles from './styles';
+
+const LikeButton = (props) => {
+  const [liked, setLiked] = useState(false);
+
+  const toggleLike = () => {
+    setLiked((prevLiked) => !prevLiked);
+  };
+
+  return (
+    <button style={styles.button} onClick={toggleLike}>
+      {liked ? <LikedIcon /> : <UnlikedIcon></UnlikedIcon>} 
+    </button>
+  );
+};
+
+export default LikeButton;
\ No newline at end of file
diff --git a/app/src/app/children/like_button_mini/styles.js b/app/src/app/children/like_button_mini/styles.js
new file mode 100644
index 0000000..024f081
--- /dev/null
+++ b/app/src/app/children/like_button_mini/styles.js
@@ -0,0 +1,8 @@
+export default {
+    button: {
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+    }
+}
diff --git a/app/src/app/index.js b/app/src/app/index.js
index e020801..f102884 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import CaptionImage from './children/CaptionImage'
 import UserInfoHeader from './children/UserInfoHeader'
-import LikeButton from './children/like_button'
+import CommentSection from './children/CommentSection'
+import PostFooter from './children/PostFooter'
 import styles from './styles'
 
 const App = (props) => {
@@ -13,9 +14,12 @@ const App = (props) => {
         <CaptionImage data={data} ></CaptionImage>
       </div>
       <div style={styles.text}>
-        <UserInfoHeader data ={data}></UserInfoHeader>
-        <LikeButton />
+        <UserInfoHeader data={data}></UserInfoHeader>
+        <div style={styles.separator}></div>
+        <CommentSection data={data}></CommentSection>
+        <PostFooter data={data}></PostFooter>
       </div>
+
     </main>
   )
 }
diff --git a/app/src/app/styles.js b/app/src/app/styles.js
index 5f7c3a4..470a999 100644
--- a/app/src/app/styles.js
+++ b/app/src/app/styles.js
@@ -1,30 +1,43 @@
 export default {
+
+  separator: {
+    border: '1px solid #f0f0f0',
+    marginTop: '2vh',
+    width: '90%',
+    marginLeft:'2vw',
+
+  },
   main: {
-    backgroundColor: '#fff',
+    backgroundColor: '#f5f5f5',
     border: '1px solid #e6e6e6',
     borderBottomRightRadius: '3px',
     borderTopRightRadius: '3px',
-    maxWidth: '935px',
+    maxWidth: '1400px',
     margin: '16px auto',
     width: 'calc(100% - 40px)',
-
     display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap',
     justifyContent: 'flex-start',
     alignContent: 'stretch',
     alignItems: 'flex-start'
   },
 
   image: {
+    paddingTop:"4vh",
+    paddingBottom:'4vh',
+    maxWidth: '60%',
     order: '1',
     flex: '1 0 60%',
-    alignSelf: 'flex-start'
+    alignSelf: 'center',
+    marginTop: '0 20px',
   },
 
   text: {
+    
+    backgroundColor: 'white',
+    maxWidth: '40%',
     order: '2',
-    flex: '1 0 40%',
+    flex: '1 0 30%',
     alignSelf: 'flex-start'
   }
 }

From 178554ee0659b8170688262857ea13d163dad011 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 12:52:54 +0000
Subject: [PATCH 06/10] chore: fixed linting issues

---
 app/package.json                              |  1 +
 app/src/app/children/CaptionImage/index.js    |  4 +-
 .../CommentList/children/Comment/helpers.js   | 30 ++++++------
 .../CommentList/children/Comment/index.js     | 20 ++++----
 .../CommentList/children/Comment/style.js     | 27 +++++------
 .../children/CommentList/index.js             | 16 +++----
 .../children/CommentList/style.js             | 15 +++---
 app/src/app/children/CommentSection/index.js  |  3 +-
 app/src/app/children/CommentSection/styles.js |  7 ++-
 app/src/app/children/PostFooter/helpers.js    | 47 +++++++++----------
 app/src/app/children/PostFooter/index.js      | 24 +++++-----
 app/src/app/children/PostFooter/styles.js     | 44 ++++++++---------
 .../children/ProfileImage/index.js            |  4 +-
 app/src/app/children/UserInfoHeader/index.js  | 17 ++++---
 app/src/app/children/UserInfoHeader/styles.js | 19 ++++----
 .../like_button/children/liked_icon/index.js  |  4 +-
 .../children/unliked_icon/index.js            | 26 +++++-----
 app/src/app/children/like_button/index.js     | 20 ++++----
 app/src/app/children/like_button/styles.js    | 12 ++---
 .../children/liked_icon/index.js              |  4 +-
 .../children/unliked_icon/index.js            |  4 +-
 .../app/children/like_button_mini/index.js    | 20 ++++----
 .../app/children/like_button_mini/styles.js   | 12 ++---
 app/src/app/index.js                          | 10 ++--
 app/src/app/styles.js                         | 10 ++--
 25 files changed, 193 insertions(+), 207 deletions(-)

diff --git a/app/package.json b/app/package.json
index 4eca751..da861d1 100755
--- a/app/package.json
+++ b/app/package.json
@@ -8,6 +8,7 @@
     "react-scripts": "4.0.3"
   },
   "scripts": {
+    "lint": "standard",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
diff --git a/app/src/app/children/CaptionImage/index.js b/app/src/app/children/CaptionImage/index.js
index 2355d37..984c018 100755
--- a/app/src/app/children/CaptionImage/index.js
+++ b/app/src/app/children/CaptionImage/index.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import styles from './styles'
-import {getCaptionFromEdges} from './helpers'
+import { getCaptionFromEdges } from './helpers'
 
 const CaptionImage = (props) => {
-  const {data} = props
+  const { data } = props
   return (
     <img
       src={data.display_url}
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
index 5ca62d9..b5f8c97 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
@@ -1,21 +1,19 @@
 const processText = (text) => {
-   
-    const hashtagRegex = /#(\w+)/g;
-    const usernameRegex = /@(\w+)/g;
+  const hashtagRegex = /#(\w+)/g
+  const usernameRegex = /@(\w+)/g
 
-    
-    const textWithHashtags = text.replace(
-        hashtagRegex,
-        '<a href="#" style="color: blue; text-decoration: underline">#$1</a>'
-    );
+  const textWithHashtags = text.replace(
+    hashtagRegex,
+    '<a href="#" style="color: blue; text-decoration: underline">#$1</a>'
+  )
 
-    const textWithLinks = textWithHashtags.replace(
-        usernameRegex,
-        '<a href="#" style="color: blue; text-decoration: underline">@$1</a>'
-    );
+  const textWithLinks = textWithHashtags.replace(
+    usernameRegex,
+    '<a href="#" style="color: blue; text-decoration: underline">@$1</a>'
+  )
 
-    //Okay to use here since we know the HTML source 
-    return <div dangerouslySetInnerHTML={{ __html: textWithLinks }} />;
-};
+  // Okay to use here since we know the HTML source
+  return <div dangerouslySetInnerHTML={{ __html: textWithLinks }} />
+}
 
-export {processText}
\ No newline at end of file
+export { processText }
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
index 15600a5..761d39d 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -3,17 +3,17 @@ import { containerStyle, usernameStyle, textStyle, heartStyle } from './style'
 import { processText } from './helpers'
 import LikeButton from '../../../../../like_button_mini'
 const Comment = (props) => {
-    const { comment } = props
+  const { comment } = props
 
-    return (
-        <div style={containerStyle}  >
-            <p style={usernameStyle}>{comment.node.owner.username}</p>
-            <p style={textStyle}>{processText(comment.node.text)}</p>
-            <div style={heartStyle}>
-                <LikeButton></LikeButton>
-            </div>
-        </div>
-    )
+  return (
+    <div style={containerStyle}>
+      <p style={usernameStyle}>{comment.node.owner.username}</p>
+      <p style={textStyle}>{processText(comment.node.text)}</p>
+      <div style={heartStyle}>
+        <LikeButton />
+      </div>
+    </div>
+  )
 }
 
 export default Comment
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
index b0eb6cf..327c69d 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
@@ -1,27 +1,24 @@
 const containerStyle = {
-   
-    display: 'flex',     
-    paddingLeft:'2vw',
-    paddingRight:'2vw',      
+
+  display: 'flex',
+  paddingLeft: '2vw',
+  paddingRight: '2vw'
 }
 
+const heartStyle = {
 
-const heartStyle ={
+  alignSelf: 'center'
 
-    alignSelf: 'center',
-    
-    
 }
 
 const textStyle = {
-    marginLeft: '0.5em',
-    flex: 1, 
+  marginLeft: '0.5em',
+  flex: 1
 }
 
-const usernameStyle ={
-     
-    fontWeight: 'bold'
-}
+const usernameStyle = {
 
+  fontWeight: 'bold'
+}
 
-export {containerStyle,usernameStyle,textStyle,heartStyle}
\ No newline at end of file
+export { containerStyle, usernameStyle, textStyle, heartStyle }
diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js
index ecd74f1..58c3e4d 100644
--- a/app/src/app/children/CommentSection/children/CommentList/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/index.js
@@ -3,14 +3,14 @@ import Comment from './children/Comment'
 import { containerStyle } from './style'
 
 const CommentList = (props) => {
-    const { data } = props
-    return (
-        <div style={containerStyle} >
-            {data.edge_media_to_comment.edges.map((comment, index) => (
-                <Comment key={index} comment={comment}></Comment>
-        ))}
-        </div>
-    )
+  const { data } = props
+  return (
+    <div style={containerStyle}>
+      {data.edge_media_to_comment.edges.map((comment, index) => (
+        <Comment key={index} comment={comment} />
+      ))}
+    </div>
+  )
 }
 
 export default CommentList
diff --git a/app/src/app/children/CommentSection/children/CommentList/style.js b/app/src/app/children/CommentSection/children/CommentList/style.js
index 82952af..8738824 100644
--- a/app/src/app/children/CommentSection/children/CommentList/style.js
+++ b/app/src/app/children/CommentSection/children/CommentList/style.js
@@ -1,11 +1,10 @@
 const containerStyle = {
-    maxHeight: '60vh',
-    display: 'flex',
-    flexDirection: 'column',
-    overflowY: 'scroll',
-    alignContent: 'flex-start',
-  
-  };
+  maxHeight: '60vh',
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'scroll',
+  alignContent: 'flex-start'
 
+}
 
-export {containerStyle}
\ No newline at end of file
+export { containerStyle }
diff --git a/app/src/app/children/CommentSection/index.js b/app/src/app/children/CommentSection/index.js
index d706682..1424048 100644
--- a/app/src/app/children/CommentSection/index.js
+++ b/app/src/app/children/CommentSection/index.js
@@ -1,12 +1,11 @@
 import React from 'react'
 import CommentList from './children/CommentList'
 
-
 const CommentSection = (props) => {
   const { data } = props
   return (
     <div>
-      <CommentList data = {data}></CommentList>
+      <CommentList data={data} />
     </div>
   )
 }
diff --git a/app/src/app/children/CommentSection/styles.js b/app/src/app/children/CommentSection/styles.js
index c82a22c..c98fddb 100644
--- a/app/src/app/children/CommentSection/styles.js
+++ b/app/src/app/children/CommentSection/styles.js
@@ -1,8 +1,7 @@
 const containerStyle = {
-    display: 'flex',            
-    alignItems: 'center',
-    
+  display: 'flex',
+  alignItems: 'center'
 
 }
 
-export {containerStyle}
\ No newline at end of file
+export { containerStyle }
diff --git a/app/src/app/children/PostFooter/helpers.js b/app/src/app/children/PostFooter/helpers.js
index 078198f..7a37b05 100644
--- a/app/src/app/children/PostFooter/helpers.js
+++ b/app/src/app/children/PostFooter/helpers.js
@@ -1,29 +1,24 @@
-export default function timeSincePost(epochTime) {
-    const currentTime = Math.floor(Date.now() / 1000);
+export default function timeSincePost (epochTime) {
+  const currentTime = Math.floor(Date.now() / 1000)
 
-    const timeElapsed = currentTime - epochTime;
+  const timeElapsed = currentTime - epochTime
 
-    if (timeElapsed < 60) {
-        return timeElapsed + ' seconds ago';
-    } else if (timeElapsed < 3600) {
-        const minutes = Math.floor(timeElapsed / 60);
-        return minutes + (minutes === 1 ? ' minute' : ' minutes') + ' ago';
-    } else if (timeElapsed < 86400) {
-        const hours = Math.floor(timeElapsed / 3600);
-        return hours + (hours === 1 ? ' hour' : ' hours') + ' ago';
-    } else if (timeElapsed < 604800) {
-        const days = Math.floor(timeElapsed / 86400);
-        return days + (days === 1 ? ' day' : ' days') + ' ago';
-    } else if (timeElapsed < 2419200) {
-        const weeks = Math.floor(timeElapsed / 604800);
-        return weeks + (weeks === 1 ? ' week' : ' weeks') + ' ago';
-    } else {
-        const years = Math.floor(timeElapsed / 31536000); 
-        return years + (years === 1 ? ' year' : ' years') + ' ago';
-    }
+  if (timeElapsed < 60) {
+    return timeElapsed + ' seconds ago'
+  } else if (timeElapsed < 3600) {
+    const minutes = Math.floor(timeElapsed / 60)
+    return minutes + (minutes === 1 ? ' minute' : ' minutes') + ' ago'
+  } else if (timeElapsed < 86400) {
+    const hours = Math.floor(timeElapsed / 3600)
+    return hours + (hours === 1 ? ' hour' : ' hours') + ' ago'
+  } else if (timeElapsed < 604800) {
+    const days = Math.floor(timeElapsed / 86400)
+    return days + (days === 1 ? ' day' : ' days') + ' ago'
+  } else if (timeElapsed < 2419200) {
+    const weeks = Math.floor(timeElapsed / 604800)
+    return weeks + (weeks === 1 ? ' week' : ' weeks') + ' ago'
+  } else {
+    const years = Math.floor(timeElapsed / 31536000)
+    return years + (years === 1 ? ' year' : ' years') + ' ago'
+  }
 }
-
-
-
-
-
diff --git a/app/src/app/children/PostFooter/index.js b/app/src/app/children/PostFooter/index.js
index bb9a813..9cfb06d 100644
--- a/app/src/app/children/PostFooter/index.js
+++ b/app/src/app/children/PostFooter/index.js
@@ -3,20 +3,20 @@ import LikeButton from '../like_button'
 import styles from './styles'
 import timeSincePost from './helpers'
 const PostFooter = (props) => {
-    const { data } = props
+  const { data } = props
 
-    return (
-        <div style={styles.container} >
-            <div style={styles.postInfoStyle}>
-                <p style={styles.likesTextStyle}>{data.edge_media_preview_like.count} likes</p>
-                <p style={styles.timeTextStyle}>{timeSincePost(data.taken_at_timestamp)}</p>
-            </div>
-            <div style={styles.heartStyle}>
-                <LikeButton ></LikeButton>
-            </div>
-        </div>
+  return (
+    <div style={styles.container}>
+      <div style={styles.postInfoStyle}>
+        <p style={styles.likesTextStyle}>{data.edge_media_preview_like.count} likes</p>
+        <p style={styles.timeTextStyle}>{timeSincePost(data.taken_at_timestamp)}</p>
+      </div>
+      <div style={styles.heartStyle}>
+        <LikeButton />
+      </div>
+    </div>
 
-    )
+  )
 }
 
 export default PostFooter
diff --git a/app/src/app/children/PostFooter/styles.js b/app/src/app/children/PostFooter/styles.js
index c1bf3d4..c6e42d1 100644
--- a/app/src/app/children/PostFooter/styles.js
+++ b/app/src/app/children/PostFooter/styles.js
@@ -1,26 +1,26 @@
 export default {
 
-    heartStyle: {
-       paddingTop:'2vh',
-       paddingBottom:'1vh'
-    },
-  
-    container: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        paddingLeft: '2vw',
-        paddingRight: "1vw",
-        marginTop:"3vh"
-    },
-    timeTextStyle: {
-        color:'grey',
-        paddingTop:'0.5vw',
-        margin:'0',
-    },
-    likesTextStyle: {
-        paddingTop:'0.5vw',
-        margin:'0',
-        fontWeight: 'bold'
-    }
+  heartStyle: {
+    paddingTop: '2vh',
+    paddingBottom: '1vh'
+  },
+
+  container: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingLeft: '2vw',
+    paddingRight: '1vw',
+    marginTop: '3vh'
+  },
+  timeTextStyle: {
+    color: 'grey',
+    paddingTop: '0.5vw',
+    margin: '0'
+  },
+  likesTextStyle: {
+    paddingTop: '0.5vw',
+    margin: '0',
+    fontWeight: 'bold'
+  }
 
 }
diff --git a/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
index 61e8c08..9b5973e 100755
--- a/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
+++ b/app/src/app/children/UserInfoHeader/children/ProfileImage/index.js
@@ -2,12 +2,12 @@ import React from 'react'
 import styles from './styles'
 
 const ProfileImage = (props) => {
-  const {data} = props
+  const { data } = props
   return (
     <img
       src={data.owner.profile_pic_url}
       style={styles}
-      alt= "User Profile Picture" 
+      alt='User Profile Picture'
     />
   )
 }
diff --git a/app/src/app/children/UserInfoHeader/index.js b/app/src/app/children/UserInfoHeader/index.js
index b770c09..10512ff 100644
--- a/app/src/app/children/UserInfoHeader/index.js
+++ b/app/src/app/children/UserInfoHeader/index.js
@@ -1,20 +1,19 @@
 import React from 'react'
-import {containerStyle,infoTextStyle,textUserNameStyle } from './styles'
+import { containerStyle, infoTextStyle, textUserNameStyle } from './styles'
 import ProfileImage from './children/ProfileImage'
 
-
 const UserInfoHeader = (props) => {
   const { data } = props
   console.log(data)
   return (
-      <div style={containerStyle} >
-        <ProfileImage data={data}></ProfileImage>
-        <div style={infoTextStyle}>
-            <p style ={textUserNameStyle}>{data.owner.username}</p>
-            <p>{data.location.name}</p>
-        </div>
+    <div style={containerStyle}>
+      <ProfileImage data={data} />
+      <div style={infoTextStyle}>
+        <p style={textUserNameStyle}>{data.owner.username}</p>
+        <p>{data.location.name}</p>
       </div>
-    
+    </div>
+
   )
 }
 
diff --git a/app/src/app/children/UserInfoHeader/styles.js b/app/src/app/children/UserInfoHeader/styles.js
index 0fa1409..b866c3c 100644
--- a/app/src/app/children/UserInfoHeader/styles.js
+++ b/app/src/app/children/UserInfoHeader/styles.js
@@ -1,18 +1,17 @@
 const containerStyle = {
-    display: 'flex',            
-    alignItems: 'center',
-    paddingLeft:'2vw',
-    paddingTop:'2vh'
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '2vw',
+  paddingTop: '2vh'
 }
 
 const infoTextStyle = {
-    marginLeft: '0.5em',
-    lineHeight: '0.5em'
+  marginLeft: '0.5em',
+  lineHeight: '0.5em'
 }
 
-const textUserNameStyle ={
-    fontWeight: 'bold'
+const textUserNameStyle = {
+  fontWeight: 'bold'
 }
 
-
-export {containerStyle,infoTextStyle,textUserNameStyle}
\ No newline at end of file
+export { containerStyle, infoTextStyle, textUserNameStyle }
diff --git a/app/src/app/children/like_button/children/liked_icon/index.js b/app/src/app/children/like_button/children/liked_icon/index.js
index 93071cd..fda30d6 100644
--- a/app/src/app/children/like_button/children/liked_icon/index.js
+++ b/app/src/app/children/like_button/children/liked_icon/index.js
@@ -2,8 +2,8 @@ import React from 'react'
 
 const LikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#ed4956" fill="#ed4956" height="40" role="img" viewBox="0 0 48 48" width="50">
-      <path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg aria-label='' color='#ed4956' fill='#ed4956' height='40' role='img' viewBox='0 0 48 48' width='50'>
+      <path d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
     </svg>
   )
 }
diff --git a/app/src/app/children/like_button/children/unliked_icon/index.js b/app/src/app/children/like_button/children/unliked_icon/index.js
index 9bd5403..c4a50dd 100644
--- a/app/src/app/children/like_button/children/unliked_icon/index.js
+++ b/app/src/app/children/like_button/children/unliked_icon/index.js
@@ -1,22 +1,22 @@
-import React from 'react';
+import React from 'react'
 
 const UnlikedIcon = (props) => {
   return (
     <svg
-      aria-label=""
-      fill="#ffffff"
-      height="40"
-      role="img"
-      viewBox="0 0 48 48"
-      width="50"
+      aria-label=''
+      fill='#ffffff'
+      height='40'
+      role='img'
+      viewBox='0 0 48 48'
+      width='50'
     >
       <path
-        d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"
-        stroke="#8e8e8e"
-        strokeWidth="2"
+        d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z'
+        stroke='#8e8e8e'
+        strokeWidth='2'
       />
     </svg>
-  );
-};
+  )
+}
 
-export default UnlikedIcon;
+export default UnlikedIcon
diff --git a/app/src/app/children/like_button/index.js b/app/src/app/children/like_button/index.js
index 719d83b..cc5de33 100644
--- a/app/src/app/children/like_button/index.js
+++ b/app/src/app/children/like_button/index.js
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
-import LikedIcon from './children/liked_icon';
+import React, { useState } from 'react'
+import LikedIcon from './children/liked_icon'
 import UnlikedIcon from './children/unliked_icon'
-import styles from './styles';
+import styles from './styles'
 
 const LikeButton = (props) => {
-  const [liked, setLiked] = useState(false);
+  const [liked, setLiked] = useState(false)
 
   const toggleLike = () => {
-    setLiked((prevLiked) => !prevLiked);
-  };
+    setLiked((prevLiked) => !prevLiked)
+  }
 
   return (
     <button style={styles.button} onClick={toggleLike}>
-      {liked ? <LikedIcon /> : <UnlikedIcon></UnlikedIcon>} 
+      {liked ? <LikedIcon /> : <UnlikedIcon />}
     </button>
-  );
-};
+  )
+}
 
-export default LikeButton;
\ No newline at end of file
+export default LikeButton
diff --git a/app/src/app/children/like_button/styles.js b/app/src/app/children/like_button/styles.js
index 024f081..50a00a7 100644
--- a/app/src/app/children/like_button/styles.js
+++ b/app/src/app/children/like_button/styles.js
@@ -1,8 +1,8 @@
 export default {
-    button: {
-        background: 'none',
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-    }
+  button: {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer'
+  }
 }
diff --git a/app/src/app/children/like_button_mini/children/liked_icon/index.js b/app/src/app/children/like_button_mini/children/liked_icon/index.js
index 154acba..86724d3 100644
--- a/app/src/app/children/like_button_mini/children/liked_icon/index.js
+++ b/app/src/app/children/like_button_mini/children/liked_icon/index.js
@@ -2,8 +2,8 @@ import React from 'react'
 
 const LikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#ed4956" fill="#ed4956" height="2vh" role="img" viewBox="0 0 48 48" width="40">
-      <path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg aria-label='' color='#ed4956' fill='#ed4956' height='2vh' role='img' viewBox='0 0 48 48' width='40'>
+      <path d='M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
     </svg>
   )
 }
diff --git a/app/src/app/children/like_button_mini/children/unliked_icon/index.js b/app/src/app/children/like_button_mini/children/unliked_icon/index.js
index aace954..ed6c7fc 100644
--- a/app/src/app/children/like_button_mini/children/unliked_icon/index.js
+++ b/app/src/app/children/like_button_mini/children/unliked_icon/index.js
@@ -2,8 +2,8 @@ import React from 'react'
 
 const UnlikedIcon = (props) => {
   return (
-    <svg aria-label="" color="#8e8e8e" fill="#8e8e8e" height="2vh" role="img" viewBox="0 0 48 48" width="40">
-      <path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z" />
+    <svg aria-label='' color='#8e8e8e' fill='#8e8e8e' height='2vh' role='img' viewBox='0 0 48 48' width='40'>
+      <path d='M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z' />
     </svg>
   )
 }
diff --git a/app/src/app/children/like_button_mini/index.js b/app/src/app/children/like_button_mini/index.js
index 719d83b..cc5de33 100644
--- a/app/src/app/children/like_button_mini/index.js
+++ b/app/src/app/children/like_button_mini/index.js
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
-import LikedIcon from './children/liked_icon';
+import React, { useState } from 'react'
+import LikedIcon from './children/liked_icon'
 import UnlikedIcon from './children/unliked_icon'
-import styles from './styles';
+import styles from './styles'
 
 const LikeButton = (props) => {
-  const [liked, setLiked] = useState(false);
+  const [liked, setLiked] = useState(false)
 
   const toggleLike = () => {
-    setLiked((prevLiked) => !prevLiked);
-  };
+    setLiked((prevLiked) => !prevLiked)
+  }
 
   return (
     <button style={styles.button} onClick={toggleLike}>
-      {liked ? <LikedIcon /> : <UnlikedIcon></UnlikedIcon>} 
+      {liked ? <LikedIcon /> : <UnlikedIcon />}
     </button>
-  );
-};
+  )
+}
 
-export default LikeButton;
\ No newline at end of file
+export default LikeButton
diff --git a/app/src/app/children/like_button_mini/styles.js b/app/src/app/children/like_button_mini/styles.js
index 024f081..50a00a7 100644
--- a/app/src/app/children/like_button_mini/styles.js
+++ b/app/src/app/children/like_button_mini/styles.js
@@ -1,8 +1,8 @@
 export default {
-    button: {
-        background: 'none',
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-    }
+  button: {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer'
+  }
 }
diff --git a/app/src/app/index.js b/app/src/app/index.js
index f102884..2160753 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -11,13 +11,13 @@ const App = (props) => {
   return (
     <main style={styles.main}>
       <div style={styles.image}>
-        <CaptionImage data={data} ></CaptionImage>
+        <CaptionImage data={data} />
       </div>
       <div style={styles.text}>
-        <UserInfoHeader data={data}></UserInfoHeader>
-        <div style={styles.separator}></div>
-        <CommentSection data={data}></CommentSection>
-        <PostFooter data={data}></PostFooter>
+        <UserInfoHeader data={data} />
+        <div style={styles.separator} />
+        <CommentSection data={data} />
+        <PostFooter data={data} />
       </div>
 
     </main>
diff --git a/app/src/app/styles.js b/app/src/app/styles.js
index 470a999..61471bd 100644
--- a/app/src/app/styles.js
+++ b/app/src/app/styles.js
@@ -4,7 +4,7 @@ export default {
     border: '1px solid #f0f0f0',
     marginTop: '2vh',
     width: '90%',
-    marginLeft:'2vw',
+    marginLeft: '2vw'
 
   },
   main: {
@@ -23,17 +23,17 @@ export default {
   },
 
   image: {
-    paddingTop:"4vh",
-    paddingBottom:'4vh',
+    paddingTop: '4vh',
+    paddingBottom: '4vh',
     maxWidth: '60%',
     order: '1',
     flex: '1 0 60%',
     alignSelf: 'center',
-    marginTop: '0 20px',
+    marginTop: '0 20px'
   },
 
   text: {
-    
+
     backgroundColor: 'white',
     maxWidth: '40%',
     order: '2',

From 6b308f5df47575061c198c92d61ca84e8c22e356 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 14:40:23 +0000
Subject: [PATCH 07/10] feat: UI more responsive

---
 .../CommentList/children/Comment/index.js     |  5 ++--
 .../CommentList/children/Comment/styles.css   |  5 ++++
 .../children/Comment/{style.js => styles.js}  | 17 +++++++------
 .../children/CommentList/index.js             |  5 ++--
 .../children/CommentList/styles.css           |  5 ++++
 .../CommentList/{style.js => styles.js}       |  3 ++-
 app/src/app/index.js                          | 24 ++++++++++---------
 app/src/app/styles.css                        | 16 +++++++++++++
 app/src/app/styles.js                         |  3 +--
 9 files changed, 58 insertions(+), 25 deletions(-)
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css
 rename app/src/app/children/CommentSection/children/CommentList/children/Comment/{style.js => styles.js} (51%)
 create mode 100644 app/src/app/children/CommentSection/children/CommentList/styles.css
 rename app/src/app/children/CommentSection/children/CommentList/{style.js => styles.js} (82%)
 create mode 100644 app/src/app/styles.css

diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
index 761d39d..faf11cc 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import { containerStyle, usernameStyle, textStyle, heartStyle } from './style'
+import { containerStyle, usernameStyle, textStyle, heartStyle } from './styles'
 import { processText } from './helpers'
+import './styles.css'; 
 import LikeButton from '../../../../../like_button_mini'
 const Comment = (props) => {
   const { comment } = props
 
   return (
-    <div style={containerStyle}>
+    <div className='textStyle' style={containerStyle}>
       <p style={usernameStyle}>{comment.node.owner.username}</p>
       <p style={textStyle}>{processText(comment.node.text)}</p>
       <div style={heartStyle}>
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css
new file mode 100644
index 0000000..fe8b8da
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.css
@@ -0,0 +1,5 @@
+@media (max-width: 900px) {
+    .textStyle {
+      font-size: 8px;
+    }
+  }
\ No newline at end of file
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
similarity index 51%
rename from app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
rename to app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
index 327c69d..39e8220 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/style.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
@@ -1,24 +1,27 @@
 const containerStyle = {
+   
 
-  display: 'flex',
-  paddingLeft: '2vw',
-  paddingRight: '2vw'
+    display: 'flex',
+    paddingLeft: '2vw',
+    paddingRight: '2vw'
 }
 
 const heartStyle = {
 
-  alignSelf: 'center'
+    alignSelf: 'center'
 
 }
 
 const textStyle = {
-  marginLeft: '0.5em',
-  flex: 1
+   
+
+    marginLeft: '0.5em',
+    flex: 1
 }
 
 const usernameStyle = {
 
-  fontWeight: 'bold'
+    fontWeight: 'bold'
 }
 
 export { containerStyle, usernameStyle, textStyle, heartStyle }
diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js
index 58c3e4d..cb9078d 100644
--- a/app/src/app/children/CommentSection/children/CommentList/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/index.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import Comment from './children/Comment'
-import { containerStyle } from './style'
+import { containerStyle } from './styles'
+import './styles.css';
 
 const CommentList = (props) => {
   const { data } = props
   return (
-    <div style={containerStyle}>
+    <div className='containerStyle' style={containerStyle}>
       {data.edge_media_to_comment.edges.map((comment, index) => (
         <Comment key={index} comment={comment} />
       ))}
diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.css b/app/src/app/children/CommentSection/children/CommentList/styles.css
new file mode 100644
index 0000000..2f1a789
--- /dev/null
+++ b/app/src/app/children/CommentSection/children/CommentList/styles.css
@@ -0,0 +1,5 @@
+@media (max-width: 900px) {
+    .containerStyle{
+        height: 250px;
+    }
+  }
\ No newline at end of file
diff --git a/app/src/app/children/CommentSection/children/CommentList/style.js b/app/src/app/children/CommentSection/children/CommentList/styles.js
similarity index 82%
rename from app/src/app/children/CommentSection/children/CommentList/style.js
rename to app/src/app/children/CommentSection/children/CommentList/styles.js
index 8738824..5ebc0af 100644
--- a/app/src/app/children/CommentSection/children/CommentList/style.js
+++ b/app/src/app/children/CommentSection/children/CommentList/styles.js
@@ -3,7 +3,8 @@ const containerStyle = {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'scroll',
-  alignContent: 'flex-start'
+  alignContent: 'flex-start',
+
 
 }
 
diff --git a/app/src/app/index.js b/app/src/app/index.js
index 2160753..85d3a78 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -3,23 +3,25 @@ import CaptionImage from './children/CaptionImage'
 import UserInfoHeader from './children/UserInfoHeader'
 import CommentSection from './children/CommentSection'
 import PostFooter from './children/PostFooter'
+import './styles.css';
 import styles from './styles'
 
+
 const App = (props) => {
   const { data } = props
-  console.log(data)
   return (
-    <main style={styles.main}>
-      <div style={styles.image}>
-        <CaptionImage data={data} />
-      </div>
-      <div style={styles.text}>
-        <UserInfoHeader data={data} />
-        <div style={styles.separator} />
-        <CommentSection data={data} />
-        <PostFooter data={data} />
+    <main>
+      <div  className = 'main' style={styles.main}>
+        <div className='image' style={styles.image}>
+          <CaptionImage data={data} />
+        </div>
+        <div className='text' style={styles.text}>
+          <UserInfoHeader data={data} />
+          <div style={styles.separator} />
+          <CommentSection data={data} />
+          <PostFooter data={data} />
+        </div>
       </div>
-
     </main>
   )
 }
diff --git a/app/src/app/styles.css b/app/src/app/styles.css
new file mode 100644
index 0000000..240c2ba
--- /dev/null
+++ b/app/src/app/styles.css
@@ -0,0 +1,16 @@
+@media (max-width: 900px) {
+    .main{
+  
+      flex-direction: column; 
+    }
+  
+    .image {
+      max-width: 600px; 
+      order: 2; 
+    }
+  
+    .text {
+      max-width: 100%;
+      order: 2; 
+    }
+  }
\ No newline at end of file
diff --git a/app/src/app/styles.js b/app/src/app/styles.js
index 61471bd..176b5db 100644
--- a/app/src/app/styles.js
+++ b/app/src/app/styles.js
@@ -16,7 +16,6 @@ export default {
     margin: '16px auto',
     width: 'calc(100% - 40px)',
     display: 'flex',
-    flexDirection: 'row',
     justifyContent: 'flex-start',
     alignContent: 'stretch',
     alignItems: 'flex-start'
@@ -35,7 +34,7 @@ export default {
   text: {
 
     backgroundColor: 'white',
-    maxWidth: '40%',
+    // maxWidth: '40%',
     order: '2',
     flex: '1 0 30%',
     alignSelf: 'flex-start'

From 3b396754b0ec0158410fd335b18595cdba0e978e Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 14:41:08 +0000
Subject: [PATCH 08/10] chore: fixed linting issues

---
 .../CommentList/children/Comment/index.js        |  2 +-
 .../CommentList/children/Comment/styles.js       | 16 +++++++---------
 .../CommentSection/children/CommentList/index.js |  2 +-
 .../children/CommentList/styles.js               |  4 +---
 app/src/app/index.js                             |  5 ++---
 5 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
index faf11cc..d169f29 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { containerStyle, usernameStyle, textStyle, heartStyle } from './styles'
 import { processText } from './helpers'
-import './styles.css'; 
+import './styles.css'
 import LikeButton from '../../../../../like_button_mini'
 const Comment = (props) => {
   const { comment } = props
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
index 39e8220..d4a1f68 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
@@ -1,27 +1,25 @@
 const containerStyle = {
-   
 
-    display: 'flex',
-    paddingLeft: '2vw',
-    paddingRight: '2vw'
+  display: 'flex',
+  paddingLeft: '2vw',
+  paddingRight: '2vw'
 }
 
 const heartStyle = {
 
-    alignSelf: 'center'
+  alignSelf: 'center'
 
 }
 
 const textStyle = {
-   
 
-    marginLeft: '0.5em',
-    flex: 1
+  marginLeft: '0.5em',
+  flex: 1
 }
 
 const usernameStyle = {
 
-    fontWeight: 'bold'
+  fontWeight: 'bold'
 }
 
 export { containerStyle, usernameStyle, textStyle, heartStyle }
diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js
index cb9078d..98d3f4c 100644
--- a/app/src/app/children/CommentSection/children/CommentList/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Comment from './children/Comment'
 import { containerStyle } from './styles'
-import './styles.css';
+import './styles.css'
 
 const CommentList = (props) => {
   const { data } = props
diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.js b/app/src/app/children/CommentSection/children/CommentList/styles.js
index 5ebc0af..7fa0922 100644
--- a/app/src/app/children/CommentSection/children/CommentList/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/styles.js
@@ -3,9 +3,7 @@ const containerStyle = {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'scroll',
-  alignContent: 'flex-start',
-
-
+  alignContent: 'flex-start'
 }
 
 export { containerStyle }
diff --git a/app/src/app/index.js b/app/src/app/index.js
index 85d3a78..71080c6 100755
--- a/app/src/app/index.js
+++ b/app/src/app/index.js
@@ -3,15 +3,14 @@ import CaptionImage from './children/CaptionImage'
 import UserInfoHeader from './children/UserInfoHeader'
 import CommentSection from './children/CommentSection'
 import PostFooter from './children/PostFooter'
-import './styles.css';
+import './styles.css'
 import styles from './styles'
 
-
 const App = (props) => {
   const { data } = props
   return (
     <main>
-      <div  className = 'main' style={styles.main}>
+      <div className='main' style={styles.main}>
         <div className='image' style={styles.image}>
           <CaptionImage data={data} />
         </div>

From aaa6db99849a1f662275a493a87a597102954164 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 15:11:38 +0000
Subject: [PATCH 09/10] chore: fixed css styling

---
 .../children/CommentList/children/Comment/helpers.js   | 10 +++++-----
 .../children/CommentList/children/Comment/index.js     |  8 +++++---
 .../children/CommentList/children/Comment/styles.js    |  7 +------
 .../CommentSection/children/CommentList/styles.js      |  3 ++-
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
index b5f8c97..336e722 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/helpers.js
@@ -1,19 +1,19 @@
-const processText = (text) => {
+const processText = (text, name) => {
   const hashtagRegex = /#(\w+)/g
   const usernameRegex = /@(\w+)/g
 
   const textWithHashtags = text.replace(
     hashtagRegex,
-    '<a href="#" style="color: blue; text-decoration: underline">#$1</a>'
+    '<a href="#" style="color: blue; text-decoration: none">#$1</a>'
   )
 
   const textWithLinks = textWithHashtags.replace(
     usernameRegex,
-    '<a href="#" style="color: blue; text-decoration: underline">@$1</a>'
+    '<a href="#" style="color: blue; text-decoration: none">@$1</a>'
   )
-
+  const finalHTML = `<strong>${name}</strong> ${textWithLinks}`
   // Okay to use here since we know the HTML source
-  return <div dangerouslySetInnerHTML={{ __html: textWithLinks }} />
+  return <div dangerouslySetInnerHTML={{ __html: finalHTML }} />
 }
 
 export { processText }
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
index d169f29..f8ee618 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -1,15 +1,17 @@
 import React from 'react'
-import { containerStyle, usernameStyle, textStyle, heartStyle } from './styles'
+import { containerStyle, textStyle, heartStyle } from './styles'
 import { processText } from './helpers'
 import './styles.css'
 import LikeButton from '../../../../../like_button_mini'
+
 const Comment = (props) => {
   const { comment } = props
 
   return (
     <div className='textStyle' style={containerStyle}>
-      <p style={usernameStyle}>{comment.node.owner.username}</p>
-      <p style={textStyle}>{processText(comment.node.text)}</p>
+      <div style={textStyle}>
+        <span>{processText(comment.node.text, comment.node.owner.username)}</span>
+      </div>
       <div style={heartStyle}>
         <LikeButton />
       </div>
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
index d4a1f68..54f9d4b 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
@@ -17,9 +17,4 @@ const textStyle = {
   flex: 1
 }
 
-const usernameStyle = {
-
-  fontWeight: 'bold'
-}
-
-export { containerStyle, usernameStyle, textStyle, heartStyle }
+export { containerStyle, textStyle, heartStyle }
diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.js b/app/src/app/children/CommentSection/children/CommentList/styles.js
index 7fa0922..c51ee6b 100644
--- a/app/src/app/children/CommentSection/children/CommentList/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/styles.js
@@ -3,7 +3,8 @@ const containerStyle = {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'scroll',
-  alignContent: 'flex-start'
+  alignContent: 'flex-start',
+  gap: '0.5vh'
 }
 
 export { containerStyle }

From de9725772203b4dd8634190ba8f12d6862d2a5b5 Mon Sep 17 00:00:00 2001
From: dgold01 <d.l.gold@hotmail.com>
Date: Wed, 1 Nov 2023 16:46:53 +0000
Subject: [PATCH 10/10] chore: refactored styles.js files

---
 .../CommentList/children/Comment/index.js     |  8 ++---
 .../CommentList/children/Comment/styles.js    | 28 ++++++++---------
 .../children/CommentList/index.js             |  4 +--
 .../children/CommentList/styles.js            |  4 +--
 app/src/app/children/CommentSection/styles.js |  7 -----
 app/src/app/children/UserInfoHeader/index.js  |  8 ++---
 app/src/app/children/UserInfoHeader/styles.js | 30 +++++++++----------
 7 files changed, 38 insertions(+), 51 deletions(-)
 delete mode 100644 app/src/app/children/CommentSection/styles.js

diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
index f8ee618..61d0f98 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { containerStyle, textStyle, heartStyle } from './styles'
+import styles from './styles'
 import { processText } from './helpers'
 import './styles.css'
 import LikeButton from '../../../../../like_button_mini'
@@ -8,11 +8,11 @@ const Comment = (props) => {
   const { comment } = props
 
   return (
-    <div className='textStyle' style={containerStyle}>
-      <div style={textStyle}>
+    <div className='textStyle' style={styles.containerStyle}>
+      <div style={styles.textStyle}>
         <span>{processText(comment.node.text, comment.node.owner.username)}</span>
       </div>
-      <div style={heartStyle}>
+      <div style={styles.heartStyle}>
         <LikeButton />
       </div>
     </div>
diff --git a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
index 54f9d4b..58913f1 100644
--- a/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/children/Comment/styles.js
@@ -1,20 +1,18 @@
-const containerStyle = {
+export default {
+  containerStyle: {
 
-  display: 'flex',
-  paddingLeft: '2vw',
-  paddingRight: '2vw'
-}
+    display: 'flex',
+    paddingLeft: '2vw',
+    paddingRight: '2vw'
+  },
+  heartStyle: {
 
-const heartStyle = {
+    alignSelf: 'center'
 
-  alignSelf: 'center'
+  },
+  textStyle: {
 
+    marginLeft: '0.5em',
+    flex: 1
+  }
 }
-
-const textStyle = {
-
-  marginLeft: '0.5em',
-  flex: 1
-}
-
-export { containerStyle, textStyle, heartStyle }
diff --git a/app/src/app/children/CommentSection/children/CommentList/index.js b/app/src/app/children/CommentSection/children/CommentList/index.js
index 98d3f4c..ef1c3d1 100644
--- a/app/src/app/children/CommentSection/children/CommentList/index.js
+++ b/app/src/app/children/CommentSection/children/CommentList/index.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import Comment from './children/Comment'
-import { containerStyle } from './styles'
+import styles from './styles'
 import './styles.css'
 
 const CommentList = (props) => {
   const { data } = props
   return (
-    <div className='containerStyle' style={containerStyle}>
+    <div className='containerStyle' style={styles}>
       {data.edge_media_to_comment.edges.map((comment, index) => (
         <Comment key={index} comment={comment} />
       ))}
diff --git a/app/src/app/children/CommentSection/children/CommentList/styles.js b/app/src/app/children/CommentSection/children/CommentList/styles.js
index c51ee6b..ad87fe1 100644
--- a/app/src/app/children/CommentSection/children/CommentList/styles.js
+++ b/app/src/app/children/CommentSection/children/CommentList/styles.js
@@ -1,4 +1,4 @@
-const containerStyle = {
+export default {
   maxHeight: '60vh',
   display: 'flex',
   flexDirection: 'column',
@@ -6,5 +6,3 @@ const containerStyle = {
   alignContent: 'flex-start',
   gap: '0.5vh'
 }
-
-export { containerStyle }
diff --git a/app/src/app/children/CommentSection/styles.js b/app/src/app/children/CommentSection/styles.js
deleted file mode 100644
index c98fddb..0000000
--- a/app/src/app/children/CommentSection/styles.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const containerStyle = {
-  display: 'flex',
-  alignItems: 'center'
-
-}
-
-export { containerStyle }
diff --git a/app/src/app/children/UserInfoHeader/index.js b/app/src/app/children/UserInfoHeader/index.js
index 10512ff..335b142 100644
--- a/app/src/app/children/UserInfoHeader/index.js
+++ b/app/src/app/children/UserInfoHeader/index.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import { containerStyle, infoTextStyle, textUserNameStyle } from './styles'
+import styles from './styles'
 import ProfileImage from './children/ProfileImage'
 
 const UserInfoHeader = (props) => {
   const { data } = props
   console.log(data)
   return (
-    <div style={containerStyle}>
+    <div style={styles.containerStyle}>
       <ProfileImage data={data} />
-      <div style={infoTextStyle}>
-        <p style={textUserNameStyle}>{data.owner.username}</p>
+      <div style={styles.infoTextStyle}>
+        <p style={styles.textUserNameStyle}>{data.owner.username}</p>
         <p>{data.location.name}</p>
       </div>
     </div>
diff --git a/app/src/app/children/UserInfoHeader/styles.js b/app/src/app/children/UserInfoHeader/styles.js
index b866c3c..a3c38b6 100644
--- a/app/src/app/children/UserInfoHeader/styles.js
+++ b/app/src/app/children/UserInfoHeader/styles.js
@@ -1,17 +1,15 @@
-const containerStyle = {
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '2vw',
-  paddingTop: '2vh'
+export default {
+  containerStyle: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: '2vw',
+    paddingTop: '2vh'
+  },
+  infoTextStyle: {
+    marginLeft: '0.5em',
+    lineHeight: '0.5em'
+  },
+  textUserNameStyle: {
+    fontWeight: 'bold'
+  }
 }
-
-const infoTextStyle = {
-  marginLeft: '0.5em',
-  lineHeight: '0.5em'
-}
-
-const textUserNameStyle = {
-  fontWeight: 'bold'
-}
-
-export { containerStyle, infoTextStyle, textUserNameStyle }