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

Jump to bottom

updated the JS and CSS file of settings #493

Closed
wants to merge 2 commits into from
Closed

updated the JS and CSS file of settings #493

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
bd69598
Updated SettingsPage.js
CoderGirl2844 Jul 17, 2024
afbd31e
Update Settings.css
CoderGirl2844 Jul 17, 2024
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
13 changes: 13 additions & 0 deletions src/Components/Settings/Settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,9 @@ button:hover {
background-color: #121026;
padding-right: 30px;
}
.zoomIn {
animation: zoomIn 1s ease forwards;
}

@media (max-width: 768px) {
.settings-tabs {
Expand All @@ -169,3 +172,13 @@ button:hover {
width: 100%;
}
}
@keyframes zoomIn{
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
21 changes: 6 additions & 15 deletions src/Components/Settings/SettingsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,7 @@ const SettingsPage = () => {
switch (activeTab) {
case "profile":
return (
<div className="profile-settings settings-content">
<h2>Profile Settings</h2>
<div className="form-group">
<label htmlFor="username">Username</label>
<input
type="text"
id="username"
placeholder="Enter your username"
/>
</div>
<div className="profile-settings settings-content zoomIn">
<h2>Profile Settings</h2>
<div className="form-group">
<label htmlFor="username">Username</label>
Expand All @@ -46,7 +37,7 @@ const SettingsPage = () => {
);
case "account":
return (
<div className="account-settings settings-content">
<div className="account-settings settings-content zoomIn">
<h2>Account Settings</h2>
<div className="form-group">
<label htmlFor="email">Email</label>
Expand All @@ -73,7 +64,7 @@ const SettingsPage = () => {
);
case "notifications":
return (
<div className="notification-settings settings-content">
<div className="notification-settings settings-content zoomIn">
<h2>Notification Settings</h2>
<div className="form-group checkbox-group">
<label htmlFor="emailNotifications">Email Notifications</label>
Expand All @@ -92,7 +83,7 @@ const SettingsPage = () => {
);
case "privacy":
return (
<div className="privacy-settings settings-content">
<div className="privacy-settings settings-content zoomIn">
<h2>Privacy Settings</h2>
<div className="form-group">
<label htmlFor="profileVisibility">Profile Visibility</label>
Expand All @@ -116,7 +107,7 @@ const SettingsPage = () => {
);
case "collaboration":
return (
<div className="collaboration-settings settings-content">
<div className="collaboration-settings settings-content zoomIn">
<h2>Collaboration Settings</h2>
<div className="form-group">
<label htmlFor="inviteCollab">Invite to Collaborate</label>
Expand Down Expand Up @@ -144,7 +135,7 @@ const SettingsPage = () => {
);
case "application":
return (
<div className="application-settings settings-content">
<div className="application-settings settings-content zoomIn">
<h2>Application Settings</h2>
<div className="form-group">
<label htmlFor="theme">Theme</label>
Expand Down