Aydogdy
/
react-admin-panel-orient
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

app theme changed

This commit is contained in:
VividTruthKeeper 2022-09-19 17:28:11 +05:00
parent 1c8095c032
commit e565f450b8
18 changed files with 350 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@ -17,7 +17,7 @@ import Dashboard from "./pages/Dashboard";
import Posts from "./pages/Posts";
import Details from "./pages/Details";
import Post from "./pages/Post";
import Category from "./pages/Category";
import Source from "./pages/Source";
const App = () => {
const navigate = useNavigate();
@ -52,6 +52,7 @@ const App = () => {
useEffect(() => {
if (!user.username) {
// localStorage.removeItem("lastLocation");
navigate("/login");
} else {
navigate(localStorage.getItem("lastLocation") || "/dashboard");
@ -66,7 +67,7 @@ const App = () => {
<Route path="/" element={<Main />} />
<Route path="/dashboard" element={<Main child={<Dashboard />} />} />
<Route path="/posts" element={<Main child={<Posts />} />} />
<Route path="/category" element={<Main child={<Category />} />} />
<Route path="/source" element={<Main child={<Source />} />} />
<Route path="/posts/:id" element={<Main child={<Post />} />} />
<Route
path="/user_details"

3
src/assets/styles/_aside.scss
View File

@ -20,6 +20,7 @@
display: flex;
flex-direction: column;
gap: 1rem;
background: $light-black;
&__element {
min-width: 13.12rem;
@ -44,7 +45,7 @@
&:hover {
@include transition-std;
background: #cccccc;
background: $base-black;
}
&__img {

1
src/assets/styles/_dashboard.scss
View File

@ -12,6 +12,7 @@
&__img {
width: 4rem;
height: 4rem;
stroke: $base-blue;
}
&__content {

57
src/assets/styles/_general.scss
View File

@ -1,7 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
font-family: "Roboto", sans-serif;
font-family: "Lato", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
@ -22,7 +22,7 @@ html {
}
body {
background-color: #f1f4f8;
background-color: $base-black;
}
body,
@ -49,12 +49,26 @@ button:disabled {
}
a {
color: #000;
text-decoration: none;
}
a,
h1,
h2,
h3,
h4,
h5,
h6,
span,
label,
input,
textarea,
p {
color: $base-gray;
}
.green {
color: green;
color: $base-blue;
font-size: 1.6rem;
font-weight: bold;
}
@ -65,6 +79,35 @@ a {
font-weight: bold;
}
@mixin transition-std {
transition: 0.3s all ease;
input,
textarea,
select {
@include transition-fast;
border: 0.1rem $base-gray solid;
outline: $base-blue 0rem solid;
&:focus {
@include transition-fast;
border: 0.1rem $light-black solid;
outline: $base-blue 0.3rem solid;
}
}
/* width */
::-webkit-scrollbar {
width: 1rem;
}
/* Track */
::-webkit-scrollbar-track {
background: $light-blue;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: $base-blue;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: $hover-blue;
}

15
src/assets/styles/_login.scss
View File

@ -19,9 +19,9 @@
&__form {
min-width: 35rem;
background: #fff;
background: $light-black;
padding: 3.5rem;
border: 1px solid #d9e2ef;
border: 1px solid $base-black;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
@ -42,7 +42,7 @@
}
&__button {
border-radius: 0.2rem;
border-radius: 0.5rem;
cursor: pointer;
width: 100%;
padding: 0.6rem 1.2rem;
@ -50,14 +50,14 @@
font-size: 1.6rem;
&--violet {
background-color: #7c69ef;
border: 0.1rem solid #7c69ef;
background-color: $base-blue;
border: 0.1rem solid $base-blue;
@include transition-std;
&:hover {
@include transition-std;
background-color: #705ed6;
border: 0.1rem solid #705ed6;
background-color: $hover-blue;
border: 0.1rem solid $hover-blue;
}
}
}
@ -73,7 +73,6 @@
input {
font-size: 1.6rem;
padding: 0.6rem 1.2rem;
border: 1px solid #d9e2ef;
border-radius: 0.2rem;
}

1
src/assets/styles/_main.scss
View File

@ -1,5 +1,6 @@
.main {
&__mid {
padding: 3rem 0;
display: grid;
grid-template-columns: auto 1fr;
}

15
src/assets/styles/_nav.scss
View File

@ -1,6 +1,6 @@
.nav {
&__dropdown {
background: #f1f4f8;
background: $light-black;
z-index: 5;
border-radius: 1rem;
width: 100%;
@ -12,7 +12,7 @@
left: 0;
height: 0;
border: 0.1rem solid #c8c8c8;
border: 0.1rem solid $base-black;
&.active {
height: 14.7rem;
@ -52,8 +52,8 @@
&__user {
cursor: pointer;
position: relative;
background: #f1f4f8;
border: 0.1rem solid #c8c8c8;
background: $light-black;
border: 0.1rem solid $base-black;
border-radius: 1rem;
padding: 1rem;
display: flex;
@ -63,7 +63,8 @@
&:hover {
@include transition-std;
background: #b9b9b9;
border: 0.1rem solid $light-black;
background: $base-black;
}
button {
@ -134,7 +135,7 @@
width: 4.8rem;
height: 3.2rem;
padding: 0.4rem 0;
border: 0.1rem solid rgba(0, 0, 0, 0.4);
border: 0.1rem solid $light-black;
border-radius: 0.5rem;
@include transition-std;
@ -146,7 +147,7 @@
&:active {
@include transition-std;
border: 0.3rem solid rgba(0, 0, 0, 0.8);
border: 0.3rem solid $light-black;
}
}
}

34
src/assets/styles/_posts.scss
View File

@ -7,19 +7,27 @@
justify-content: flex-end;
input {
border-radius: 0.5rem;
border: none !important;
width: 5%;
text-align: center;
font-weight: bold;
}
button {
@include transition-std;
cursor: pointer;
font-size: 1.6rem;
width: 15%;
padding: 1rem 2rem;
border-radius: 0.5rem;
background: #7c69ef;
background: $base-blue;
color: white;
&:hover {
@include transition-std;
background: $hover-blue;
}
}
}
&__select {
@ -32,12 +40,12 @@
}
input {
background: $light-black;
color: $base-gray;
font-size: 1.6rem;
padding: 1rem 1.2rem;
border: 1px solid #b8b9bb;
border-radius: 0.2rem;
cursor: default;
background: #fff;
}
&__wrapper {
@ -47,20 +55,20 @@
}
select {
padding: 1rem 1.2rem;
border: 1px solid #b8b9bb;
color: $base-gray;
background: $light-black;
}
&.inner {
display: flex;
flex-direction: column;
gap: 4rem;
padding-bottom: 3rem;
}
&__table {
&__head {
min-height: unset !important;
background: #dbdbdb;
background: $light-black;
}
th {
@ -71,20 +79,23 @@
font-size: 1.6rem;
justify-self: center;
background: transparent;
color: #000;
color: $base-gray;
@include transition-std;
&.active {
background: rgb(98, 98, 98);
color: #fff;
background: $light-blue;
color: $base-black;
@include transition-std;
}
}
.post-link {
background: #f2f0fd;
background: $base-black;
&:nth-child(2n) {
background: #fafafa;
background: $light-blue;
td {
color: $light-black;
}
}
}
@ -97,6 +108,7 @@
}
td {
color: $base-gray;
text-align: center;
width: 100%;
overflow: hidden;

51
src/assets/styles/_category.scss → src/assets/styles/_source.scss
View File

@ -12,6 +12,18 @@
}
}
th {
cursor: pointer;
width: 100%;
height: 100%;
text-align: center;
font-size: 1.6rem;
justify-self: center;
background: transparent;
color: $base-gray;
@include transition-std;
}
&__form {
display: flex;
flex-direction: column;
@ -71,18 +83,23 @@
}
}
&__head {
cursor: default;
min-height: unset !important;
background: #dbdbdb !important;
background: $light-black !important;
}
tr {
min-height: 7rem;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 3fr 5fr;
grid-template-columns: 1fr 2fr 3fr 4fr;
gap: 1rem;
background: #f2f0fd;
color: $base-gray;
background: $base-black;
&:nth-child(2n) {
background: #fafafa;
background: $light-blue;
td {
color: $light-black;
}
}
}
@ -105,3 +122,29 @@
}
}
}
.source-action {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
&__block {
button,
a {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
}
svg {
width: 1.2rem;
height: 1.2rem;
}
span {
font-size: 1.6rem;
}
}
}

15
src/assets/styles/_variables.scss
View File

@ -1,4 +1,15 @@
$base-gray: #f2f2f2;
$base-orange: #f96d00;
$light-dark: #393e46;
$light-black: #393e46;
$base-black: #222831;
$dark-blue: #00785a;
$light-blue: #c9fce9;
$base-blue: #2fad8c;
$hover-blue: #268a6f;
@mixin transition-std {
transition: 0.3s all ease;
}
@mixin transition-fast {
transition: 0.1s all ease;
}

2
src/assets/styles/style.scss
View File

@ -7,4 +7,4 @@
@import "./dashboard";
@import "./posts";
@import "./details";
@import "./category";
@import "./source";

46
src/components/Aside.tsx
View File

@ -3,14 +3,15 @@ import React from "react";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { UserContext } from "../context/UserContext";
import { IconContext } from "react-icons";
// Icons
import { BsFillFileEarmarkPostFill } from "react-icons/bs";
import { AiOutlineBlock } from "react-icons/ai";
import { FaBox } from "react-icons/fa";
import { FaHive } from "react-icons/fa";
import { MdOutlineManageAccounts } from "react-icons/md";
import { CgDetailsLess } from "react-icons/cg";
import { BiLogOut } from "react-icons/bi";
import { IoIosCreate } from "react-icons/io";
import { FaAlignLeft } from "react-icons/fa";
import { FaSignOutAlt } from "react-icons/fa";
import { FaSourcetree } from "react-icons/fa";
// Types
import { userContextType } from "../types/user";
@ -25,7 +26,10 @@ const Aside = ({ aside, setAside }: Props) => {
<aside className={aside ? "aside active" : "aside"}>
<ul className="aside__list">
<li className="aside__list__element aside__list__element--title">
<AiOutlineBlock className="aside__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaHive className="aside__img" />
</IconContext.Provider>
<h2>Elements</h2>
</li>
<li className="aside__list__element">
@ -33,21 +37,30 @@ const Aside = ({ aside, setAside }: Props) => {
to={"/posts"}
onClick={() => localStorage.setItem("lastLocation", "/posts")}
>
<BsFillFileEarmarkPostFill className="aside__list__element__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaBox className="aside__list__element__img" />
</IconContext.Provider>
<span>Posts</span>
</Link>
</li>
<li className="aside__list__element">
<Link
to={"/category"}
onClick={() => localStorage.setItem("lastLocation", "/category")}
to={"/source"}
onClick={() => localStorage.setItem("lastLocation", "/source")}
>
<IoIosCreate className="aside__list__element__img" />
<span>Category</span>
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaSourcetree />
</IconContext.Provider>
<span>Source</span>
</Link>
</li>
<li className="aside__list__element aside__list__element--title">
<MdOutlineManageAccounts className="aside__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<MdOutlineManageAccounts className="aside__img" />
</IconContext.Provider>
<h2>Account</h2>
</li>
<li className="aside__list__element">
@ -57,7 +70,10 @@ const Aside = ({ aside, setAside }: Props) => {
localStorage.setItem("lastLocation", "/user_details")
}
>
<CgDetailsLess className="aside__list__element__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaAlignLeft className="aside__list__element__img" />
</IconContext.Provider>
<span>Details</span>
</Link>
</li>
@ -69,7 +85,9 @@ const Aside = ({ aside, setAside }: Props) => {
}}
>
<div>
<BiLogOut className="aside__list__element__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaSignOutAlt className="aside__list__element__img" />
</IconContext.Provider>
<span>Log out</span>
</div>
</li>

14
src/components/Nav.tsx
View File

@ -5,9 +5,9 @@ import { Link } from "react-router-dom";
import { IconContext } from "react-icons";
// Icons
import { ImStatsDots } from "react-icons/im";
import { FaMeteor } from "react-icons/fa";
import { GiHamburgerMenu } from "react-icons/gi";
import { AiOutlineUser } from "react-icons/ai";
import { FaUserCog } from "react-icons/fa";
// Types
import { userContextType } from "../types/user";
@ -32,11 +32,11 @@ const Nav = ({ aside, setAside }: Props) => {
localStorage.setItem("lastLocation", "/dashboard");
}}
>
<IconContext.Provider value={{ color: "#393e46" }}>
<ImStatsDots />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaMeteor />
</IconContext.Provider>
</Link>
<IconContext.Provider value={{ color: "#393e46" }}>
<IconContext.Provider value={{ color: "#8DD77F" }}>
<GiHamburgerMenu
type="button"
className="nav__btn"
@ -51,8 +51,8 @@ const Nav = ({ aside, setAside }: Props) => {
setDropdown(!dropdown);
}}
>
<IconContext.Provider value={{ color: "#393e46" }}>
<AiOutlineUser className="nav__right__user__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaUserCog className="nav__right__user__img" />
</IconContext.Provider>
<span>Profile</span>

6
src/helpers/apiRequests.ts
View File

@ -18,14 +18,14 @@ export const getPosts = (
.catch((err) => {});
};
export const deleteLink = (setSuccess: React.Dispatch<string>, id: number) => {
export const deleteLink = (setSuccess: React.Dispatch<boolean>, id: number) => {
axios
.delete(`http://95.85.124.41:8080/link/delete/${id}`)
.then((res) => {
setSuccess(res.data.message);
setSuccess(true);
})
.catch((err) => {
setSuccess("error");
setSuccess(false);
});
};

92
src/pages/Category.tsx
View File

@ -1,92 +0,0 @@
// Modules
import { v4 as uuidv4 } from "uuid";
import { useState, useEffect } from "react";
// Icons
import { IoIosCreate } from "react-icons/io";
import { getLinks } from "../helpers/apiRequests";
import { LinksAll } from "../types/links";
interface dataType {
createName: string;
createLink: string;
delete: number;
updateId: number;
updateName: string;
updateLink: string;
}
interface successType {
create: string;
delete: string;
update: string;
hasCreateUpdated: boolean;
hasDeleteUpdated: boolean;
hasUpdateUpdated: boolean;
}
const Category = () => {
const defaultDate = new Date("00-00-00");
const [all, setAll] = useState<LinksAll[]>([
{
id: -1,
name: "",
source: "",
createdAt: defaultDate,
updatedAt: defaultDate,
},
]);
useEffect(() => {
getLinks(setAll);
}, []);
return (
<main className="category">
<div className="container">
<div className="category inner">
<div className="dashboard__head category__head">
<IoIosCreate />
<h1>Source</h1>
</div>
<div className="category__table__wrapper">
<h3>All sources</h3>
<table className="category__table">
<thead>
<tr className="category__table__head">
<th>ID</th>
<th>Name</th>
<th>Source</th>
</tr>
</thead>
<tbody>
{all[0].id !== -1 ? (
all.map((source: LinksAll) => {
return (
<tr key={uuidv4()}>
<td>{source.id}</td>
<td>{source.name}</td>
<td className="category__table__tab">
{source.source}
</td>
</tr>
);
})
) : (
<tr>
<td></td>
<td></td>
<td></td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</main>
);
};
export default Category;

6
src/pages/Dashboard.tsx
View File

@ -1,4 +1,5 @@
// Modules
import { IconContext } from "react-icons";
// Icons
import { AiOutlineDashboard } from "react-icons/ai";
@ -12,7 +13,10 @@ const Dashboard = () => {
<div className="container">
<div className="dashboard inner">
<div className="dashboard__head">
<AiOutlineDashboard className="dashboard__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<AiOutlineDashboard className="dashboard__img" />
</IconContext.Provider>
<h1>Dashboard</h1>
</div>
<div className="dashboard__content__stats">

12
src/pages/Posts.tsx
View File

@ -2,9 +2,10 @@
import { v4 as uuidv4 } from "uuid";
import React, { useContext, useEffect, useState } from "react";
import { PostContext } from "../context/PostContext";
import { IconContext } from "react-icons";
// Icons
import { BsFillFileEarmarkPostFill } from "react-icons/bs";
import { FaBox } from "react-icons/fa";
import { BiLinkExternal } from "react-icons/bi";
// Helpers
@ -12,7 +13,6 @@ import { getPosts } from "../helpers/apiRequests";
import { PostType } from "../types/posts";
import { Link } from "react-router-dom";
import { parseDate } from "../helpers/parseDate";
// import { capitalizeFirstLetter } from "../helpers/stringMethods";
// Types
import { paramsType } from "../types/posts";
@ -75,7 +75,9 @@ const Posts = () => {
<div className="container">
<div className="posts inner">
<div className="dashboard__head">
<BsFillFileEarmarkPostFill className="dashboard__img" />
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaBox className="dashboard__img" />
</IconContext.Provider>
<h1>Posts</h1>
</div>
<div className="posts__select__wrapper">
@ -140,7 +142,7 @@ const Posts = () => {
</div>
</div>
<table className="posts__table">
<tbody>
<thead>
<tr className="posts__table__head">
<th
className={sort === "id" ? "active" : ""}
@ -220,6 +222,8 @@ const Posts = () => {
Updated
</th>
</tr>
</thead>
<tbody>
{posts[0] ? (
posts[0].id !== -1 ? (
category === "All" ? (

139
src/pages/Source.tsx Normal file
View File

@ -0,0 +1,139 @@
// Modules
import { v4 as uuidv4 } from "uuid";
import { useState, useEffect } from "react";
import { IconContext } from "react-icons";
import { Link } from "react-router-dom";
// Icons
import { FaSourcetree } from "react-icons/fa";
import { FaRegEdit } from "react-icons/fa";
import { FaTrash } from "react-icons/fa";
import { getLinks } from "../helpers/apiRequests";
// Helpers
import { deleteLink } from "../helpers/apiRequests";
// Types
import { LinksAll } from "../types/links";
// interface dataType {
// createName: string;
// createLink: string;
// delete: number;
// updateId: number;
// updateName: string;
// updateLink: string;
// }
// interface successType {
// create: string;
// delete: string;
// update: string;
// hasCreateUpdated: boolean;
// hasDeleteUpdated: boolean;
// hasUpdateUpdated: boolean;
// }
const Source = () => {
const defaultDate = new Date("00-00-00");
const [deleted, setDeleted] = useState<boolean>(false);
const [all, setAll] = useState<LinksAll[]>([
{
id: -1,
name: "",
source: "",
createdAt: defaultDate,
updatedAt: defaultDate,
},
]);
useEffect(() => {
getLinks(setAll);
}, []);
useEffect(() => {
if (deleted) {
setTimeout(() => {
setDeleted(false);
getLinks(setAll);
}, 2000);
}
}, [deleted, setDeleted]);
return (
<main className="category">
<div className="container">
<div className="category inner">
<div className="dashboard__head category__head">
<IconContext.Provider value={{ color: "#8DD77F" }}>
<FaSourcetree />
</IconContext.Provider>
<h1>Source</h1>
</div>
<div className="category__table__wrapper">
<h3>All sources</h3>
<table className="category__table">
<thead>
<tr className="category__table__head">
<th>ID</th>
<th>Name</th>
<th>Source</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{all[0].id !== -1 ? (
all.map((source: LinksAll) => {
return (
<tr key={uuidv4()}>
<td>{source.id}</td>
<td>{source.name}</td>
<td className="category__table__tab">
{source.source}
</td>
<td className="source-action">
<div className="source-action__block">
<Link to={`/source/edit/${source.id}`}>
<span>Edit</span>
<IconContext.Provider
value={{ color: "#8DD77F" }}
>
<FaRegEdit />
</IconContext.Provider>
</Link>
</div>
<div className="source-action__block">
<button
onClick={() => {
deleteLink(setDeleted, source.id);
}}
>
<span>Delete</span>
<IconContext.Provider
value={{ color: "#8DD77F" }}
>
<FaTrash />
</IconContext.Provider>
</button>
</div>
</td>
</tr>
);
})
) : (
<tr>
<td></td>
<td></td>
<td></td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</main>
);
};
export default Source;