From 563b171ade1926af9c737080c3470e2546e9c984 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 4 Dec 2023 12:53:11 +0000
Subject: [PATCH] refactor: style settings page with tailwind

---
 src/d.ts                    |  3 ++-
 src/pages/layout.tsx        |  4 ----
 src/pages/settings-page.css | 34 ----------------------------------
 src/pages/settings-page.tsx | 11 +++++------
 tailwind.config.js          |  7 ++++++-
 vite.config.ts              |  1 +
 6 files changed, 14 insertions(+), 46 deletions(-)
 delete mode 100644 src/pages/settings-page.css

diff --git a/src/d.ts b/src/d.ts
index d989e64..9c55f2a 100644
--- a/src/d.ts
+++ b/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;
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 11bc568..63f9982 100644
--- a/src/pages/layout.tsx
+++ b/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()}
diff --git a/src/pages/settings-page.css b/src/pages/settings-page.css
deleted file mode 100644
index 5af4363..0000000
--- a/src/pages/settings-page.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/pages/settings-page.tsx b/src/pages/settings-page.tsx
index d3200f0..6221e83 100644
--- a/src/pages/settings-page.tsx
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index ffb9a83..50bd34e 100644
--- a/tailwind.config.js
+++ b/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: [],
 };
diff --git a/vite.config.ts b/vite.config.ts
index eb00c17..7f8fc37 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
       name: "zap.stream",
       ifGitSHA: true,
       command: "git describe --always --tags",
+      ifMeta: false
     }),
   ],
   build: {