Skip to content

Wip profile users style #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Darosss merged 3 commits into from
Jan 30, 2023
Merged

Wip profile users style #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80e2d86
fix: add better styling
Darosss Jan 30, 2023
c6d9f6a
fix: add global classes
Darosss Jan 30, 2023
fe2099f
fix: add userDispalyName to IUser
Darosss Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 57 additions & 51 deletions frontend/src/components/UserProfile/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import useAxios from "axios-hooks";

import PreviousPage from "@components/PreviousPage";
import Message from "@components/Message";
import { useParams } from "react-router-dom";
import { useParams, Link } from "react-router-dom";
import { IMessage, IUser } from "@backend/models/types";
import formatDate from "@utils/formatDate";
import { AxiosRequestConfig } from "axios";
Expand Down Expand Up @@ -54,30 +54,58 @@ export default function UserProfile() {
if (msgsLoading || userLoading) return <p> Loading </p>;
if (userError || msgsError) return <p>There is an error.</p>;
if (!userData || !msgsData) return <p>Someting went wrong</p>;

console.log(userData);
return (
<>
<PreviousPage />
<button className="user-messages-btn">
<a href={`../messages/${userId}`}>User messages</a>
</button>
<button className="user-messages-btn">
<a href={`../redemptions/${userId}`}>User redemptions</a>
</button>

<table className="profile-details">
<tbody>
<tr>
<td>Username:</td>
<td>
<Link className="user-details-btn" to={`../messages/${userId}`}>
Messages
</Link>

<Link
className="user-details-btn"
to={`../redemptions/${userId}`}
>
Redemptions
</Link>
</td>
</tr>
<tr>
<th>Username</th>
<td>{userData.username}</td>
<th>Display name</th>
<td>{userData.userDisplayName}</td>
</tr>
<tr>
<td>
Notes:
<button onClick={showEdit} className="profile-btn-edit">
<th>Messages</th>
<td>{userData.messageCount.toLocaleString()}</td>
<th>Points</th>
<td>{userData.points.toLocaleString()}</td>
</tr>
<tr>
<th>Created</th>
<td>{formatDate(userData.createdAt)}</td>
<th>Follower</th>
<td colSpan={3}>
{userData.follower ? formatDate(userData.follower) : "False"}
</td>
</tr>
<tr>
<th className="profile-details-notes">
Notes
<button
onClick={showEdit}
className="user-details-btn float-right"
>
Edit
</button>
</td>
<td>
</th>
<td colSpan={5}>
{!isEditingNotes ? (
<ul className="notes-list">
{userData.notes?.map((note, ind) => {
Expand All @@ -91,28 +119,22 @@ export default function UserProfile() {
defaultValue={userData.notes?.join("\n")}
onChange={(e) => setNotes(e.target.value)}
/>
<button className="profile-btn-edit" onClick={saveNote}>
<button
className="user-details-btn"
style={{ width: "20vw" }}
onClick={saveNote}
>
Save
</button>
</>
)}
</td>
</tr>
<tr>
<td>Created:</td>
<td>{formatDate(userData.createdAt)}</td>
</tr>
<tr>
<td>Points:</td>
<td>{userData.points.toLocaleString()}</td>
</tr>
<tr>
<td>Messages count:</td>
<td>{userData.messageCount.toLocaleString()}</td>
</tr>
<tr>
<td>Messages:</td>
<td>
<th>
First / Last <br /> Messages
</th>
<td colSpan={5}>
<div className="profile-user-messages">
<div className="profile-first-messages profile-user-messages-inner">
{msgsData.firstMessages.map((msg) => {
Expand All @@ -139,35 +161,19 @@ export default function UserProfile() {
})}
</div>
</div>
{/* <table className="user-last-first-messages">
<tbody>
<tr>
<td>first message 1</td>
<td> last message 1</td>
</tr>
<tr>
<td>first message 2</td>
<td>last message 2</td>
</tr>
</tbody>
</table> */}
</td>
</tr>
<tr>
<td>Categories:</td>
<td>soon</td>
</tr>
<tr>
<td>Times seen:</td>
<td>soon</td>
<th>Zjeb</th>
<td colSpan={3}>soon</td>
</tr>
<tr>
<td>Most used word:</td>
<td>soon</td>
<th>Times seen</th>
<td colSpan={3}>soon</td>
</tr>
<tr>
<td>Zjeb:</td>
<td>soon</td>
<th>Categories</th>
<td colSpan={3}>soon</td>
</tr>
</tbody>
</table>
Expand Down
34 changes: 16 additions & 18 deletions frontend/src/components/UserProfile/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
.user-messages-btn {
width: 10vw;
.user-details-btn {
display: inline-block;
width: 40%;
font-size: 1rem;
padding: 0.3rem;
background-color: var(--base-bg-color-border);
color: var(--base-color-link);
font-weight: 700;
border: 0;
border: 0.1rem solid;
border-top: 0.1rem solid black;
overflow: hidden;
}

.user-messages-btn:hover {
.user-details-btn:hover {
background-color: var(--base-color-link);
color: var(--base-bg-color-border);
}
Expand All @@ -25,24 +28,18 @@
border-top: 0.1rem solid var(--base-bg-color-border);
}

.profile-details td:not(:first-child) {
border-left: 0.1rem solid var(--base-bg-color-border);
}

.profile-btn-edit {
color: var(--base-color-link);
background-color: var(--base-bg-color-border);
font-size: 2rem;
border: 0;
.profile-details th {
color: var(--base-color-info);
border: 0.3rem solid var(--base-bg-color-border);
border-radius: 0.2rem;
}

.profile-btn-edit:hover {
color: var(--base-bg-color-border);
background-color: var(--base-color-link);
.profile-details td:not(:first-child) {
border-left: 0.1rem solid var(--base-bg-color-border);
}

.textarea-edit {
font-size: 1.5rem;
font-size: 1.1rem;
height: 20vh;
width: 70%;
background-color: var(--base-bg-color-border);
Expand All @@ -54,7 +51,8 @@
overflow-y: auto;
width: 90%;
text-align: left;
max-height: 30vh;
max-height: 25vh;
font-size: 1.2rem;
}

.profile-user-messages {
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
--base-color-button-action: #9147ff;
--base-color-button-action-active: #602dab;
--base-color-link: #afa241;
--base-color-info: #c6c9ad;
}

body {
Expand Down Expand Up @@ -67,7 +68,8 @@ textarea::-webkit-resizer {
}

a:hover {
color: red;
color: var(--base-bg-color-border);
background-color: var(--base-color-link);
}

a {
Expand All @@ -77,3 +79,7 @@ a {
a:visited {
color: var(--base-color-link);
}

.float-right {
float: right;
}
3 changes: 2 additions & 1 deletion server/src/models/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface IUser {
twitchId?: string;
twitchName?: string;
twitchCreated?: Date;
userDisplayName?: string;
follower?: Date;
}

Expand All @@ -35,7 +36,7 @@ export interface IRedemption {
rewardTitle: string;
rewardCost: number;
rewardImage: string;
message: string;
message?: string;
}

export type IRedemptionDocument = IRedeption & Document;
Expand Down