Style fixes on Admin

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 = () => (
-  <Header className="header admin-header">
+  <Header className="header">
     <Link to="/">
       <img src={TitleImage} />
     </Link>

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<AdminSidebarProps> = ({ path }) => (
   <SideBar>
-    <AdminSidebarLink to="/admin" path={path}>Home</AdminSidebarLink>
-    <AdminSidebarLink to="/admin/events" path={path}>Events</AdminSidebarLink>
-    <AdminSidebarLink to="/admin/feed" path={path}>Feed</AdminSidebarLink>
-    <AdminSidebarLink to="/admin/signups" path={path}>Signup forms</AdminSidebarLink>
-    <AdminSidebarLink to="/admin/jobads" path={path}>Job advertisements</AdminSidebarLink>
-    <AdminSidebarLink to="https://static.sika.sik.party/admin" path={path}>Files</AdminSidebarLink>
-    <AdminSidebarLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout</AdminSidebarLink>
+    <StyledLink to="/admin" path={path}>Home&nbsp;›</StyledLink>
+    <StyledLink to="/admin/events" path={path}>Events&nbsp;›</StyledLink>
+    <StyledLink to="/admin/feed" path={path}>Feed&nbsp;›</StyledLink>
+    <StyledLink to="/admin/signups" path={path}>Signup forms&nbsp;›</StyledLink>
+    <StyledLink to="/admin/jobads" path={path}>Job advertisements&nbsp;›</StyledLink>
+    <StyledLink to="https://static.sika.sik.party/admin" path={path}>Files&nbsp;›</StyledLink>
+    <StyledLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout&nbsp;›</StyledLink>
   </SideBar>
 );
 

src/components/AdminSidebarLink/AdminSidebarLink.scss

@@ -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: " ›";
-  }
-}

src/components/AdminSidebarLink/AdminSidebarLink.tsx

@@ -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<AdminSidebarLinkProps, AdminSidebarLinkState> {
-  render() {
-    const { to, path, children, id } = this.props;
-    const activeClass = to === path ? "active" : "";
-
-    return (
-      <Anchor id={id} to={to} className={`admin-sidebar-link ${activeClass}`}>
-        {children}
-      </Anchor>
-    );
-  }
-}
-
-export default AdminSidebarLink;

src/components/AdminSidebarLink/index.ts

@@ -1,2 +0,0 @@
-import AdminSidebarLink from "./AdminSidebarLink";
-export default AdminSidebarLink;

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;

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,