Merge pull request #261 from PotLock/feat/pots-mobile-styles

PotLock · Feb 18, 2024 · a83e228 · a83e228
2 parents 308c7d7 + 0403014
commit a83e228
Show file tree

Hide file tree

Showing 9 changed files with 296 additions and 52 deletions.
diff --git a/apps/potlock/widget/Pots/Applications.jsx b/apps/potlock/widget/Pots/Applications.jsx
@@ -60,6 +60,24 @@ const ModalFooter = styled.div`
   width: 100%;
 `;
 
+const StatusText = styled.div`
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const StatusTextMobile = styled.div`
+  display: none;
+  font-size: 14px;
+  font-weight: 500;
+  @media screen and (max-width: 768px) {
+    display: flex;
+  }
+`;
+
 const APPLICATIONS_FILTERS = {
   ALL: "All applications",
   PENDING: "Pending applications",
@@ -159,6 +177,12 @@ const sortApplications = (sortVal) => {
 
 return (
   <>
+    <Widget
+      src={`${ownerId}/widget/Pots.NavOptionsMobile`}
+      props={{
+        ...props,
+      }}
+    />
     <Widget
       src={`${ownerId}/widget/Project.SearchBar`}
       props={{
@@ -183,9 +207,16 @@ return (
     ) : (
       state.filteredApplications.map((application, index) => {
         const { project_id, message, status, submitted_at, review_notes } = application;
+        console.log("status: ", status);
 
         return (
-          <Row key={index}>
+          <Row
+            key={index}
+            style={{
+              background:
+                status === "Approved" ? "#F7FDE8" : status === "Rejected" ? "#FEF3F2" : "white",
+            }}
+          >
             <Widget
               src={`${ownerId}/widget/Project.ProfileImage`}
               props={{
@@ -206,8 +237,9 @@ return (
               <div style={{ fontSize: "12px", marginTop: "8px" }}>
                 Admin notes: {review_notes.length > 0 ? review_notes : "None yet"}
               </div>
+              <StatusTextMobile>{status}</StatusTextMobile>
             </Column>
-            <div>{status}</div>
+            <StatusText>{status}</StatusText>
             {isChefOrGreater && (
               <>
                 {status !== "Approved" && (

diff --git a/apps/potlock/widget/Pots/Detail.jsx b/apps/potlock/widget/Pots/Detail.jsx
@@ -23,7 +23,7 @@ const MIN_PROPOSAL_DEPOSIT_FALLBACK = "100000000000000000000000"; // 0.1N
 
 const Wrapper = styled.div`
   margin-top: calc(-1 * var(--body-top-padding, 0));
-
+  overflow-x: hidden;
   // @media screen and (max-width: 768px) {
   //   .mb-2 {
   //     width: 64px;
@@ -45,7 +45,9 @@ const Container = styled.div`
 
   @media screen and (max-width: 768px) {
     flex-direction: column;
-    padding: 240px 16px 32px 16px;
+    //padding: 240px 16px 32px 16px;
+    width: 100%;
+    padding: 0;
   }
 `;
 

