UI-Additionals-7 (#88)

* Refactor * Refactor
Solar-Punk-Ltd · Nov 7, 2024 · cf75cf6 · cf75cf6
1 parent 21fb840
commit cf75cf6
Show file tree

Hide file tree

Showing 21 changed files with 188 additions and 755 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@ethersphere/bee-js": "^8.1.0",
-    "@solarpunkltd/comment-system-ui": "^0.1.5",
+    "@solarpunkltd/comment-system-ui": "^0.1.6",
     "@solarpunkltd/comment-system": "^1.2.1",
     "@solarpunkltd/swarm-decentralized-chat": "^0.1.13",
     "clsx": "^2.1.1",

diff --git a/src/assets/category-entertainment.png b/src/assets/category-entertainment.png
diff --git a/src/components/AgendaItem/AgendaItem.scss b/src/components/AgendaItem/AgendaItem.scss
@@ -67,6 +67,5 @@
 }
 
 .agenda-item__content__heart-icon {
-  width: 24px;
-  padding-right: 9px;
+  width: 32px;
 }
diff --git a/src/components/ContentFilter/ContentFilter.scss b/src/components/ContentFilter/ContentFilter.scss
@@ -12,14 +12,14 @@
   font-family: "Inter", sans-serif;
   font-weight: 700;
   font-size: 14px;
