Merge pull request #11 from rrigato/dev

flexbox to center page
rrigato · Nov 11, 2023 · 3080c27 · 3080c27
2 parents ccf1489 + 798f7a1
commit 3080c27
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -1,4 +1,18 @@
-body {
+body, html {
     background-color: black;
     color: white;
+    height: 100%;
 }
+
+.full-height{
+    height: 100%;
+}
+
+.toggle-container{
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 80%;
+}
+
+
diff --git a/static/index.html b/static/index.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-    <div id='app-entry-point'></div>
+    <div id='app-entry-point' class='full-height'></div>
 </body> 
 
 </html>
diff --git a/static/js/App.jsx b/static/js/App.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import '../css/main.css';
-import { HomePageToggle } from './HomePageToggle';
+import { HomePageToggle } from './HomePageToggle.jsx';
 
 export function App(){
     return(
-        <div id='app-entry-point'>
+        <div id='app-component' className='full-height'>
             <HomePageToggle/>
         </div>
     );

diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx
@@ -3,9 +3,13 @@ import '../css/main.css';
 
 export function HomePageToggle(){
     return(
-        <div id='home-page-toggle-component' className='toggle-container'>
-            <div id='toggle-0'>
-                Latest Projects
+        <div id='home-page-toggle-component'  className='full-height'>
+            <div className='toggle-container'>
+                <button>Projects</button>
+                <br/>
+                <div id='toggle-0'>
+                    Latest Projects
+                </div>
             </div>
         </div>
     );

diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js
@@ -2,13 +2,15 @@ import { render } from '@testing-library/react';
 import { HomePageToggle } from '../js/HomePageToggle.jsx';
 
 describe('Central Content for site', () => {
-    test('HomePageToggle default render', () => {
+    test('HomePageToggle default render', async () => {
 
 
-        const {findByText} = render(<HomePageToggle/>);
+        const {getByRole} = render(<HomePageToggle/>);
 
 
-        findByText(RegExp('Latest Projects'));
+        const projectButton = await getByRole(
+            'button', {name: 'Projects'}
+        );
 
     });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
     </head>
     <body>
-        <div id='app-entry-point'></div>
+        <div id='app-entry-point' class='full-height'></div>
     </body>
     </html>