From b09e269aed3880ea58cfadbd1aadc44b20958cdf Mon Sep 17 00:00:00 2001 From: BlowaterNostr <127284497+BlowaterNostr@users.noreply.github.com> Date: Mon, 18 Dec 2023 18:23:15 +0800 Subject: [PATCH] remove some tw (#353) --- UI/app-list.tsx | 67 --------------------------------------- UI/components/avatar.tsx | 3 +- UI/components/loading.tsx | 13 ++++---- UI/components/toast.tsx | 3 +- UI/create-group.tsx | 17 +++++----- UI/dm.tsx | 27 ++++++++-------- UI/edit-group.tsx | 14 +++----- UI/edit-profile.tsx | 31 +++++++++--------- UI/editor.tsx | 40 ++++++++++------------- UI/event-detail.tsx | 15 ++++----- UI/invite-button.test.tsx | 6 ++-- UI/invite-button.tsx | 9 +++--- UI/invite-card.tsx | 17 +++++----- UI/key-view.tsx | 23 +++++++------- UI/nav.test.tsx | 24 -------------- UI/nav.tsx | 13 ++++---- UI/note-card.tsx | 7 ++-- UI/profile-card.tsx | 13 ++++---- UI/relay-detail.tsx | 25 +++++++-------- UI/search.tsx | 13 ++++---- UI/user-detail.tsx | 33 ++++++++++--------- 21 files changed, 146 insertions(+), 267 deletions(-) delete mode 100644 UI/app-list.tsx delete mode 100644 UI/nav.test.tsx diff --git a/UI/app-list.tsx b/UI/app-list.tsx deleted file mode 100644 index 6ff9b90..0000000 --- a/UI/app-list.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** @jsx h */ -import { FunctionComponent, h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; -import { Avatar } from "./components/avatar.tsx"; - -type AppListItem = { - picture?: string; - title: string; - subTitle: string; - url: string; -}; - -const AppListData: AppListItem[] = [ - { - picture: "https://info.coracle.social/images/logo.png", - title: "Coracle", - subTitle: "Escape the walled gardens and make social media work for you.", - url: "https://app.coracle.social", - }, - { - picture: "https://getalby.com/alby_icon_yellow_128x128.png", - title: "Alby", - subTitle: "Your Bitcoin & Nostr companion for the web.", - url: "https://getalby.com", - }, - { - title: "Habla", - subTitle: "Habla is a nostr-based web app that enables anyone to earn from their writing.", - url: "https://habla.news/", - }, - { - picture: "https://flycat.club/logo512.png", - title: "Flycat", - subTitle: "A Nostr blogging client", - url: "https://flycat.club/", - }, -]; - -export const AppList: FunctionComponent = () => { - return ( -
- -
- ); -}; diff --git a/UI/components/avatar.tsx b/UI/components/avatar.tsx index 4403569..31620bf 100644 --- a/UI/components/avatar.tsx +++ b/UI/components/avatar.tsx @@ -1,6 +1,5 @@ /** @jsx h */ import { h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; export function Avatar(props: { picture: string | undefined; @@ -17,7 +16,7 @@ export function Avatar(props: { onClick={props.onClick} style={props.style} class={[ - tw`rounded-full${props.onClick ? " cursor-pointer" : ""}`, + `rounded-full${props.onClick ? " cursor-pointer" : ""}`, props.class, ].join(" ")} src={props.picture ? props.picture : "logo.webp"} diff --git a/UI/components/loading.tsx b/UI/components/loading.tsx index c56deae..9a74414 100644 --- a/UI/components/loading.tsx +++ b/UI/components/loading.tsx @@ -1,16 +1,15 @@ /** @jsx h */ import { h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import { HoverButtonBackgroudColor } from "../style/colors.ts"; export function Loading() { return ( -
-
-
-
-
-
+
+
+
+
+
+
diff --git a/UI/components/toast.tsx b/UI/components/toast.tsx index b689387..fa371a4 100644 --- a/UI/components/toast.tsx +++ b/UI/components/toast.tsx @@ -1,7 +1,6 @@ /** @jsx h */ import { Component } from "https://esm.sh/preact@10.17.1"; import { h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import { PrimaryBackgroundColor, PrimaryTextColor } from "../style/colors.ts"; import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts"; @@ -31,7 +30,7 @@ export class Toast extends Component { ? (
{this.state.content}
diff --git a/UI/create-group.tsx b/UI/create-group.tsx index 30b304e..566262f 100644 --- a/UI/create-group.tsx +++ b/UI/create-group.tsx @@ -1,7 +1,6 @@ /** @jsx h */ import { Component } from "https://esm.sh/preact@10.17.1"; import { h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import { ErrorColor, PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts"; import { GroupIcon } from "./icons/group-icon.tsx"; import { ButtonClass, InputClass, LinearGradientsClass } from "./components/tw.ts"; @@ -35,17 +34,17 @@ export class CreateGroup extends Component { error: "", }; styles = { - container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`, + container: `py-6 px-4 bg-[${SecondaryBackgroundColor}]`, header: { - container: tw`text-[${PrimaryTextColor}] text-xl flex`, - icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`, + container: `text-[${PrimaryTextColor}] text-xl flex`, + icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`, }, - title: tw`mt-7 text-[${PrimaryTextColor}]`, - avatar: tw`w-14 h-14 m-auto`, - input: tw`${InputClass} mt-4`, - error: tw`mt-2 text-[${ErrorColor}] text-xs`, + title: `mt-7 text-[${PrimaryTextColor}]`, + avatar: `w-14 h-14 m-auto`, + input: `${InputClass} mt-4`, + error: `mt-2 text-[${ErrorColor}] text-xs`, submit: - tw`w-full mt-4 ${ButtonClass} ${LinearGradientsClass} hover:bg-gradient-to-l disabled:opacity-50`, + `w-full mt-4 ${ButtonClass} ${LinearGradientsClass} hover:bg-gradient-to-l disabled:opacity-50`, }; onNameInput = (name: string) => { diff --git a/UI/dm.tsx b/UI/dm.tsx index 856d5fa..600b8f5 100644 --- a/UI/dm.tsx +++ b/UI/dm.tsx @@ -1,6 +1,5 @@ /** @jsx h */ import { h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import * as cl from "./conversation-list.tsx"; import { MessagePanel, NewMessageListener, RightPanelModel } from "./message-panel.tsx"; import { EventBus } from "../event-bus.ts"; @@ -62,7 +61,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) { if (props.isGroupMessage) { buttons.push( , @@ -82,7 +81,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) { buttons.push( // setting button , @@ -111,9 +110,9 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) { const vDom = (
-
+
{props.currentEditor ? ( -
+
-
+
-
+
{props.currentEditor ? ( ; }) { const styles = { - container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`, + container: `py-6 px-4 bg-[${SecondaryBackgroundColor}]`, header: { - container: tw`text-[${PrimaryTextColor}] text-xl flex`, - icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`, + container: `text-[${PrimaryTextColor}] text-xl flex`, + icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`, }, }; diff --git a/UI/edit-profile.tsx b/UI/edit-profile.tsx index 98de739..0a997a7 100644 --- a/UI/edit-profile.tsx +++ b/UI/edit-profile.tsx @@ -1,6 +1,5 @@ /** @jsx h */ import { createRef, Fragment, h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import { Avatar } from "./components/avatar.tsx"; import { CenterClass, @@ -49,30 +48,30 @@ type State = { export class EditProfile extends Component { styles = { - container: tw`py-4 bg-[${SecondaryBackgroundColor}]`, + container: `py-4 bg-[${SecondaryBackgroundColor}]`, banner: { - container: tw`h-72 w-full rounded-lg mb-20 relative`, + container: `h-72 w-full rounded-lg mb-20 relative`, avatar: - tw`w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`, + `w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`, }, - avatar: tw`w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`, + avatar: `w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`, field: { - title: tw`text-[${PrimaryTextColor}] mt-8`, - input: tw`${InputClass}`, + title: `text-[${PrimaryTextColor}] mt-8`, + input: `${InputClass}`, hint: { - text: tw`text-sm text-[${HintTextColor}]`, - link: tw`text-[${HintLinkColor}]`, + text: `text-sm text-[${HintTextColor}]`, + link: `text-[${HintLinkColor}]`, }, }, addButton: - tw`w-full mt-6 p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] bg-[${DividerBackgroundColor}] hover:bg-[${HoverButtonBackgroudColor}] ${CenterClass}`, + `w-full mt-6 p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] bg-[${DividerBackgroundColor}] hover:bg-[${HoverButtonBackgroudColor}] ${CenterClass}`, submitButton: - tw`w-full p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l`, - divider: tw`${DividerClass}`, + `w-full p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l`, + divider: `${DividerClass}`, custom: { - title: tw`text-[${PrimaryTextColor}] font-bold text-sm`, - text: tw`text-[${HintTextColor}] text-sm`, - error: tw`text-sm text-[${ErrorColor}]`, + title: `text-[${PrimaryTextColor}] font-bold text-sm`, + text: `text-[${HintTextColor}] text-sm`, + error: `text-sm text-[${ErrorColor}]`, }, }; @@ -266,7 +265,7 @@ export class EditProfile extends Component { -
+
diff --git a/UI/editor.tsx b/UI/editor.tsx index a0f914f..c54db63 100644 --- a/UI/editor.tsx +++ b/UI/editor.tsx @@ -1,17 +1,11 @@ /** @jsx h */ import { createRef, h } from "https://esm.sh/preact@10.17.1"; -import { tw } from "https://esm.sh/twind@0.16.16"; import { CenterClass, LinearGradientsClass, NoOutlineClass } from "./components/tw.ts"; import { emitFunc } from "../event-bus.ts"; import { PublicKey } from "../lib/nostr-ts/key.ts"; import { ImageIcon } from "./icons/image-icon.tsx"; -import { - DividerBackgroundColor, - PrimaryBackgroundColor, - PrimaryTextColor, - SecondaryBackgroundColor, -} from "./style/colors.ts"; +import { DividerBackgroundColor, PrimaryBackgroundColor, PrimaryTextColor } from "./style/colors.ts"; import { SendIcon } from "./icons/send-icon.tsx"; import { Component } from "https://esm.sh/preact@10.17.1"; import { RemoveIcon } from "./icons/remove-icon.tsx"; @@ -107,9 +101,9 @@ export class Editor extends Component { }; return ( -
+
@@ -196,7 +190,7 @@ export class Editor extends Component { }} value={props.text} rows={1} - class={tw`flex-1 bg-transparent focus-visible:outline-none placeholder-[${PrimaryTextColor}4D] text-[0.8rem] text-[#D2D3D5] whitespace-nowrap resize-none overflow-x-hidden overflow-y-auto`} + class={`flex-1 bg-transparent focus-visible:outline-none placeholder-[${PrimaryTextColor}4D] text-[0.8rem] text-[#D2D3D5] whitespace-nowrap resize-none overflow-x-hidden overflow-y-auto`} placeholder={props.placeholder} onInput={(e) => { props.emit({ @@ -246,17 +240,17 @@ export class Editor extends Component {