mmalmi/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

note creator style, rm hashtags

Browse Source
This commit is contained in:
Martti Malmi 2024-01-09 14:35:25 +02:00
parent 18beed13c3
commit 8216cb8741
3 changed files with 1 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/app/src/Components/Event/Create/NoteCreator.css
View File

@ -1,12 +1,3 @@
.note-creator {
border: 1px solid transparent;
border-radius: 12px;
box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
background:
linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
}
.note-creator-modal .modal-body > div {
display: flex;
flex-direction: column;
@ -86,17 +77,6 @@
height: 32px;
}
.light .note-creator textarea {
background-color: var(--gray-superdark);
}
.light .note-creator {
box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
background:
linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
}
.note-creator-modal .rti--container {
background-color: unset !important;
box-shadow: unset !important;

22
packages/app/src/Components/Event/Create/NoteCreator.tsx
View File

@ -5,12 +5,10 @@ import { EventBuilder, EventKind, NostrLink, NostrPrefix, TaggedNostrEvent, tryP
import classNames from "classnames";
import { ClipboardEventHandler, DragEvent, useEffect } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { TagsInput } from "react-tag-input-component";
import AsyncButton from "@/Components/Button/AsyncButton";
import { AsyncIcon } from "@/Components/Button/AsyncIcon";
import CloseButton from "@/Components/Button/CloseButton";
import { TrendingHashTagsLine } from "@/Components/Event/Create/TrendingHashTagsLine";
import { sendEventToRelays } from "@/Components/Event/Create/util";
import Note from "@/Components/Event/EventComponent";
import Icon from "@/Components/Icons/Icon";
@ -22,7 +20,7 @@ import ProfileImage from "@/Components/User/ProfileImage";
import useEventPublisher from "@/Hooks/useEventPublisher";
import useLogin from "@/Hooks/useLogin";
import { useNoteCreator } from "@/State/NoteCreator";
import { appendDedupe, openFile, trackEvent } from "@/Utils";
import { openFile, trackEvent } from "@/Utils";
import useFileUpload from "@/Utils/Upload";
import { GetPowWorker } from "@/Utils/wasm";
import { ZapTarget } from "@/Utils/Zapper";
@ -636,7 +634,6 @@ export function NoteCreator() {
onDragLeave={handleDragLeave}
onDrop={handleDrop}
autoFocus
className={classNames("textarea", { "textarea--focused": note.active })}
onChange={c => onChange(c)}
value={note.note}
onFocus={() => note.update(v => (v.active = true))}
@ -648,23 +645,6 @@ export function NoteCreator() {
/>
{renderPollOptions()}
</div>
<div className="flex flex-col g4">
<TagsInput
value={note.hashTags}
onChange={e => note.update(s => (s.hashTags = e))}
placeHolder={formatMessage({
defaultMessage: "Add up to 4 hashtags",
id: "AIgmDy",
})}
separators={["Enter", ","]}
/>
{note.hashTags.length > 4 && (
<small className="warning">
<FormattedMessage defaultMessage="Try to use less than 5 hashtags to stay on topic 🙏" id="d8gpCh" />
</small>
)}
<TrendingHashTagsLine onClick={t => note.update(s => (s.hashTags = appendDedupe(s.hashTags, [t])))} />
</div>
</>
)}
{uploader.progress.length > 0 && <FileUploadProgress progress={uploader.progress} />}

37
packages/app/src/Components/Event/Create/TrendingHashTagsLine.tsx
View File

@ -1,37 +0,0 @@
import { FormattedMessage } from "react-intl";
import { ErrorOrOffline } from "@/Components/ErrorOrOffline";
import NostrBandApi from "@/External/NostrBand";
import useCachedFetch from "@/Hooks/useCachedFetch";
import { useLocale } from "@/IntlProvider";
export function TrendingHashTagsLine(props: { onClick: (tag: string) => void }) {
const { lang } = useLocale();
const api = new NostrBandApi();
const trendingHashtagsUrl = api.trendingHashtagsUrl(lang);
const storageKey = `nostr-band-${trendingHashtagsUrl}`;
const { data: hashtags, isLoading, error } = useCachedFetch(trendingHashtagsUrl, storageKey, data => data.hashtags);
if (error && !hashtags) return <ErrorOrOffline error={error} className="p" />;
if (isLoading || hashtags.length === 0) return null;
return (
<div className="flex flex-col g4">
<small>
<FormattedMessage defaultMessage="Popular Hashtags" id="ddd3JX" />
</small>
<div className="flex g4 flex-wrap">
{hashtags.slice(0, 5).map(a => (
<span
key={a.hashtag}
className="px-2 py-1 bg-dark rounded-full pointer nowrap"
onClick={() => props.onClick(a.hashtag)}>
#{a.hashtag}
</span>
))}
</div>
</div>
);
}