Skip to content

Commit

Permalink
Styling header and notification inbox page
Browse files Browse the repository at this point in the history
  • Loading branch information
Raymond Negron authored and Raymond Negron committed Apr 1, 2023
1 parent d43e04f commit e206401
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 39 deletions.
4 changes: 1 addition & 3 deletions estela-web/src/components/NotificationsInboxPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,7 @@ export class NotificationsInboxPage extends Component<unknown, NotificationInbox
count={<Circle className="fill-estela-blue-full h-2 mr-2 my-1" />}
></Badge>
) : (
<Badge
count={<Circle className="fill-estela-blue-low h-2 mr-2 my-1" />}
></Badge>
<div className="mr-[22px]"></div>
)}
<div className="text-estela-black-medium">
<span className="font-semibold text-estela-black-full text-sm capitalize">
Expand Down
3 changes: 2 additions & 1 deletion estela-web/src/components/ProjectListPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import FolderDotted from "../../assets/icons/folderDotted.svg";
import WelcomeProjects from "../../assets/images/welcomeProjects.svg";
import history from "../../history";
import { ApiProjectsListRequest, ApiProjectsCreateRequest, Project, ProjectCategoryEnum } from "../../services/api";
import { incorrectDataNotification, Spin } from "../../shared";
import { incorrectDataNotification, Spin, PaginationItem } from "../../shared";
import { UserContext, UserContextProps } from "../../context/UserContext";

const { Content } = Layout;
Expand Down Expand Up @@ -431,6 +431,7 @@ export class ProjectListPage extends Component<unknown, ProjectsPageState> {
pageSize={this.PAGE_SIZE}
onChange={this.onPageChange}
showSizeChanger={false}
itemRender={PaginationItem}
/>
</Row>
{this.totalProjects === 0 && (
Expand Down
69 changes: 34 additions & 35 deletions estela-web/src/shared/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,21 @@ export class CustomHeader extends Component<unknown, HeaderState> {
history.push("/login");
};

renderNotificationIcon = (inbox: boolean): React.ReactNode => {
const { news } = this.state;
const color = inbox
? "stroke-estela-blue-full bg-estela-blue-low border border-estela-blue-full"
: "hover:stroke-estela-blue-full stroke-estela-black-full hover:bg-estela-blue-low";
const circleStyle = "fill-estela-red-full stroke-estela-red-full h-2";
return (
<a className={`flex justify-center items-center rounded-lg w-14 h-14 ${color}`}>
<Badge offset={[0, 2]} count={news ? <Circle className={circleStyle} /> : null}>
<Message className="w-6 h-6" />
</Badge>
</a>
);
};

itemsUser: MenuProps["items"] = [
{
key: "1",
Expand Down Expand Up @@ -145,6 +160,7 @@ export class CustomHeader extends Component<unknown, HeaderState> {
{this.state.notifications.map((notification) => (
<div
onClick={() => {
this.setState({ path: "/notifications/inbox" });
history.push("/notifications/inbox");
}}
className="py-2 px-3 flex hover:bg-estela-blue-low hover:text-estela-blue-full rounded-md"
Expand All @@ -153,7 +169,7 @@ export class CustomHeader extends Component<unknown, HeaderState> {
{!notification.seen ? (
<Badge count={<Circle className="fill-estela-blue-full h-2 mr-2 my-1" />}></Badge>
) : (
<Badge count={<Circle className="fill-estela-blue-low h-2 mr-2 my-1" />}></Badge>
<div className="mr-[22px]"></div>
)}
<div>
<span className="font-semibold text-sm capitalize">
Expand All @@ -176,7 +192,11 @@ export class CustomHeader extends Component<unknown, HeaderState> {
{
key: "2",
label: (
<Content>
<Content
onClick={() => {
this.setState({ path: "/notifications/inbox" });
}}
>
<Link
className="text-estela-blue-full h-8 items-center text-center rounded-md hover:text-estela-blue-full hover:bg-estela-blue-low font-semibold flex justify-center"
to={"/notifications/inbox"}
Expand All @@ -190,7 +210,7 @@ export class CustomHeader extends Component<unknown, HeaderState> {
];

render(): JSX.Element {
const { loaded, path, news } = this.state;
const { loaded, path } = this.state;
return (
<>
{loaded && (
Expand All @@ -203,45 +223,24 @@ export class CustomHeader extends Component<unknown, HeaderState> {
</Col>
<Col flex={0.06}>
<Dropdown menu={{ items: this.notificationItems() }} trigger={["click"]}>
{path === "/notifications/inbox" ? (
<a className="flex justify-center items-center border-estela stroke-estela rounded-lg bg-estela-blue-low w-12 h-12">
<Message className="w-6 h-6" />
</a>
) : (
<a className="flex justify-center items-center hover:stroke-estela stroke-black hover:bg-button-hover rounded-lg w-12 h-12">
<Badge
offset={[0, 2]}
count={
news ? (
<Circle className="fill-estela-red-full stroke-estela-red-full h-2" />
) : null
}
>
<Message className="w-6 h-6" />
</Badge>
</a>
)}
{this.renderNotificationIcon(path === "/notifications/inbox")}
</Dropdown>
</Col>
<Col>
<Dropdown menu={{ items: this.itemsUser }} trigger={["click"]}>
<a className="flex items-center px-2 hover:bg-estela-blue-low hover:text-estela-blue-full text-estela-blue-full rounded-lg">
<Row className="flex grid-cols-3 justify-center gap-3">
<Col className="my-5">
<User className="stroke-estela h-6 w-6" />
</Col>
<Row className="grid grid-cols-1 my-3" align="middle">
<Col className="font-medium text-sm h-6">{this.getUser()}</Col>
{this.getUserRole() && (
<p className="text-estela-black-medium capitalize text-xs h-4">
<a className="flex hover:bg-estela-blue-low hover:text-estela-blue-full text-estela-blue-full h-14 px-5 rounded-lg">
<div className="flex gap-5">
<User className="stroke-estela rounded-full bg-white h-9 w-9 p-1 my-auto" />
<Row className="grid grid-cols-1 my-auto" align="middle">
<Col className="font-medium text-base h-6">{this.getUser()}</Col>
{this.getUserRole() !== "" && (
<Col className="text-estela-black-medium capitalize text-sm h-6">
{this.getUserRole()}
</p>
</Col>
)}
</Row>
<Col className="my-5">
<ArrowDown className="stroke-estela h-5 w-5" />
</Col>
</Row>
<ArrowDown className="stroke-estela h-5 w-4 my-auto" />
</div>
</a>
</Dropdown>
</Col>
Expand Down

0 comments on commit e206401

Please sign in to comment.