Merge pull request #17 from HackYourFuture-CPH/feature/homepage

Update IndexPage styling and add JokesRotator component
HackYourFuture-CPH · Apr 12, 2024 · 63f1128 · 63f1128
2 parents d8888a2 + e538b05
commit 63f1128
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 54 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -27,7 +27,8 @@
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "prettier:check": "prettier --check ."
   },
   "browserslist": {
     "production": [

diff --git a/packages/client/public/assets/images/Screenshot.png b/packages/client/public/assets/images/Screenshot.png
diff --git a/packages/client/public/index.html b/packages/client/public/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/packages/client/src/containers/IndexPage/IndexPage.css b/packages/client/src/containers/IndexPage/IndexPage.css
@@ -1,22 +1,96 @@
+.index-container {
+  position: relative;
+  background-image: url('../../../public/assets/images/Screenshot.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  height: 100vh;
+}
+
+.left-section {
+  width: 50%;
+  padding: 20px;
+}
+
+.right-section {
+  width: 50%;
+  padding: 20px;
+  overflow: hidden;
+}
+
 .header-container {
-  display: inline-block;
-  margin-top: 50px;
-}
-
-.my-button {
-  background: linear-gradient(
-    to right,
-    transparent,
-    red,
-    orange,
-    yellow,
-    green,
-    violet
-  );
-  border-radius: 7px;
-  padding: 7px 20px;
-  font-size: 10px;
-  font-family: 'Roboto', sans-serif;
+  margin-bottom: 1.5rem;
+}
+
+.header-text {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+  color: #edf4f1;
+}
+
+.sort-size-down-icon {
+  width: 200px;
+}
+
+.input-field {
+  border: 1px solid #31bfe6ea;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  flex: 1;
+  margin-top: 8%;
+  margin-right: 10px;
+  margin-left: 0;
+  width: 20%;
+}
+
+.error-message {
+  color: hwb(120 92% 5%);
+  font-size: 1.4rem;
+  margin-top: 0.7rem;
+}
+
+.submit-button {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.or-heading {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 1rem 0;
+  margin-right: 10px;
+  margin-left: 0;
+  margin-top: 5%;
+  margin-bottom: 5%;
+  color: rgb(238, 250, 224);
+}
+
+.create-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin-left: 10px;
+  width: 30%;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin-top: 2rem;
+  font-size: 0.875rem;
+  color: #6c757d;
 }
 
 .buttonDisabled {

diff --git a/packages/client/src/containers/IndexPage/IndexPage.jsx b/packages/client/src/containers/IndexPage/IndexPage.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { apiURL } from '../../apiURL';
 import './IndexPage.css';
+import JokesRotator from '../Jokes/JokesRotator';
 
 function Index() {
   const [inputValue, setInputValue] = useState('');
@@ -22,19 +23,18 @@ function Index() {
         const response = await fetch(`${apiURL}/CreateNewTeam/${inputValue}`);
         if (response.ok) {
           // Navigate to retroPage
-          navigate('/retroPage');
+          navigate('/JoinRetroPage');
         } else {
-          // Set error message for invalid code
-          setErrorMessage('Invalid code. Please try again.');
+          setErrorMessage(
+            'Invalid team code. Please try again or make sure you entered the correct team code.',
+          );
         }
       } catch (error) {
-        // Handle fetch error
-        // console.error('Error:', error);
-        // Set error message for fetch failure
-        setErrorMessage('Failed to validate code. Please try again.');
+        setErrorMessage(
+          'Failed to validate code. Please try again. Please make sure you entered the correct team code.',
+        );
       }
     } else {
-      // Set error message for missing code
       setErrorMessage('Please provide a team code.');
     }
   };
@@ -43,35 +43,55 @@ function Index() {
     navigate('/CreateNewTeamPage');
   };
 
+  const jokes = [
+    "Why don't scientists trust atoms? Because they make up everything!",
+    'I told my wife she was drawing her eyebrows too high. She looked surprised.',
+    "I'm reading a book on anti-gravity. It's impossible to put down!",
+    // Add more jokes as needed
+  ];
+
   return (
-    <div className="index-container">
-      <div className="header-container">
-        <h2>Join with</h2>
-        <form onSubmit={handleSubmit}>
-          <input
-            type="text"
-            placeholder="Team Code"
-            value={inputValue}
-            onChange={handleInputChange}
+    <div className="index-container" id="index-container">
+      <div className="left-section">
+        <div className="header-container">
+          <h2 className="header-text">Join with</h2>
+          <img
+            className="sort-size-down-icon"
+            src="https://img.freepik.com/premium-photo/sort-size-down-icon-green-technology-texture_873925-785782.jpg?w=1480"
+            alt="Sort size down icon"
           />
-          <button type="submit" className="my-button">
-            Submit
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              placeholder="Team Code"
+              value={inputValue}
+              onChange={handleInputChange}
+              className="input-field"
+            />
+            <button
+              type="submit"
+              onClick={handleSubmit}
+              className="submit-button"
+            >
+              Submit
+            </button>
+          </form>
+          {errorMessage && <p className="error-message">{errorMessage}</p>}
+        </div>
+        <div className="bottom-container">
+          <h3 className="or-heading">OR</h3>
+          <button
+            type="button"
+            onClick={handleCreateNewTeamClick}
+            className="create-button"
+          >
+            Create New Team
           </button>
-        </form>
-        {errorMessage && <p className="error-message">{errorMessage}</p>}
+        </div>
+      </div>
+      <div className="right-section">
+        <JokesRotator jokes={jokes} />
       </div>
-      <h3> OR </h3>
-      <button
-        type="button"
-        onClick={handleCreateNewTeamClick}
-        className="my-button"
-      >
-        Create New Team
-      </button>
-      <footer>
-        <p>Created by RetroRealm</p>
-        <p>&copy; 2024 RetroRealm. All rights reserved.</p>
-      </footer>
     </div>
   );
 }

diff --git a/packages/client/src/containers/Jokes/JokesRotator.css b/packages/client/src/containers/Jokes/JokesRotator.css
@@ -0,0 +1,19 @@
+.Bubble {
+  width: 550px;
+  height: 250px;
+  border-radius: 50%;
+  background-color: lightblue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: drop 10s infinite;
+}
+
+@keyframes drop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
diff --git a/packages/client/src/containers/Jokes/JokesRotator.jsx b/packages/client/src/containers/Jokes/JokesRotator.jsx
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './JokesRotator.css';
+
+function Bubble({ children }) {
+  return <div className="Bubble">{children}</div>;
+}
+
+Bubble.propTypes = {
+  children: PropTypes.node,
+};
+
+Bubble.defaultProps = {
+  children: null,
+};
+
+function JokesRotator({ jokes }) {
+  const [currentJokeIndex, setCurrentJokeIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCurrentJokeIndex((prevIndex) => (prevIndex + 1) % jokes.length);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [currentJokeIndex, jokes.length]);
+
+  return (
+    <Bubble>
+      <article>
+        <h2>Joke</h2>
+        <p>{jokes[currentJokeIndex]}</p>
+      </article>
+    </Bubble>
+  );
+}
+
+JokesRotator.propTypes = {
+  jokes: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default JokesRotator;
diff --git a/packages/client/src/containers/NavbarPage/Navbar.css b/packages/client/src/containers/NavbarPage/Navbar.css
@@ -2,7 +2,6 @@
   background: linear-gradient(
     to right,
     transparent,
-    red,
     orange,
     yellow,
     green,
@@ -19,4 +18,5 @@
   position: absolute;
   top: 0;
   left: 0;
+  margin-left: 5%;
 }