make nav buttons in header optional

ApeWorX · Jan 23, 2024 · 66f8c58 · 66f8c58
1 parent b4d9b63
commit 66f8c58
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 27 deletions.
diff --git a/ui/app/src/App.tsx b/ui/app/src/App.tsx
@@ -15,7 +15,7 @@ function App() {
     <>
       <div className={`app ${theme}`}>
         <div className="header">
-          <Header />
+          <Header showNavButtons={false} />
           <ConnectButton />
         </div>
 
@@ -24,7 +24,9 @@ function App() {
           <ul>
             <Link to={`/${config.streamManagerAddress}`}>
               <li>
-                <h3>{config.streamManagerAddress as `0x${string}`} </h3>
+                <h3 className="stream-data-subtitle">
+                  {config.streamManagerAddress as `0x${string}`}
+                </h3>
               </li>
             </Link>
           </ul>

diff --git a/ui/app/src/CreatorPage.tsx b/ui/app/src/CreatorPage.tsx
@@ -77,17 +77,24 @@ const CreatorPage = () => {
           <ConnectButton />
         </div>
 
-        <h2>
+        <div className="stream-manager-title">
           {fromBlock != null ? (
             <>
-              {`Created Streams from block ${String(fromBlock)}`}
+              {"Created Streams from block "}
+              <strong className="stream-data-subtitle">
+                {String(fromBlock)}
+              </strong>
               <br />
-              {`by ${creator}`}
+              {"by "}
+              <strong className="stream-data-subtitle">{creator}</strong>
             </>
           ) : (
-            "Created Streams"
+            <>
+              {"Created Streams by "}
+              <strong className="stream-data-subtitle">{creator}</strong>
+            </>
           )}
-        </h2>
+        </div>
         {/* Stream list */}
         <div className="list-streams">
           {sm === null ? (

diff --git a/ui/app/src/Header.tsx b/ui/app/src/Header.tsx
@@ -3,23 +3,32 @@ import { useNavigate } from "react-router-dom";
 import { useTheme } from "./ThemeContext";
 import { Button, SelectMenu, ArrowLeftIcon } from "evergreen-ui";
 
-const Header = () => {
+interface HeaderProps {
+  showNavButtons?: boolean; 
+}
+
+const Header: React.FC<HeaderProps> = ({ showNavButtons = true }) => {
   const { theme, setTheme } = useTheme();
   const navigate = useNavigate();
-  const themes = ["sakura", "tokyoNight", "nord"]; 
+  const themes = ["sakura", "tokyoNight", "nord"];
 
   return (
     <div className={`app ${theme}`}>
-      <Button
-        className="theme-header-button"
-        iconBefore={ArrowLeftIcon}
-        onClick={() => navigate(-1)}
-      >
-        Previous
-      </Button>
-      <Button className="theme-header-button" onClick={() => navigate("/")}>
-        Homepage
-      </Button>
+      {showNavButtons && (
+        <>
+          <Button
+            className="theme-header-button"
+            iconBefore={ArrowLeftIcon}
+            onClick={() => navigate(-1)}
+          >
+            Previous
+          </Button>
+          <Button className="theme-header-button" onClick={() => navigate("/")}>
+            Homepage
+          </Button>
+        </>
+      )}
+
       <SelectMenu
         title="Select Theme"
         options={themes.map((t) => ({ label: t, value: t }))}

diff --git a/ui/app/src/StreamManagerPage.tsx b/ui/app/src/StreamManagerPage.tsx
@@ -86,15 +86,17 @@ const StreamManagerPage = () => {
           {fromBlock != null ? (
             <>
               {"Created Streams from block "}
-              <strong>{String(fromBlock)}</strong>
+              <strong className="stream-data-subtitle">
+                {String(fromBlock)}
+              </strong>
               <br />
               {"on "}
-              <strong>{sm}</strong>
+              <strong className="stream-data-subtitle">{sm}</strong>
             </>
           ) : (
             <>
               {"Created Streams on "}
-              <strong>{sm}</strong>
+              <strong className="stream-data-subtitle">{sm}</strong>
             </>
           )}
         </div>
@@ -129,7 +131,14 @@ const StreamManagerPage = () => {
                 return (
                   <div key={creator}>
                     <h3 className="list-creator">
-                      By <Link to={`/${sm}/${creator}`}>{creator}</Link>:
+                      By{" "}
+                      <Link
+                        className="stream-data-subtitle"
+                        to={`/${sm}/${creator}`}
+                      >
+                        {creator}
+                      </Link>
+                      :
                     </h3>
 
                     <ul className="list-streams">

diff --git a/ui/app/src/StreamPage.tsx b/ui/app/src/StreamPage.tsx
@@ -121,15 +121,18 @@ const StreamPage = () => {
       </div>
 
       <h2>
-        Stream {streamId} by <br /> {creator}
+        Stream <span className="stream-data-subtitle"> {streamId} </span>by
+        <br /> <span className="stream-data-subtitle"> {creator} </span>
       </h2>
       {stream ? (
         <>
           <div className="stream-components">
             {/* Stream Data */}
             <div className="stream-data-box">
               <p>
-                <strong className="stream-data-subtitle">Stream Manager: </strong>
+                <strong className="stream-data-subtitle">
+                  Stream Manager:{" "}
+                </strong>
                 {sm}
               </p>
               <p>
@@ -141,13 +144,17 @@ const StreamPage = () => {
                 {creator}
               </p>
               <p>
-                <strong className="stream-data-subtitle">Amount per second: </strong>
+                <strong className="stream-data-subtitle">
+                  Amount per second:{" "}
+                </strong>
                 {streamInfo.amountPerSecond
                   ? String(streamInfo.amountPerSecond)
                   : "fetching..."}
               </p>
               <p>
-                <strong className="stream-data-subtitle">Funded amount: </strong>
+                <strong className="stream-data-subtitle">
+                  Funded amount:{" "}
+                </strong>
                 {streamInfo.fundedAmount
                   ? String(streamInfo.fundedAmount)
                   : "fetching..."}

diff --git a/ui/app/src/tokyoNight.css b/ui/app/src/tokyoNight.css
@@ -33,6 +33,7 @@ body.tokyoNight {
   background-color: var(--aquamarine);
   color: var(--federal-blue);
   font-family: "Tomorrow", sans-serif;
+  animation: pulsate 1.5s infinite ease-in-out;
 }
 .app.tokyoNight .theme-stream-button:hover {
   background-color: var(--polynesian-blue);
@@ -78,3 +79,15 @@ body.tokyoNight {
 .app.tokyoNight .stream-data-subtitle {
   color: var(--aquamarine);
 }
+
+@keyframes pulsate {
+  0% {
+    box-shadow: 0 0 5px var(--aquamarine), 0 0 10px var(--aquamarine), 0 0 15px var(--aquamarine);
+  }
+  50% {
+    box-shadow: 0 0 15px var(--aquamarine), 0 0 20px var(--aquamarine), 0 0 25px var(--aquamarine);
+  }
+  100% {
+    box-shadow: 0 0 5px var(--aquamarine), 0 0 10px var(--aquamarine), 0 0 15px var(--aquamarine);
+  }
+}