Kieran
/
snort
5
14
Fork 14
Code Issues 53 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

Squashed commit of the following:
continuous-integration/drone/push Build is failing Details 

commit 87cda09ac6442820a0b16933989525dcb53a4425
Merge: 02d9bbf7 2bec5d95
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 23:13:32 2023 +0900

    Merge branch 'css-fixes'

commit 2bec5d95c00476537dc5460f01557af12c1baa7b
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 22:40:27 2023 +0900

    minor tweak on tabs

commit 776005e5eaafd5a8bc94cbf7821579a5bb831b1c
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:53 2023 +0900

    added subscription tier borders in light mode

commit 66a55feb9950f433787d2a6966b200339462c4c6
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:43 2023 +0900

    fixed tab colors in light mode

commit 830cc3c973301d2ce63745e1e328c69a219db1ef
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:28:29 2023 +0900

    secondary color adjustment

commit 8c9939f3484c2dd5678ac72795dba7fa7f970402
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:12:46 2023 +0900

    szh menu shadow fix

commit a59124f91055a4a9a3758823dee76e8bc44c5e83
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Tue Sep 19 00:01:34 2023 +0900

    misc fixes

commit a4da5d86677eadace1b86df2d72e35255178a5f0
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 17:50:15 2023 +0900

    Re-ordered reactions for consistency

commit 665162b6918b1666f1413884d4b4185d4df0f74a
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 13:25:55 2023 +0900

    styled light load more button

commit a3058168d6df685cdf9d2871f8e3b335318eedcb
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:38:16 2023 +0900

    styled subscriptions a bit

commit dcc940d96cefeca476e16891c148e2058fb48fd7
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:22:39 2023 +0900

    adjusted input border to 2px and font size 15

commit 690e1662eeded6eab9f3029ce168d44b35604dca
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:22:12 2023 +0900

    fixed settings tabs paddings

commit a5809c4c7d502da42788c6c758d6025e79699cf5
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:45 2023 +0900

    removed some double borders

commit d1e0c331ed665c63160c2ae83f9e010b666c39df
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:28 2023 +0900

    follow is primary now

commit 338bc03aa3616906326fe0a777a63c04dc4a7f48
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Mon Sep 18 00:05:10 2023 +0900

    made follow button a primary

commit 4b5eb0c4fc71e0a8cf822ba8cac8facc53301e1e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:43:12 2023 +0900

    made follows you into a label

commit 0a9d616402528311f4feba53f0ba9171b0640274
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:35:07 2023 +0900

    created secondary button bg variable

commit 2abcab804adf392e8f7ff2907762bc35c77f0297
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:34:41 2023 +0900

    added gap to profile buttons

commit 04a54ddb0d7b19c5ea7f420645c6bd3d37747c17
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 23:34:26 2023 +0900

    change new note button color

commit 2d2401586af70187785cff693061666d1de343f2
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:57:01 2023 +0900

    forget what I did here

commit 14d8bd255cc41e5450b18908b807e3d745c10fbe
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:35:32 2023 +0900

    adjusted new note button position

commit e3a6143626424b898aad43fc2eb1625336342c16
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 22:32:37 2023 +0900

    added primary button colors

commit 4d02bfef54668d1a09f0615634d6be540c9837ea
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 18:51:37 2023 +0900

    cleaned up modal reactions

commit 891f7985c6cf674d03188a95b3ca807ecb16c0bc
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sun Sep 17 00:10:46 2023 +0900

    minimized error text from scary to less scary

commit dc563e7ded8794e43ed14409d5ffeb917172b800
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 23:50:27 2023 +0900

    adjusted search colors in light mode

commit 328cc853794c9b32abf8eab067bfd3f9b1a76aee
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:59:33 2023 +0900

    revert main font size, adjust thread root size

commit 2e55cbcbc1bc6e9494410ec77052adb3fd8bbbcf
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:49:09 2023 +0900

    re-styled quoted replies note creator

commit a3257eecff0a028a22d975eec778daeb73d8ec2e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:38:00 2023 +0900

    got rid of weird filter menu shadow and radius

commit 258d51c6fddb65d3afecd595a1fd9352c2cfa13e
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:12:03 2023 +0900

    adjusted header bottom spacing per design to 8px

commit 03669925086e8a4995124d6e9077d61373fa89d3
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 22:00:34 2023 +0900

    adjusted gap to 16 per design

