From aaff7366730927aa407de3a7e32b85ce050fcff1 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 5 Jul 2022 11:46:49 +0100
Subject: [PATCH] Basic components added with basic styling

---
 apps/comments-ui/public/main.css              | 128 ++++++++++++++++++
 apps/comments-ui/src/components/Avatar.js     |   9 ++
 apps/comments-ui/src/components/Comment.js    |  31 +++++
 apps/comments-ui/src/components/Form.js       |  49 ++++---
 apps/comments-ui/src/components/Like.js       |   9 ++
 apps/comments-ui/src/components/More.js       |   9 ++
 apps/comments-ui/src/components/Pagination.js |   9 ++
 apps/comments-ui/src/components/Reply.js      |   9 ++
 .../src/components/TotalComments.js           |   9 ++
 9 files changed, 244 insertions(+), 18 deletions(-)
 create mode 100644 apps/comments-ui/src/components/Avatar.js
 create mode 100644 apps/comments-ui/src/components/Comment.js
 create mode 100644 apps/comments-ui/src/components/Like.js
 create mode 100644 apps/comments-ui/src/components/More.js
 create mode 100644 apps/comments-ui/src/components/Pagination.js
 create mode 100644 apps/comments-ui/src/components/Reply.js
 create mode 100644 apps/comments-ui/src/components/TotalComments.js

diff --git a/apps/comments-ui/public/main.css b/apps/comments-ui/public/main.css
index f240426fa8..30e50ccd6f 100644
--- a/apps/comments-ui/public/main.css
+++ b/apps/comments-ui/public/main.css
@@ -564,10 +564,58 @@ video {
   margin-top: 0.8rem;
 }
 
+.mb-4 {
+  margin-bottom: 1.6rem;
+}
+
+.mb-3 {
+  margin-bottom: 1.2rem;
+}
+
+.mb-8 {
+  margin-bottom: 3.2rem;
+}
+
+.mr-4 {
+  margin-right: 1.6rem;
+}
+
+.mr-2 {
+  margin-right: 0.8rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.4rem;
+}
+
+.flex {
+  display: flex;
+}
+
 .w-full {
   width: 100%;
 }
 
