add tier breaks, style changes

client/src/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0.5rem;
   text-align: center;
 }
 

client/src/App.tsx

@@ -13,6 +13,7 @@ import SplitRegion from './Pages/Build/SplitRegion'
 import Combined from './Pages/Build/Combined'
 import NARegion from './Pages/Build/NARegion'
 import APACRegion from './Pages/Build/APACRegion'
+import CommunityRankings from './Pages/CommunityRankings'
 
 
 const router = createBrowserRouter(
@@ -28,6 +29,7 @@ const router = createBrowserRouter(
         <Route path='login' element={<Login />} />
         <Route path='register' element={<Register />} />
       </Route>
+      <Route path="community-rankings" element={<CommunityRankings />} />
     </Route>
   )
 )

client/src/Components/Css/Forms.css

@@ -11,6 +11,8 @@
     border-radius: 10px;
     border: none;
     margin-bottom: 10px;
+    width: 300px;
+    font-size: 18px;
 }
 .basic-form .switch {
     font-size: 14px;

client/src/Components/Css/TeamCard.css

@@ -1,10 +1,13 @@
 .team-card {
     background-color: darkgray;
     border-radius: 15px;
-    width: 320px;
+    /* width: 320px;
-    height: 48px;
+    height: 48px; */
-    margin: 10px auto;
+    width: 240px;
+    height: 36px;
+    margin: -2px auto -2px auto;
     cursor: grab;
+    background-size: contain;
 }
 
 .team-card:active {

client/src/Components/Css/TeamStyles.css

@@ -24,7 +24,7 @@
     background-image: url('../../assets/cards/was.png');
 }
 .vegaseternal {
-    background-color: rgb(15, 15, 15);
+    background-color: #000;
     background-image: url('../../assets/cards/vegas.png');
 }
 .torontodefiant {

client/src/Components/Css/TierBreak.css

@@ -0,0 +1,32 @@
+.triangle-right {
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 16px solid grey;
+    border-bottom: 8px solid transparent;
+    margin: 0px 0px 0px -8px;
+    opacity: 0;
+}
+.triangle-right:hover {
+    cursor: pointer;
+    opacity: 1;
+}
+.triangle-right.active {
+    cursor: pointer;
+    border-left-color: yellow;
+    opacity: 1;
+}
+.break-line {
+    display: none;
+    width: 175px;
+    float: left;
+    margin-top: -9px;
+    border: 1px solid yellow;
+}
+.break-line.active {
+    display:inline;
+    width: 175px;
+    float: left;
+    margin-top: -9px;
+    border: 1px solid yellow;
+}

client/src/Components/TeamCard.tsx

@@ -2,6 +2,7 @@ import './Css/TeamCard.css'
 import './Css/TeamStyles.css'
 import { useSortable } from '@dnd-kit/sortable'
 import {CSS} from '@dnd-kit/utilities'
+import TierBreak from './TierBreak'
 
 // TODO figure out how to make transitions work smoothly
 
@@ -23,8 +24,11 @@ export default function TeamCard(props: {id: string}) {
         opacity: isDragging ? 0.5 : 1
       };
     return (
+      <>
         <div className={`team-card ${teamCss}`} style={style} ref={setNodeRef} {...attributes} {...listeners}>
             <h3>{props.id}</h3>
         </div>
+        <TierBreak />
+      </>
     )
 }

client/src/Components/TierBreak.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import './Css/TierBreak.css'
+
+export default function TierBreak() {
+    const [isActive, setActive] = useState(false);
+    return (
+        <div className='tier-break'>
+            <div 
+                className={'triangle-right' + (isActive ? ' active' : '')}
+                onClick={() => setActive(!isActive)}
+            >
+            </div>
+            <hr className={'break-line' + (isActive ? ' active' : '')}/>
+        </div>
+    )
+}

client/src/Pages/Build/Combined.tsx

@@ -49,14 +49,15 @@ export default function Combined() {
           })
         )
     return (
-        <div style={{
+        <div 
-            display: 'flex',
+            // style={{
-            width: '600px',
+            // display: 'flex',
-            height: '700px',
+            // flexDirection: 'column',
-            flexDirection: 'column',
+            // flexWrap: 'wrap',
-            flexWrap: 'wrap',
+            // height: '600px',
-            alignContent: 'space-between',
+            // width: '700px',
-            }}>
+            // }}
+        >
            <DndContext
                 sensors={sensors}
                 collisionDetection={closestCenter}

client/src/Pages/Build/SplitRegion.tsx

@@ -53,8 +53,9 @@ export default function SplitRegion() {
     return (
         <div style={{
             display: 'flex',
-            width: '800px',
+            width: '500px',
-            justifyContent: 'space-between',
+            gap: '30px',
+            margin: 'auto',
             }}>
             <DndContext
                 sensors={sensors}

client/src/Pages/CommunityRankings.tsx

@@ -0,0 +1,12 @@
+import Nav from "../Components/Nav";
+
+export default function CommunityRanking() {
+    return (
+        <div className="page-content">
+        <div className="left-menus">
+        </div>
+        <h2>Community Rankings</h2>
+        <Nav current='community'/>
+        </div>
+    )
+}

client/src/Pages/Css/Main.css

@@ -4,9 +4,9 @@
     justify-content: space-between;
 }
 
-.no-w {
+/* .no-w {
     width: auto;
-}
+} */
 
 .full-container {
     height: 900px;

client/src/Pages/Login.tsx

@@ -4,6 +4,8 @@ import Nav from '../Components/Nav'
 export default function Login() {
     return (
         <div className="page-content no-w">
+        <div className="left-menus">
+        </div>
         <LoginForm />
         <Nav current='login'/>
         </div>

client/src/Pages/Register.tsx

@@ -4,6 +4,8 @@ import Nav from '../Components/Nav'
 export default function Login() {
     return (
         <div className="page-content no-w">
+        <div className="left-menus">
+        </div>
         <RegisterForm />
         <Nav current='login'/>
         </div>