Skip to content

Commit

Permalink
Push Tayyab css UI Changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@TobiasSchaeuble-EH
TobiasSchaeuble-EH committed Oct 29, 2023
1 parent 08b3bf0 commit d601ed9
Show file tree
Hide file tree
Showing 5 changed files with 307 additions and 291 deletions.
12 changes: 1 addition & 11 deletions frontend/src/Components/ProfileButton.js
View file
@@ -1,22 +1,17 @@
import React, { useState, useEffect, useRef } from "react";

import { logout } from "../store/session";
import { useNavigate } from "react-router-dom";
import "../SCSS/navigation.css";

function ProfileButton({ user }) {
const [showMenu, setShowMenu] = useState(false);
const ulRef = useRef();
const navigate= useNavigate()

const openMenu = () => {
if (showMenu) return;
setShowMenu(true);
};

useEffect(() => {
if (!showMenu) return;

const closeMenu = (e) => {
if (!ulRef.current.contains(e.target)) {
setShowMenu(false);
Expand All @@ -25,21 +20,17 @@ function ProfileButton({ user }) {
document.addEventListener("click", closeMenu);
return () => document.removeEventListener("click", closeMenu);
}, [showMenu]);

const handleLogout = (e) => {
e.preventDefault();
logout();
navigate("/");
};

const navUserProfile = (e) => {
e.preventDefault();
navigate('/profile')
}

const ulClassName = "profile-dropdown" + (showMenu ? "" : " hidden");
const closeMenu = () => setShowMenu(false);

return (
<>
<button onClick={openMenu} className="user-profile-dropdown-button">
Expand All @@ -63,5 +54,4 @@ function ProfileButton({ user }) {
</>
);
}

export default ProfileButton;
export default ProfileButton;
141 changes: 72 additions & 69 deletions frontend/src/Components/Scheduling.js
View file
@@ -1,73 +1,76 @@
import React from "react";
import "../SCSS/scheduling.css";

import React from 'react';
import '../SCSS/scheduling.css';
const Scheduling = (props) => {
const generateTimeSlots = () => {
let slots = [];
for (let i = 11; i <= 14; i++) {
for (let j = 0; j < 60; j += 30) {
if (i === 14 && j > 0) break; // Avoid adding 14:30
const hour = String(i).padStart(2, '0');
const minute = String(j).padStart(2, '0');
slots.push(`${hour}:${minute}`);
const generateTimeSlots = () => {
let slots = [];
for (let i = 11; i <= 14; i++) {
for (let j = 0; j < 60; j += 30) {
if (i === 14 && j > 0) break; // Avoid adding 14:30
const hour = String(i).padStart(2, '0');
const minute = String(j).padStart(2, '0');
slots.push(`${hour}:${minute}`);
}
}
}
return slots;
};

const featureSoon = () => {
window.alert("Feature coming soon!");
}
return (
<div className="scheduling-container">
<div className="scheduling-header">
Fancy having lunch together with interesting people?
</div>
<div className="time-dropdown-guests-slider">
<div className="time-dropdown">
<div>
<strong>Time Slot:</strong>
<select
value={props.timeSlot}
onChange={(e) => props.onTimeSlotChange(e.target.value)}
>
{generateTimeSlots().map((slot, index) => (
<option key={index} value={slot}>
{slot}
</option>
))}
</select>
</div>
</div>
<div className="guests-slider">
<div className="slider">
<strong>Group Size:</strong>
<input
type="range"
min="2"
max="4"
value={props.groupSize}
onChange={(e) => props.onGroupSizeChange(e.target.value)}
/>
{props.groupSize} Persons
</div>
</div>
return slots;
};
const featureSoon = () => {
window.alert('Feature coming soon!');
};
return (
<div className="scheduling-container">
<div className="scheduling-header">
Fancy having lunch together with interesting people?
</div>
<div className="time-dropdown-guests-slider">
<div className="time-dropdown">
<div>
<strong>Time Slot:</strong>
<select
value={props.timeSlot}
onChange={(e) =>
props.onTimeSlotChange(e.target.value)
}
>
{generateTimeSlots().map((slot, index) => (
<option key={index} value={slot}>
{slot}
</option>
))}
</select>
</div>
</div>
<div className="guests-slider">
<div className="slider">
<strong>Group Size:</strong>
<input
type="range"
min="2"
max="4"
value={props.groupSize}
onChange={(e) =>
props.onGroupSizeChange(e.target.value)
}
/>
{props.groupSize} Persons
</div>
</div>
</div>
<div className="actions-container">
<div className="quick-actions">
<button className="view-all-button">Randomize</button>
<p>Use default settings for a quick match.</p>
</div>
<div className="advanced-actions">
<button className="view-all-button" onClick={featureSoon}>
Customize
</button>
<p>Adjust settings to find your perfect match.</p>
</div>
</div>
<div className="view-all-container">
<button className="view-all-button">View All Matches</button>
</div>
</div>
<div className="actions-container">
<div className="quick-actions">
<button className="randomize-button">Randomize</button>
<p>Use default settings for a quick match.</p>
</div>
<div className="advanced-actions">
<button className="customize-button" onClick={featureSoon}>Customize</button>
<p>Adjust settings to find your perfect match.</p>
</div>
</div>
<div className="view-all-container">
<button className="view-all-button">View All Matches</button>
</div>
</div>
);
);
};

export default Scheduling;
export default Scheduling;
51 changes: 24 additions & 27 deletions frontend/src/SCSS/Profile.css
View file
@@ -1,28 +1,25 @@
.profile-container {
border: 1px solid #e0e0e0;
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

.profile-container h2 {
color: black
}
.profile-picture {
width: 300px;
height: 300px;
border-radius: 50%;
margin-bottom: 15px;
}

.profile-detail, .profile-interests {
margin: 10px 0;
}

.profile-interests ul {
list-style-type: none;
padding: 0;
}
border: 1px solid #E0E0E0;
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.profile-container h2 {
color: black
}
.profile-picture {
width: 300px;
height: 300px;
border-radius: 50%;
margin-bottom: 15px;
}
.profile-detail, .profile-interests {
margin: 10px 0;
}
.profile-interests ul {
list-style-type: none;
padding: 0;
}

0 comments on commit d601ed9

Please sign in to comment.