Skip to content

Commit

Permalink
style: added MUIButton on Other Comp after revert
Browse files Browse the repository at this point in the history 
fixing #117
  • Loading branch information
@roman-ojha
roman-ojha committed Jul 7, 2022
1 parent 28b632f commit 462ae38
Show file tree
Hide file tree
Showing 17 changed files with 625 additions and 302 deletions.
1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"@mui/icons-material": "^5.0.0",
"@mui/material": "^5.0.0",
"@mui/styled-engine-sc": "^5.0.0",
"@mui/styles": "5.0.0",
"@pusher/push-notifications-web": "^1.1.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
Expand Down
20 changes: 16 additions & 4 deletions client/src/components/FollowedBy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ import { useMediaQuery } from "react-responsive";
import { AppState, actionCreators } from "../services/redux";
import { bindActionCreators } from "redux";
import { AxiosError } from "axios";
import { Button } from "@mui/material";
import { makeStyles } from "@mui/styles";

const buttonStyle = makeStyles({
root: {},
buttonRipple: { color: "var(--white-opacity-3)" },
});

const FollowedBy = (): JSX.Element => {
const history = useHistory();
Expand Down Expand Up @@ -50,6 +57,7 @@ const FollowedBy = (): JSX.Element => {
const FollowedUser: React.FC<FollowedUserProps> = ({
userInformation,
}): JSX.Element => {
const ButtonClass = buttonStyle();
const followUser = async (): Promise<void> => {
if (userInformation.type !== "bot") {
try {
Expand Down Expand Up @@ -220,23 +228,27 @@ const FollowedBy = (): JSX.Element => {
{userInformation.userID}
</p>
</div>
<div className="MainPage_Followed_User_Follow_Button">
<Button
id="MainPage_Followed_User_Follow_Button"
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
>
{userInformation.followed ? (
<p
className="MainPage_Followed_User_Follow_Button_Text"
id="MainPage_Followed_User_Follow_Button_Text"
onClick={unFollowUser}
>
UnFollow
</p>
) : (
<p
className="MainPage_Followed_User_Follow_Button_Text"
id="MainPage_Followed_User_Follow_Button_Text"
onClick={followUser}
>
Follow
</p>
)}
</div>
</Button>
</div>
</>
);
Expand Down
65 changes: 47 additions & 18 deletions client/src/components/MoreProfileBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import "../styles/components/moreProfileBox.css";
import User_Profile_Icon from "../assets/svg/User_profile_Icon.svg";
import { NavLink, useHistory } from "react-router-dom";
import { useHistory } from "react-router-dom";
import { Icon } from "@iconify/react";
import { useSelector, useDispatch } from "react-redux";
// import {
Expand All @@ -19,8 +19,16 @@ import { AppState, actionCreators } from "../services/redux";
import { bindActionCreators } from "redux";
import { toastError, toastSuccess } from "../services/toast";
import { AxiosError } from "axios";
import { Button } from "@mui/material";
import { makeStyles } from "@mui/styles";

const buttonStyle = makeStyles({
root: {},
buttonRipple: { color: "var(--white-opacity-6)" },
});

const MoreProfileBox = (): JSX.Element => {
const ButtonClass = buttonStyle();
const history = useHistory();
const dispatch = useDispatch();
const userProfileDetailStore = useSelector(
Expand Down Expand Up @@ -81,10 +89,14 @@ const MoreProfileBox = (): JSX.Element => {
<>
{moreProfileBoxState ? (
<div className="More_Profile_Box_Container">
<NavLink
to={`/u/profile/${userProfileDetailStore.userID}/posts`}
className="More_Profile_Box_User_Info"
<Button
TouchRippleProps={{
classes: { root: ButtonClass.buttonRipple },
}}
className={ButtonClass.root}
id="More_Profile_Box_User_Info"
onClick={() => {
history.push(`/u/profile/${userProfileDetailStore.userID}/posts`);
const userObj = {
...userProfileDetailStore,
isRootUserFollowed: false,
Expand All @@ -110,27 +122,44 @@ const MoreProfileBox = (): JSX.Element => {
alt="user"
/>
<p>Roman Ojha</p>
</NavLink>
<NavLink to="/u/setting" className="More_Profile_Box_Setting">
<Icon
icon="ant-design:setting-filled"
className="More_Profile_Box_Icon"
/>
</Button>
<Button
TouchRippleProps={{
classes: { root: ButtonClass.buttonRipple },
}}
className={ButtonClass.root}
onClick={() => {
history.push("/u/setting");
}}
id="More_Profile_Box_Setting"
>
<Icon icon="ant-design:setting-filled" id="More_Profile_Box_Icon" />
<p>Setting</p>
</NavLink>
<div
className="More_Profile_Box_Help"
</Button>
<Button
TouchRippleProps={{
classes: { root: ButtonClass.buttonRipple },
}}
className={ButtonClass.root}
id="More_Profile_Box_Help"
onClick={() => {
toastInfo("Helping...");
}}
>
<Icon icon="bxs:help-circle" className="More_Profile_Box_Icon" />
<Icon icon="bxs:help-circle" id="More_Profile_Box_Icon" />
<p>Help</p>
</div>
<div className="More_Profile_Box_logout" onClick={userLogOut}>
<Icon icon="majesticons:logout" className="More_Profile_Box_Icon" />
</Button>
<Button
TouchRippleProps={{
classes: { root: ButtonClass.buttonRipple },
}}
className={ButtonClass.root}
id="More_Profile_Box_logout"
onClick={userLogOut}
>
<Icon icon="majesticons:logout" id="More_Profile_Box_Icon" />
<p>Log Out</p>
</div>
</Button>
<div className="More_Profile_Box_App_Info">
<p
onClick={() => {
Expand Down
23 changes: 19 additions & 4 deletions client/src/components/NotificationBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,16 @@ import { useMediaQuery } from "react-responsive";
import constant from "../constant/constant";
import { bindActionCreators } from "redux";
import { AppState, actionCreators } from "../services/redux";
import { Button } from "@mui/material";
import { makeStyles } from "@mui/styles";

const NotificationBox = () => {
const buttonStyle = makeStyles({
root: {},
buttonRipple: { color: "var(--white-opacity-6)" },
});

const NotificationBox = (): JSX.Element => {
const ButtonClass = buttonStyle();
const dispatch = useDispatch();
const history = useHistory();
const notificationBoxState = useSelector(
Expand Down Expand Up @@ -45,9 +53,16 @@ const NotificationBox = () => {
<div className="Show_Notification_Container">
{notificationBoxState.notificationData.map((data, index) => {
return (
<div key={index} className="Single_Notification_Container">
<Button
TouchRippleProps={{
classes: { root: ButtonClass.buttonRipple },
}}
className={ButtonClass.root}
key={index}
id="Single_Notification_Container"
>
<div
className="Notification_Box_Single_Nft_Pic_and_Title"
id="Notification_Box_Single_Nft_Pic_and_Title"
onClick={async () => {
try {
startProgressBar();
Expand Down Expand Up @@ -89,7 +104,7 @@ const NotificationBox = () => {
/>
<p>{data.userID + " Started following you"}</p>
</div>
</div>
</Button>
);
})}
</div>
Expand Down
164 changes: 101 additions & 63 deletions client/src/components/SideBar/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@ import { useSelector, useDispatch } from "react-redux";
// } from "../../services/redux-actions";
import { AppState, actionCreators } from "../../services/redux";
import { bindActionCreators } from "redux";
import { Button } from "@mui/material";
import { makeStyles } from "@mui/styles";

const buttonStyle = makeStyles({
root: {},
buttonRipple: { color: "var(--primary-color-opacity-3)" },
});

const Menu = (): JSX.Element => {
const ButtonClass = buttonStyle();
const dispatch = useDispatch();
const userProfileDetailStore = useSelector(
(state: AppState) => state.setUserProfileDetailReducer
Expand All @@ -25,74 +33,104 @@ const Menu = (): JSX.Element => {
<nav className="MainPage_SideBar_Menu_Container">
<h2 className="MainPage_SideBar_Menu_Title">Menu</h2>
<div className="MainPage_SideBar_Menu_NavLink_Container">
<NavLink
to="/u/home"
className="MainPage_SideBar_Menu_Home_Container MainPage_SideBar_Link"
<Button
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
id="MainPage_SideBar_Menu_MUI_Button"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:home-filled"
/>
<h3 className="MainPage_SideBar_Menu_Home_Title">Home</h3>
</NavLink>
<NavLink
to="/u/video"
className="MainPage_SideBar_Menu_Video_Container MainPage_SideBar_Link"
<NavLink
to="/u/home"
className="MainPage_SideBar_Menu_Home_Container MainPage_SideBar_Link"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:home-filled"
/>
<h3 className="MainPage_SideBar_Menu_Home_Title">Home</h3>
</NavLink>
</Button>
<Button
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
id="MainPage_SideBar_Menu_MUI_Button"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="clarity:video-gallery-solid"
/>
<h3 className="MainPage_SideBar_Menu_Video_Title">Video</h3>
</NavLink>
<NavLink
to="/u/message"
className="MainPage_SideBar_Menu_Message_Container MainPage_SideBar_Link"
<NavLink
to="/u/video"
className="MainPage_SideBar_Menu_Video_Container MainPage_SideBar_Link"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="clarity:video-gallery-solid"
/>
<h3 className="MainPage_SideBar_Menu_Video_Title">Video</h3>
</NavLink>
</Button>
<Button
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
id="MainPage_SideBar_Menu_MUI_Button"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:message-filled"
/>
<h3 className="MainPage_SideBar_Menu_Message_Title">Message</h3>
</NavLink>
<NavLink
to="/u/setting"
className="MainPage_SideBar_Menu_Setting_Container MainPage_SideBar_Link"
<NavLink
to="/u/message"
className="MainPage_SideBar_Menu_Message_Container MainPage_SideBar_Link"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:message-filled"
/>
<h3 className="MainPage_SideBar_Menu_Message_Title">Message</h3>
</NavLink>
</Button>
<Button
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
id="MainPage_SideBar_Menu_MUI_Button"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:setting-filled"
/>
<h3 className="MainPage_SideBar_Menu_Setting_Title">Setting</h3>
</NavLink>
<NavLink
to={`/u/profile/${userProfileDetailStore.userID}/posts`}
className="MainPage_SideBar_Menu_Profile_Container MainPage_SideBar_Link"
onClick={() => {
const userObj = {
...userProfileDetailStore,
isRootUserFollowed: false,
};
profilePageDataAction(userObj);
if (!rootUserProfileDataState.fetchedRootUserProfileData) {
setRootUserProfileDataState({
fetchedRootUserProfileData: false,
getRootUserProfileData: true,
});
}
}}
<NavLink
to="/u/setting"
className="MainPage_SideBar_Menu_Setting_Container MainPage_SideBar_Link"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="ant-design:setting-filled"
/>
<h3 className="MainPage_SideBar_Menu_Setting_Title">Setting</h3>
</NavLink>
</Button>
<Button
TouchRippleProps={{ classes: { root: ButtonClass.buttonRipple } }}
className={ButtonClass.root}
id="MainPage_SideBar_Menu_MUI_Button"
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="gg:profile"
/>
<h3 className="MainPage_SideBar_Menu_Profile_Title">Profile</h3>
</NavLink>
<NavLink
to={`/u/profile/${userProfileDetailStore.userID}/posts`}
className="MainPage_SideBar_Menu_Profile_Container MainPage_SideBar_Link"
onClick={() => {
const userObj = {
...userProfileDetailStore,
isRootUserFollowed: false,
};
profilePageDataAction(userObj);
if (!rootUserProfileDataState.fetchedRootUserProfileData) {
setRootUserProfileDataState({
fetchedRootUserProfileData: false,
getRootUserProfileData: true,
});
}
}}
>
<div className="MainPage_SideBar_Menu_SelectBar_Colored"></div>
<Icon
className="MainPage_SideBar_Menu_Home_Logo MainPage_SideBar_Menu_Logo"
icon="gg:profile"
/>
<h3 className="MainPage_SideBar_Menu_Profile_Title">Profile</h3>
</NavLink>
</Button>
</div>
<hr className="MainPage_SideBar_Horizontal_Line" />
</nav>
Expand Down
Loading

0 comments on commit 462ae38

Please sign in to comment.