From c9af2d7c650e49376eec28f4bf61b343a378200b Mon Sep 17 00:00:00 2001
From: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:33:48 -0500
Subject: [PATCH] improve responsive styles

---
 apps/potlock/widget/Project/About.jsx        |  1 +
 apps/potlock/widget/Project/BannerHeader.jsx |  3 ++-
 apps/potlock/widget/Project/Body.jsx         |  1 +
 apps/potlock/widget/Project/Card.jsx         |  3 ++-
 apps/potlock/widget/Project/Detail.jsx       |  1 +
 apps/potlock/widget/Project/Team.jsx         | 20 ++++++++++----------
 build/potlock/src/Project/About.jsx          |  1 +
 build/potlock/src/Project/BannerHeader.jsx   |  3 ++-
 build/potlock/src/Project/Body.jsx           |  1 +
 build/potlock/src/Project/Card.jsx           |  3 ++-
 build/potlock/src/Project/Detail.jsx         |  1 +
 build/potlock/src/Project/Team.jsx           | 20 ++++++++++----------
 12 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/apps/potlock/widget/Project/About.jsx b/apps/potlock/widget/Project/About.jsx
index 505fdb59..e8e6e0c9 100644
--- a/apps/potlock/widget/Project/About.jsx
+++ b/apps/potlock/widget/Project/About.jsx
@@ -7,6 +7,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 48px;
   // width: 100%;
+  // background: yellow;
 `;
 
 const Header = styled.div`
diff --git a/apps/potlock/widget/Project/BannerHeader.jsx b/apps/potlock/widget/Project/BannerHeader.jsx
index 0e80b826..2d56ee24 100644
--- a/apps/potlock/widget/Project/BannerHeader.jsx
+++ b/apps/potlock/widget/Project/BannerHeader.jsx
@@ -43,7 +43,7 @@ const ImageContainer = styled.div`
 
   @media screen and (max-width: 768px) {
     // transform: translateY(248px);
-    transform: ${(props) => `translateY(${props.profileImageTranslateYPx || 248}px);`}
+    transform: ${(props) => `translateY(${props.profileImageTranslateYPxMobile || 248}px);`}
 
     width: 64px;
     height: 64px;
@@ -68,6 +68,7 @@ return (
     <ImageContainer
       className="profile-picture d-inline-block"
       profileImageTranslateYPx={props.profileImageTranslateYPx}
+      profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
     >
       <Widget
         src="mob.near/widget/ProfileImage"
diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
index d2d6c425..6771e590 100644
--- a/apps/potlock/widget/Project/Body.jsx
+++ b/apps/potlock/widget/Project/Body.jsx
@@ -15,6 +15,7 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+  // background: red;
 
   // @media screen and (max-width: 768px) {
   //   width: 100%;
diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
index bb45d578..ee4fb267 100644
--- a/apps/potlock/widget/Project/Card.jsx
+++ b/apps/potlock/widget/Project/Card.jsx
@@ -21,7 +21,7 @@ const Card = styled.a`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 160px;
+  margin-top: 110px;
   padding: 16px 24px;
   gap: 16px;
   flex: 1;
