UI additionals 8 (#92)

* UI-Additionals-8 * refactor * How-does-it-work page changing * Refactor-2 * Refactor-3 * Refactor-3 * Refactor-4 * Refactor-5 --------- Co-authored-by: Bálint Ujvári <[email protected]>
Solar-Punk-Ltd · Nov 8, 2024 · 7da6cb0 · 7da6cb0
1 parent 05c9530
commit 7da6cb0
Show file tree

Hide file tree

Showing 16 changed files with 843 additions and 196 deletions.
diff --git a/public/subscription.html b/public/subscription.html
diff --git a/src/MainRouter.tsx b/src/MainRouter.tsx
@@ -199,7 +199,9 @@ const MainRouter = (): ReactElement => {
     if (isFirstRender) {
       setIsFirstRender(false);
     } else {
-      setShowGamification(true);
+      if (points === 1 || points === 5 || points === 10) {
+        setShowGamification(true);
+      }
     }
   }, [points]);
 
@@ -315,7 +317,9 @@ const MainRouter = (): ReactElement => {
       const orderedRooms = roomsWithUserCount.sort(
         (a, b) => b.userCount! - a.userCount!
       );
-      const withoutLobby = orderedRooms.filter((room) => CATEGORY_NAMES_TO_ID_MAP.get(room.topic) !== LOBBY_TITLE);
+      const withoutLobby = orderedRooms.filter(
+        (room) => CATEGORY_NAMES_TO_ID_MAP.get(room.topic) !== LOBBY_TITLE
+      );
       setOrderedList(withoutLobby);
     }
 
