From 9c88f2e28fa81e447599e7792eef7302a19f1715 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Wed, 21 Jun 2023 14:50:16 +0100
Subject: [PATCH] New stream button

---
 src/icons.svg             |  3 +++
 src/index.css             | 21 ++++++++++++++-------
 src/pages/layout.css      |  2 ++
 src/pages/layout.tsx      |  4 ++++
 src/pages/stream-page.css | 15 +--------------
 src/pages/stream-page.tsx |  2 +-
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/icons.svg b/src/icons.svg
index 19232df..7d5007e 100644
--- a/src/icons.svg
+++ b/src/icons.svg
@@ -15,6 +15,9 @@
     <symbol id="login" viewBox="0 0 18 18" fill="none">
       <path d="M4 13.1667C4 13.4594 4 13.6058 4.01306 13.7331C4.12146 14.7895 4.8855 15.6622 5.91838 15.9093C6.04279 15.939 6.18792 15.9584 6.47807 15.9971L11.9713 16.7295C13.535 16.938 14.3169 17.0423 14.9237 16.801C15.4565 16.5891 15.9002 16.2006 16.1806 15.7005C16.5 15.1309 16.5 14.3421 16.5 12.7646V5.23541C16.5 3.65787 16.5 2.8691 16.1806 2.2995C15.9002 1.7994 15.4565 1.41088 14.9237 1.19904C14.3169 0.957756 13.535 1.062 11.9713 1.2705L6.47807 2.00293C6.18788 2.04162 6.04279 2.06097 5.91838 2.09073C4.8855 2.33781 4.12145 3.21049 4.01306 4.26696C4 4.39421 4 4.54059 4 4.83334M9 5.66668L12.3333 9.00001M12.3333 9.00001L9 12.3333M12.3333 9.00001H1.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="signal" viewBox="0 0 22 18" fill="none">
+      <path d="M15.2426 4.75735C17.5858 7.1005 17.5858 10.8995 15.2426 13.2426M6.75736 13.2426C4.41421 10.8995 4.41421 7.10046 6.75736 4.75732M3.92893 16.0711C0.0236893 12.1658 0.0236893 5.83417 3.92893 1.92892M18.0711 1.92897C21.9763 5.83421 21.9763 12.1659 18.0711 16.0711M13 8.99999C13 10.1046 12.1046 11 11 11C9.89543 11 9 10.1046 9 8.99999C9 7.89542 9.89543 6.99999 11 6.99999C12.1046 6.99999 13 7.89542 13 8.99999Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
 
   </defs>
 </svg>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 4dab5db..fa42c31 100644
--- a/src/index.css
+++ b/src/index.css
@@ -44,6 +44,17 @@ a {
   gap: 24px;
 }
 
+.btn {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  padding: 8px 16px;
+  border-radius: 16px;
+}
+
 .btn-border {
   border: 1px solid transparent;
   color: inherit;
@@ -51,11 +62,7 @@ a {
     linear-gradient(94.73deg, #2BD9FF 0%, #F838D9 100%) border-box;
 }
 
-.btn {
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 20px;
-  padding: 8px 16px;
-  border-radius: 16px;
+.btn-primary {
+  background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
+  color: white;
 }
\ No newline at end of file
diff --git a/src/pages/layout.css b/src/pages/layout.css
index 515bbb3..1de7348 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -31,6 +31,8 @@ header>div:nth-child(2) {
 
 header>div:nth-child(3) {
     justify-self: end;
+    display: flex;
+    gap: 24px;
 }
 
 header input[type="text"] {
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 2aae4eb..659445d 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -14,6 +14,10 @@ export function LayoutPage() {
                 <Icon name="search" size={15} />
             </div>
             <div>
+                <button type="button" className="btn btn-primary">
+                    New Stream
+                    <Icon name="signal" />
+                </button>
                 <button type="button" className="btn btn-border">
                     Login
                     <Icon name="login" />
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 558f577..8c8c99c 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -52,20 +52,7 @@
   gap: 8px;
 }
 
-button.zap {
-  background: linear-gradient(94.73deg, #2BD9FF 0%, #F838D9 100%);
-  border-radius: 16px;
-  padding: 12px 16px;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 20px;
-  color: white;
-  outline: none;
-  border: none;
-  cursor: pointer;
-}
-
-button.zap>span {
+.live-page .btn-primary>span {
   display: flex;
   align-items: center;
   gap: 8px;
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index ed50593..cd77ef5 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -45,7 +45,7 @@ export function StreamPage() {
               <Profile
                 pubkey={thisEvent.data?.pubkey ?? ""}
               />
-              <AsyncButton onClick={() => { }} className="zap">
+              <AsyncButton onClick={() => { }} className="btn btn-primary">
                 Zap
                 <Icon name="zap" size={16} />
               </AsyncButton>