Skip to content
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

Enhance: Edit page #35

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Enhance: Edit page #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2d685e
edit page
TenzDelek Feb 24, 2025
d3f1325
refactor styles in EditUserProfile component to use variables for col…
TenzDelek Feb 24, 2025
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
44 changes: 22 additions & 22 deletions src/components/edit-user-profile/EditUserProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ const EditUserProfile = () => {
avatar_url: userInfo.avatar_url || "",
social_profiles: [
{ account: "email", url: userInfo.email || "" },
{ account: "x.com", url: userInfo["x.com"] || "" },
{ account: "linkedin", url: userInfo.linkedIn || "" },
{ account: "facebook", url: userInfo.facebook || "" },
{ account: "profile.twitter", url: userInfo["x.com"] || "" },
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have a doubt whether it will work if you change x.com to profile.twitter.
because backend needs to receive the key as x.com and we are mapping this key as the payload, maybe will check tonight

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let me know after the check . if it is still the issue, we can revert this changes and instead make changes in the tolgee itself

Copy link
Collaborator

@sachmundassery sachmundassery Feb 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. i dont think it will work
    image

the key names should just something like "x.com". "linkedin", etc
else wont be accepted by the backend

  1. also the colors that is being used, we might have to confirm on that, i dont think it is yellow

{ account: "profile.linkedlin", url: userInfo.linkedIn || "" },
{ account: "profile.facebook", url: userInfo.facebook || "" },
{ account: "youtube", url: userInfo.youtube || "" },
],
});
Expand Down Expand Up @@ -75,14 +75,14 @@ const EditUserProfile = () => {
};

