-
+
@@ -78,4 +78,4 @@ export default function NoteReaction(props) {
{!root && refEvent ?
#{hexToBech32("note", refEvent).substring(0, 12)}
: null}
);
-}
\ No newline at end of file
+}
diff --git a/src/element/NoteTime.js b/src/element/NoteTime.js
index dcdc94d1..23a43164 100644
--- a/src/element/NoteTime.js
+++ b/src/element/NoteTime.js
@@ -4,7 +4,7 @@ const MinuteInMs = 1_000 * 60;
const HourInMs = MinuteInMs * 60;
const DayInMs = HourInMs * 24;
-export default function NoteTime({ from }) {
+export default function NoteTime({ from, fallback = '' }) {
const [time, setTime] = useState("");
function calcTime() {
@@ -16,7 +16,7 @@ export default function NoteTime({ from }) {
} else if (absAgo > HourInMs) {
return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`;
} else if (absAgo < MinuteInMs) {
- return 'Just now'
+ return fallback
} else {
let mins = parseInt(absAgo / MinuteInMs);
let minutes = mins === 1 ? 'min' : 'mins'
diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css
index 4d677bbc..c354aa10 100644
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@@ -24,7 +24,6 @@
display: flex;
flex-direction: column;
font-weight: bold;
- margin-bottom: .2em;
}
.pfp .nip05 {
diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx
index 35d591eb..c73d22d1 100644
--- a/src/element/Textarea.tsx
+++ b/src/element/Textarea.tsx
@@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
import { useLiveQuery } from "dexie-react-hooks";
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import TextareaAutosize from "react-textarea-autosize";
// @ts-expect-error
import Nip05 from "./Nip05";
@@ -61,6 +62,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
loadingComponent={() =>
Loading....}
placeholder="Say something!"
onChange={onChange}
+ textAreaComponent={TextareaAutosize}
trigger={{
"@": {
afterWhitespace: true,
diff --git a/src/index.css b/src/index.css
index 6232ab98..252873ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -199,6 +199,7 @@ span.pill {
padding: 2px 10px;
border-radius: 10px;
user-select: none;
+ color: var(--font-color);
margin: 2px 5px;
}
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 507cff90..33c7f486 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -7,8 +7,8 @@
height: 210px;
margin-bottom: -80px;
object-fit: cover;
- mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
- -webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
+ mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
+ -webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
z-index: 0;
}
@@ -93,6 +93,7 @@
.profile .details {
max-width: 680px;
width: 100%;
+ margin-top: 12px;
}
.profile .details p {
@@ -101,15 +102,11 @@
.profile .details a {
color: var(--highlight);
+ text-decoration: none;
}
-.profile .website {
- color: var(--highlight);
- margin-bottom: 4px;
-}
-
-.profile .lnurl {
- color: var(--highlight);
+.profile .details a:hover {
+ text-decoration: underline;
}
.profile .btn-icon {
@@ -118,21 +115,6 @@
margin-left: 4px;
}
-.profile .website::before {
- content: '🔗 ';
- font-size: 10px;
-}
-
-.profile .lnurl {
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.profile .lnurl::before {
- content: '⚡️ ';
- font-size: 10px;
-}
-
.profile .details-wrapper {
display: flex;
flex-direction: column;
@@ -148,10 +130,12 @@
@media (min-width: 360px) {
.profile .copy .body { font-size: 14px }
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
+ .profile .details { width: calc(100% - 21px); }
}
@media (min-width: 720px) {
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
+ .profile .details { width: calc(100% - 30px); }
}
.profile .follow-button {
@@ -227,3 +211,39 @@
max-width: 420px;
}
}
+
+.profile .links {
+ margin: 8px 12px;
+}
+
+.profile .website {
+ color: var(--highlight);
+ margin: 6px 0;
+}
+
+.profile .website a {
+ text-decoration: none;
+}
+
+.profile .website::before {
+ content: '🔗 ';
+}
+
+.profile .lnurl {
+ color: var(--highlight);
+ margin: 6px 0;
+ cursor: pointer;
+}
+
+.profile .lnurl:hover {
+ text-decoration: underline;
+}
+
+.profile .lnurl {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.profile .zap {
+ margin-right: .3em;
+}
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index a1ca626b..5d4b7abc 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -61,18 +61,22 @@ export default function ProfilePage() {
{about}
- {user?.website && (
-
- )}
+
+ {user?.website && (
+
+ )}
- {lnurl ?
- {lnurl}
-
setShowLnQr(true)}>
-
+ {lnurl && (
+
setShowLnQr(true)}>
+ ⚡️
+
+ {lnurl}
+
-
: null}
+ )}
+
setShowLnQr(false)} />
)
diff --git a/yarn.lock b/yarn.lock
index eb869882..c760d63a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,7 +1024,7 @@
"@babel/helper-validator-option" "^7.18.6"
"@babel/plugin-transform-typescript" "^7.18.6"
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.20.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@@ -8048,6 +8048,15 @@ react-scripts@5.0.1:
optionalDependencies:
fsevents "^2.3.2"
+react-textarea-autosize@^8.4.0:
+ version "8.4.0"
+ resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
+ integrity sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==
+ dependencies:
+ "@babel/runtime" "^7.10.2"
+ use-composed-ref "^1.3.0"
+ use-latest "^1.2.1"
+
react-twitter-embed@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
@@ -9335,6 +9344,23 @@ url-parse@^1.5.3:
querystringify "^2.1.1"
requires-port "^1.0.0"
+use-composed-ref@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
+ integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
+
+use-isomorphic-layout-effect@^1.1.1:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+ integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-latest@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
+ integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
+ dependencies:
+ use-isomorphic-layout-effect "^1.1.1"
+
use-sync-external-store@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"