Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'tailwind' (#651) from mmalmi/snort:main into main

Browse Source
This commit is contained in:
Martti Malmi
2023-10-15 18:28:07 +02:00
committed by Gitea
parent 28fa0b4bc8
commit a168465bdb
13 changed files with 1305 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/app/src/Element/Event/Note.css
View File

@ -136,15 +136,6 @@
gap: 5px;
}
.reaction-pill.reacted {
color: var(--highlight);
}
.reaction-pill:hover {
cursor: pointer;
color: var(--highlight);
}
.trash-icon {
color: var(--error);
margin-right: auto;

10
packages/app/src/Element/Event/NoteFooter.tsx
View File

@ -196,7 +196,7 @@ export default function NoteFooter(props: NoteFooterProps) {
if (targets) {
return (
<AsyncFooterIcon
className={didZap ? "reacted" : ""}
className={didZap ? "text-nostr-orange" : "hover:text-nostr-orange"}
{...longPress()}
title={formatMessage({ defaultMessage: "Zap" })}
iconName={canFastZap ? "zapFast" : "zap"}
@ -214,7 +214,7 @@ export default function NoteFooter(props: NoteFooterProps) {
<Menu
menuButton={
<AsyncFooterIcon
className={hasReposted() ? "reacted" : ""}
className={hasReposted() ? "text-nostr-blue" : "hover:text-nostr-blue"}
iconName="repeat"
title={formatMessage({ defaultMessage: "Repost" })}
value={reposts.length}
@ -255,7 +255,7 @@ export default function NoteFooter(props: NoteFooterProps) {
const reacted = hasReacted("+");
return (
<AsyncFooterIcon
className={reacted ? "reacted" : ""}
className={reacted ? "text-nostr-red" : "hover:text-nostr-red"}
iconName={reacted ? "heart-solid" : "heart"}
title={formatMessage({ defaultMessage: "Like" })}
value={positive.length}
@ -271,7 +271,7 @@ export default function NoteFooter(props: NoteFooterProps) {
if (readonly) return;
return (
<AsyncFooterIcon
className={note.show ? "reacted" : ""}
className={note.show ? "text-nostr-purple" : "hover:text-nostr-purple"}
iconName="reply"
title={formatMessage({ defaultMessage: "Reply" })}
value={props.replies ?? 0}
@ -319,7 +319,7 @@ function AsyncFooterIcon(props: AsyncFooterIconProps) {
const mergedProps = {
...props,
iconSize: 18,
className: `reaction-pill${props.className ? ` ${props.className}` : ""}`,
className: `transition duration-200 ease-in-out reaction-pill${props.className ? ` ${props.className}` : ""}`,
};
return (
<AsyncIcon {...mergedProps}>

2
packages/app/src/Element/Relay/Relay.css
View File

@ -28,6 +28,7 @@
background-color: var(--gray);
user-select: none;
color: var(--font-color);
display: inline-block;
}
.icon-btn:hover {
@ -39,4 +40,5 @@
padding: 2px 10px;
background-color: var(--gray);
border-radius: 10px;
display: inline-block;
}

1
packages/app/src/Element/User/FollowsYou.css
View File

@ -6,4 +6,5 @@
padding: 4px 6px;
background: var(--bg-secondary);
border-radius: 6px;
line-height: 1;
}

16
packages/app/src/Pages/settings/Profile.tsx
View File

@ -107,8 +107,8 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
function editor() {
return (
<div className="flex f-col g24">
<div className="flex f-col w-max g8">
<div className="flex-column g24">
<div className="flex-column w-max g8">
<h4>
<FormattedMessage defaultMessage="Name" />
</h4>
@ -120,7 +120,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
disabled={readonly}
/>
</div>
<div className="flex f-col w-max g8">
<div className="flex-column w-max g8">
<h4>
<FormattedMessage defaultMessage="About" />
</h4>
@ -130,7 +130,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
value={about}
disabled={readonly}></textarea>
</div>
<div className="flex f-col w-max g8">
<div className="flex-column w-max g8">
<h4>
<FormattedMessage defaultMessage="Website" />
</h4>
@ -142,11 +142,11 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
disabled={readonly}
/>
</div>
<div className="flex f-col w-max g8">
<div className="flex-column w-max g8">
<h4>
<FormattedMessage defaultMessage="Nostr Address" />
</h4>
<div className="flex f-col g8 w-max">
<div className="flex-column g8 w-max">
<input
type="text"
className="w-max"
@ -167,7 +167,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
</div>
</div>
</div>
<div className="flex f-col w-max g8">
<div className="flex-column w-max g8">
<h4>
<FormattedMessage defaultMessage="Lightning Address" />
</h4>
@ -190,7 +190,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
if (!id) return null;
return (
<>
<div className="flex f-center image-settings">
<div className="flex justify-center items-center image-settings">
{(props.banner ?? true) && (
<div
style={{

8
packages/app/src/Pages/settings/Relays.tsx
View File

@ -55,7 +55,7 @@ const RelaySettingsPage = () => {
<div className="flex mb10">
<input
type="text"
className="f-grow"
className="grow"
placeholder="wss://my-relay.com"
value={newRelay}
onChange={handleNewRelayChange}
@ -84,13 +84,13 @@ const RelaySettingsPage = () => {
<h3>
<FormattedMessage {...messages.Relays} />
</h3>
<div className="flex f-col mb10">
<div className="flex flex-col mb10">
{Object.keys(relays.item || {}).map(a => (
<Relay addr={a} key={a} />
))}
</div>
<div className="flex mt10">
<div className="f-grow"></div>
<div className="grow"></div>
<AsyncButton type="button" onClick={() => saveRelays()} disabled={login.readonly}>
<FormattedMessage {...messages.Save} />
</AsyncButton>
@ -99,7 +99,7 @@ const RelaySettingsPage = () => {
<h3>
<FormattedMessage defaultMessage="Other Connections" />
</h3>
<div className="flex f-col mb10">
<div className="flex flex-col mb10">
{otherConnections.map(a => (
<Relay addr={a.address} key={a.id} />
))}

72
packages/app/src/index.css
View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--bg-color: #000;
--font-color: #fff;
@ -229,7 +233,10 @@ small {
line-height: 22px; /* 157.143% */
}
button {
button,
[type="button"],
[type="reset"],
[type="submit"] {
position: relative;
cursor: pointer;
padding: 10px 16px;
@ -242,6 +249,12 @@ button {
outline: none;
}
.btn,
input,
select {
@apply rounded-full;
}
button.primary {
background: rgb(239, 150, 68);
background: var(--primary-gradient);
@ -390,6 +403,42 @@ textarea {
font: inherit;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1em;
margin-bottom: 1em;
font-weight: 600;
}
h1 {
font-size: 32px;
line-height: 42px;
}
h2 {
font-size: 26px;
line-height: 36px;
}
h3 {
font-size: 20px;
line-height: 30px;
}
h4 {
font-size: 18px;
line-height: 28px;
}
input[type="text"],
input[type="password"],
input[type="number"],
@ -758,6 +807,16 @@ div.form-col {
line-height: 36px;
}
.main-content .profile-preview {
margin: 8px 0;
}
.main-content h2 {
font-weight: 600;
font-size: 26px;
line-height: 36px;
}
button.tall {
height: 40px;
}
@ -914,6 +973,17 @@ svg.zap-solid {
border: 1px solid var(--border-color);
}
.light .spinner-button {
background: #fff;
border: 1px solid var(--border-color);
color: var(--font-secondary);
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
}
.light .spinner-button:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
}
.main-content.p {
border-bottom: 0;
border-top: 0;

10
packages/app/src/index.tsx
View File

@ -95,16 +95,16 @@ const System = new NostrSystem({
});
async function fetchProfile(key: string) {
const rsp = await fetch(`${CONFIG.httpCache}/profile/${key}`);
if (rsp.ok) {
try {
try {
const rsp = await fetch(`${CONFIG.httpCache}/profile/${key}`);
if (rsp.ok) {
const data = (await rsp.json()) as NostrEvent;
if (data) {
return mapEventToProfile(data);
}
} catch (e) {
console.error(e);
}
} catch (e) {
console.error(e);
}
}