started teams page

client/src/adapters/auth.ts

@@ -64,7 +64,7 @@ export async function register(username: string, password: string): Promise<bool
         }
         return response.ok;
     } catch (e) {
-        // Probably a network error
+        // Probably a network errlor
         throw e;
     }
 }

client/src/components/ui/ButtonLink/index.tsx → client/src/components/navigation/ButtonLink/index.tsx

 
 import { ReactNode } from "react";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import './button-link.scss';
-import Button from "../Button";
+import Button from 'components/ui/Button';
 
 interface Props {
     children: ReactNode;
     href: string;
     routing?: boolean;
+    className?: string;
 }
 
-export default function ButtonLink({children, href, routing}: Props) {
+export default function ButtonLink({ children, href, routing, className }: Props) {
     return (
-        <Button className="button-link">
+        <Button className={'button-link ' + (className ?? '')}>
             { routing
                 ? <Link to={href}>{children}</Link>
                 : <a href={href}>{children}</a>

client/src/components/ui/Header/index.tsx → client/src/components/navigation/Header/index.tsx

 import './header.scss';
 import hamburger from 'images/svg/hamburger.svg';
 import profile from 'images/svg/profile.svg';
-import Navigation from 'components/ui/Navigation';
-import Sidebar from 'components/ui/Sidebar';
+import Navigation from 'components/navigation/Navigation';
+import Sidebar from 'components/navigation/Sidebar';
 import { ReactNode, useState } from 'react';
 
 interface Props {

client/src/components/ui/Sidebar/index.tsx → client/src/components/navigation/Sidebar/index.tsx

-import Navigation from 'components/ui/Navigation';
+import Navigation from 'components/navigation/Navigation';
 import avatar from 'images/daniel-planoetscher.jpg';
 import LineGraph from 'components/graphs/LineGraph';
 import { NavLink, useHistory } from 'react-router-dom';

client/src/components/navigation/Tabs/index.tsx

+import './tabs.scss';
+
+interface Tab {
+    route: string,
+    label: string    
+}
+
+interface Props {
+    tabs: [Tab, Tab]
+}
+
+export default function Tabs({tabs}: Props) {
+
+}
\ No newline at end of file

client/src/components/ui/Button/button.scss

@@ -6,19 +6,22 @@
     font-size: fn.toRem(18);
     font-weight: s.$weight-bold;
     background: s.$linear-gradient;
-    box-shadow: 0px 5px 15px rgba(s.$primary, 0.25);
+    box-shadow: 0px 5px 15px rgba(s.$primary, 0.1);
     border-radius: 25px;
     display: inline-block;
     color: s.$white;
-    text-transform: uppercase;
     user-select: none;
     appearance: none;
     border: none;
     outline: none;
 
+    &.expanded {
+        width: 100%;
+    }
+
     &:hover,
     &:focus {
-        box-shadow: 0px 10px 25px rgba(s.$primary, 0.35);
+        box-shadow: 0px 10px 25px rgba(s.$primary, 0.25);
         cursor: pointer;
         color: s.$white;
         transform: translateY(-5%);

client/src/components/ui/DetailBox/detail-box.scss

+@use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
+
+.detail-box {
+    width: 100%;
+    padding-bottom: 100%;
+    background: s.$white;
+    position: relative;
+    border-radius: 10px;
+
+    .content {
+        position: absolute;
+        padding: 23px;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .icon-container {
+            width: 50px;
+            height: 50px;
+            background: s.$light;
+            display: flex;
+            justify-content: center;
+            border-radius: 10px;
+            align-items: center;
+            color: s.$primary;
+
+            .icon {
+                font-size: 24px;
+            }
+
+            @include mx.breakpoint(medium) {
+                width: 64px;
+                height: 64px;
+
+                .icon {
+                    font-size: 32px;
+                }
+            }
+        }
+
+        .number {
+            font-size: 24px;
+            font-weight: s.$weight-bold;
+            line-height: 1;
+        }
+
+        .title {
+            font-weight: s.$weight-semi-bold;
+        }
+
+        .label {
+            font-size: 14px;
+        }
+    }
+
+}
\ No newline at end of file

client/src/components/ui/DetailBox/index.tsx

+import './detail-box.scss';
+
+export interface DetailProps {
+    number?: number,
+    icon: string,
+    title: string,
+    label?: string,
+}
+
+export default function DetailBox({ number, icon, title, label }: DetailProps) {
+    return (
+        <div className="detail-box">
+            <div className="content">
+                <div className="icon-container">
+                    <span className="icon material-icons">
+                        {icon}
+                    </span>
+                </div>
+                <div className="text">
+                    {!label && number && <div className="number">{number}</div>}
+                    <div className="title">{title}</div>
+                    {label && <div className="label">{label}</div>}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file

client/src/components/ui/DetailGrid/detail-grid.scss

+@use 'styles/mixins.scss' as mx;
+
+.detail-grid {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -12px;
+    @include mx.breakpoint(medium) {
+        margin: -16px;
+    }
+    .box-container {
+        margin: 12px;
+        width: calc(50% - 24px);
+        @include mx.breakpoint(medium) {
+            width: calc(25% - 32px);
+            margin: 16px;
+        }
+        @include mx.breakpoint(large) {
+            width: calc(20% - 32px);
+        }
+    }
+}
\ No newline at end of file

client/src/components/ui/DetailGrid/index.tsx

+import './detail-grid.scss';
+import DetailBox, { DetailProps } from 'components/ui/DetailBox';
+
+interface Props {
+    details: DetailProps[]
+}
+
+export default function DetailGrid({ details }: Props) {
+
+    return (
+        <div className="detail-grid">
+            {
+                details.map((detail) => (
+                    <div className="box-container">
+                        <DetailBox {...detail} />
+                    </div>
+                ))
+            }
+        </div>
+    )
+
+}
\ No newline at end of file

client/src/pages/AppWrapper.tsx

@@ -2,12 +2,13 @@
 import { Suspense, lazy } from 'react';
 
 import ProtectedRoute from 'components/helpers/ProtectedRoute';
-import Header from 'components/ui/Header';
+import Header from 'components/navigation/Header';
 
 const Tasks = lazy(() => import('pages/Tasks'));
 const TaskDetail = lazy(() => import('pages/Tasks/TaskDetail'));
 const Projects = lazy(() => import('pages/Projects'));
 const Stats = lazy(() => import('pages/Stats'));
+const TeamsEdit = lazy(() => import('pages/Teams/TeamsEdit'));
 const Teams = lazy(() => import('pages/Teams'));
 const Settings = lazy(() => import('pages/Settings'));
 
@@ -19,10 +20,15 @@ export default function AppWrapper() {
                 <ProtectedRoute path="/tasks" exact component={Tasks} />
                 <ProtectedRoute path="/projects" component={Projects} />
                 <ProtectedRoute path="/stats" component={Stats} />
-                <ProtectedRoute path="/teams" component={Teams} />
+                <ProtectedRoute path="/teams/:uuid/edit" component={TeamsEdit} />
+                <ProtectedRoute path="/teams" exact component={Teams} />
                 <ProtectedRoute path="/settings" component={Settings} />
             </Suspense>
         </Header>
+        <div className="background-container">
+            <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
+            <div className="bubble secondary" style={{ bottom: '-20%', left: '20%' }}></div>
+        </div>
     </>);
 }
 

client/src/pages/Home/index.tsx

 import Project from 'components/ui/Project';
-import ButtonLink from 'components/ui/ButtonLink';
+import ButtonLink from 'components/navigation/ButtonLink';
 import ContactForm from 'components/forms/ContactForm';
 import Page from 'components/ui/Page';
 import './home.scss';

client/src/pages/Tasks/index.tsx

@@ -37,10 +37,6 @@ export default function Tasks() {
                     </section>
                 </main>
             </Page>
-            <div className="background-container">
-                <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
-                <div className="bubble secondary" style={{ bottom: '-20%', left: '20%' }}></div>
-            </div>
         </>
     );
 }

client/src/pages/Teams/TeamsEdit/index.tsx

+import './teams-edit.scss';
+
+export default function TeamsEdit() {
+   return (<></>); 
+}
\ No newline at end of file