+.resize-none {
+  resize: none;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -585,19 +633,99 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.p-8 {
+  padding: 3.2rem;
+}
+
 .p-2 {
   padding: 0.8rem;
 }
 
+.p-4 {
+  padding: 1.6rem;
+}
+
+.p-3 {
+  padding: 1.2rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 .text-md {
   font-size: 1.5rem;
 }
 
+.text-xl {
+  font-size: 2rem;
+}
+
+.text-2xl {
+  font-size: 2.4rem;
+}
+
+.text-sm {
+  font-size: 1.4rem;
+}
+
+.text-lg {
+  font-size: 1.8rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-snug {
+  line-height: 1.375;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
new file mode 100644
index 0000000000..646b8cafd0
--- /dev/null
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -0,0 +1,9 @@
+function Avatar() {
+    return (
+        <div class="avatar">
+            <p>JW</p>
+        </div>
+    );
+}
+  
+export default Avatar;
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
new file mode 100644
index 0000000000..4aa0371eab
--- /dev/null
+++ b/apps/comments-ui/src/components/Comment.js
@@ -0,0 +1,31 @@
+import Avatar from './Avatar';
+import Like from './Like';
+import Reply from './Reply';
+import More from './More';
+
+function Comment() {
+    return (
+        <div className="mb-8">
+            <div className="flex justify-between items-end mb-3">
+                <div>
+                    <Avatar />
+                    <h4 className="text-lg font-sans font-semibold mb-1">Someone's Name</h4>
+                    <h6 className="text-sm text-gray-400 font-sans">Someone's Bio</h6>
+                </div>
+                <div className="text-sm text-gray-400 font-sans font-normal">
+                    2 mins ago
+                </div>
+            </div>
+            <div className="mb-4 font-sans leading-normal">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis erat vitae diam gravida accumsan vitae quis nisl. Donec luctus laoreet mauris, nec posuere turpis accumsan in. Proin sagittis magna quis vulputate tempus. Duis sagittis purus mattis enim condimentum, quis tempus est tristique.</p>
+            </div>
+            <div className="flex">
+                <Like />
+                <Reply />
+                <More />
+            </div>
+        </div>
+    );
+}
+  
+export default Comment;
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 029ed0d8a4..62fa0b0622 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import AppContext from '../AppContext';
+import TotalComments from './TotalComments';
+import Comment from './Comment';
+import Pagination from './Pagination';
 
 class Form extends React.Component {
     static contextType = AppContext;
@@ -58,25 +61,35 @@ class Form extends React.Component {
     render() {
         return (
             <form onSubmit={this.submitForm} className="comment-form">
-                <div>
-                    <figure>
-                        <div>
-                            { this.getInitials() }
-                        </div>
-                        { this.context.member ? <img src={this.context.member.avatar_image} width="60" height="60" alt="Avatar"/> : '' }
-                    </figure>
-                    <div>
-                        <div>
-                            {this.context.member ? this.context.member.name : ''}
-                        </div>
-                        <span>
-                            Add a bio
-                        </span>
-                    </div>
+                <div className="flex justify-between items-center mb-3">
+                    <h1 className="text-2xl font-sans font-medium">Members discussion</h1>
+                    <TotalComments />
+                </div>
+                <Pagination />
+                <div>
+                    <Comment />
+                    <Comment />
+                </div>
+                <div>
+                    <div>
+                        <figure>
+                            <div>
+                                { this.getInitials() }
+                            </div>
+                            { this.context.member ? <img src={this.context.member.avatar_image} width="60" height="60" alt="Avatar"/> : '' }
+                        </figure>
+                        <div>
+                            <div>
+                                {this.context.member ? this.context.member.name : ''}
+                            </div>
+                            <span>
+                                Add a bio
+                            </span>
+                        </div>
+                    </div>
+                    <textarea className="w-full resize-none rounded-md border p-2 font-sans" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
+                    <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2 text-md font-sans">Comment</button>
                 </div>
-
-                <textarea className="w-full rounded-md border p-2" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
-                <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2 text-md">Comment</button>
             </form>
         );
     }
diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
new file mode 100644
index 0000000000..5c82d4d765
--- /dev/null
+++ b/apps/comments-ui/src/components/Like.js
@@ -0,0 +1,9 @@
+function Like() {
+    return (
+        <div className="mr-4 text-gray-400 font-sans">
+            4 Likes
+        </div>
+    );
+}
+  
+export default Like;
diff --git a/apps/comments-ui/src/components/More.js b/apps/comments-ui/src/components/More.js
new file mode 100644
index 0000000000..8f84b92678
--- /dev/null
+++ b/apps/comments-ui/src/components/More.js
@@ -0,0 +1,9 @@
+function More() {
+    return (
+        <div className="text-gray-400 font-sans">
+            More
+        </div>
+    );
+}
+  
+export default More;
diff --git a/apps/comments-ui/src/components/Pagination.js b/apps/comments-ui/src/components/Pagination.js
new file mode 100644
index 0000000000..02c7bd23a1
--- /dev/null
+++ b/apps/comments-ui/src/components/Pagination.js
@@ -0,0 +1,9 @@
+function Pagination() {
+    return (
+        <div className="w-full rounded-md border p-3 mb-3 font-sans text-sm text-center">
+            Show 32 more comments
+        </div>
+    );
+}
+  
+export default Pagination;
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
new file mode 100644
index 0000000000..ffa68e647a
--- /dev/null
+++ b/apps/comments-ui/src/components/Reply.js
@@ -0,0 +1,9 @@
+function Reply() {
+    return (
+        <div className="mr-4 text-gray-400 font-sans">
+            Reply
+        </div>
+    );
+}
+  
+export default Reply;
diff --git a/apps/comments-ui/src/components/TotalComments.js b/apps/comments-ui/src/components/TotalComments.js
new file mode 100644
index 0000000000..38e40b250d
--- /dev/null
+++ b/apps/comments-ui/src/components/TotalComments.js
@@ -0,0 +1,9 @@
+function TotalComments() {
+    return (
+        <section className="font-sans text-base text-gray-400">
+            <p>99 comments</p>
+        </section>
+    );
+}
+  
+export default TotalComments;