From b74f710f1f73423aec1e533c8492a955279a5f9f Mon Sep 17 00:00:00 2001
From: mannynotfound <manny@art404.com>
Date: Thu, 14 Jul 2022 10:48:52 -0400
Subject: [PATCH 1/3] community page layout improvements

---
 .../client/src/components/CommunityAbout.js   | 27 +++++--------------
 .../client/src/components/CommunityLinks.js   |  8 ++----
 .../packages/client/src/components/Title.js   |  9 +++++++
 .../packages/client/src/components/index.js   |  1 +
 .../packages/client/src/pages/Community.js    |  9 +++----
 5 files changed, 22 insertions(+), 32 deletions(-)
 create mode 100644 frontend/packages/client/src/components/Title.js

diff --git a/frontend/packages/client/src/components/CommunityAbout.js b/frontend/packages/client/src/components/CommunityAbout.js
index e121d48ce..8cdaff9a6 100644
--- a/frontend/packages/client/src/components/CommunityAbout.js
+++ b/frontend/packages/client/src/components/CommunityAbout.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import Blockies from 'react-blockies';
 import { kebabToString } from 'utils';
+import { Title } from '.';
 
 const CommunityMemberInfo = ({ name }) => {
   return (
-    <div className="is-flex is-align-items-center py-3">
+    <div className="is-flex is-align-items-center py-1">
       <div className="is-flex pr-4">
         <Blockies seed={name} size={8} scale={4} className="blockies" />
       </div>
@@ -13,14 +14,6 @@ const CommunityMemberInfo = ({ name }) => {
   );
 };
 
-const Title = ({ role, styles = {} } = {}) => {
-  return (
-    <h6 className="small-text has-text-weight-bold is-uppercase" style={styles}>
-      {role}
-    </h6>
-  );
-};
-
 const CommunityAbout = ({
   textAbout = '',
   adminMembers = [],
@@ -31,10 +24,8 @@ const CommunityAbout = ({
   return (
     <div>
       <div className="columns is-multiline mt-0">
-        <div className="column is-12">
-          <Title role={'About'} />
-        </div>
-        <div className="column is-12">
+        <div className="column is-12 pt-0">
+          <Title>About</Title>
           <p className="mb-5 has-text-grey">{textAbout}</p>
         </div>
         <div className={`column is-12`}>
@@ -47,13 +38,9 @@ const CommunityAbout = ({
           />
         </div>
         <div className="column is-12">
-          <Title
-            role={'Details'}
-            styles={{ paddingBottom: isMobile ? '24px' : '48px' }}
-          />
           <div className="columns flex-1">
             <div className="column is-6">
-              <Title role={'Strategies'} styles={{ paddingBottom: '24px' }} />
+              <Title>Strategies</Title>
               {strategies.map((item, index) => (
                 <div
                   className="is-flex is-align-items-center py-1"
@@ -84,13 +71,13 @@ const CommunityAbout = ({
         <div className="column is-12">
           <div className="columns flex-1">
             <div className="column is-6">
-              <Title role={'Admins'} styles={{ paddingBottom: '24px' }} />
+              <Title>Admin</Title>
               {adminMembers.map((item, index) => (
                 <CommunityMemberInfo name={item.name} key={`member-${index}`} />
               ))}
             </div>
             <div className="column is-6">
-              <Title role={'Authors'} styles={{ paddingBottom: '24px' }} />
+              <Title>Authors</Title>
               {authorsMembers.map((item, index) => (
                 <CommunityMemberInfo name={item.name} key={`member-${index}`} />
               ))}
diff --git a/frontend/packages/client/src/components/CommunityLinks.js b/frontend/packages/client/src/components/CommunityLinks.js
index 8105f2c2c..7235e7192 100644
--- a/frontend/packages/client/src/components/CommunityLinks.js
+++ b/frontend/packages/client/src/components/CommunityLinks.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Twitter, Discord, Website, Instagram, Github } from './Svg';
+import { Title } from '.';
 
 export default function CommunityLinks({
   instagramUrl,
@@ -10,12 +11,7 @@ export default function CommunityLinks({
 } = {}) {
   return (
     <div className="columns my-0 is-multiline">
-      <div
-        className="column is-12 has-text-weight-bold is-uppercase small-text"
-        style={{ marginBottom: '20px' }}
-      >
-        Links
-      </div>
+      <Title>Links</Title>
       {websiteUrl && (
         <a
           className="column pt-0 pb-1 is-12 is-flex is-align-items-center has-text-black"
diff --git a/frontend/packages/client/src/components/Title.js b/frontend/packages/client/src/components/Title.js
new file mode 100644
index 000000000..ca3682a53
--- /dev/null
+++ b/frontend/packages/client/src/components/Title.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Title = ({ children }) => (
+  <h6 className="small-text has-text-weight-bold is-uppercase mb-1">
+    {children}
+  </h6>
+);
+
+export default Title;
diff --git a/frontend/packages/client/src/components/index.js b/frontend/packages/client/src/components/index.js
index 9f18926a9..7c7ae2680 100644
--- a/frontend/packages/client/src/components/index.js
+++ b/frontend/packages/client/src/components/index.js
@@ -26,6 +26,7 @@ export { default as CommunityPropsAndVoting } from './Community/CommunityPropsAn
 export { default as AddButton } from './AddButton';
 export { default as ActionButton } from './ActionButton';
 export { default as Input } from './Input';
+export { default as Title } from './Title';
 export {
   PropCreateStepOne,
   PropCreateStepTwo,
diff --git a/frontend/packages/client/src/pages/Community.js b/frontend/packages/client/src/pages/Community.js
index d9171fcd2..9adea187d 100644
--- a/frontend/packages/client/src/pages/Community.js
+++ b/frontend/packages/client/src/pages/Community.js
@@ -86,7 +86,7 @@ const AboutLayout = ({
         {showEdit && <CommunitySettingsButton communityId={communityId} />}
       </div>
       <div
-        className="column is-8-desktop is-9-widescreen is-7-tablet"
+        className="column pt-0 is-8-desktop is-9-widescreen is-7-tablet"
         style={{ paddingLeft: '12%' }}
       >
         {communityPulse ? (
@@ -111,11 +111,8 @@ const MembersLayout = ({
 } = {}) => {
   return (
     <div className="columns mt-0">
-      <div
-        className="column is-3-desktop is-4-tablet is-hidden-mobile"
-        style={{ paddingTop: '28px' }}
-      >
-        {communityLinks}
+      <div className="column is-3-desktop is-4-tablet is-hidden-mobile">
+        <div style={{ paddingTop: '28px' }}>{communityLinks}</div>
       </div>
       <div
         className="column pt-0 is-9-desktop is-7-tablet"

From ef566d2c53a4e10078c020f48dcb4dca29a6e914 Mon Sep 17 00:00:00 2001
From: mannynotfound <manny@art404.com>
Date: Fri, 15 Jul 2022 09:07:38 -0400
Subject: [PATCH 2/3] allow title to accept classnames and adjust member list
 spacing

---
 frontend/packages/client/src/components/CommunityLinks.js   | 2 +-
 .../packages/client/src/components/CommunityMembersList.js  | 6 +++---
 frontend/packages/client/src/components/Title.js            | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/client/src/components/CommunityLinks.js b/frontend/packages/client/src/components/CommunityLinks.js
index 7235e7192..ae6469666 100644
--- a/frontend/packages/client/src/components/CommunityLinks.js
+++ b/frontend/packages/client/src/components/CommunityLinks.js
@@ -11,7 +11,7 @@ export default function CommunityLinks({
 } = {}) {
   return (
     <div className="columns my-0 is-multiline">
-      <Title>Links</Title>
+      <Title className="column is-12 py-0">Links</Title>
       {websiteUrl && (
         <a
           className="column pt-0 pb-1 is-12 is-flex is-align-items-center has-text-black"
diff --git a/frontend/packages/client/src/components/CommunityMembersList.js b/frontend/packages/client/src/components/CommunityMembersList.js
index a8489216b..a531eeb84 100644
--- a/frontend/packages/client/src/components/CommunityMembersList.js
+++ b/frontend/packages/client/src/components/CommunityMembersList.js
@@ -46,9 +46,9 @@ export default function CommunityMembersList({ communityId } = {}) {
   return (
     <div className="is-flex is-flex-direction-column">
       <WrapperResponsive
-        commonClasses="is-flex flex-1"
-        extraStyles={{ marginBottom: '40px', marginTop: '40px' }}
-        extraStylesMobile={{ marginBottom: '32px', marginTop: '24px' }}
+        classNames="is-flex flex-1 mb-3"
+        extraStyles={{ marginTop: '40px' }}
+        extraStylesMobile={{ marginTop: '24px' }}
       >
         <p className="has-text-weight-bold is-uppercase small-text">
           {pagination?.totalRecords ?? '...'} members
diff --git a/frontend/packages/client/src/components/Title.js b/frontend/packages/client/src/components/Title.js
index ca3682a53..5e1a2f3f0 100644
--- a/frontend/packages/client/src/components/Title.js
+++ b/frontend/packages/client/src/components/Title.js
@@ -1,7 +1,9 @@
 import React from 'react';
 
-const Title = ({ children }) => (
-  <h6 className="small-text has-text-weight-bold is-uppercase mb-1">
+const Title = ({ children, className }) => (
+  <h6
+    className={`small-text has-text-weight-bold is-uppercase mb-1 ${className}`}
+  >
     {children}
   </h6>
 );

From 414663d56d3b8540165039642449fa29537faefd Mon Sep 17 00:00:00 2001
From: Manny404 <manny@art404.com>
Date: Mon, 18 Jul 2022 13:05:44 -0400
Subject: [PATCH 3/3] initialize className with default empty string

---
 frontend/packages/client/src/components/Title.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/client/src/components/Title.js b/frontend/packages/client/src/components/Title.js
index 5e1a2f3f0..aa8f3daf6 100644
--- a/frontend/packages/client/src/components/Title.js
+++ b/frontend/packages/client/src/components/Title.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Title = ({ children, className }) => (
+const Title = ({ children, className = '' }) => (
   <h6
     className={`small-text has-text-weight-bold is-uppercase mb-1 ${className}`}
   >