return (
<div className="edit-user-profile">
<h2>Edit Your Profile</h2>
<div className="edit-user-profile listtitle">
<h2>{t("edit_profile.header")}</h2>
<hr />
<Form onSubmit={ handleSubmit }>
<Form onSubmit={ handleSubmit } className="textalign">
<Tabs defaultActiveKey="personalDetails" id="edit-profile-tabs" className="mb-4">
{/* Personal Details Tab */ }
<Tab eventKey="personalDetails" title={ t("profile.personal_details") }>
<Row>
<Row className="p-3">
<Col md={ 6 }>
<Form.Group controlId="formFirstName">
<Form.Label>{ t("sign_up.form.first_name") }</Form.Label>
Expand All @@ -109,10 +109,10 @@ const EditUserProfile = () => {
</Col>
</Row>

<Row>
<Row className="p-3">
<Col md={ 6 }>
<Form.Group controlId="formTitle">
<Form.Label>{ t("admin.english_title") }</Form.Label>
<Form.Label>{ t("topic.admin.title") }</Form.Label>
<Form.Control
type="text"
name="title"
Expand All @@ -124,7 +124,7 @@ const EditUserProfile = () => {
</Col>
<Col md={ 6 }>
<Form.Group controlId="formOrganization">
<Form.Label>{ t("profile.organization") }</Form.Label>
<Form.Label>{ t("edit_profile.organization") }</Form.Label>
<Form.Control
type="text"
name="organization"
Expand All @@ -136,10 +136,10 @@ const EditUserProfile = () => {
</Col>
</Row>

<Row>
<Row className="p-3">
<Col md={ 6 }>
<Form.Group controlId="formLocation">
<Form.Label>{ t("profile.enter-your-location") }</Form.Label>
<Form.Label>{ t("edit_profile.location") }</Form.Label>
<Form.Control
type="text"
name="location"
Expand All @@ -151,9 +151,9 @@ const EditUserProfile = () => {
</Col>
</Row>

<Row className="mb-2 align-items-center">
<Row className="mb-2 align-items-center p-3">
<Form.Group controlId="formEducation">
<Form.Label>{ t("profile.education") }</Form.Label>
<Form.Label>{ t("edit_profile.education_info") }</Form.Label>
{ formData.educations.map((edu, index) => (
<div className="form-education" key={ index }>
<Col md={ 12 } className="position-relative">
Expand Down Expand Up @@ -181,17 +181,17 @@ const EditUserProfile = () => {
variant="outline-dark"
size="sm"
onClick={ addEducation }
className="btn-add"
className="btn-add p-3"
>
Add line
</Button>
{t("edit_profile.line_add")}
</Button>
</Form.Group>
</Row>


<Row>
<Row className="p-3">
<Form.Group controlId="formAboutMe">
<Form.Label>{ t("profile.about-me") }</Form.Label>
<Form.Label>{ t("edit_profile.about_me") }</Form.Label>
<Form.Control
as="textarea"
rows={ 3 }
Expand All @@ -206,11 +206,11 @@ const EditUserProfile = () => {

{/* Contact Details Tab */ }
<Tab eventKey="contactDetails" title={ t("profile.contact_details") }>
<Row>
<Row className="p-3">
{ formData.social_profiles.map((profile) => (
<Col md={ 6 } key={ profile.account }>
<Col md={ 6 } key={ profile.account } className=" p-3">
<Form.Group controlId={ `form${ profile.account }` }>
<Form.Label>{ t(`profile.${ profile.account }`) }</Form.Label>
<Form.Label>{ t(`common.${ profile.account }`) }</Form.Label>
<Form.Control
type="text"
value={ profile.url }
Expand Down
63 changes: 35 additions & 28 deletions src/components/edit-user-profile/EditUserProfile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
$h2-color:#333;
$shadow-color:rgba(0, 0, 0, 0.1);
$nav-color:#555;
$primary-color:#C39F48;
$primary-dark-color:#ba9439;
$white-color:white;
$form-border-color:#ced4da;
$button-outline-dark-color:#343a40;
$secondary-color:grey;
$secondary-dark-color:darkgrey;
$dark:black;
$removeicon:#4d5154;

.textalign{
text-align: left;
}
.edit-user-profile {
margin: 3rem auto;
max-width: 900px;
padding: 2rem;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 10px $shadow-color;

.row{
margin: 0!important;
Expand All @@ -14,7 +30,7 @@
font-weight: bold;
margin-bottom: 1.5rem;
text-align: left;
color: #333;
color:$h2-color;
}

hr {
Expand All @@ -26,21 +42,18 @@
margin: 1rem;

.nav-link {
color: #555;
color: $nav-color;
font-weight: 500;
border-radius: 5px 5px 0 0;
padding: 0.75rem 1.5rem;

&.active {
background-color: #1abc9c;
color: white;
background-color:$primary-color;
color: $white-color;
border: none;
}

&:hover {
background-color: #e9ecef;
color: #1a1d20;
}

}
}

Expand All @@ -52,14 +65,8 @@
.form-control {
padding: 0.6rem;
border-radius: 5px;
border: 1px solid #ced4da;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);


&:focus {
border-color: #1abc9c;
box-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
}
border: 1px solid $form-border-color;
box-shadow: 0px 1px 3px $shadow-color;
}

.form-buttons {
Expand All @@ -73,26 +80,27 @@

.btn-outline-dark {
&:hover {
background-color: #343a40;
color: white;
background-color:$button-outline-dark-color;
color:$white-color;
}
}

.btn-cancel {
background-color: grey;
background-color: $secondary-color;
border: none;
&:hover {
background-color: darkgrey;
color: white;
background-color: $secondary-dark-color;
color: $white-color;
}
}

.btn-submit {
background-color: brown;
background-color: $primary-color;
padding: 12px 20px 12px 20px;
border: none;
&:hover {
background-color: darkred;
color: white;
background-color: $primary-dark-color ;
color: $white-color;
}
}

Expand All @@ -113,7 +121,6 @@
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
height: 45.66px;
}

.remove-icon {
Expand All @@ -123,11 +130,11 @@
transform: translateY(-50%);
font-size: 18px;
cursor: pointer;
color:#4d5154;
color:$removeicon;
font-weight: bold;

&:hover {
color: black;
color: $dark;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/topics/Topics.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ const Topics = () => {
return <div className="search-container">
<Form.Control
type="text"
placeholder="Search topics..."
placeholder={t("topic_search")}
value={searchTerm}
onChange={handleSearchChange}
className="mb-3"
Expand Down
24 changes: 12 additions & 12 deletions src/components/user-profile/UserProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const UserProfile = () => {
return (
<>
{ !userInfoIsLoading ?
<div className="user-profile">
<div className="user-profile listtitle">
<div className="pecha-user-profile">
<div className="section1">
<div className="profile-left">
Expand Down Expand Up @@ -177,57 +177,57 @@ const UserProfile = () => {
</div>
</div>

<div className="section2">
<div className="section2 listtitle">
<Tabs defaultActiveKey="sheets" id="user-profile-tabs" className="mb-3">
<Tab
eventKey="sheets"
title={
<>
<i className="bi bi-file-earmark"></i> { t("profile.sheets.title") }
<i className="bi bi-file-earmark"></i> { t("profile.tab.sheets") }
</>
}
>
<div className="tab-content">
<h3>{ t("profile.sheets.title") }</h3>
<p>{ t("profile.sheets.description") }</p>
<h3>{ t("profile.tab.sheets") }</h3>
<p>{ t("profile.sheet_description") }</p>
</div>
</Tab>
<Tab
eventKey="collections"
title={
<>
<i className="bi bi-stack"></i> { t("profile.collections.title") }
<i className="bi bi-stack"></i> { t("profile.tab.collection") }
</>
}
>
<div className="tab-content">
<h3>{ t("profile.collections.title") }</h3>
<p>{ t("profile.collections.description") }</p>
<h3>{ t("profile.tab.collection") }</h3>
<p>{ t("profile.tab.collection.description") }</p>
</div>
</Tab>
<Tab
eventKey="notes"
title={
<>
<i className="bi bi-pencil"></i> { t("profile.notes.title") }
<i className="bi bi-pencil"></i> { t("user_profile.notes") }
</>
}
>
<div className="tab-content">
<h3>{ t("profile.notes.title") }</h3>
<h3>{ t("user_profile.notes") }</h3>
<p>{ t("profile.notes.description") }</p>
</div>
</Tab>
<Tab
eventKey="tracker"
title={
<>
<i className="bi bi-reception-4"></i> { t("profile.text_tracker.title") }
<i className="bi bi-reception-4"></i> { t("profile.buddhish_text_tracker") }
</>
}
>
<div className="tab-content">
<h3>{ t("profile.text_tracker.title") }</h3>
<h3>{ t("profile.buddhish_text_tracker") }</h3>
<p>{ t("profile.text_tracker.descriptions") }</p>
</div>
</Tab>
Expand Down
Loading
Loading