diff --git a/apps/potlock/widget/Pots/Donations.jsx b/apps/potlock/widget/Pots/Donations.jsx
@@ -155,6 +155,12 @@ const searchDonations = (searchTerm) => {
 
 return (
   <Container>
+    <Widget
+      src={`${ownerId}/widget/Pots.NavOptionsMobile`}
+      props={{
+        ...props,
+      }}
+    />
     <OuterTextContainer>
       <OuterText>all donations</OuterText>
       <DonationsCount>{state.allDonations.length}</DonationsCount>

diff --git a/apps/potlock/widget/Pots/Header.jsx b/apps/potlock/widget/Pots/Header.jsx
@@ -26,6 +26,13 @@ const Container = styled.div`
   gap: 40px;
   width: 100%;
   background: #f6f5f3;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    padding: 50px 0;
+  }
 `;
 
 const Column = styled.div`
@@ -34,6 +41,11 @@ const Column = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   width: 40%;
+  @media screen and (max-width: 768px) {
+    justify-content: start;
+    width: 100%;
+    padding: 0 20px;
+  }
 `;
 
 const Title = styled.div`

diff --git a/apps/potlock/widget/Pots/Home.jsx b/apps/potlock/widget/Pots/Home.jsx
@@ -56,6 +56,61 @@ const Row = styled.div`
   align-items: center;
   gap: 24px;
 `;
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 50px;
+`;
+
+const Title = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 20px;
+`;
+
+const Icon = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+`;
+
+const IconArrow = styled.img`
+  width: 50px;
+  height: 50px;
+`;
+
+const containerStyle = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  gap: 20px;
+  margin-top: -20px;
+  &::before,
+  &::after {
+    @include white-gradient;
+    content: "";
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+
+  &::after {
+    right: 0;
+    top: 0;
+    transform: rotateZ(180deg);
+  }
+
+  &::before {
+    left: 0;
+    top: 0;
+  }
+`;
 
 State.init({
   pots: null,
@@ -83,7 +138,7 @@ if (!state.potFactoryConfig) {
 const canDeploy =
   !state.potFactoryConfig.require_whitelist ||
   state.potFactoryConfig.whitelisted_deployers.includes(context.accountId);
-
+//console.log("props", state.pots);
 return (
   <Container>
     <HeaderContent>
@@ -114,6 +169,44 @@ return (
         />
       </Row>
     </HeaderContent>
+    {/* <Content>
+      <Title>Featured Pots</Title>
+      <Icon>
+        <IconArrow
+          src="https://img.icons8.com/ios/50/circled-left--v1.png"
+          alt="circled-left--v1"
+        />
+        <IconArrow
+          src="https://img.icons8.com/ios/50/circled-right--v1.png"
+          alt="circled-left--v1"
+        />
+      </Icon>
+    </Content>
+    <containerStyle>
+      {state.pots.map((pot) => (
+        <Widget
+          src={`${ownerId}/widget/Pots.Card`}
+          // loading={
+          //   <div
+          //     style={{
+          //       width: "320px",
+          //       height: "500px",
+          //       borderRadius: "12px",
+          //       background: "white",
+          //       boxShadow: "0px -2px 0px #464646 inset",
+          //       border: "1px solid #292929",
+          //     }}
+          //   />
+          // }
+          props={{
+            ...props,
+            potId: pot.id,
+            potConfig: state.potConfigs[pot.id],
+          }}
+        />
+      ))}
+    </containerStyle> */}
+
     {state.pots && (
       <Widget
         src={`${ownerId}/widget/Project.ListSection`}

diff --git a/apps/potlock/widget/Pots/NavOptionsMobile.jsx b/apps/potlock/widget/Pots/NavOptionsMobile.jsx
@@ -0,0 +1,69 @@
+const { navOptions } = props;
+
+const getSelectedNavOption = () => {
+  const navOption = navOptions.find((option) => option.id == props.nav);
+  return navOption ?? navOptions[0];
+};
+
+const NavOptionsContainer = styled.div`
+  align-items: center;
+  justify-content: flex-start;
+  display: none;
+  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;
+    max-width: 95vw;
+    flex-shrink: 0; // Prevent the container from shrinking
+  }
+`;
+
+const NavOption = styled.a`
+  position: relative;
+  font-size: 14px;
+  padding: 8px 16px;
+  font-weight: ${(props) => (props.selected ? 600 : 400)};
+  color: ${(props) => (props.selected ? "#DD3345" : props.disabled ? "lightgray" : "#7B7B7B")};
+
+  &:focus,
+  &:active {
+    text-decoration: none; /* This removes the underline */
+  }
+
+  &::after {
+    content: "";
+    display: ${(props) => (props.selected ? "block" : "none")};
+    position: absolute;
+    bottom: 0;
+    left: 50%; // Center the underline
+    transform: translateX(-50%); // Center the underline
+    width: 16px; // Width of the underline
+    height: 2px; // Thickness of the underline
+    background-color: #dd3345;
+  }
+`;
+
+return (
+  <NavOptionsContainer>
+    {navOptions.map((option) => {
+      const selected = option.id == getSelectedNavOption().id;
+      return option.disabled ? (
+        <NavOption selected={selected} disabled={option.disabled}>
+          {option.label}
+        </NavOption>
+      ) : (
+        <NavOption
+          selected={selected}
+          disabled={option.disabled}
+          href={props.hrefWithEnv(`?tab=pot&potId=${props.potId}&nav=${option.id}`)}
+        >
+          {option.label}
+        </NavOption>
+      );
+    })}
+  </NavOptionsContainer>
+);
diff --git a/apps/potlock/widget/Pots/Projects.jsx b/apps/potlock/widget/Pots/Projects.jsx
@@ -10,39 +10,49 @@ const now = Date.now();
 const publicRoundOpen = now >= public_round_start_ms && now < public_round_end_ms;
 
 return (
-  <Widget
-    src={`${ownerId}/widget/Project.ListSection`}
-    props={{
-      ...props,
-      maxCols: 2,
-      items: projects,
-      renderItem: (project) => {
-        return (
-          <Widget
-            src={`${ownerId}/widget/Project.Card`}
-            loading={
-              <div
-                style={{
-                  width: "320px",
-                  height: "500px",
-                  borderRadius: "12px",
-                  background: "white",
-                  boxShadow: "0px -2px 0px #464646 inset",
-                  border: "1px solid #292929",
-                }}
-              />
-            }
-            props={{
-              ...props,
-              potId,
-              projectId: project.project_id,
-              allowDonate:
-                sybilRequirementMet && publicRoundOpen && project.project_id !== context.accountId,
-              requireVerification: !sybilRequirementMet,
-            }}
-          />
-        );
-      },
-    }}
-  />
+  <>
+    <Widget
+      src={`${ownerId}/widget/Pots.NavOptionsMobile`}
+      props={{
+        ...props,
+      }}
+    />
+    <Widget
+      src={`${ownerId}/widget/Project.ListSection`}
+      props={{
+        ...props,
+        maxCols: 2,
+        items: projects,
+        renderItem: (project) => {
+          return (
+            <Widget
+              src={`${ownerId}/widget/Project.Card`}
+              loading={
+                <div
+                  style={{
+                    width: "320px",
+                    height: "500px",
+                    borderRadius: "12px",
+                    background: "white",
+                    boxShadow: "0px -2px 0px #464646 inset",
+                    border: "1px solid #292929",
+                  }}
+                />
+              }
+              props={{
+                ...props,
+                potId,
+                projectId: project.project_id,
+                allowDonate:
+                  sybilRequirementMet &&
+                  publicRoundOpen &&
+                  project.project_id !== context.accountId,
+                requireVerification: !sybilRequirementMet,
+              }}
+            />
+          );
+        },
+      }}
+    />
+  </>
 );