Merge pull request #722 from near/develop

weekly promotion of develop to main
near · Mar 26, 2024 · 089217b · 089217b
2 parents 134d929 + 26cf73b
commit 089217b
Show file tree

Hide file tree

Showing 17 changed files with 522 additions and 79 deletions.
diff --git a/src/ActivityPage.jsx b/src/ActivityPage.jsx
@@ -1,14 +1,13 @@
 const [selectedTab, setSelectedTab] = useState(props.tab ?? "posts");
-
-if (props.tab && props.tab !== selectedTab) {
-  setSelectedTab(props.tab);
-}
-
 const activityUrl = `/${REPL_ACCOUNT}/widget/ActivityPage`;
 
 const Wrapper = styled.div`
-  margin-top: calc(var(--body-top-padding) * -1);
-  padding-bottom: 48px;
+  padding-top: 0;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-right: 0;
+  }
 `;
 
 const Main = styled.div`
@@ -23,8 +22,8 @@ const Main = styled.div`
 
 const Section = styled.div`
   padding-top: 24px;
-  border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
-  border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
+  border-left: ${(p) => (p.$primary ? "1px solid #ECEEF0" : "none")};
+  border-right: ${(p) => (p.$primary ? "1px solid #ECEEF0" : "none")};
 
   > div {
     padding-bottom: 24px;
@@ -42,8 +41,8 @@ const Section = styled.div`
     padding-top: 0px;
     border-left: none;
     border-right: none;
-    display: ${(p) => (p.active ? "block" : "none")};
-    margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")};
+    display: ${(p) => (p.$active ? "block" : "none")};
+    padding: ${(p) => p.$smallScreenPadding};
   }
 `;
 
@@ -52,14 +51,11 @@ const Tabs = styled.div`
   height: 48px;
   background: #f8f9fa;
   border-bottom: 1px solid #eceef0;
