community page layout improvements

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}`} />
               ))}

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 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"

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

frontend/packages/client/src/components/Title.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Title = ({ children, className = '' }) => (
+  <h6
+    className={`small-text has-text-weight-bold is-uppercase mb-1 ${className}`}
+  >
+    {children}
+  </h6>
+);
+
+export default Title;

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,

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"