admin css

guytepper · Oct 13, 2020 · 5cf936c · 5cf936c
1 parent a27b708
commit 5cf936c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 23 deletions.
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -2,9 +2,9 @@ import React from 'react';
 import styled from 'styled-components/macro';
 
 export default function Button(props) {
-  const { color, type, onClick, disabled, style, icon, children } = props;
+  const { color, type, onClick, disabled, style, icon, children, className } = props;
   return (
-    <ButtonWrapper color={color} type={type} onClick={onClick} disabled={disabled} style={style}>
+    <ButtonWrapper color={color} type={type} onClick={onClick} disabled={disabled} style={style} className={className}>
       {icon && <ButtonIcon src={icon} alt="" aria-hidden="true" />}
       <span style={{ paddingBottom: 3 }}>{children}</span>
     </ButtonWrapper>

diff --git a/src/views/Admin/components.js b/src/views/Admin/components.js
@@ -37,9 +37,7 @@ export const LeaderCard = styled.div`
 `;
 
 export const AdminNavButton = styled(Button)`
-  width: 140px;
-  height: 35px;
-  font-size: 14px;
+  margin-bottom: 20px;
 `;
 
 export const SidebarList = styled.ul`
@@ -89,13 +87,7 @@ export const LeaderPhoto = styled.img`
   border-radius: 50%;
 `;
 
-export const AdminNavigation = styled(Link)`
-  grid-column: 2/2;
-  position: absolute;
-  left: 0;
-  top: 15px;
-  grid-row: 1/1;
-`;
+export const AdminNavigation = styled(Link)``;
 
 export const SidebarListHead = styled.div`
   padding: 0 20px;

diff --git a/src/views/Admin/index.js b/src/views/Admin/index.js
@@ -4,7 +4,7 @@ import { Button } from '../../components';
 import { AdminWrapper, AdminNavigation, AdminNavButton } from './components';
 import LeaderAdmin from './LeaderAdmin';
 import ProtestAdmin from './ProtestAdmin';
-import EditsAdmin from "./EditsAdmin";
+import EditsAdmin from './EditsAdmin';
 import { handleSignIn } from '../../api';
 import { isAdmin } from '../../utils';
 
@@ -17,6 +17,21 @@ const Admin = ({ user }) => {
         <div>טוען...</div>
       ) : user ? (
         <>
+          <div style={{ display: 'flex' }}>
+            <AdminNavigation to="/admin/protest-requests">
+              <AdminNavButton disabled={location.pathname.includes('protest-requests')}>אישור הפגנות</AdminNavButton>
+            </AdminNavigation>
+            <AdminNavigation
+              to="/admin/leader-requests"
+              disabled={location.pathname.includes('leader-requests')}
+              style={{ height: 'min-content' }}
+            >
+              <AdminNavButton>אישור מובילים</AdminNavButton>
+            </AdminNavigation>
+            <AdminNavigation to="/admin/edits" disabled={location.pathname.includes('edits')} style={{ height: 'min-content' }}>
+              <AdminNavButton>אישור עריכות</AdminNavButton>
+            </AdminNavigation>
+          </div>
           <Switch>
             {!isAdmin(user) && <Redirect to="/" />}
             <Route exact path="/admin">
@@ -31,17 +46,7 @@ const Admin = ({ user }) => {
             <Route path="/admin/edits">
               <EditsAdmin />
             </Route>
-
           </Switch>
-          {['/admin/protest-requests/', '/admin/protest-requests'].includes(location.pathname) ? (
-            <AdminNavigation to="/admin/leader-requests" style={{ height: 'min-content' }}>
-              <AdminNavButton>אישור מובילים</AdminNavButton>
-            </AdminNavigation>
-          ) : (
-            <AdminNavigation to="/admin/protest-requests">
-              <AdminNavButton>אישור הפגנות</AdminNavButton>
-            </AdminNavigation>
-          )}
         </>
       ) : (
         <Button onClick={handleSignIn}>התחבר למערכת</Button>