UI-Additionals-Refactor (#45)

* UI-Additionals-Refactor * UI-Additionals-Refactor-2
Solar-Punk-Ltd · Oct 11, 2024 · 153bc82 · 153bc82
1 parent 37f1c67
commit 153bc82
Show file tree

Hide file tree

Showing 29 changed files with 278 additions and 159 deletions.
diff --git a/src/GlobalStateContext.tsx b/src/GlobalStateContext.tsx
@@ -40,7 +40,7 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
     return localStorage.getItem("username") || "";
   });
   const [monogram, setMonogram] = useState(() => {
-    return localStorage.getItem("monogram") || "";
+    return createMonogram(localStorage.getItem("username") || "");
   });
 
   const [points, setPoints] = useState(() => {
@@ -63,11 +63,12 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
 
   useEffect(() => {
     localStorage.setItem("username", username);
+    setMonogram(createMonogram(username));
   }, [username]);
 
-  useEffect(() => {
-    localStorage.setItem("monogram", monogram);
-  }, [monogram]);
+  // useEffect(() => {
+  //   localStorage.setItem("monogram", monogram);
+  // }, [monogram]);
 
   useEffect(() => {
     localStorage.setItem("points", points.toString());

diff --git a/src/assets/category-applied-cryptography.png b/src/assets/category-applied-cryptography.png
diff --git a/src/assets/category-coordination.png b/src/assets/category-coordination.png
diff --git a/src/assets/category-core-protocol.png b/src/assets/category-core-protocol.png
diff --git a/src/assets/category-crypto-economics.png b/src/assets/category-crypto-economics.png
diff --git a/src/assets/category-cypherpunk-and-privacy.png b/src/assets/category-cypherpunk-and-privacy.png
diff --git a/src/assets/category-developer-experience.png b/src/assets/category-developer-experience.png
diff --git a/src/assets/category-layer-2s.png b/src/assets/category-layer-2s.png
diff --git a/src/assets/category-real-world-ethereum.png b/src/assets/category-real-world-ethereum.png
diff --git a/src/assets/category-security.png b/src/assets/category-security.png
diff --git a/src/assets/category-usability.png b/src/assets/category-usability.png
diff --git a/src/components/AgendaItem/AgendaItem.scss b/src/components/AgendaItem/AgendaItem.scss
@@ -7,6 +7,8 @@
   gap: 6px;
   padding: 8px;
   box-sizing: border-box;
+  background-color: white;
+  z-index: 2;
 }
 
 .agenda-item__main {

diff --git a/src/components/AgendaItem/AgendaItem.tsx b/src/components/AgendaItem/AgendaItem.tsx
@@ -41,32 +41,37 @@ const AgendaItem: React.FC<AgendaItemProps> = ({
   };
 
   return (
-    <div
-      className="agenda-item"
-      style={{ backgroundColor, borderRadius, paddingRight }}
-    >
-      <div className="agenda-item__main">
-        <div className={"agenda-item__main__time"}>
-          <div>{startDate}</div>
-          <div>{endDate}</div>
-        </div>
-        <div className="agenda-item__main__content">
-          <Link to={`${ROUTES.TALKS}/${id}`}>
+    <Link to={`${ROUTES.TALKS}/${id}`}>
+      <div
+        className="agenda-item"
+        style={{ backgroundColor, borderRadius, paddingRight }}
+      >
+        <div className="agenda-item__main">
+          <div className={"agenda-item__main__time"}>
+            <div>{startDate}</div>
+            <div>{endDate}</div>
+          </div>
+          <div className="agenda-item__main__content">
             <div className="agenda-item__main__content__title">{title}</div>
-          </Link>
-          <div className="agenda-item__main__content__tagged">
-            {stage ? <Stage name={stage} /> : null}
-            {category ? (
-              <CategoryIndicator name={category || "no track"} />
-            ) : null}
+            <div className="agenda-item__main__content__tagged">
+              {stage ? <Stage name={stage} /> : null}
+              {category ? (
+                <CategoryIndicator name={category || "no track"} />
+              ) : null}
+            </div>
           </div>
         </div>
+        {/* use debounce if data is saved to swarm: debounce(handleClick, debounceTime) */}
+        <div className="agenda-item__content__heart-icon">
+          <HeartIcon
+            empty={empty}
+            onClick={() => {
+              handleClick();
+            }}
+          />
+        </div>
       </div>
-      {/* use debounce if data is saved to swarm: debounce(handleClick, debounceTime) */}
-      <div className="agenda-item__content__heart-icon" onClick={handleClick}>
-        <HeartIcon empty={empty} />
-      </div>
-    </div>
+    </Link>
   );
 };
 

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -12,6 +12,8 @@
   padding: 8px;
   background-color: #4a2875;
   box-shadow: 0px 2px 4px 0px #1f1f231a;
+  position: relative;
+  z-index: 3;
 }
 
 .dropdown__button__subtext {

diff --git a/src/components/NavigationFooter/NavigationFooter.scss b/src/components/NavigationFooter/NavigationFooter.scss
@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  z-index: 1;
+  z-index: 3;
   display: flex;
   justify-content: space-around;
   align-items: center;

diff --git a/src/components/NavigationHeader/NavigationHeader.scss b/src/components/NavigationHeader/NavigationHeader.scss
@@ -1,6 +1,8 @@
 .navigation-header {
   display: flex;
   height: 32px;
+  width: fit-content;
+  cursor: pointer;
   gap: 10px;
   align-items: center;
   padding: 0px 16px;

diff --git a/src/components/NavigationHeader/NavigationHeader.tsx b/src/components/NavigationHeader/NavigationHeader.tsx
@@ -27,8 +27,8 @@ const NavigationHeader: React.FC<NavigationHeaderProps> = ({
     }
   };
   return (
-    <div className="navigation-header">
-      <div onClick={handleNavigation} className="navigation-header__link">
+    <div className="navigation-header" onClick={handleNavigation}>
+      <div className="navigation-header__link">
         <LeftNavigationIcon />
       </div>
       <div className="navigation-header__text">{formattedTo}</div>

diff --git a/src/components/RecentSessions/RecentSessions.tsx b/src/components/RecentSessions/RecentSessions.tsx
@@ -80,7 +80,7 @@ const RecentSessions: React.FC<SessionBoxProps> = ({
     <div>
       <div className="recent-sessions">
         <div style={{}} className="recent-sessions__title">
-          Recent sessions
+          Recent talks
         </div>
         <Link to={ROUTES.AGENDA}>
           <div className="recent-sessions__all">All sessions</div>

diff --git a/src/components/RecentSessions/RecentSessionsItem/RecentSessionsItem.tsx b/src/components/RecentSessions/RecentSessionsItem/RecentSessionsItem.tsx
@@ -19,15 +19,13 @@ const RecentSessionsItem: React.FC<RecentSessionsItemProps> = ({
   activeVisitors,
 }) => {
   return (
-    <div className="recent-sessions-item">
-      <Link to={`${ROUTES.TALKS}/${id}`}>
-        <div className="recent-sessions-item__title">{title}</div>
-      </Link>
+    <Link to={`${ROUTES.TALKS}/${id}`} className="recent-sessions-item">
+      <div className="recent-sessions-item__title">{title}</div>
       <div className="recent-sessions-item__stage">
         <Stage name={stage} />
       </div>
       <ActiveVisitors number={activeVisitors} />
-    </div>
+    </Link>
   );
 };
 

diff --git a/src/components/Spaces/Spaces.scss b/src/components/Spaces/Spaces.scss
@@ -3,6 +3,7 @@
   justify-content: space-between;
   margin-bottom: 10px;
   margin-top: 20px;
+  position: relative;
 }
 
 .recent-rooms__title {

diff --git a/src/components/Spaces/SpacesItem/SpacesItem.scss b/src/components/Spaces/SpacesItem/SpacesItem.scss
@@ -25,3 +25,9 @@
   display: flex;
   align-items: center;
 }
+
+.recent-rooms-item__category {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
diff --git a/src/components/Spaces/SpacesItem/SpacesItem.tsx b/src/components/Spaces/SpacesItem/SpacesItem.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import "./SpacesItem.scss";
 import ActiveVisitors from "../../ActiveVisitors/ActiveVisitors";
 import RightArrowIcon from "../../icons/RightArrowIcon/RightArrowIcon";
+import { CATEGORY_IMAGES_MAP } from "../../../utils/constants";
 
 interface RecentRoomsItemProps {
   title: string;
@@ -12,15 +13,18 @@ const RecentRoomsItem: React.FC<RecentRoomsItemProps> = ({
   title,
   numberOfActiveUsers,
 }) => {
+  const imageUrl = CATEGORY_IMAGES_MAP.get(title);
   return (
     <div style={{}} className="recent-rooms-item">
-      <div className="recent-rooms__item__title">{title}</div>
+      <div className="recent-rooms-item__category">
+        {imageUrl ? (
+          <img src={imageUrl} alt="" width="24px" height="24px" />
+        ) : null}
+        <div className="recent-rooms__item__title">{title}</div>
+      </div>
       <div className="recent-rooms-item__right">
         <ActiveVisitors number={numberOfActiveUsers} withIcon={true} />
         <RightArrowIcon />
-        {/* <div>
-          <img src={rightArrowIcon} alt="" width="24px" height="24px" />
-        </div> */}
       </div>
     </div>
   );