commit 9a1c77b0dd876632ecd313d25ce163204ff89897
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:56:50 2023 +0900

    set root font size to 16px per design

commit 4d0a91317d8946465b0d591db3d13c2e3df63ff8
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:50:57 2023 +0900

    made search full width

commit 3ea6b4ca005b27003f1554d53def14337620af2a
Author: Karnage <karnagebitcoin@gmail.com>
Date:   Sat Sep 16 21:47:29 2023 +0900

    fixed line height on thread root note
This commit is contained in:
Kieran 2023-09-22 09:33:21 +01:00
parent 02d9bbf70d
commit a3896cf55a
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
26 changed files with 380 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/Element/BackButton.css
View File

@ -6,18 +6,17 @@
font-size: var(--font-size);
display: flex;
align-items: center;
border: none !important;
box-shadow: none !important;
}
.back-button svg {
margin-right: 0.5em;
}
.back-button:hover {
.back-button:hover:hover,
.light .back-button:hover {
text-decoration: underline;
}
.back-button:hover {
background: none;
color: var(--font-color);
text-decoration: underline;
}
box-shadow: none !important;
background: none !important;
}

5
packages/app/src/Element/FollowsYou.css
View File

@ -3,4 +3,7 @@
font-size: var(--font-size-tiny);
margin-left: 0.2em;
font-weight: normal;
}
padding: 4px 6px;
background: var(--bg-secondary);
border-radius: 6px;
}

8
packages/app/src/Element/Invoice.css
View File

@ -8,6 +8,12 @@
background: var(--invoice-gradient);
}
.note-invoice.error {
padding: 8px 12px !important;
color: #AAA;
background: transparent;
}
.note-invoice.expired {
background: var(--expired-invoice-gradient);
color: var(--font-secondary-color);
@ -86,4 +92,4 @@
top: 26px;
right: 20px;
color: var(--font-color);
}
}

25
packages/app/src/Element/LinkPreview.css
View File