@@ -115,6 +115,7 @@ return (
           projectId: id,
           profile,
           profileImageTranslateYPx: 106,
+          profileImageTranslateYPxMobile: 122,
           containerStyle: {
             paddingLeft: "16px",
           },
diff --git a/apps/potlock/widget/Project/Detail.jsx b/apps/potlock/widget/Project/Detail.jsx
index c3e7dcc9..b2589fe4 100644
--- a/apps/potlock/widget/Project/Detail.jsx
+++ b/apps/potlock/widget/Project/Detail.jsx
@@ -53,6 +53,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   // display: flex;
   // flex: 1;
+  // background: pink;
 
   // @media screen and (min-width: 768px) {
   //   // display: flex;
diff --git a/apps/potlock/widget/Project/Team.jsx b/apps/potlock/widget/Project/Team.jsx
index 4eecae38..58033594 100644
--- a/apps/potlock/widget/Project/Team.jsx
+++ b/apps/potlock/widget/Project/Team.jsx
@@ -88,16 +88,16 @@ const Col2 = styled.div`
   }
 `;
 
-props.team = [
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-];
+// props.team = [
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+// ];
 
 return (
   <Container>
diff --git a/build/potlock/src/Project/About.jsx b/build/potlock/src/Project/About.jsx
index 505fdb59..e8e6e0c9 100644
--- a/build/potlock/src/Project/About.jsx
+++ b/build/potlock/src/Project/About.jsx
@@ -7,6 +7,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 48px;
   // width: 100%;
+  // background: yellow;
 `;
 
 const Header = styled.div`
diff --git a/build/potlock/src/Project/BannerHeader.jsx b/build/potlock/src/Project/BannerHeader.jsx
index 0e80b826..2d56ee24 100644
--- a/build/potlock/src/Project/BannerHeader.jsx
+++ b/build/potlock/src/Project/BannerHeader.jsx
@@ -43,7 +43,7 @@ const ImageContainer = styled.div`
 
   @media screen and (max-width: 768px) {
     // transform: translateY(248px);
-    transform: ${(props) => `translateY(${props.profileImageTranslateYPx || 248}px);`}
+    transform: ${(props) => `translateY(${props.profileImageTranslateYPxMobile || 248}px);`}
 
     width: 64px;
     height: 64px;
@@ -68,6 +68,7 @@ return (
     <ImageContainer
       className="profile-picture d-inline-block"
       profileImageTranslateYPx={props.profileImageTranslateYPx}
+      profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
     >
       <Widget
         src="mob.near/widget/ProfileImage"
diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
index d2d6c425..6771e590 100644
--- a/build/potlock/src/Project/Body.jsx
+++ b/build/potlock/src/Project/Body.jsx
@@ -15,6 +15,7 @@ const BodyContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
+  // background: red;
 
   // @media screen and (max-width: 768px) {
   //   width: 100%;
diff --git a/build/potlock/src/Project/Card.jsx b/build/potlock/src/Project/Card.jsx
index bb45d578..ee4fb267 100644
--- a/build/potlock/src/Project/Card.jsx
+++ b/build/potlock/src/Project/Card.jsx
@@ -21,7 +21,7 @@ const Card = styled.a`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top: 160px;
+  margin-top: 110px;
   padding: 16px 24px;
   gap: 16px;
   flex: 1;
@@ -115,6 +115,7 @@ return (
           projectId: id,
           profile,
           profileImageTranslateYPx: 106,
+          profileImageTranslateYPxMobile: 122,
           containerStyle: {
             paddingLeft: "16px",
           },
diff --git a/build/potlock/src/Project/Detail.jsx b/build/potlock/src/Project/Detail.jsx
index c3e7dcc9..b2589fe4 100644
--- a/build/potlock/src/Project/Detail.jsx
+++ b/build/potlock/src/Project/Detail.jsx
@@ -53,6 +53,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   // display: flex;
   // flex: 1;
+  // background: pink;
 
   // @media screen and (min-width: 768px) {
   //   // display: flex;
diff --git a/build/potlock/src/Project/Team.jsx b/build/potlock/src/Project/Team.jsx
index 4eecae38..58033594 100644
--- a/build/potlock/src/Project/Team.jsx
+++ b/build/potlock/src/Project/Team.jsx
@@ -88,16 +88,16 @@ const Col2 = styled.div`
   }
 `;
 
-props.team = [
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-  "plugrel.near",
-  "kurodenjiro.near",
-  "lachlan.near",
-  "root.near",
-];
+// props.team = [
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+//   "plugrel.near",
+//   "kurodenjiro.near",
+//   "lachlan.near",
+//   "root.near",
+// ];
 
 return (
   <Container>