-  margin-bottom: 6px;
 }
 
 .content-filter__text {
   font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 14px;
   margin-bottom: 30px;
+  line-height: 30px;
 }
 
 .content-filter__setting {

diff --git a/src/components/ContentFilter/ContentFilter.tsx b/src/components/ContentFilter/ContentFilter.tsx
@@ -22,9 +22,7 @@ const ContentFilter: React.FC = () => {
           checked={checked}
           onClick={() => handleClick(isContentFilterEnabled, checked)}
         />
-        <div className="content-filter__text__header">
-          Content Filter enabled
-        </div>
+        <div className="content-filter__text__header">USCVS enabled</div>
       </div>
     </div>
   );

diff --git a/src/components/HomeHeader/HomeHeader.tsx b/src/components/HomeHeader/HomeHeader.tsx
@@ -15,8 +15,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({
   points,
   withGamification,
 }) => {
-  const { monogram, showGamification, setShowGamification, setPoints } =
-    useGlobalState();
+  const { monogram, setPoints } = useGlobalState();
   return (
     <div className="home-header">
       <div className="home-header__name">DEVCON.BUZZ</div>
@@ -33,10 +32,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({
           <button onClick={() => setPoints(5)}>5</button>
           <button onClick={() => setPoints(10)}>10</button>
         </div>
-        <div
-          className="home-header__points"
-          onClick={() => setShowGamification(!showGamification)}
-        >
+        <div className="home-header__points">
           {points ? points : 0}
           <img src={swarmIcon} alt="" width="15px" height="15px" />
         </div>

diff --git a/src/components/Messages/Message/Message.tsx b/src/components/Messages/Message/Message.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import "./Message.scss";
 import AvatarMonogram from "../../AvatarMonogram/AvatarMonogram";
 import LikeIcon from "../../icons/LikeIcon/LikeIcon";
-import { createMonogram } from "../../../utils/helpers";
+import { createMonogram, formatTime } from "../../../utils/helpers";
 import { MessageWithThread, ThreadId } from "../../../types/message";
 import {
   EthAddress,
@@ -92,7 +92,10 @@ const Message: React.FC<MessageProps> = ({
             own: actualUser === nickname,
           })}
         >
-          {data.username}
+          {data.username} &nbsp;
+          <p className="message__right-side__name-and-time__time">
+            {formatTime(data.timestamp)}
+          </p>
         </div>
 
         <p

diff --git a/src/components/Spaces/SpacesItem/SpacesItem.tsx b/src/components/Spaces/SpacesItem/SpacesItem.tsx
@@ -9,7 +9,7 @@ interface RecentRoomsItemProps {
   numberOfActiveUsers: number;
 }
 
-const RecentRoomsItem: React.FC<RecentRoomsItemProps> = ({
+const SpacesItem: React.FC<RecentRoomsItemProps> = ({
   title,
   numberOfActiveUsers,
 }) => {
@@ -30,4 +30,4 @@ const RecentRoomsItem: React.FC<RecentRoomsItemProps> = ({
   );
 };
 
-export default RecentRoomsItem;
+export default SpacesItem;
diff --git a/src/components/TermsAndConditions/TermsAndConditions.tsx b/src/components/TermsAndConditions/TermsAndConditions.tsx
@@ -63,7 +63,7 @@ const TermsAndConditions: React.FC<TermsAndConditionsProps> = ({
             checked={isContentFilterEnabled}
             onClick={() => setIsContentFilterEnabled(!isContentFilterEnabled)}
           />{" "}
-          Content Filter enabled
+          USCVS enabled
         </div>
       ) : null}
 

diff --git a/src/components/icons/HeartIcon/HeartIcon.tsx b/src/components/icons/HeartIcon/HeartIcon.tsx
@@ -11,6 +11,7 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
     <div
       onClick={(e) => {
         e.preventDefault();
+        e.stopPropagation();
         onClick();
       }}
     >
@@ -22,7 +23,7 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g filter="url(#filter0_d_5629_2762)">
+          <g filter="url(#filter0_d_2991_948)">
             <rect x="4" y="2" width="32" height="32" rx="16" fill="white" />
             <rect
               x="4.5"
@@ -33,13 +34,13 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
               stroke={color ? color : "#8C72AE"}
             />
             <path
-              d="M19.625 12.6241L19.9719 12.9991L20.3469 12.6248C21.3938 11.6045 22.8438 11.1401 24.2688 11.3773C26.4219 11.736 28 13.5991 28 15.7835V15.9648C28 17.2616 27.4625 18.5023 26.5125 19.3866L20.8656 24.6585C20.6313 24.8773 20.3219 24.9991 20 24.9991C19.6781 24.9991 19.3688 24.8773 19.1344 24.6585L13.4872 19.3866C12.5384 18.5023 12 17.2616 12 15.9648V15.7835C12 13.5991 13.5788 11.736 15.7313 11.3773C17.1281 11.1401 18.6062 11.6045 19.625 12.6241C19.625 12.6245 19.5969 12.6241 19.625 12.6241ZM19.9719 15.121L18.5656 13.6585C17.8875 13.0079 16.925 12.6991 15.9781 12.8566C14.5484 13.0951 13.5 14.3335 13.5 15.7835V15.9648C13.5 16.846 13.8659 17.6898 14.5106 18.2898L20 23.4148L25.4906 18.2898C26.1344 17.6898 26.5 16.846 26.5 15.9648V15.7835C26.5 14.3335 25.45 13.0951 24.0219 12.8566C23.075 12.6991 22.1125 13.0079 21.4344 13.6585L19.9719 15.121Z"
+              d="M19.625 12.625L19.9719 13L20.3469 12.6256C21.3938 11.6053 22.8438 11.1409 24.2688 11.3781C26.4219 11.7369 28 13.6 28 15.7844V15.9656C28 17.2625 27.4625 18.5031 26.5125 19.3875L20.8656 24.6594C20.6313 24.8781 20.3219 25 20 25C19.6781 25 19.3688 24.8781 19.1344 24.6594L13.4872 19.3875C12.5384 18.5031 12 17.2625 12 15.9656V15.7844C12 13.6 13.5788 11.7369 15.7313 11.3781C17.1281 11.1409 18.6062 11.6053 19.625 12.625C19.625 12.6253 19.5969 12.625 19.625 12.625ZM19.9719 15.1219L18.5656 13.6594C17.8875 13.0088 16.925 12.7 15.9781 12.8575C14.5484 13.0959 13.5 14.3344 13.5 15.7844V15.9656C13.5 16.8469 13.8659 17.6906 14.5106 18.2906L20 23.4156L25.4906 18.2906C26.1344 17.6906 26.5 16.8469 26.5 15.9656V15.7844C26.5 14.3344 25.45 13.0959 24.0219 12.8575C23.075 12.7 22.1125 13.0088 21.4344 13.6594L19.9719 15.1219Z"
               fill={color ? color : "#8C72AE"}
             />
           </g>
           <defs>
             <filter
-              id="filter0_d_5629_2762"
+              id="filter0_d_2991_948"
               x="0"
               y="0"
               width="40"
@@ -64,12 +65,12 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
               <feBlend
                 mode="normal"
                 in2="BackgroundImageFix"
-                result="effect1_dropShadow_5629_2762"
+                result="effect1_dropShadow_2991_948"
               />
               <feBlend
                 mode="normal"
                 in="SourceGraphic"
-                in2="effect1_dropShadow_5629_2762"
+                in2="effect1_dropShadow_2991_948"
                 result="shape"
               />
             </filter>
@@ -83,7 +84,7 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g filter="url(#filter0_d_5629_959)">
+          <g filter="url(#filter0_d_2991_890)">
             <rect x="4" y="2" width="32" height="32" rx="16" fill="white" />
             <rect
               x="4.5"
@@ -94,13 +95,13 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
               stroke={color ? color : "#8C72AE"}
             />
             <path
-              d="M13.4875 19.3867L19.1344 24.6586C19.3688 24.8773 19.6781 24.9992 20 24.9992C20.3219 24.9992 20.6313 24.8773 20.8656 24.6586L26.5125 19.3867C27.4625 18.5023 28 17.2617 28 15.9648V15.7836C28 13.5992 26.4219 11.7367 24.2688 11.3773C22.8438 11.1398 21.3938 11.6054 20.375 12.6242L20 12.9992L19.625 12.6242C18.6062 11.6054 17.1562 11.1398 15.7313 11.3773C13.5781 11.7367 12 13.5992 12 15.7836V15.9648C12 17.2617 12.5375 18.5023 13.4875 19.3867Z"
+              d="M13.4875 19.3875L19.1344 24.6594C19.3688 24.8782 19.6781 25 20 25C20.3219 25 20.6313 24.8782 20.8656 24.6594L26.5125 19.3875C27.4625 18.5032 28 17.2625 28 15.9657V15.7844C28 13.6 26.4219 11.7375 24.2688 11.3782C22.8438 11.1407 21.3938 11.6063 20.375 12.625L20 13L19.625 12.625C18.6062 11.6063 17.1562 11.1407 15.7313 11.3782C13.5781 11.7375 12 13.6 12 15.7844V15.9657C12 17.2625 12.5375 18.5032 13.4875 19.3875Z"
               fill={color ? color : "#8C72AE"}
             />
           </g>
           <defs>
             <filter
-              id="filter0_d_5629_959"
+              id="filter0_d_2991_890"
               x="0"
               y="0"
               width="40"
@@ -125,12 +126,12 @@ const HeartIcon: React.FC<HeartIconProps> = ({ color, empty, onClick }) => {
               <feBlend
                 mode="normal"
                 in2="BackgroundImageFix"
-                result="effect1_dropShadow_5629_959"
+                result="effect1_dropShadow_2991_890"
               />
               <feBlend
                 mode="normal"
                 in="SourceGraphic"
-                in2="effect1_dropShadow_5629_959"
+                in2="effect1_dropShadow_2991_890"
                 result="shape"
               />
             </filter>

diff --git a/src/pages/Agenda/Agenda.tsx b/src/pages/Agenda/Agenda.tsx
@@ -120,30 +120,32 @@ const Agenda: React.FC = () => {
           onClick={(index) => setActiveStageTab(index)}
           changesWhenOpen={changesWhenOpenDropdown}
         />
-        <div className="agenda-page__content__banner">
-          <img
-            src={AgendaBanner}
-            alt=""
-            className="agenda-page__content__banner__img"
-          />
-          <div className="agenda-page__content__banner__text">
-            <div className="agenda-page__content__banner__text__main-text">
-              <b>Rooftop </b>
-              <span className="agenda-page__content__banner__text__main-text-regular">
-                &nbsp;Buzz
-              </span>
-            </div>
-            <div className="agenda-page__content__banner__text__sub-text">
-              Sunset &&nbsp;
-              <span className="agenda-page__content__banner__text__sub-text-bold">
-                <b>Chill</b>
-              </span>
-            </div>
-            <div className="agenda-page__content__banner__text__register-button">
-              Register now!
+        <a href="https://lu.ma/mq50gvnn">
+          <div className="agenda-page__content__banner">
+            <img
+              src={AgendaBanner}
+              alt=""
+              className="agenda-page__content__banner__img"
+            />
+            <div className="agenda-page__content__banner__text">
+              <div className="agenda-page__content__banner__text__main-text">
+                <b>Rooftop</b>
+                <span className="agenda-page__content__banner__text__main-text-regular">
+                  .Buzz
+                </span>
+              </div>
+              <div className="agenda-page__content__banner__text__sub-text">
+                Sunset &&nbsp;
+                <span className="agenda-page__content__banner__text__sub-text-bold">
+                  <b>Chill</b>
+                </span>
+              </div>
+              <div className="agenda-page__content__banner__text__register-button">
+                Register now!
+              </div>
             </div>
           </div>
-        </div>
+        </a>
         {activeAgendaItems.length > 0 ? (
           activeAgendaItems.map((session) => {
             return (

diff --git a/src/pages/ClaimRewardPage/ClaimRevardPage.tsx b/src/pages/ClaimRewardPage/ClaimRevardPage.tsx
@@ -8,10 +8,12 @@ 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();
   const navigate = useNavigate();
+
   const inputRef = useRef<HTMLInputElement>(null);
   let nonceRequested = false;
 
@@ -103,7 +105,12 @@ const ClaimRewardPage: React.FC = () => {
         </div>
       </div>
       <div className="claim-reward__bottom-buttons">
-        <WelcomeButton type="white" onClick={() => navigate(ROUTES.HOME)}>
+        <WelcomeButton
+          type="white"
+          onClick={() => {
+            navigate(ROUTES.HOME);
+          }}
+        >
           Back
         </WelcomeButton>
         <WelcomeButton

diff --git a/src/pages/ContentFilterPage/ContentFilterPage.scss b/src/pages/ContentFilterPage/ContentFilterPage.scss
@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   text-align: center;
+  line-height: 36px;
 }
 
 .content-filter-page__background {

diff --git a/src/pages/ContentFilterPage/ContentFilterPage.tsx b/src/pages/ContentFilterPage/ContentFilterPage.tsx
@@ -18,7 +18,9 @@ const ContentFilterPage: React.FC = () => {
           />
         </div>
         <div className="content-filter-page__top">
-          <div className="content-filter-page__header">Content Filter</div>
+          <div className="content-filter-page__header">
+            User Side Content Visibility&nbsp;Sanitizer
+          </div>
           <ContentFilter />
         </div>
         <Link to={ROUTES.PROFILE}>

diff --git a/src/pages/TermsAndConditionsPage/TermsAndConditionsPage.scss b/src/pages/TermsAndConditionsPage/TermsAndConditionsPage.scss
@@ -6,6 +6,7 @@
   justify-content: center;
   padding: 0px 100px;
   text-align: center;
+  line-height: 36px;
 }
 
 .terms-and-conditions-page__background {

diff --git a/src/pages/Welcome1/Welcome1.tsx b/src/pages/Welcome1/Welcome1.tsx
@@ -46,7 +46,7 @@ const Welcome1: React.FC = () => {
             </div>
             <div className="welcome-page__bottom-text">
               I know everything{" "}
-              <Link to={ROUTES.PROFILECREATION}>
+              <Link to={ROUTES.TACONBOARDING}>
                 <span className="welcome-page__bottom-text__skip">SKIP</span>
               </Link>
             </div>

diff --git a/src/pages/Welcome2/Welcome2.tsx b/src/pages/Welcome2/Welcome2.tsx
@@ -49,7 +49,7 @@ const Welcome1: React.FC = () => {
             </div>
             <div className="welcome-page__bottom-text">
               I know everything{" "}
-              <Link to={ROUTES.PROFILECREATION}>
+              <Link to={ROUTES.TACONBOARDING}>
                 <span className="welcome-page__bottom-text__skip">SKIP</span>
               </Link>
             </div>

diff --git a/src/pages/Welcome3/Welcome3.tsx b/src/pages/Welcome3/Welcome3.tsx
@@ -54,7 +54,7 @@ const Welcome1: React.FC = () => {
             </div>
             <div className="welcome-page__bottom-text">
               I know everything{" "}
-              <Link to={ROUTES.PROFILECREATION}>
+              <Link to={ROUTES.TACONBOARDING}>
                 <span className="welcome-page__bottom-text__skip">SKIP</span>
               </Link>
             </div>

diff --git a/src/pages/Welcome4/Welcome4.tsx b/src/pages/Welcome4/Welcome4.tsx
@@ -31,7 +31,7 @@ const Welcome1: React.FC = () => {
         <div className="welcome-page__bottom">
           <div className="welcome-page__bottom__text">
             <div>
-              With your unique code you can start your own node the easiest way
+              With your magic code you can start your own node the easiest way
               possible
             </div>
           </div>

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -34,6 +34,7 @@ import CryptoEconomics from "../assets/category-crypto-economics.png";
 import CoreProtocol from "../assets/category-core-protocol.png";
 import Coordination from "../assets/category-coordination.png";
 import AppliedCryptography from "../assets/category-applied-cryptography.png";
+import Entertainment from "../assets/category-entertainment.png";
 
 export enum ROUTES {
   APP = "/",
@@ -148,7 +149,7 @@ export const STAGES_MAP = new Map([
   // ["keynote", "Keynote"], // not used
   ["main-stage", "Main Stage"],
   ["music-stage", "Music stage"],
-  ["all", "All"],
+  ["all", "All stages"],
 ]);
 
 const oneDirectionCategoryNamesToIdMap = new Map([
@@ -163,7 +164,7 @@ const oneDirectionCategoryNamesToIdMap = new Map([
   ["Developer Experience", "developer-experience"],
   ["Security", "security"],
   ["Lobby", "lobby"],
-  ["Entertainment", "entertainment"],
+  ["Entertainment", Entertainment],
 ]);
 export const CATEGORY_NAMES_TO_ID_MAP = createBiDirectionaltMap(
   oneDirectionCategoryNamesToIdMap
@@ -195,7 +196,7 @@ export const DATA_STORAGE_TEXT =
 
 export const CONTENT_FILTER_HEADER = "Content Filter";
 export const CONTENT_FILTER_TEXT =
-  "An AI-assisted content filter is enabled by default to block content that may violate local laws and regulations. Users may disable this filter at their own discretion, but do so entirely at their own risk.";
+  "An AI-assisted content filter is enabled by default to block content that may violate local laws and regulations. Users may disable this option at their own discretion, but do so entirely at their own risk.";
 
 export const ACCEPTANCE_OF_TERMS_HEADER = "Acceptance of Terms";
 export const ACCEPTANCE_OF_TERMS_TEXT =