fix mobile styles incl Edit Profile button

PotLock · Nov 7, 2023 · a950d51 · a950d51
1 parent 4f193bf
commit a950d51
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;