-  margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")};
   overflow: auto;
   scroll-behavior: smooth;
 
   @media (max-width: 1024px) {
     display: flex;
-    margin-left: -12px;
-    margin-right: -12px;
 
     > * {
       flex: 1;
@@ -76,7 +72,7 @@ const TabsButton = styled("Link")`
   font-size: 12px;
   padding: 0 12px;
   position: relative;
-  color: ${(p) => (p.selected ? "#11181C" : "#687076")};
+  color: ${(p) => (p.$selected ? "#11181C" : "#687076")};
   background: none;
   border: none;
   outline: none;
@@ -89,7 +85,7 @@ const TabsButton = styled("Link")`
 
   &::after {
     content: "";
-    display: ${(p) => (p.selected ? "block" : "none")};
+    display: ${(p) => (p.$selected ? "block" : "none")};
     position: absolute;
     bottom: 0;
     left: 0;
@@ -100,44 +96,44 @@ const TabsButton = styled("Link")`
 `;
 
 return (
-  <Wrapper className="container-xl" negativeMargin={selectedTab === "posts"}>
-    <Tabs halfMargin={selectedTab === "apps"} noMargin={selectedTab === "posts"}>
+  <Wrapper className="gateway-page-container">
+    <Tabs>
       <TabsButton
         href={`${activityUrl}?tab=posts`}
-        selected={selectedTab === "posts"}
+        $selected={selectedTab === "posts"}
         onClick={() => setSelectedTab("posts")}
       >
         Posts
       </TabsButton>
 
       <TabsButton
         href={`${activityUrl}?tab=apps`}
-        selected={selectedTab === "apps"}
+        $selected={selectedTab === "apps"}
         onClick={() => setSelectedTab("apps")}
       >
         Components
       </TabsButton>
 
       <TabsButton
         href={`${activityUrl}?tab=explore`}
-        selected={selectedTab === "explore"}
+        $selected={selectedTab === "explore"}
         onClick={() => setSelectedTab("explore")}
       >
         Explore
       </TabsButton>
     </Tabs>
 
     <Main>
-      <Section active={selectedTab === "apps"}>
+      <Section $smallScreenPadding="1rem" $active={selectedTab === "apps"}>
         <Widget src="${REPL_ACCOUNT}/widget/FeaturedComponents" />
         <Widget src="${REPL_ACCOUNT}/widget/LatestComponents" />
       </Section>
 
-      <Section negativeMargin primary active={selectedTab === "posts"}>
+      <Section $smallScreenPadding="0" $primary $active={selectedTab === "posts"}>
         <Widget src={`${REPL_ACCOUNT}/widget/ActivityFeeds.DetermineActivityFeed`} />
       </Section>
 
-      <Section active={selectedTab === "explore"}>
+      <Section $smallScreenPadding="1rem" $active={selectedTab === "explore"}>
         <Widget src="${REPL_ACCOUNT}/widget/ExploreWidgets" />
       </Section>
     </Main>

diff --git a/src/ComponentDetailsPage.jsx b/src/ComponentDetailsPage.jsx
@@ -29,9 +29,9 @@ const Text = styled.p`
   margin: 0;
   font-size: 14px;
   line-height: 20px;
-  color: ${(p) => (p.bold ? "#11181C" : "#687076")};
-  font-weight: ${(p) => (p.bold ? "600" : "400")};
-  font-size: ${(p) => (p.small ? "12px" : "14px")};
+  color: ${(p) => (p.$bold ? "#11181C" : "#687076")};
+  font-weight: ${(p) => (p.$bold ? "600" : "400")};
+  font-size: ${(p) => (p.$small ? "12px" : "14px")};
 
   i {
     margin-right: 4px;
@@ -65,7 +65,7 @@ const TabsButton = styled("Link")`
   font-size: 12px;
   padding: 0 12px;
   position: relative;
-  color: ${(p) => (p.selected ? "#11181C" : "#687076")};
+  color: ${(p) => (p.$selected ? "#11181C" : "#687076")};
   background: none;
   border: none;
   outline: none;
@@ -78,7 +78,7 @@ const TabsButton = styled("Link")`
 
   &::after {
     content: "";
-    display: ${(p) => (p.selected ? "block" : "none")};
+    display: ${(p) => (p.$selected ? "block" : "none")};
     position: absolute;
     bottom: 0;
     left: 0;
@@ -111,7 +111,7 @@ const Icon = styled.i`
 if (!exists) {
   return (
     <>
-      <Text bold>Error</Text>
+      <Text $bold>Error</Text>
       <Text>Could not find: {src}</Text>
     </>
   );
@@ -122,7 +122,7 @@ if (tab && tab !== selectedTab) {
 }
 
 return (
-  <Wrapper>
+  <Wrapper className="gateway-page-container">
     <Widget
       src="${REPL_ACCOUNT}/widget/ComponentSummary"
       props={{
@@ -135,15 +135,15 @@ return (
     />
 
     <Tabs>
-      <TabsButton href={`${detailsUrl}&tab=source`} selected={selectedTab === "source"}>
+      <TabsButton href={`${detailsUrl}&tab=source`} $selected={selectedTab === "source"}>
         <Icon className="ph ph-code" />
         Source & Preview
       </TabsButton>
-      <TabsButton href={`${detailsUrl}&tab=about`} selected={selectedTab === "about"}>
+      <TabsButton href={`${detailsUrl}&tab=about`} $selected={selectedTab === "about"}>
         <Icon className="ph ph-file-text" />
         Read.me
       </TabsButton>
-      <TabsButton href={`${detailsUrl}&tab=discussion`} selected={selectedTab === "discussion"}>
+      <TabsButton href={`${detailsUrl}&tab=discussion`} $selected={selectedTab === "discussion"}>
         <Icon className="ph ph-chat-circle-text" />
         Discussion
       </TabsButton>

diff --git a/src/ComponentsPage.jsx b/src/ComponentsPage.jsx
@@ -62,8 +62,6 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 48px;
-  padding-bottom: 48px;
-  padding-top: 48px;
 `;
 
 const Header = styled.div`
@@ -99,12 +97,12 @@ const H2 = styled.h2`
 const Text = styled.p`
   margin: 0;
   line-height: 1.5rem;
-  color: ${(p) => (p.bold ? "#11181C" : "#687076")} !important;
-  font-weight: ${(p) => (p.bold ? "600" : "400")};
-  font-size: ${(p) => (p.small ? "12px" : "14px")};
-  overflow: ${(p) => (p.ellipsis ? "hidden" : "")};
-  text-overflow: ${(p) => (p.ellipsis ? "ellipsis" : "")};
-  white-space: ${(p) => (p.ellipsis ? "nowrap" : "")};
+  color: ${(p) => (p.$bold ? "#11181C" : "#687076")} !important;
+  font-weight: ${(p) => (p.$bold ? "600" : "400")};
+  font-size: ${(p) => (p.$small ? "12px" : "14px")};
+  overflow: ${(p) => (p.$ellipsis ? "hidden" : "")};
+  text-overflow: ${(p) => (p.$ellipsis ? "ellipsis" : "")};
+  white-space: ${(p) => (p.$ellipsis ? "nowrap" : "")};
   overflow-wrap: anywhere;
 
   b {
@@ -168,8 +166,8 @@ const Tabs = styled.div`
   @media (max-width: 1024px) {
     background: #f8f9fa;
     border-top: 1px solid #eceef0;
-    margin-left: -12px;
-    margin-right: -12px;
+    margin-left: calc(var(--gateway-page-container-padding-x) * -1);
+    margin-right: calc(var(--gateway-page-container-padding-x) * -1);
 
     > * {
       flex: 1;
@@ -186,7 +184,7 @@ const TabsButton = styled("Link")`
   font-size: 12px;
   padding: 0 12px;
   position: relative;
-  color: ${(p) => (p.selected ? "#11181C" : "#687076")};
+  color: ${(p) => (p.$selected ? "#11181C" : "#687076")};
   background: none;
   border: none;
   outline: none;
@@ -199,7 +197,7 @@ const TabsButton = styled("Link")`
 
   &::after {
     content: "";
-    display: ${(p) => (p.selected ? "block" : "none")};
+    display: ${(p) => (p.$selected ? "block" : "none")};
     position: absolute;
     bottom: 0;
     left: 0;
@@ -210,7 +208,7 @@ const TabsButton = styled("Link")`
 `;
 
 return (
-  <Wrapper className="container-xl">
+  <Wrapper className="gateway-page-container">
     <Header>
       {state.selectedTab === "apps" && (
         <>
@@ -241,11 +239,11 @@ return (
 
     {!state.searchResults && (
       <Tabs>
-        <TabsButton href={`${componentsUrl}?tab=all`} selected={state.selectedTab === "all"}>
+        <TabsButton href={`${componentsUrl}?tab=all`} $selected={state.selectedTab === "all"}>
           All
         </TabsButton>
 
-        <TabsButton href={`${componentsUrl}?tab=apps`} selected={state.selectedTab === "apps"}>
+        <TabsButton href={`${componentsUrl}?tab=apps`} $selected={state.selectedTab === "apps"}>
           Apps
         </TabsButton>
       </Tabs>

diff --git a/src/Entities/Template/EntityList.jsx b/src/Entities/Template/EntityList.jsx
@@ -42,8 +42,6 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 48px;
-  padding-bottom: 48px;
-  padding-top: 48px;
 `;
 
 const Header = styled.div`
@@ -118,7 +116,7 @@ const ScrollBox = styled.div`
 `;
 
 return (
-  <Wrapper className="container-xl">
+  <Wrapper className="gateway-page-container">
     <Header>
       <div className="row">
         <div className="col">