Merge pull request #13 from rrigato/dev

button style changes on click
rrigato · Nov 12, 2023 · 1082daa · 1082daa
2 parents 9f8ba1e + 6708c76
commit 1082daa
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 33 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -8,9 +8,35 @@ body, html {
     height: 100%;
 }
 
+.toggle-button{
+    background-color: #554d3a;    
+    border-radius: 10px;
+    color: white;
+    font-size: large;
+    height: 40px;
+    margin: 5px;
+    width: 170px;
+}
+
+@media (min-width: 650px){
+    .toggle-button-container{
+        display: inline;
+    }
+}
+.toggle-button:hover {
+    background-color: #fff2d2;
+    color: black;
+}
+
+.toggle-currently-selected-button {
+    background-color: #c1b291;
+    color: black;
+}
+
 .toggle-container{
     align-items: center;
     display: flex;
+    flex-direction: column;
     height: 80%;
     justify-content: center;
 }

diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx
@@ -1,7 +1,11 @@
-import React from 'react';
-import {useState} from 'react';
+import React, { useState } from 'react';
 import '../css/main.css';
 
+
+/**Toggle button for different sections of homepage
+ * 
+ * @returns react jsx 
+ */
 export function HomePageToggle(){
     /**
      * @type {[Number, Function]}
@@ -10,39 +14,65 @@ export function HomePageToggle(){
     return(
         <div id='home-page-toggle-component'  className='full-height'>
             <div className='toggle-container'>
-                <button
-                    onClick={
-                        () => {
-                            setSelectedSelection(0);
-                        }
-                    }
-                >
-                Projects
-                </button>
-
-                <button
-                    onClick={
-                        () => {
-                            setSelectedSelection(1)
-                        }
-                    }
-                >
-                About
-                </button>
-
-                <button
-                    onClick={
-                        () => {
-                            setSelectedSelection(2)
-                        }
-                    }
-                >
-                Blog
-                </button>
-
-                <br/>
+                <div id='button-container' className='flex-container'>
+                    <div className='toggle-button-container'>
+                        <button
+                            className={
+                                selectedSection === 0 ?
+                                'toggle-button toggle-currently-selected-button':
+                                'toggle-button'
+                            }
+                            onClick={
+                                (buttonEvent) => {
+                                    buttonEvent.preventDefault();
+                                    setSelectedSelection(0);
+                                }
+                            }
+
+                        >
+                        Projects
+                        </button>
+                    </div>
+
+                    <div className='toggle-button-container'>
+                        <button
+                            className={
+                                selectedSection === 1 ?
+                                'toggle-button toggle-currently-selected-button':
+                                'toggle-button'
+                            }
+                            onClick={
+                                (buttonEvent) => {
+                                    buttonEvent.preventDefault();
+                                    setSelectedSelection(1);
+                                }
+                            }
+                        >
+                        About
+                        </button>
+                    </div>
+
+                    <div className='toggle-button-container'>
+                        <button
+                            className={
+                                selectedSection === 2 ?  
+                                'toggle-button toggle-currently-selected-button':
+                                'toggle-button'
+                            }
+                            onClick={
+                                (buttonEvent) => {
+                                    buttonEvent.preventDefault();
+                                    setSelectedSelection(2);
+                                }
+                            }
+                        >
+                        Blog
+                        </button>
+                    </div>
+                </div>
                 <div 
                     id='toggle-0' 
+
                     hidden= {
                         selectedSection !== 0
                     }>