refactor: style settings page with tailwind

src/d.ts

@@ -3,6 +3,8 @@
 
 declare const __XXX: boolean;
 declare const __XXX_HOST: string;
+declare const __ZAP_STREAM_VERSION__: string;
+declare const __SINGLE_PUBLISHER: string;
 
 declare module "*.jpg" {
   const value: unknown;
@@ -48,4 +50,3 @@ declare module "light-bolt11-decoder" {
   }
 }
 
-declare const __SINGLE_PUBLISHER: string;

src/pages/layout.tsx

@@ -125,10 +125,6 @@ export function LayoutPage() {
       </Helmet>
       <header>
         <div className="logo" onClick={() => navigate("/")}></div>
-        {/*<div className="paper">
-          <input className="search-input" type="text" placeholder="Search" />
-          <Icon name="search" size={15} />
-  </div>*/}
         <div className="grow">{/* Future menu items go here */}</div>
         <div className="flex items-center gap-3">
           {langSelector()}

src/pages/settings-page.css

@@ -1,34 +0,0 @@
-.settings-page {
-  width: 753px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (max-width: 1020px) {
-  .settings-page {
-    padding: 0 24px;
-    width: calc(100vw - 48px);
-    margin: unset;
-    overflow-y: hidden;
-  }
-}
-
-.settings-page .tab-content {
-  overflow-wrap: break-word;
-  overflow: hidden;
-  padding: 24px;
-  border-radius: 24px;
-  background: #171717;
-}
-
-.settings-page .tab-options > div {
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.settings-page .tab-options > div:hover {
-  border-radius: 8px;
-  background: #171717;
-}

src/pages/settings-page.tsx

@@ -1,4 +1,3 @@
-import "./settings-page.css";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
@@ -82,18 +81,18 @@ export function SettingsPage() {
   }
 
   return (
-    <div className="settings-page">
-      <div className="flex flex-col gap-5">
+    <div className="rounded-2xl p-3 md:w-[700px] mx-auto w-full">
+      <div className="flex flex-col gap-2">
         <h1>
           <FormattedMessage defaultMessage="Settings" id="D3idYv" />
         </h1>
         <div className="flex flex-col gap-2">
-          <div className="flex gap-2 tab-options">
+          <div className="flex gap-2">
             {[Tab.Account, Tab.Stream].map(t => (
-              <div onClick={() => setTab(t)}>{tabName(t)}</div>
+              <button onClick={() => setTab(t)} className="rounded-xl px-3 py-2 bg-gray-2 hover:bg-gray-1">{tabName(t)}</button>
             ))}
           </div>
-          <div className="tab-content">{tabContent()}</div>
+          <div className="p-5 bg-gray-2 rounded-3xl flex flex-col gap-3">{tabContent()}</div>
         </div>
       </div>
     </div>

tailwind.config.js

@@ -2,7 +2,12 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "gray-1": "#171717",
+        "gray-2": "#222"
+      },
+    },
   },
   plugins: [],
 };

vite.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
       name: "zap.stream",
       ifGitSHA: true,
       command: "git describe --always --tags",
+      ifMeta: false
     }),
   ],
   build: {