diff --git a/src/components/AdminHeader.tsx b/src/components/AdminHeader.tsx index 3967cff..f8d05c1 100644 --- a/src/components/AdminHeader.tsx +++ b/src/components/AdminHeader.tsx @@ -4,8 +4,6 @@ import { Link } from "react-router-dom"; import TitleImage from "@assets/img/SIK_RGB_W_side.png"; const Header = styled.header` - margin: 0.5rem; - a { max-width: 100%; display: flex; @@ -13,6 +11,7 @@ const Header = styled.header` align-items: center; img { + margin: 0.5rem; padding: 2rem; width: 100%; max-width: 800px; @@ -21,7 +20,7 @@ const Header = styled.header` `; const AdminHeader: React.FC = () => ( -
+
diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx index 3dffe0a..81b7c57 100644 --- a/src/components/AdminSidebar.tsx +++ b/src/components/AdminSidebar.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import AdminSidebarLink from "./AdminSidebarLink"; +import Anchor from "@components/Anchor"; +import { colors } from "@theme/colors"; interface AdminSidebarProps { path: string; @@ -9,8 +10,8 @@ interface AdminSidebarProps { const SideBar = styled.nav` display: flex; flex-flow: column nowrap; - align-self: stretch; margin-right: 1rem; + background-color: ${colors.blue1}; @media screen and (max-width: 800px - 1px) { margin-right: 0; @@ -18,15 +19,38 @@ const SideBar = styled.nav` } `; +const StyledLink = styled(Anchor)<{path: string}>` + padding: 1rem 3rem 1rem 1rem; + letter-spacing: 3px; + text-transform: uppercase; + line-height: 20px; + font-weight: bold; + white-space: nowrap; + color: ${colors.white}; + border-left: 4px solid transparent; + + ${p => p.path === p.to && ` + border-left: 4px solid ${colors.white}; + `} + + &:hover { + border-left: 4px solid ${colors.white}; + } + + @media screen and (max-width: 800px - 1px) { + margin-bottom: 1px; + } +`; + const AdminSidebar: React.FC = ({ path }) => ( - Home - Events - Feed - Signup forms - Job advertisements - Files - Logout + Home › + Events › + Feed › + Signup forms › + Job advertisements › + Files › + Logout › ); diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss deleted file mode 100644 index 27028ec..0000000 --- a/src/components/AdminSidebarLink/AdminSidebarLink.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../assets/scss/globals"; - - -.admin-sidebar-link { - padding: 1rem 3rem 1rem 1rem; - background-color: color(blue1); - letter-spacing: 3px; - text-transform: uppercase; - line-height: 20px; - font-weight: bold; - border-left: 4px solid color(blue1); - white-space: nowrap; - - @media screen and (max-width: 800px - 1px) { - margin-bottom: 1px; - } - - &:hover, - &.active { - border-left: 4px solid color(white1); - } - - &::after { - content: " ›"; - } -} diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.tsx b/src/components/AdminSidebarLink/AdminSidebarLink.tsx deleted file mode 100644 index e77888b..0000000 --- a/src/components/AdminSidebarLink/AdminSidebarLink.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import Anchor from "../Anchor"; -import "./AdminSidebarLink.scss"; - -export interface AdminSidebarLinkProps { - to: string; - path: string; - id?: string; -} -export interface AdminSidebarLinkState { } - -class AdminSidebarLink extends React.Component { - render() { - const { to, path, children, id } = this.props; - const activeClass = to === path ? "active" : ""; - - return ( - - {children} - - ); - } -} - -export default AdminSidebarLink; diff --git a/src/components/AdminSidebarLink/index.ts b/src/components/AdminSidebarLink/index.ts deleted file mode 100644 index d87b2bf..0000000 --- a/src/components/AdminSidebarLink/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import AdminSidebarLink from "./AdminSidebarLink"; -export default AdminSidebarLink; diff --git a/src/pages/admin/AdminCommonPage.scss b/src/pages/admin/AdminCommonPage.scss index 5d7d8ef..68e6fe3 100644 --- a/src/pages/admin/AdminCommonPage.scss +++ b/src/pages/admin/AdminCommonPage.scss @@ -3,6 +3,7 @@ .admin-container { display: flex; + color: color(white1); background-color: color(dark-blue); flex-flow: row nowrap; justify-content: flex-start; diff --git a/src/pages/admin/JobAdCreatePage.tsx b/src/pages/admin/JobAdCreatePage.tsx index 2ae1706..c2cf584 100644 --- a/src/pages/admin/JobAdCreatePage.tsx +++ b/src/pages/admin/JobAdCreatePage.tsx @@ -14,9 +14,8 @@ const widgets = { }; const buildSchema = (title: string) => { - const date = new Date(); const monthFromNow = new Date(); - monthFromNow.setDate(date.getDate() + 30); + monthFromNow.setDate(new Date().getDate() + 30); const schema = { title,