forked from Kieran/zap.stream
refactor: style settings page with tailwind
This commit is contained in:
parent
01cb378ff0
commit
563b171ade
3
src/d.ts
3
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;
|
||||
|
@ -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()}
|
||||
|
@ -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;
|
||||
}
|
@ -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>
|
||||
|
@ -2,7 +2,12 @@
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
"gray-1": "#171717",
|
||||
"gray-2": "#222"
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
@ -19,6 +19,7 @@ export default defineConfig({
|
||||
name: "zap.stream",
|
||||
ifGitSHA: true,
|
||||
command: "git describe --always --tags",
|
||||
ifMeta: false
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
|
Loading…
Reference in New Issue
Block a user