Add light mode for page

NEARBuilders · Mar 15, 2024 · 28676cd · 28676cd
1 parent 60e72ea
commit 28676cd
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 51 deletions.
diff --git a/apps/builddao/widget/components/Hashtag.jsx b/apps/builddao/widget/components/Hashtag.jsx
@@ -1,3 +1,5 @@
+const theme = props.theme;
+
 const StyledHashtag = styled.span`
   display: flex;
   padding: 4px 8px;
@@ -8,21 +10,33 @@ const StyledHashtag = styled.span`
   flex-wrap: wrap;
 
   border-radius: 100px;
-  border: 1px solid var(--Yellow-Dark-6, #493c00);
-  background: var(--Yellow-Dark-2, #221a00);
+
+  ${theme === "dark"
+    ? `
+    border: 1px solid var(--Yellow-Dark-6, #493c00);
+    background: var(--Yellow-Dark-2, #221a00);
+  `
+    : `
+    border: 1px solid var(--Yellow-Light-6, #F9E68C);
+    background: var(--Yellow-Light-2, #FFFCE8);
+  `};
 
   /* Pixel/Shadow/Light/Post */
   box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
 
   /* Body/10px */
-  color: var(--Yellow-Dark-11, #f0c000);
+  ${theme === "dark"
+    ? "color: var(--Yellow-Dark-11, #f0c000);"
+    : "color: var(--Yellow-Light-11, #946800);"}
   font-size: 16px;
   font-weight: 500;
   font-style: normal;
   line-height: normal;
 
   .tag {
-    color: var(--Yellow-Dark-11, #f0c000);
+    ${theme === "dark"
+      ? "color: var(--Yellow-Dark-11, #f0c000);"
+      : "color: var(--Yellow-Light-11, #946800);"}
   }
 `;
 const Hashtag = ({ children }) => {

diff --git a/apps/builddao/widget/components/Post.jsx b/apps/builddao/widget/components/Post.jsx
@@ -300,8 +300,10 @@ const contentWidget = (
   </>
 );
 
+const Root = styled.div``;
+
 return (
-  <>
+  <Root>
     <StyledPost
       key={`Post-${item.path}-${item.blockHeight}`}
       style={{ width: props.width ? props.width : "auto" }}
@@ -446,5 +448,5 @@ return (
             )}
       </Wrapper>
     </StyledPost>
-  </>
+  </Root>
 );
diff --git a/apps/builddao/widget/components/profile/AccountFeed.jsx b/apps/builddao/widget/components/profile/AccountFeed.jsx
@@ -5,6 +5,7 @@ const { Post } = VM.require("buildhub.near/widget/components") || {
 const indexKey = props.indexKey ?? "main";
 const groupId = props.groupId;
 const permissions = props.permissions;
+const theme = props.theme;
 
 const profile = Social.getr(`${props.accounts}/profile`);
 
@@ -73,6 +74,7 @@ const renderPost = (a) => {
         permissions
         noBorder={true}
         width="100%"
+        theme={theme}
       />
     </div>
   );
@@ -165,6 +167,7 @@ const renderRepost = (a) => {
         permissions
         noBorder={true}
         width="100%"
+        theme={theme}
       />
     </div>
   );
@@ -184,11 +187,17 @@ return (
           text: description,
         }}
         noBorder={true}
+        theme={theme}
       />
     )}
     <Widget
       src="mob.near/widget/MergedIndexFeed"
-      props={{ index, renderItem, filter: props.filter, threshold: 800 }}
+      props={{
+        index,
+        renderItem,
+        filter: props.filter,
+        threshold: 800,
+      }}
     />
   </>
 );
diff --git a/apps/builddao/widget/components/profile/FollowStats.jsx b/apps/builddao/widget/components/profile/FollowStats.jsx
@@ -19,6 +19,8 @@ const numFollowing = following
   : null;
 const numFollowers = followers ? Object.keys(followers || {}).length : null;
 
+const theme = props.theme;
+
 return (
   <div>
     <div className="d-flex flex-row align-items-center">
@@ -27,29 +29,45 @@ return (
           {numFollowing !== null ? (
             <span
               className="fw-bolder"
-              style={{ color: "var(--font-color, #fff)" }}
+              style={{
+                color:
+                  theme === "dark"
+                    ? "var(--White-100, #fff)"
+                    : "var(--Black-100, #000)",
+              }}
             >
               {numFollowing}
             </span>
           ) : (
             "?"
           )}{" "}
-          <span style={{ color: "var(--White-50, #B0B0B0)" }}>Following</span>
+          <span
+            style={{
+              color: theme === "dark" ? "#bbbbbb" : "#737373",
+            }}
+          >
+            Following
+          </span>
         </span>
       </div>
       <div style={{ fontSize: 16 }}>
         <span>
           {numFollowers !== null ? (
             <span
-              style={{ color: "var(--font-color, #fff)" }}
+              style={{
+                color:
+                  theme === "dark"
+                    ? "var(--White-100, #fff)"
+                    : "var(--Black-100, #000)",
+              }}
               className="fw-bolder"
             >
               {numFollowers}
             </span>
           ) : (
             "?"
           )}{" "}
-          <span style={{ color: "var(--White-50, #B0B0B0)" }}>
+          <span style={{ color: theme === "dark" ? "#bbbbbb" : "#737373" }}>
             Follower{numFollowers !== 1 && "s"}
           </span>
         </span>

diff --git a/apps/builddao/widget/components/profile/ProfileInfo.jsx b/apps/builddao/widget/components/profile/ProfileInfo.jsx
@@ -10,6 +10,8 @@ if (!profile) {
   return "";
 }
 
+const theme = props.theme;
+
 const CopyIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -47,6 +49,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
+  z-index: 10;
 
   .background-image-section {
     img {
@@ -62,7 +65,8 @@ const Container = styled.div`
       width: 140px !important;
       height: 140px !important;
       border-radius: 100%;
-      border: 3px solid var(--Gray-Dark-1, #161616);
+      border: 3px solid
+        ${theme === "dark" ? "var(--Gray-Dark-1, #161616)" : "#fff"};
       image-rendering: pixelated;
       object-fit: cover;
     }
@@ -71,11 +75,12 @@ const Container = styled.div`
   .account-info-section {
     display: flex;
     align-items: center;
-    gap: 16px;
     flex-direction: column;
 
     h3 {
-      color: var(--White-A-12, rgba(255, 255, 255, 0.92));
+      color: ${theme === "dark"
+        ? "var(--White-A-12, rgba(255, 255, 255, 0.92))"
+        : "var(--Default-Black, #0D0D0E)"};
 
       font-family: InterVariable, sans-serif;
       font-size: 40px;
@@ -95,7 +100,9 @@ const Container = styled.div`
       gap: 4px;
       max-width: max-content;
 
-      color: var(--Gray-Dark-11, #a0a0a0);
+      color: ${theme === "dark"
+        ? "var(--Gray-Dark-11, #a0a0a0)"
+        : "var(--Gray-Light-11, #6F6F6F)"};
 
       /* Body 16px/Regular */
       font-family: InterVariable, sans-serif;
@@ -112,31 +119,12 @@ const Container = styled.div`
     display: flex;
     flex-direction: column;
     gap: 8px;
-
-    h3 {
-      color: var(--White-100, #fff);
-      /* Body/10px */
-      font-size: 10px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      margin: 0;
-    }
   }
+
   .badge-section {
     display: flex;
     flex-direction: column;
     gap: 8px;
-
-    h3 {
-      color: var(--White-100, #fff);
-      /* Body/10px */
-      font-size: 10px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      margin: 0;
-    }
   }
 `;
 
@@ -148,14 +136,18 @@ const TwitterIcon = () => (
     width="24"
     height="24"
     viewBox="0 0 50 50"
-    fill="white"
+    fill={
+      theme === "dark" ? "var(--White-100, #fff)" : "var(--Black-100, #000)"
+    }
   >
     <path d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"></path>
   </svg>
 );
 
 const LinkButton = styled.a`
-  color: #fff;
+  color: ${theme === "dark"
+    ? "var(--White-100, #fff)"
+    : "var(--Black-100, #000)"};
   font-size: 24px;
 `;
 
@@ -222,7 +214,9 @@ const Badges = ({ tags }) => {
     <>
       <div className="d-flex flex-align-center flex-wrap" style={{ gap: 12 }}>
         {tags.map((it) => (
-          <Hashtag key={it}>{it}</Hashtag>
+          <Hashtag key={it} theme={theme}>
+            {it}
+          </Hashtag>
         ))}
       </div>
     </>
@@ -304,15 +298,18 @@ const InfoSection = () => {
           <Widget
             src="buildhub.near/widget/components.profile.FollowStats"
             loading=""
-            props={{ accountId }}
+            props={{ accountId, theme }}
           />
         </div>
         {context.accountId === accountId && (
-          <Button variant="outline" onClick={() => setEditMode(true)}>
+          <Button
+            style={{ color: theme !== "dark" ? "white" : null }}
+            onClick={() => setEditMode(true)}
+          >
             <i className="bi bi-pencil me-1"></i>Edit Profile
           </Button>
         )}
-        <div className="badge-section">
+        <div className="badge-section mt-3">
           <Badges tags={profile.tags} />
         </div>
       </div>

diff --git a/apps/builddao/widget/components/profile/ProfileTabs.jsx b/apps/builddao/widget/components/profile/ProfileTabs.jsx
@@ -21,14 +21,24 @@ const pills = [
   { id: "widget", title: "Widgets" },
 ];
 
+const theme = props.theme;
+
 const Nav = styled.div`
   .nav-pills {
-    background: var(--bg-1, #000000);
+    background: ${theme === "dark"
+      ? "var(--bg-1, #000000)"
+      : "var(--White-100, #fff)"};
     font-weight: 500;
     --bs-nav-pills-border-radius: 0;
-    --bs-nav-link-color: var(--font-color, #fff);
-    --bs-nav-pills-link-active-color: var(--font-color, #fff);
-    --bs-nav-pills-link-active-bg: var(--bg-1, #000000);
+    --bs-nav-link-color: ${theme === "dark"
+      ? "var(--White-100, #fff)"
+      : "var(--Black-100, #000)"};
+    --bs-nav-pills-link-active-color: ${theme === "dark"
+      ? "var(--White-100, #fff)"
+      : "var(--Black-100, #000)"};
+    --bs-nav-pills-link-active-bg: ${theme === "dark"
+      ? "var(--bg-1, #000000)"
+      : "var(--White-100, #fff)"};
     --bs-nav-link-padding-y: 0.75rem;
     border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
     padding-top: 3px;
@@ -38,7 +48,9 @@ const Nav = styled.div`
   }
 
   .nav-item:not(:has(> .disabled)):hover {
-    background: rgba(13, 110, 253, 0.15);
+    background: ${theme === "dark"
+      ? "rgba(255, 255, 255, 0.2)"
+      : "rgba(0, 0, 0, 0.2)"};
   }
 `;
 
@@ -102,7 +114,7 @@ return (
             key="feed"
             loading=""
             src="buildhub.near/widget/components.profile.AccountFeed"
-            props={{ accounts: [accountId] }}
+            props={{ accounts: [accountId], theme }}
           />
         </div>
       </div>

diff --git a/apps/builddao/widget/profile/Modern.jsx b/apps/builddao/widget/profile/Modern.jsx
@@ -15,12 +15,13 @@ const ProfileContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background: #000;
+  background: ${theme === "dark" ? "#000" : "#fff"};
+  color: ${theme === "dark" ? "#fff" : "#000"};
   overflow: hidden;
 `;
 
-const fullGradient = props.fullGradient ?? false;
-const tabGradient = props.tabGradient ?? true;
+const fullGradient = props.fullGradient ?? true;
+const tabGradient = props.tabGradient ?? false;
 
 const LeftGradientFull = () => {
   const Blur = styled.div`
@@ -65,14 +66,15 @@ return (
   <ProfileContainer className="container-xl position-relative">
     <Widget
       src="buildhub.near/widget/components.profile.ProfileInfo"
-      props={{ accountId }}
+      props={{ accountId, theme }}
     />
     <div className="overflow-hidden position-relative">
       <Widget
         src="buildhub.near/widget/components.profile.ProfileTabs"
         props={{
           accountId,
           profile,
+          theme,
         }}
       />
       {tabGradient && (