@ -8,7 +8,7 @@
cursor: pointer;
}
.link-preview-container > a {
.link-preview-container>a {
text-decoration: none;
}
@ -17,22 +17,22 @@
line-height: 21px;
}
.link-preview-title > h1 {
.link-preview-title>h1 {
padding: 0;
font-size: 16px;
font-weight: 700;
}
.link-preview-container:hover .link-preview-title > h1 {
.link-preview-container:hover .link-preview-title>h1 {
color: var(--highlight);
}
.link-preview-title > small {
.link-preview-title>small {
color: var(--font-secondary-color);
font-size: 14px;
}
.link-preview-title > small.host {
.link-preview-title>small.host {
font-size: 12px;
}
@ -40,12 +40,23 @@
margin: 0 0 15px 0 !important;
border-radius: 0 !important;
background-image: var(--img-url);
min-height: 250px;
min-height: 220px;
max-height: 500px;
background-size: cover;
background-position: center;
}
.light .link-preview-container {
background: #ddd;
background: #FFF;
border: 1px solid var(--border-color);
}
.light .link-preview-container:hover {
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px;
}
@media (min-width: 1025px) {
.link-preview-image {
min-height: 342px;
}
}

12
packages/app/src/Element/Modal.css
View File

@ -13,8 +13,8 @@
.modal-body {
background-color: var(--gray-superdark);
padding: 16px 24px;
border-radius: 12px;
padding: 24px;
border-radius: 16px;
display: flex;
flex-direction: column;
width: 500px;
@ -25,3 +25,11 @@
.modal-body button.secondary:hover {
background-color: var(--gray);
}
.light .modal-body {
background-color: #FFF;
}
.modal.spotlight {
color: #FFF;
}

27
packages/app/src/Element/Note.css
View File

@ -2,23 +2,23 @@
min-height: 110px;
display: flex;
flex-direction: column;
gap: 12px;
gap: 16px;
}
.note:hover {
cursor: pointer;
}
.note > .header .reply {
.note>.header .reply {
font-size: 13px;
color: var(--font-secondary-color);
}
.note > .header .reply a {
.note>.header .reply a {
color: var(--highlight);
}
.note > .header .reply a:hover {
.note>.header .reply a:hover {
text-decoration-color: var(--highlight);
}
@ -65,6 +65,7 @@
border: 1px solid var(--gray-superdark);
border-radius: 12px;
padding: 8px 16px 16px 16px;
margin-top: 16px;
}
.note .footer .footer-reactions {
@ -82,12 +83,12 @@
}
}
.note > .header img:hover,
.note > .header .name > .reply:hover {
.note>.header img:hover,
.note>.header .name>.reply:hover {
cursor: pointer;
}
.note > .note-creator {
.note>.note-creator {
margin-top: 12px;
margin-left: 56px;
}
@ -97,7 +98,7 @@
user-select: none;
}
.note .poll-body > div {
.note .poll-body>div {
border: 1px solid var(--font-secondary-color);
border-radius: 5px;
margin-bottom: 3px;
@ -105,17 +106,17 @@
overflow: hidden;
}
.note .poll-body > div > div {
.note .poll-body>div>div {
padding: 5px 10px;
z-index: 2;
}
.note .poll-body > div:hover {
.note .poll-body>div:hover {
cursor: pointer;
border: 1px solid var(--highlight);
}
.note .poll-body > div > .progress {
.note .poll-body>div>.progress {
background-color: var(--gray);
height: stretch;
height: -webkit-fill-available;
@ -192,6 +193,6 @@
text-decoration: underline;
}
.note .body > .text > a {
.note .body>.text>a {
color: var(--highlight);
}
}

25
packages/app/src/Element/NoteCreator.css
View File

@ -12,9 +12,13 @@
}
.note-creator-modal .note.card {
padding: 0;
border: none;
}
.note-creator-modal .note.card.note-quote {
border: 1px solid var(--gray);
padding: 8px 12px;
border-radius: 12px;
background-color: var(--gray-dark);
}
.note-creator-modal h4 {
@ -81,13 +85,13 @@
.note-create-button {
width: 48px;
height: 48px;
background-color: var(--highlight);
color: white;
background: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
border: none;
border-radius: 100%;
position: fixed;
bottom: 50px;
right: calc(((100vw - 640px) / 2) - 60px);
bottom: 40px;
right: calc(((100vw - 640px) / 2) - 75px);
display: flex;
align-items: center;
justify-content: center;
@ -98,3 +102,14 @@
right: 16px;
}
}
.light .note-creator textarea {
background-color: #FFF;
}
.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;
}

8
packages/app/src/Element/NoteCreator.tsx
View File

@ -300,9 +300,9 @@ export function NoteCreator() {
e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
? false
: // otherwise return selectedCustomRelays with target relay added / removed
a.filter(el =>
el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
),
a.filter(el =>
el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
),
),
)
}
@ -397,7 +397,7 @@ export function NoteCreator() {
<button className="secondary" onClick={cancel}>
<FormattedMessage defaultMessage="Cancel" />
</button>
<AsyncButton onClick={onSubmit}>
<AsyncButton className="primary" onClick={onSubmit}>
{replyTo ? <FormattedMessage defaultMessage="Reply" /> : <FormattedMessage defaultMessage="Send" />}
</AsyncButton>
</div>

6
packages/app/src/Element/NoteFooter.tsx
View File

@ -260,10 +260,10 @@ export default function NoteFooter(props: NoteFooterProps) {
<>
<div className="footer">
<div className="footer-reactions">
{tipButton()}
{reactionIcon()}
{repostIcon()}
{replyIcon()}
{repostIcon()}
{reactionIcon()}
{tipButton()}
{powIcon()}
</div>
{willRenderNoteCreator && <NoteCreator />}

3
packages/app/src/Element/ProfilePreview.css
View File

@ -2,6 +2,7 @@
display: flex;
align-items: center;
min-height: 59px;
padding: 0 16px;
}
.profile-preview .pfp {
@ -18,4 +19,4 @@
.profile-preview button {
min-width: 98px;
}
}

32
packages/app/src/Element/Reactions.css
View File

@ -29,11 +29,31 @@
color: var(--font-tertiary-color);
}
.reactions-modal .modal-body .tabs.p {
padding: 12px 0;
}
.reactions-modal .modal-body .reactions-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 32px;
margin-bottom: 12px;
}
.reactions-modal .modal-body .tab {
background: none;
border: none;
}
.reactions-modal .modal-body .tab.active {
background: #FFF;
color: #000;
}
.reactions-modal .modal-body .tab:hover {
background: rgba(255, 255, 255, 0.8);
color: #000;
border: none;
}
.reactions-modal .modal-body .reactions-header h2 {
@ -47,8 +67,11 @@
.reactions-modal .modal-body .reactions-body {
overflow: scroll;
height: 40vh;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* for Internet Explorer, Edge */
scrollbar-width: none;
/* Firefox */
margin-top: 12px;
}
.reactions-modal .modal-body .reactions-body::-webkit-scrollbar {
@ -70,6 +93,7 @@
.reactions-item .follow-button {
margin-left: auto;
}
.reactions-item .zap-reaction-icon {
@ -91,4 +115,4 @@
.reactions-modal .modal-body .tab.disabled {
display: none;
}
}
}

10
packages/app/src/Element/RootTabs.css
View File

@ -4,9 +4,9 @@
justify-content: center;
}
.root-type > button {
.root-type>button {
background: white;
color: black;
color: var(--bg-color);
font-size: 16px;
padding: 10px 16px;
border-radius: 1000px;
@ -14,4 +14,10 @@
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid var(--gray-superdark);
}
.light .root-type>button {
color: var(--font-color);
border: 1px solid var(--border-color);
}

31
packages/app/src/Element/Tabs.css
View File

@ -3,8 +3,10 @@
align-items: center;
flex-direction: row;
overflow-x: scroll;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* for Internet Explorer, Edge */
scrollbar-width: none;
/* Firefox */
white-space: nowrap;
gap: 8px;
}
@ -13,9 +15,23 @@
display: none;
}
.light .tab {
border: 1px solid var(--border-color);
}
.tab.active {
background: var(--gray-superdark);
}
.light .tab.active {
background: #FFF;
border-color: #bfc6d6;
}
.tab {
background: var(--gray-ultradark);
color: var(--font-tertiary-color);
color: var(--font-secondary-color);
border-radius: 100px;
font-weight: 600;
font-size: 16px;
@ -27,11 +43,10 @@
}
.tab.active {
color: black;
background: white;
color: var(--font-color);
}
.tabs > div {
.tabs>div {
cursor: pointer;
}
@ -42,5 +57,5 @@
}
.tab:hover {
border-color: var(--font-color);
}
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
}

9
packages/app/src/Element/Thread.css
View File

@ -7,11 +7,12 @@
box-shadow: none;
}
.thread-root.note > .body .text {
font-size: 19px;
.thread-root.note>.body .text {
font-size: 18px;
line-height: 27px;
}
.thread-root.note > .footer {
.thread-root.note>.footer {
padding-left: 0;
}
@ -97,4 +98,4 @@
.thread-container .hidden-note {
padding-left: 48px;
}
}

9
packages/app/src/Element/Timeline.css
View File

@ -10,16 +10,16 @@
.latest-notes-fixed {
position: fixed;
left: calc(50% - 261px / 2 + 0.5px);
left: 45%;
top: 12px;
width: 261px;
left: calc(50% - 261px / 2 + 0.5px);
width: auto;
z-index: 42;
opacity: 0.9;
box-shadow: 0px 0px 15px rgba(78, 0, 255, 0.6);
color: white;
background: var(--highlight);
border-radius: 100px;
border: none;
}
@media (max-width: 520px) {
@ -36,6 +36,7 @@
margin: 0;
margin-right: -26px;
}
.latest-notes .pfp:last-of-type {
margin-right: -8px;
}
@ -45,4 +46,4 @@
width: 32px;
height: 32px;
border: 2px solid white;
}
}

