Review changes
This commit is contained in:
parent
5eb0623fb8
commit
87c2baf135
@ -6,7 +6,7 @@ import { faBell, faMessage } from "@fortawesome/free-solid-svg-icons";
|
|||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
import { RootState } from "State/Store";
|
import { RootState } from "State/Store";
|
||||||
import { init, UserPreferences } from "State/Login";
|
import { init, setPreferences, UserPreferences } from "State/Login";
|
||||||
import { HexKey, RawEvent, TaggedRawEvent } from "Nostr";
|
import { HexKey, RawEvent, TaggedRawEvent } from "Nostr";
|
||||||
import { RelaySettings } from "Nostr/Connection";
|
import { RelaySettings } from "Nostr/Connection";
|
||||||
import { System } from "Nostr/System"
|
import { System } from "Nostr/System"
|
||||||
@ -39,14 +39,26 @@ export default function Layout() {
|
|||||||
}
|
}
|
||||||
}, [relays]);
|
}, [relays]);
|
||||||
|
|
||||||
useEffect(() => {
|
function setTheme(theme: "light" | "dark") {
|
||||||
const elm = document.documentElement;
|
const elm = document.documentElement;
|
||||||
if (prefs.theme === "light") {
|
if (theme === "light" && !elm.classList.contains("light")) {
|
||||||
elm.classList.add("light");
|
elm.classList.add("light");
|
||||||
} else {
|
} else if (theme === "dark" && elm.classList.contains("light")) {
|
||||||
elm.classList.remove("light");
|
elm.classList.remove("light");
|
||||||
}
|
}
|
||||||
}, [prefs]);
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let osTheme = window.matchMedia("(prefers-color-scheme: light)");
|
||||||
|
setTheme(prefs.theme === "system" && osTheme.matches ? "light" : prefs.theme === "light" ? "light" : "dark");
|
||||||
|
|
||||||
|
osTheme.onchange = (e) => {
|
||||||
|
if (prefs.theme === "system") {
|
||||||
|
setTheme(e.matches ? "light" : "dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return () => { osTheme.onchange = null; }
|
||||||
|
}, [prefs.theme]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(init());
|
dispatch(init());
|
||||||
|
@ -8,10 +8,10 @@ export default function SettingsPage() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="settings-page">
|
<>
|
||||||
<h2 onClick={() => navigate("/settings")}>Settings</h2>
|
<h2 onClick={() => navigate("/settings")} className="pointer">Settings</h2>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.settings-nav h3 {
|
.settings-nav .card {
|
||||||
background-color: var(--note-bg);
|
cursor: pointer;
|
||||||
}
|
}
|
@ -16,7 +16,8 @@ const PreferencesPage = () => {
|
|||||||
<div>Theme</div>
|
<div>Theme</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<select value={perf.theme} onChange={e => dispatch(setPreferences({ ...perf, theme: "light" === e.target.value ? "light" : "dark" }))}>
|
<select value={perf.theme} onChange={e => dispatch(setPreferences({ ...perf, theme: e.target.value} as UserPreferences))}>
|
||||||
|
<option value="system">System (Default)</option>
|
||||||
<option value="light">Light</option>
|
<option value="light">Light</option>
|
||||||
<option value="dark">Dark</option>
|
<option value="dark">Dark</option>
|
||||||
</select>
|
</select>
|
||||||
|
@ -24,7 +24,7 @@ export interface UserPreferences {
|
|||||||
/**
|
/**
|
||||||
* Select between light/dark theme
|
* Select between light/dark theme
|
||||||
*/
|
*/
|
||||||
theme: "light" | "dark",
|
theme: "system" | "light" | "dark",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Ask for confirmation when reposting notes
|
* Ask for confirmation when reposting notes
|
||||||
@ -103,7 +103,7 @@ const InitState = {
|
|||||||
preferences: {
|
preferences: {
|
||||||
enableReactions: true,
|
enableReactions: true,
|
||||||
autoLoadMedia: true,
|
autoLoadMedia: true,
|
||||||
theme: "dark",
|
theme: "system",
|
||||||
confirmReposts: false
|
confirmReposts: false
|
||||||
}
|
}
|
||||||
} as LoginStore;
|
} as LoginStore;
|
||||||
@ -146,10 +146,6 @@ const LoginSlice = createSlice({
|
|||||||
let pref = window.localStorage.getItem(UserPreferencesKey);
|
let pref = window.localStorage.getItem(UserPreferencesKey);
|
||||||
if (pref) {
|
if (pref) {
|
||||||
state.preferences = JSON.parse(pref);
|
state.preferences = JSON.parse(pref);
|
||||||
} else {
|
|
||||||
// get os defaults
|
|
||||||
const osTheme = window.matchMedia("(prefers-color-scheme: light)");
|
|
||||||
state.preferences.theme = osTheme.matches ? "light" : "dark";
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setPrivateKey: (state, action: PayloadAction<HexKey>) => {
|
setPrivateKey: (state, action: PayloadAction<HexKey>) => {
|
||||||
|
544
src/index.css
544
src/index.css
@ -92,316 +92,310 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
<<<<<<< HEAD .card {
|
.card {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
html.light .card {
|
||||||
.card {
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
}
|
||||||
|
|
||||||
=======.card {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 24px;
|
|
||||||
>>>>>>>3e41614 (feat: user preferences)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .header {
|
.card .header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card>.footer {
|
.card>.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warn {
|
.btn-warn {
|
||||||
border-color: var(--error);
|
border-color: var(--error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success {
|
.btn-success {
|
||||||
border-color: var(--success);
|
border-color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.active {
|
.btn.active {
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
background-color: var(--gray-secondary);
|
background-color: var(--gray-secondary);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.disabled {
|
.btn.disabled {
|
||||||
color: var(--gray-light);
|
color: var(--gray-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-rnd {
|
.btn-rnd {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], input[type="password"], input[type="number"], textarea, select {
|
input[type="text"], input[type="password"], input[type="number"], textarea, select {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled {
|
input:disabled {
|
||||||
color: var(--gray-medium);
|
color: var(--gray-medium);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea:placeholder {
|
textarea:placeholder {
|
||||||
color: var(--gray-superlight);
|
color: var(--gray-superlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-center {
|
.f-center {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-1 {
|
.f-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-2 {
|
.f-2 {
|
||||||
flex: 2;
|
flex: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-grow {
|
.f-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-shrink {
|
.f-shrink {
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-ellipsis {
|
.f-ellipsis {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-col {
|
.f-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start !important;
|
align-items: flex-start !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-max {
|
.w-max {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
width: -moz-available;
|
width: -moz-available;
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
width: fill-available;
|
width: fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-max-w {
|
.w-max-w {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-width: -moz-available;
|
max-width: -moz-available;
|
||||||
max-width: -webkit-fill-available;
|
max-width: -webkit-fill-available;
|
||||||
max-width: fill-available;
|
max-width: fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.ext {
|
a.ext {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
white-space: initial;
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group>div {
|
||||||
|
padding: 3px 5px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group>div:nth-child(1) {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group>div:nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group>div:nth-child(2) input {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-content>div {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: var(--gray);
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.scroll-lock {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m5 {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m10 {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr5 {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml5 {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs>div {
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs>div:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-error {
|
||||||
|
background-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-success {
|
||||||
|
background-color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-tabs {
|
||||||
|
padding: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-tab {
|
||||||
|
border-bottom: 3px solid var(--gray-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-tab.active {
|
||||||
|
border-bottom: 3px solid var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet div .twitter-tweet {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet div .twitter-tweet>iframe {
|
||||||
|
max-height: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 720px) {
|
||||||
|
.page {
|
||||||
|
width: calc(100vw - 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.form-group {
|
div.form-group {
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
div.form-group>div {
|
.highlight {
|
||||||
padding: 3px 5px;
|
color: var(--highlight);
|
||||||
word-break: break-word;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
div.form-group>div:nth-child(1) {
|
|
||||||
min-width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.form-group>div:nth-child(2) {
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.form-group>div:nth-child(2) input {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
position: absolute;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-content>div {
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: var(--gray);
|
|
||||||
margin-top: 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.scroll-lock {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m5 {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m10 {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr10 {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr5 {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml5 {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb10 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
text-align: center;
|
|
||||||
margin: 10px 0;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs>div {
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs>div:last-child {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs .active {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
color: var(--error);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-error {
|
|
||||||
background-color: var(--error);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-success {
|
|
||||||
background-color: var(--success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root-tabs {
|
|
||||||
padding: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.root-tab {
|
|
||||||
border-bottom: 3px solid var(--gray-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root-tab.active {
|
|
||||||
border-bottom: 3px solid var(--highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tweet {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tweet div {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tweet div .twitter-tweet {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tweet div .twitter-tweet>iframe {
|
|
||||||
max-height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: 720px) {
|
|
||||||
.page {
|
|
||||||
width: calc(100vw - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
div.form-group {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
color: var(--highlight);
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user