From a950d515b64f822fcd82518e74caa22ffd1617bb Mon Sep 17 00:00:00 2001
From: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:23:43 -0500
Subject: [PATCH] fix mobile styles incl Edit Profile button

---
 apps/potlock/widget/Project/About.jsx            | 14 ++++++++++++--
 apps/potlock/widget/Project/Actions.jsx          |  3 ++-
 apps/potlock/widget/Project/Body.jsx             | 15 +++++++++++----
 apps/potlock/widget/Project/NavOptionsMobile.jsx |  2 ++
 build/potlock/src/Project/About.jsx              | 14 ++++++++++++--
 build/potlock/src/Project/Actions.jsx            |  3 ++-
 build/potlock/src/Project/Body.jsx               | 15 +++++++++++----
 build/potlock/src/Project/NavOptionsMobile.jsx   |  2 ++
 8 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/apps/potlock/widget/Project/About.jsx b/apps/potlock/widget/Project/About.jsx
index e8e6e0c9..0aa3cba2 100644
--- a/apps/potlock/widget/Project/About.jsx
+++ b/apps/potlock/widget/Project/About.jsx
@@ -17,6 +17,14 @@ const Header = styled.div`
   font-weight: 400;
 `;
 
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 24px;
+`;
+
 const DonationsInfo = () => (
   <Widget
     src={`${ownerId}/widget/Project.DonationsInfo`}
@@ -49,8 +57,10 @@ const Team = () => (
 
 return (
   <Container>
-    <Header>About {name}</Header>
-    <DonationsInfo />
+    <HeaderContainer>
+      <Header>About {name}</Header>
+      <DonationsInfo />
+    </HeaderContainer>
     <About />
     <Team />
   </Container>
diff --git a/apps/potlock/widget/Project/Actions.jsx b/apps/potlock/widget/Project/Actions.jsx
index 8ebc44bc..8f5003c5 100644
--- a/apps/potlock/widget/Project/Actions.jsx
+++ b/apps/potlock/widget/Project/Actions.jsx
@@ -4,8 +4,9 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between';
+  justify-content: space-between;
   width: 100%;
+  flex: 1;
 
   @media screen and (max-width: 768px) {
     flex-direction: column;
diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
index 989cbf35..f734a227 100644
--- a/apps/potlock/widget/Project/Body.jsx
+++ b/apps/potlock/widget/Project/Body.jsx
@@ -14,7 +14,7 @@ const BodyContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  gap: 48px;
+  gap: 16px;
 
   @media screen and (max-width: 768px) {
     max-width: 90vw;
@@ -48,7 +48,7 @@ const AccountInfoContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 `;
 
 const AccountId = styled.div`
@@ -80,6 +80,13 @@ const ShareIconContainer = styled.svg`
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  // gap: 16px;
+  width: 100%;
+`;
+
 const ShareIcon = (
   <ShareIconContainer>
     <svg
@@ -112,7 +119,7 @@ const Actions = () => (
 
 return (
   <BodyContainer>
-    <div>
+    <Header>
       <NameContainer>
         <Name>{profile.name}</Name>
         {props.projectId === context.accountId && (
@@ -145,7 +152,7 @@ return (
           tags,
         }}
       />
-    </div>
+    </Header>
     <Actions />
     <Widget
       src={`${ownerId}/widget/Project.NavOptionsMobile`}
diff --git a/apps/potlock/widget/Project/NavOptionsMobile.jsx b/apps/potlock/widget/Project/NavOptionsMobile.jsx
index 288a24e6..562c5d43 100644
--- a/apps/potlock/widget/Project/NavOptionsMobile.jsx
+++ b/apps/potlock/widget/Project/NavOptionsMobile.jsx
@@ -12,6 +12,8 @@ const NavOptionsContainer = styled.div`
   overflow-x: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch; // For momentum scroll on iOS devices
+  border-bottom: 1px #dbdbdb solid;
+  margin-bottom: 16px;
 
   @media screen and (max-width: 768px) {
     display: flex;
diff --git a/build/potlock/src/Project/About.jsx b/build/potlock/src/Project/About.jsx
index e8e6e0c9..0aa3cba2 100644
--- a/build/potlock/src/Project/About.jsx
+++ b/build/potlock/src/Project/About.jsx
@@ -17,6 +17,14 @@ const Header = styled.div`
   font-weight: 400;
 `;
 
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 24px;
+`;
+
 const DonationsInfo = () => (
   <Widget
     src={`${ownerId}/widget/Project.DonationsInfo`}
@@ -49,8 +57,10 @@ const Team = () => (
 
 return (
   <Container>
-    <Header>About {name}</Header>
-    <DonationsInfo />
+    <HeaderContainer>
+      <Header>About {name}</Header>
+      <DonationsInfo />
+    </HeaderContainer>
     <About />
     <Team />
   </Container>
diff --git a/build/potlock/src/Project/Actions.jsx b/build/potlock/src/Project/Actions.jsx
index 8ebc44bc..8f5003c5 100644
--- a/build/potlock/src/Project/Actions.jsx
+++ b/build/potlock/src/Project/Actions.jsx
@@ -4,8 +4,9 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between';
+  justify-content: space-between;
   width: 100%;
+  flex: 1;
 
   @media screen and (max-width: 768px) {
     flex-direction: column;
diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
index 989cbf35..f734a227 100644
--- a/build/potlock/src/Project/Body.jsx
+++ b/build/potlock/src/Project/Body.jsx
@@ -14,7 +14,7 @@ const BodyContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  gap: 48px;
+  gap: 16px;
 
   @media screen and (max-width: 768px) {
     max-width: 90vw;
@@ -48,7 +48,7 @@ const AccountInfoContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: 32px;
+  margin-bottom: 16px;
 `;
 
 const AccountId = styled.div`
@@ -80,6 +80,13 @@ const ShareIconContainer = styled.svg`
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  // gap: 16px;
+  width: 100%;
+`;
+
 const ShareIcon = (
   <ShareIconContainer>
     <svg
@@ -112,7 +119,7 @@ const Actions = () => (
 
 return (
   <BodyContainer>
-    <div>
+    <Header>
       <NameContainer>
         <Name>{profile.name}</Name>
         {props.projectId === context.accountId && (
@@ -145,7 +152,7 @@ return (
           tags,
         }}
       />
-    </div>
+    </Header>
     <Actions />
     <Widget
       src={`${ownerId}/widget/Project.NavOptionsMobile`}
diff --git a/build/potlock/src/Project/NavOptionsMobile.jsx b/build/potlock/src/Project/NavOptionsMobile.jsx
index 288a24e6..562c5d43 100644
--- a/build/potlock/src/Project/NavOptionsMobile.jsx
+++ b/build/potlock/src/Project/NavOptionsMobile.jsx
@@ -12,6 +12,8 @@ const NavOptionsContainer = styled.div`
   overflow-x: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch; // For momentum scroll on iOS devices
+  border-bottom: 1px #dbdbdb solid;
+  margin-bottom: 16px;
 
   @media screen and (max-width: 768px) {
     display: flex;