9
packages/app/src/Pages/Layout.css
View File

@ -20,6 +20,7 @@ header {
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 24px;
}
.header-actions .avatar {
@ -33,6 +34,7 @@ header {
flex-direction: row;
align-items: center;
gap: 24px;
width: 100%;
}
.header-actions .btn {
@ -65,6 +67,11 @@ header {
border-radius: 1000px;
}
.light .search {
background: #FFF;
border: 1px solid var(--border-color);
}
.search input {
border: none !important;
border-radius: 0 !important;
@ -82,4 +89,4 @@ header {
.search input {
display: none;
}
}
}

2
packages/app/src/Pages/Layout.tsx
View File

@ -93,7 +93,7 @@ export default function Layout() {
{!shouldHideNoteCreator && (
<>
<button className="note-create-button" onClick={handleNoteCreatorButtonClick}>
<button className="primary note-create-button" onClick={handleNoteCreatorButtonClick}>
<Icon name="plus" size={16} />
</button>
<NoteCreator />

29
packages/app/src/Pages/MessagesPage.css
View File

@ -5,6 +5,12 @@
height: var(--full-height);
/* 100vh - header - padding */
overflow: hidden;
padding: 4px;
}
.dm-page>div:nth-child(1)::-webkit-scrollbar-track {
background: transparent !important;
;
}
/* These should match what is in code too */
@ -13,7 +19,7 @@
grid-template-columns: 100vw;
}
.dm-page > div:nth-child(1) {
.dm-page>div:nth-child(1) {
margin: 0 !important;
}
}
@ -25,30 +31,31 @@
}
/* User list */
.dm-page > div:nth-child(1) {
.dm-page>div:nth-child(1) {
overflow-y: auto;
padding: 0 5px;
}
/* Chat window */
.dm-page > div:nth-child(2) {
.dm-page>div:nth-child(2) {
padding: 0 12px;
margin: 0 4px;
height: var(--full-height);
background-color: var(--gray-superdark);
border-radius: 16px;
}
/* Profile pannel */
.dm-page > div:nth-child(3) {
margin: 0 10px;
.dm-page>div:nth-child(3) {
margin: 16px;
}
.dm-page > div:nth-child(3) .avatar {
.dm-page>div:nth-child(3) .avatar {
margin-left: auto;
margin-right: auto;
}
.dm-page > div:nth-child(3) .card {
.dm-page>div:nth-child(3) .card {
cursor: pointer;
}
@ -56,7 +63,7 @@
min-width: 100px;
}
.dm-page .chat-list > div.active {
.dm-page .chat-list>div.active {
background-color: var(--gray-superdark);
border-radius: 16px;
}
@ -66,13 +73,13 @@
overflow-y: auto;
}
.new-chat-modal .user-list > div {
.new-chat-modal .user-list>div {
padding: 8px 12px;
cursor: pointer;
}
/* user in list selected */
.new-chat-modal .user-list > div.active {
.new-chat-modal .user-list>div.active {
background-color: var(--gray-dark);
border-radius: 16px;
}
@ -100,4 +107,4 @@
font-size: 11px;
letter-spacing: 1.21px;
text-transform: uppercase;
}
}

21
packages/app/src/Pages/ProfilePage.css
View File

@ -2,7 +2,9 @@
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid var(--gray-superdark);
border: 1px solid var(--border-color);
border-bottom: none;
border-top: none;
}
.profile .banner {
@ -17,12 +19,14 @@
display: flex;
align-items: center;
align-self: flex-end;
gap: 8px;
}
.profile .icon-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.profile .profile-actions button:not(:last-child) {
@ -39,6 +43,7 @@
max-width: 720px;
height: 280px;
}
.profile .profile-actions button.icon:not(:last-child) {
margin-right: 2px;
}
@ -58,23 +63,23 @@
white-space: pre-wrap;
}
.details-wrapper > .name > h2 {
.details-wrapper>.name>h2 {
margin: 0 0 4px 0;
font-weight: 600;
font-size: 21px;
}
.details-wrapper > .name > .nip05 {
.details-wrapper>.name>.nip05 {
font-size: 15px;
}
.profile-wrapper > .avatar-wrapper {
.profile-wrapper>.avatar-wrapper {
z-index: 1;
display: flex;
justify-content: space-between;
}
.profile-wrapper > .avatar-wrapper .avatar {
.profile-wrapper>.avatar-wrapper .avatar {
width: 100px;
height: 100px;
background-image: var(--img-url);
@ -87,7 +92,7 @@
}
.profile .about {
color: var(--font-secondary-color);
color: var(--font-color);
font-size: 16px;
line-height: 26px;
}
@ -138,6 +143,7 @@
.profile .website a {
text-decoration: none;
}
.profile .website a:hover {
text-decoration: underline;
}
@ -205,6 +211,7 @@
.profile .nip05 .nick {
display: unset;
}
.profile .nip05 .domain {
display: unset;
}
@ -222,4 +229,4 @@
.badge-card .body {
margin-bottom: 0;
}
}

18
packages/app/src/Pages/ProfilePage.tsx
View File

@ -326,14 +326,14 @@ export default function ProfilePage() {
targets={
lnurl?.lnurl && id
? [
{
type: "lnurl",
value: lnurl?.lnurl,
weight: 1,
name: user?.display_name || user?.name,
zap: { pubkey: id },
} as ZapTarget,
]
{
type: "lnurl",
value: lnurl?.lnurl,
weight: 1,
name: user?.display_name || user?.name,
zap: { pubkey: id },
} as ZapTarget,
]
: undefined
}
show={showLnQr}
@ -431,7 +431,7 @@ export default function ProfilePage() {
<Avatar pubkey={id ?? ""} user={user} />
<div className="profile-actions">
{renderIcons()}
{!isMe && id && <FollowButton pubkey={id} />}
{!isMe && id && <FollowButton className="primary" pubkey={id} />}
</div>
</div>
);

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

@ -152,7 +152,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
</h4>
<input className="w-max" type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
</div>
<AsyncButton onClick={() => saveProfile()}>
<AsyncButton className="primary" onClick={() => saveProfile()}>
<FormattedMessage defaultMessage="Save" />
</AsyncButton>
</div>

12
packages/app/src/Pages/settings/Root.css
View File

@ -9,11 +9,11 @@
}
}
.settings-nav > div {
border: 1px solid var(--gray-superdark);
.settings-nav>div {
border: 1px solid var(--border-color);
}
.settings-nav > div.content {
.settings-nav>div.content {
padding: 12px 16px;
}
@ -26,7 +26,7 @@
grid-template-columns: 24px 1fr 24px;
align-items: center;
cursor: pointer;
padding: 12px 16px;
padding: 12px 0px 12px 16px;
gap: 8px;
font-size: 16px;
font-weight: 600;
@ -57,6 +57,6 @@
margin-left: auto;
}
.settings-group-header .collapse-icon > svg {
.settings-group-header .collapse-icon>svg {
width: 8px;
}
}

4
packages/app/src/Pages/subscribe/ManageSubscription.tsx
View File

@ -33,7 +33,7 @@ export default function ManageSubscriptionPage() {
return <PageSpinner />;
}
return (
<div className="main-content p flex-column g24">
<div className="main-content p flex-column g16">
<h2>
<FormattedMessage defaultMessage="Subscriptions" />
</h2>
@ -41,7 +41,7 @@ export default function ManageSubscriptionPage() {
<SubscriptionCard sub={a} key={a.id} />
))}
{subs.length !== 0 && (
<button onClick={() => navigate("/subscribe")}>
<button className="primary" onClick={() => navigate("/subscribe")}>
<FormattedMessage defaultMessage="Buy Subscription" />
</button>
)}

2
packages/app/src/Pages/subscribe/SubscriptionCard.tsx
View File

@ -62,7 +62,7 @@ export default function SubscriptionCard({ sub }: { sub: Subscription }) {
return (
<>
<div className="p">
<div className="p subtier">
<div className="flex card-title">
<Icon name="badge" className="mr5" size={25} />
{mapPlanName(sub.type)}

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

@ -15,8 +15,8 @@
--live: #f83838;
--heart: #ef4444;
--zap: #ff710a;
--gray-superlight: #eee;
--bg-secondary: #2A2A2A;
--gray-light: #999;
--gray-medium: #7b7b7b;
--gray: #333;
@ -28,22 +28,20 @@
--gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
--snort-gradient: linear-gradient(90deg, #a178ff 0%, #ff6baf 100%);
--dm-gradient: linear-gradient(90deg, #5722d2 0%, #db1771 100%);
--invoice-gradient: linear-gradient(
45deg,
var(--gray-superdark) 50%,
rgba(161, 120, 255, 0.2),
rgba(255, 107, 175, 0.2) 108.33%
);
--paid-invoice-gradient: linear-gradient(
45deg,
var(--gray-superdark) 50%,
rgba(161, 120, 255, 0.6),
rgba(255, 107, 175, 0.6) 108.33%
);
--invoice-gradient: linear-gradient(45deg,
var(--gray-superdark) 50%,
rgba(161, 120, 255, 0.2),
rgba(255, 107, 175, 0.2) 108.33%);
--paid-invoice-gradient: linear-gradient(45deg,
var(--gray-superdark) 50%,
rgba(161, 120, 255, 0.6),
rgba(255, 107, 175, 0.6) 108.33%);
--expired-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, var(--gray), var(--gray-superdark));
--strike-army-gradient: linear-gradient(to bottom right, #ccff00, #a1c900);
--sub-bg: #111;
--header-padding-tb: 10px;
--btn-color: #FFF;
--primary-gradient: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
}
::-webkit-scrollbar {
@ -70,27 +68,27 @@ html {
}
html.light {
--bg-color: #f8f8f8;
--bg-color: #fff;
--font-color: #2f3f64;
--font-secondary-color: #71717a;
--font-secondary-color: #5C6C92;
--font-tertiary-color: #52525b;
--border-color: #dee1e8;
--highlight: #7139f1;
--modal-bg-color: rgba(240, 240, 240, 0.8);
--gray: #999;
--modal-bg-color: #0009;
--gray: #dee1e8;
--gray-secondary: #aaa;
--gray-tertiary: #bbb;
--gray-superlight: #333;
--gray-light: #555;
--gray-dark: #ccc;
--gray-superdark: #ddd;
--gray-ultradark: #eee;
--gray-superdark: #FFF;
--gray-ultradark: #FFF;
--dm-gradient: var(--gray);
--invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73333, #fc4a1a33);
--paid-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73399, #fc4a1a99);
--bg-secondary: #FFF;
--sub-bg: #FFF;
--btn-color: #FFF;
}
body {
@ -136,12 +134,12 @@ code {
.card {
padding: 12px 16px;
border-bottom: 1px solid var(--gray-superdark);
border-bottom: 1px solid var(--border-color);
}
/* Card inside card */
.card .card {
border: 1px solid var(--gray-superdark);
border: 1px solid var(--border-color);
border-radius: 16px;
min-height: 0;
}
@ -150,9 +148,10 @@ code {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: -8px;
}
.card > .footer {
.card>.footer {
display: flex;
flex-direction: row;
}
@ -164,16 +163,28 @@ code {
button {
cursor: pointer;
padding: 6px 12px;
padding: 10px 16px;
font-weight: 600;
color: var(--bg-color);
font-size: var(--font-size);
background-color: var(--font-color);
background-color: var(--btn-color);
border: none;
border-radius: 16px;
border-radius: 100px;
outline: none;
}
button.primary {
background: rgb(239, 150, 68);
background: var(--primary-gradient);
color: #FFF !important;
border: none !important;
}
button.primary:hover {
box-shadow: 0px 1px 4px rgba(128, 29, 255, 1) !important;
background: var(--primary-gradient) !important;
}
button:disabled {
opacity: 0.3;
cursor: not-allowed;
@ -187,7 +198,7 @@ button.secondary:disabled {
button:disabled:hover {
cursor: not-allowed;
color: var(--font-color);
border-color: var(--gray-superdark);
border-color: var(--gray-border-color);
}
.light button.transparent {
@ -211,11 +222,7 @@ button.transparent {
font-weight: 400;
color: var(--font-secondary);
background-color: transparent;
border: 1px solid var(--gray-superdark);
}
.light button.secondary {
background-color: var(--gray);
border: 1px solid var(--border-color);
}
button.secondary:hover {
@ -229,15 +236,13 @@ button.transparent:hover {
background-color: var(--font-color);
}
.light button.secondary:hover {
background-color: var(--gray-secondary);
}
button.icon {
border: none;
background: none;
background: var(--bg-secondary);
color: var(--font-color);
min-height: 28px;
width: 40px;
height: 40px;
padding: 10px;
}
button.icon .icon-wrapper {
@ -307,13 +312,15 @@ input[type="password"],
input[type="number"],
select,
textarea {
padding: 12px 16px;
padding: 8px 12px;
color: var(--font-color);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
outline: none;
line-height: 24px; /* 150% */
font-size: 15px;
line-height: 24px;
/* 150% */
}
.light input[type="text"],
@ -321,7 +328,7 @@ textarea {
.light input[type="number"],
.light select,
.light textarea {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 2px solid var(--border-color);
}
option,
@ -335,8 +342,8 @@ textarea:placeholder {
}
input[type="checkbox"] {
width: 24px;
height: 24px;
width: 20px;
height: 20px;
}
input:disabled {
@ -482,22 +489,22 @@ div.form-group {
grid-template-columns: 1fr 2fr;
}
div.form-group > div {
div.form-group>div {
padding: 3px 5px;
}
div.form-group > div:nth-child(1) {
div.form-group>div:nth-child(1) {
display: flex;
align-self: center;
}
div.form-group > div:nth-child(2) {
div.form-group>div:nth-child(2) {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
div.form-group > div:nth-child(2) input {
div.form-group>div:nth-child(2) input {
flex-grow: 1;
}
@ -601,7 +608,7 @@ small.xs {
margin: 0 auto;
}
.tweet div .twitter-tweet > iframe {
.tweet div .twitter-tweet>iframe {
max-height: unset;
}
@ -630,8 +637,9 @@ small.xs {
.main-content h2 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
font-size: 26px;
line-height: 36px;
margin: 12px 0 0 0;
}
.main-content .h4 {
@ -639,7 +647,7 @@ small.xs {
}
.main-content .profile-preview {
margin-bottom: 16px;
margin: 8px 0;
}
button.tall {
@ -706,18 +714,24 @@ button.tall {
.rta__textarea {
/* Fix width calculation to account for 32px padding on input */
width: calc(100% - 32px) !important;
font-size: 15px !important;
}
.ctx-menu {
color: var(--font-secondary-color) !important;
color: var(--font-color) !important;
background: transparent !important;
min-width: 0 !important;
margin: 0 !important;
}
.szh-menu {
border-radius: 16px !important;
padding: 0 !important;
}
.ctx-menu li {
background: #1e1e1e !important;
padding: 8px 32px 8px 32px !important;
padding: 8px 24px !important;
display: grid !important;
grid-template-columns: 2rem auto !important;
font-size: 16px;
@ -725,7 +739,7 @@ button.tall {
}
.light .ctx-menu li {
background: var(--gray-superdark) !important;
background: #FFF !important;
}
.ctx-menu li:first-of-type {
@ -733,13 +747,13 @@ button.tall {
}
.ctx-menu li:nth-child(3) {
padding-top: 24px !important;
padding-top: 16px !important;
border-top-left-radius: 16px !important;
border-top-right-radius: 16px !important;
}
.ctx-menu li:last-of-type {
padding-bottom: 24px !important;
padding-bottom: 16px !important;
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 16px !important;
}
@ -754,8 +768,8 @@ button.tall {
}
.light .ctx-menu li:hover {
color: white !important;
background: var(--font-secondary-color) !important;
color: var(--font-color) !important;
background: #EEE !important;
}
.ctx-menu .red {
@ -782,3 +796,54 @@ svg.heart-solid {
svg.zap-solid {
color: var(--zap);
}
.subtier {
background: var(--sub-bg);
border-radius: 16px;
}
.light .subtier {
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;
}
.light button.icon {
border: 1px solid var(--border-color);
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
}
.light button.icon:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
}
.light button,
.light button.secondary {
color: #4B5C83;
background-color: #FFF;
border: 1px solid var(--border-color);
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
}
.light button:hover,
.light button.secondary:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px !important;
}
.light .modal button.secondary:hover {
background: #FFF !important;
}

35
yarn.lock
View File

@ -2775,6 +2775,40 @@ __metadata:
languageName: unknown
linkType: soft
"@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
version: 0.0.0-use.local
resolution: "@snort/nostr@workspace:packages/nostr"
dependencies:
"@noble/curves": ^1.0.0
"@noble/hashes": ^1.2.0
"@types/chai": ^4.3.4
"@types/events": ^3.0.0
"@types/expect": ^24.3.0
"@types/express": ^4.17.17
"@types/mocha": ^10.0.1
"@types/node": ^20.4.1
"@types/uuid": ^9.0.1
"@typescript-eslint/eslint-plugin": ^5.53.0
"@typescript-eslint/parser": ^5.53.0
base64-js: ^1.5.1
bech32: ^2.0.0
chai: ^4.3.7
eslint: ^8.34.0
events: ^3.3.0
express: ^4.18.2
isomorphic-ws: ^5.0.0
mocha: ^10.2.0
ts-loader: ^9.4.2
ts-mocha: ^10.0.0
ts-node: ^10.9.1
typescript: ^4.9.5
uuid: ^9.0.0
webpack: ^5.77.0
webpack-cli: ^5.0.1
ws: ^8.12.1
languageName: unknown
linkType: soft
"@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
version: 0.0.0-use.local
resolution: "@snort/shared@workspace:packages/shared"
@ -2829,6 +2863,7 @@ __metadata:
"@peculiar/webcrypto": ^1.4.3
"@scure/base": ^1.1.2
"@snort/shared": ^1.0.6
"@snort/shared": ^1.0.6
"@stablelib/xchacha20": ^1.0.1
"@types/debug": ^4.1.8
"@types/jest": ^29.5.1