Merge pull request #17 from Typext/bugfix/adjusts-header-style

Bugfix/adjusts header style

Author: LeonardoMessias98

src/App.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import Header from './components/Header/Header';
 import Routes from './routes';
 import GlobalStyle from './styles/global';
 
 function App() {
   return (
     <>
-      <Header />
       <Routes />
       <GlobalStyle />
     </>

src/pages/Main/components/MinuteViewer/components/Minute/DTOs/index.ts renamed to src/DTOs/Minute.tsx

@@ -0,0 +1,5 @@
+export interface IUser {
+  name: string;
+  username: string;
+  email: string;
+}

src/DTOs/User.tsx

@@ -0,0 +1,2 @@
+export * from './User';
+export * from './Minute';

src/DTOs/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import addIcon from '../../assets/add_icon.svg';
 import homeIcon from '../../assets/home_icon.svg';
@@ -8,10 +9,19 @@ import logoutIcon from '../../assets/logout_icon.svg';
 import { StyledHeader } from './styles';
 
 const Header = () => {
+  const history = useHistory();
+
+  const handleNavigateToHome = () => {
+    history.push('/');
+  };
+
   return (
     <StyledHeader>
       <section className="shortOptions">
-        <img src={homeIcon} alt="" />
+        <button type="button" onClick={handleNavigateToHome}>
+          <img src={homeIcon} alt="" />
+        </button>
+
         <img src={addIcon} alt="" />
       </section>
 

src/assets/logo.svg

@@ -33,4 +33,15 @@ export const StyledHeader = styled.header`
       width: 14.375rem;
     }
   }
+
+  button {
+    border: none;
+    background: none;
+  }
+
+  .shortOptions {
+    max-width: 150px;
+    width: 100%;
+    justify-content: flex-start;
+  }
 `;

src/assets/workInProgress.svg

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Header from 'components/Header';
+
+import { Route as ReactRoute } from 'react-router-dom';
+
+interface RouteProps {
+  component: Function;
+  path: string;
+  exact?: boolean;
+  isPrivate?: boolean;
+}
+
+const Route = ({ component: Component, isPrivate, ...rest }: RouteProps) => {
+  return (
+    <ReactRoute
+      {...rest}
+      render={() => {
+        return (
+          <>
+            {isPrivate && <Header />}
+            <Component />
+          </>
+        );
+      }}
+    />
+  );
+};
+
+Route.defaultProps = {
+  exact: false,
+  isPrivate: false,
+};
+
+export default Route;

src/components/Header/Header.tsx renamed to src/components/Header/index.tsx

@@ -0,0 +1,39 @@
+import React, { SelectHTMLAttributes } from 'react';
+import { StyledSelect } from './styles';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    title: string;
+    color?: string;
+    Size?: string;
+    styleWidth?: string;
+}
+
+const Select: React.FC<SelectProps> = ({
+    title,
+    id,
+    color,
+    Size,
+    styleWidth,
+    ...rest
+  }: SelectProps) => {
+    return (
+      <StyledSelect
+        SelectWidth={styleWidth || '23.75rem'}
+        Color={color || 'var(--black)'}
+        Size={Size || '1.5rem'}
+      >
+        <h3>{title}</h3>
+
+        <select name={title} id={id} {...rest} />
+
+      </StyledSelect>
+    );
+  };
+
+  Select.defaultProps = {
+    Size: '',
+    styleWidth: '23.75rem',
+    color: '',
+  };
+
+  export default Select;