@@ -448,15 +452,20 @@ const MainRouter = (): ReactElement => {
         <Route path={ROUTES.WELCOME3} element={<Welcome3 />} />
         <Route path={ROUTES.WELCOME4} element={<Welcome4 />} />
         <Route path={ROUTES.PROFILECREATION} element={<ProfileCreation />} />
-        <Route path={ROUTES.HOME} element={<HomePage isLoaded={false} />} />
+        <Route path={ROUTES.HOME} element={<HomePage />} />
         <Route
           path={ROUTES.HOMEWITHGAMIFICATION}
-          element={<HomePage isLoaded={false} withGamification={true} />}
+          element={<HomePage withGamification={true} />}
         />
         <Route path={ROUTES.PROFILE} element={<Profile />} />
         <Route path={ROUTES.AGENDA} element={<Agenda />} />
         <Route path={ROUTES.SPACES} element={<SpacesPage />} />
-        <Route path={ROUTES.HOWDOESITWORK} element={<HowDoesItWork />} />
+        <Route
+          path={ROUTES.HOWDOESITWORK}
+          element={
+            <HowDoesItWork toText={prevLocation ? prevLocation : undefined} />
+          }
+        />
         <Route path={ROUTES.CLAIMREWARD} element={<ClaimRewardPage />} />
         <Route
           path={`${ROUTES.TALKS}/:talkId`}

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -14,7 +14,7 @@ const Settings: React.FC = () => {
       {isOpen ? (
         <div className="settings__open__content">
           <Link to={ROUTES.CONTENTFILTER}>
-            <div className="settings__open__content__item">Content Filter</div>
+            <div className="settings__open__content__item">USCVS setting</div>
           </Link>
           <hr className="settings__open__content__item__divider" />
           <Link to={ROUTES.TERMSANDCONDITIONS}>

diff --git a/src/components/icons/EditIcon/EditIcon.scss b/src/components/icons/EditIcon/EditIcon.scss
@@ -0,0 +1,7 @@
+.edit-icon {
+  display: flex;
+  height: 40px;
+  width: 40px;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/icons/EditIcon/EditIcon.tsx b/src/components/icons/EditIcon/EditIcon.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "./EditIcon.scss";
 
 interface EditIconProps {
   color?: string;
@@ -7,7 +8,7 @@ interface EditIconProps {
 
 const EditIcon: React.FC<EditIconProps> = ({ color, onClick }) => {
   return (
-    <div onClick={onClick} style={{ display: "flex" }}>
+    <div onClick={onClick} className="edit-icon">
       <svg
         width="17"
         height="16"

diff --git a/src/components/icons/EnterIcon/EnterIcon.scss b/src/components/icons/EnterIcon/EnterIcon.scss
@@ -0,0 +1,7 @@
+.enter-icon {
+  display: flex;
+  height: 40px;
+  width: 40px;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/icons/EnterIcon/EnterIcon.tsx b/src/components/icons/EnterIcon/EnterIcon.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "./EnterIcon.scss";
 
 interface EnterIconProps {
   color?: string;
@@ -7,7 +8,7 @@ interface EnterIconProps {
 
 const EnterIcon: React.FC<EnterIconProps> = ({ color, onClick }) => {
   return (
-    <div onClick={onClick} style={{ display: "flex" }}>
+    <div onClick={onClick} className="enter-icon">
       <svg
         width="25"
         height="24"

diff --git a/src/pages/ClaimRewardPage/ClaimRevardPage.tsx b/src/pages/ClaimRewardPage/ClaimRevardPage.tsx
@@ -8,7 +8,6 @@ import { useNavigate } from "react-router-dom";
 import { GIFTCODE_KEY, ROUTES } from "../../utils/constants";
 import { ethers } from "ethers";
 import { getPrivateKey, isUserRegistered } from "../../utils/helpers";
-import ClaimRewardExplanation from "../../components/ClaimRewardExplanation/ClaimRewardExplanation";
 
 const ClaimRewardPage: React.FC = () => {
   const { username } = useGlobalState();
@@ -29,7 +28,7 @@ const ClaimRewardPage: React.FC = () => {
             console.log("nonce fetched", data);
             if (isUserRegistered()) {
               const wallet = new ethers.Wallet(getPrivateKey());
-              let flatSig = await wallet.signMessage(data);
+              const flatSig = await wallet.signMessage(data);
               try {
                 fetch(process.env.BACKEND_API_URL + "/redeem", {
                   method: "POST",
@@ -46,8 +45,9 @@ const ClaimRewardPage: React.FC = () => {
                   resp.text().then((data) => {
                     if (inputRef.current) {
                       inputRef.current.value = data;
-                      if (resp.status === 200)
+                      if (resp.status === 200) {
                         localStorage.setItem(GIFTCODE_KEY, data);
+                      }
                     }
                   })
                 );
@@ -83,43 +83,57 @@ const ClaimRewardPage: React.FC = () => {
           Claim{" "}
           <span className="claim-reward__text-emphasize">Your&nbsp;Reward</span>
         </div>
-        <div className="claim-reward__main-content__content">
-          <div className="claim-reward__text-box">
-            This code is personalised for you only. Please save this code and
-            use it as described on the previous screen.
-          </div>
-          <div className="claim-reward__code">
-            <div className="claim-reward__code__header">Giftcode</div>
-            <div className="claim-reward__code__input-wrapper">
-              <input
-                type="text"
-                ref={inputRef}
-                className="claim-reward__code__input"
-              />
-              <CopyIcon onClick={handleCopyClick} />
+        <div className="claim-reward__main-content-wrapper">
+          <div className="claim-reward__main-content__content">
+            <div className="claim-reward__text-box">
+              This code is personalised for you only. Please save this code and
+              use it as described on the previous screen.
+            </div>
+            <div className="claim-reward__code">
+              <div className="claim-reward__code__header">Giftcode</div>
+              <div className="claim-reward__code__input-wrapper">
+                <input
+                  type="text"
+                  ref={inputRef}
+                  className="claim-reward__code__input"
+                />
+                <CopyIcon onClick={handleCopyClick} />
+              </div>
+            </div>
+            <div className="claim-reward__text-box">
+              You will find this information in your profile from now on.
+            </div>
+            <div className="claim-reward__text-box">
+              Available codes are limited. In case there are no more codes
+              available Swarm is still awesome. Check out the magic{" "}
+              <a
+                href="https://github.com/ethersphere/awesome-swarm"
+                className="claim-reward__text-box__link"
+              >
+                here!
+              </a>
             </div>
           </div>
-          <div className="claim-reward__text-box">
-            You will find this information in your profile from now on.
+          <div className="claim-reward__bottom-buttons">
+            <WelcomeButton
+              type="white"
+              onClick={() => {
+                navigate(ROUTES.HOME);
+              }}
+            >
+              Back
+            </WelcomeButton>
+            <WelcomeButton
+              type="orange"
+              onClick={() =>
+                (window.location.href = `${window.location.origin}/DevconAgora/public/subscription.html`)
+              }
+            >
+              Keep in touch
+            </WelcomeButton>
           </div>
         </div>
       </div>
-      <div className="claim-reward__bottom-buttons">
-        <WelcomeButton
-          type="white"
-          onClick={() => {
-            navigate(ROUTES.HOME);
-          }}
-        >
-          Back
-        </WelcomeButton>
-        <WelcomeButton
-          type="orange"
-          onClick={() => navigate(ROUTES.STAYUPDATED)}
-        >
-          Keep in touch
-        </WelcomeButton>
-      </div>
     </div>
   );
 };

diff --git a/src/pages/ClaimRewardPage/ClaimRewardPage.scss b/src/pages/ClaimRewardPage/ClaimRewardPage.scss
@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   gap: 60px;
+  height: 100%;
 }
 .claim-reward__main-content__header {
   font-family: "Poppins", sans-serif;
@@ -23,6 +24,14 @@
   text-align: center;
 }
 
+.claim-reward__main-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  height: 100%;
+  z-index: 2;
+}
+
 .claim-reward__text-emphasize {
   color: #ff8a50;
 }
@@ -31,6 +40,7 @@
   display: flex;
   flex-direction: column;
   gap: 30px;
+  padding-bottom: 30px;
 }
 
 .claim-reward__text-box {
@@ -44,6 +54,21 @@
   padding: 8px;
   line-height: 30px;
 }
+
+.claim-reward__text-box__link {
+  color: #ff8a50;
+  text-decoration: underline;
+}
+
+.claim-reward__text-box__link:hover {
+  color: #ff8a50;
+  text-decoration: underline;
+}
+
+.claim-reward__text-box__link:visited {
+  color: #ff8a50;
+  text-decoration: underline;
+}
 .claim-reward__background {
   position: absolute;
   left: 0px;

diff --git a/src/pages/EmailSend/EmailSend.tsx b/src/pages/EmailSend/EmailSend.tsx
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -1,28 +1,25 @@
 import React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useGlobalState } from "../../GlobalStateContext";
 import "./HomePage.scss";
 import DevConMainBox from "../../components/DevConMainBox/DevConMainBox";
 import RecentSessions from "../../components/RecentSessions/RecentSessions";
 import NavigationFooter from "../../components/NavigationFooter/NavigationFooter";
 import HomeHeader from "../../components/HomeHeader/HomeHeader";
 import HomeBackground from "../../assets/welcome-glass-effect.png";
-import HomeLoading from "../../components/HomeLoading/HomeLoading";
 import Spaces from "../../components/Spaces/Spaces";
 import Chat from "../Chat/Chat";
 import { BatchId } from "@ethersphere/bee-js";
 import { getPrivateKey, getResourceId } from "../../utils/helpers";
 import { LOBBY_TITLE, CATEGORY_NAMES_TO_ID_MAP } from "../../utils/constants";
 
 interface HomePageProps {
-  isLoaded?: boolean;
   withGamification?: boolean;
 }
 
-const HomePage: React.FC<HomePageProps> = ({ isLoaded, withGamification }) => {
+const HomePage: React.FC<HomePageProps> = ({ withGamification }) => {
   const { points, username, orderedList } = useGlobalState();
   const [selectedChat, setSelectedChat] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const privKey = getPrivateKey();
   if (!privKey) {
@@ -48,39 +45,27 @@ const HomePage: React.FC<HomePageProps> = ({ isLoaded, withGamification }) => {
     else return 0;
   };
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (!isLoaded) {
-        setIsLoading(false);
-      }
-    }, 1500);
-    return () => clearTimeout(timer);
-  }, []);
-
   return (
     <div className="home-page">
-      {!isLoading ? (
-        <div className="home-page__background">
-          <img src={HomeBackground} alt="" width="100%" height="100%" />
-        </div>
-      ) : null}
+      <div className="home-page__background">
+        <img src={HomeBackground} alt="" width="100%" height="100%" />
+      </div>
+
       <HomeHeader points={points} withGamification={withGamification} />
-      {isLoading ? (
-        <HomeLoading />
-      ) : (
-        <div className="home-page__content">
-          <DevConMainBox
-            title="Devcon buzz space"
-            content="Share your thoughts, chat with anyone without moderation, and collect your reward."
-            showActiveVisitors={true}
-            activeVisitors={lobbyUserCount()}
-            bordered={true}
-            setSelectedChat={setSelectedChat}
-          />
-          <RecentSessions />
-          <Spaces list={orderedList} setSelectedChat={setSelectedChat} />
-        </div>
-      )}
+
+      <div className="home-page__content">
+        <DevConMainBox
+          title="Devcon buzz space"
+          content="Share your thoughts, chat with anyone without moderation, and collect your reward."
+          showActiveVisitors={true}
+          activeVisitors={lobbyUserCount()}
+          bordered={true}
+          setSelectedChat={setSelectedChat}
+        />
+        <RecentSessions />
+        <Spaces list={orderedList} setSelectedChat={setSelectedChat} />
+      </div>
+
       <NavigationFooter />
 
       {selectedChat && (

diff --git a/src/pages/HowDoesItWork/HowDoesItWork.tsx b/src/pages/HowDoesItWork/HowDoesItWork.tsx
@@ -4,12 +4,16 @@ import NavigationHeader from "../../components/NavigationHeader/NavigationHeader
 import HomeBackground from "../../assets/welcome-glass-effect.png";
 import CollectPointsImg from "../../assets/collect-points.png";
 import ProfileGetBZZImg from "../../assets/profile-get-BZZ.png";
-import { ROUTES } from "../../utils/constants";
+// import { ROUTES } from "../../utils/constants";
 
-const HowDoesItWork: React.FC = () => {
+interface HowDoesItWorkProps {
+  toText?: string;
+}
+
+const HowDoesItWork: React.FC<HowDoesItWorkProps> = ({ toText }) => {
   return (
     <div className="how-does-it-work-page">
-      <NavigationHeader to={ROUTES.PROFILE} />
+      <NavigationHeader toText={toText} />
       <div className="how-does-it-work-page__content">
         <div className="how-does-it-work-page__content__background">
           <img

diff --git a/src/pages/Profile/Profile.scss b/src/pages/Profile/Profile.scss
@@ -2,7 +2,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 40px;
+  gap: 22px;
 }
 
 .profile__content {
@@ -11,6 +11,7 @@
   align-items: center;
   height: 100%;
   gap: 20px;
+  overflow: auto;
 }
 
 .profile__content__datas {