From d841b9e3cddef419a2d4fd9db00360bc3b8c1be3 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 5 Aug 2021 23:25:49 +0100
Subject: [PATCH] Fix profiles not loading.
---
.../popovers/UserProfile.module.scss | 9 +-
.../intermediate/popovers/UserProfile.tsx | 11 ++-
src/pages/settings/Settings.module.scss | 98 +++++++++++++------
3 files changed, 82 insertions(+), 36 deletions(-)
diff --git a/src/context/intermediate/popovers/UserProfile.module.scss b/src/context/intermediate/popovers/UserProfile.module.scss
index e1819b5..51f7ca7 100644
--- a/src/context/intermediate/popovers/UserProfile.module.scss
+++ b/src/context/intermediate/popovers/UserProfile.module.scss
@@ -57,13 +57,13 @@
gap: 8px;
display: flex;
padding: 0 1.5em;
- font-size: .875rem;
+ font-size: 0.875rem;
> div {
padding: 8px;
cursor: pointer;
border-bottom: 2px solid transparent;
- transition: border-bottom .3s;
+ transition: border-bottom 0.3s;
&[data-active="true"] {
border-bottom: 2px solid var(--foreground);
@@ -81,7 +81,10 @@
height: 100%;
display: flex;
padding: 1em 1.5em;
+
max-width: 560px;
+ max-height: 240px;
+
overflow-y: auto;
flex-direction: column;
background: var(--primary-background);
@@ -141,7 +144,7 @@
display: flex;
cursor: pointer;
align-items: center;
- transition: background-color .1s;
+ transition: background-color 0.1s;
color: var(--secondary-foreground);
border-radius: var(--border-radius);
background-color: var(--secondary-background);
diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx
index 3c64cef..819dddd 100644
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/src/context/intermediate/popovers/UserProfile.tsx
@@ -75,13 +75,14 @@ export const UserProfile = observer(
if (!user_id) return;
if (typeof profile !== "undefined") setProfile(undefined);
if (typeof mutual !== "undefined") setMutual(undefined);
- }, [user_id, mutual, profile]);
+ // eslint-disable-next-line
+ }, [user_id]);
- if (dummy) {
- useLayoutEffect(() => {
+ useEffect(() => {
+ if (dummy) {
setProfile(dummyProfile);
- }, [dummyProfile]);
- }
+ }
+ }, [dummy, dummyProfile]);
useEffect(() => {
if (dummy) return;
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 3ce6160..bae9fb0 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -1,18 +1,36 @@
/* Settings animations */
@keyframes open {
- 0% { transform: scale(1.2); opacity: 0; }
- 100% { transform: scale(1); opacity: 1; }
+ 0% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
}
@keyframes close {
- 0% { transform: scale(1); opacity: 1; }
- 100% { transform: scale(1.2); opacity: 0; }
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1.2);
+ opacity: 0;
+ }
}
@keyframes opacity {
- 0% { opacity: 0; }
- 20% { opacity: 0.5; }
- 50% { opacity: 1; }
+ 0% {
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 1;
+ }
}
/* Settings CSS */
@@ -20,7 +38,10 @@
flex-direction: column;
background: var(--primary-header);
- .sidebar, .content { background: var(--primary-background); }
+ .sidebar,
+ .content {
+ background: var(--primary-background);
+ }
.scrollbox {
&::-webkit-scrollbar-thumb {
@@ -37,15 +58,21 @@
min-width: 218px;
}
- .scrollbox { width: 100%; }
- .version { place-items: center; }
+ .scrollbox {
+ width: 100%;
+ }
+ .version {
+ place-items: center;
+ }
}
/* Content */
.content {
padding: 0;
- .scrollbox { overflow: auto; }
+ .scrollbox {
+ overflow: auto;
+ }
.contentcontainer {
max-width: unset !important;
@@ -63,7 +90,9 @@
position: fixed;
animation: open 0.18s ease-out, opacity 0.18s;
- &.closing { animation: close 0.18s ease-in; }
+ &.closing {
+ animation: close 0.18s ease-in;
+ }
}
.settings {
@@ -85,8 +114,9 @@
.scrollbox:focus {
visibility: visible;
}
-
- ::-webkit-scrollbar-thumb {
+
+ // All children receive custom scrollbar.
+ > * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 80px solid transparent;
@@ -106,14 +136,20 @@
flex-direction: column;
}
- .divider { height: 30px; }
+ .divider {
+ height: 30px;
+ }
- .donate { color: goldenrod !important; }
- .logOut {color: var(--error) !important; }
+ .donate {
+ color: goldenrod !important;
+ }
+ .logOut {
+ color: var(--error) !important;
+ }
.version {
margin: 1rem 12px 0;
- font-size: .625rem;
+ font-size: 0.625rem;
color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace;
user-select: text;
@@ -163,7 +199,7 @@
}
h3 {
- font-size: .8125rem;
+ font-size: 0.8125rem;
text-transform: uppercase;
color: var(--secondary-foreground);
@@ -174,14 +210,14 @@
h4 {
margin: 4px 2px;
- font-size: .8125rem;
+ font-size: 0.8125rem;
color: var(--tertiary-foreground);
text-transform: uppercase;
}
h5 {
margin-top: 0;
- font-size: .75rem;
+ font-size: 0.75rem;
font-weight: 400;
}
@@ -189,7 +225,7 @@
border-top: 1px solid;
margin: 0;
padding-top: 5px;
- font-size: .875rem;
+ font-size: 0.875rem;
color: var(--secondary-foreground);
}
}
@@ -207,8 +243,8 @@
display: flex;
justify-content: center;
width: 40px;
- opacity: .5;
- font-size: .75rem;
+ opacity: 0.5;
+ font-size: 0.75rem;
}
.closeButton {
@@ -221,9 +257,15 @@
border: 3px solid var(--tertiary-background);
cursor: pointer;
- svg { color: var(--secondary-foreground); }
- &:hover { background: var(--secondary-header); }
- &:active { transform: translateY(2px); }
+ svg {
+ color: var(--secondary-foreground);
+ }
+ &:hover {
+ background: var(--secondary-header);
+ }
+ &:active {
+ transform: translateY(2px);
+ }
}
}
}
@@ -233,4 +275,4 @@
visibility: visible !important;
overflow-y: auto;
}
-}
\ No newline at end of file
+}
--
GitLab