diff --git a/static/css/main.css b/static/css/main.css index 743f4ca..5841126 100644 --- 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 index 29de02e..c3f34b3 100644 --- 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(