New stream button

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>

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;
 }

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"] {

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" />

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;

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>