Skip to content

Commit 1fa5e22

Browse files
Fr4nc3Fr4nc3
committed
homepage functionality updated
1 parent f74aeb8 commit 1fa5e22

File tree

4 files changed

+84
-63
lines changed

4 files changed

+84
-63
lines changed

‎src/frontend_react/src/components/content/HomeInput.tsx‎

Lines changed: 48 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -50,64 +50,63 @@ const HomeInput: React.FC<HomeInputProps> = ({
5050
}
5151
}, [inputValue]);
5252

53-
return (<div className="home-input-container">
54-
<div className="home-input-content">
55-
<div className="home-input-center-content">
56-
<div className="home-input-title-wrapper">
57-
<Text className="home-input-title">How can I help?</Text>
58-
</div>
53+
return (
5954

60-
<div className="home-input-input-section">
61-
<div className="home-input-input-wrapper">
62-
<textarea
63-
ref={textareaRef}
64-
className="home-input-input-field"
65-
value={inputValue}
66-
onChange={(e) => setInputValue(e.target.value)}
67-
onKeyPress={handleKeyPress}
68-
placeholder="Describe what you'd like to do or use / to reference files, people, and more"
69-
rows={1}
70-
/>
71-
<Button
72-
className="home-input-send-button"
73-
onClick={handleSubmit}
74-
disabled={!inputValue.trim()}
75-
icon={<Send20Regular />}
76-
/>
77-
</div>
78-
<div className="home-input-ai-footer">
79-
AI-generated content may be incorrect
55+
<div className="home-input-container">
56+
<div className="home-input-content">
57+
<div className="home-input-center-content">
58+
<div className="home-input-title-wrapper">
59+
<Text className="home-input-title">How can I help?</Text>
8060
</div>
81-
</div>
8261

83-
<div className="home-input-quick-tasks-section">
84-
<div className="home-input-quick-tasks-header">
85-
<Text className="home-input-quick-tasks-title">Quick tasks</Text>
86-
<Button appearance="transparent" className="home-input-refresh-button">
87-
Refresh
88-
</Button>
62+
<div className="home-input-input-section">
63+
<div className="home-input-input-wrapper">
64+
<textarea
65+
ref={textareaRef}
66+
className="home-input-input-field"
67+
value={inputValue}
68+
onChange={(e) => setInputValue(e.target.value)}
69+
onKeyPress={handleKeyPress}
70+
placeholder="Describe what you'd like to do or use / to reference files, people, and more"
71+
rows={1}
72+
/>
73+
<Button
74+
className="home-input-send-button"
75+
onClick={handleSubmit}
76+
disabled={!inputValue.trim()}
77+
icon={<Send20Regular />}
78+
/>
79+
</div>
80+
<div className="home-input-ai-footer">
81+
AI-generated content may be incorrect
82+
</div>
8983
</div>
90-
<div className="home-input-quick-tasks">
91-
{quickTasks.map((task) => (
92-
<Card
93-
key={task.id}
94-
className="home-input-quick-task-card"
95-
onClick={() => onQuickTaskSelect(task.id)}
96-
>
97-
<div className="home-input-card-content">
98-
<div className="home-input-card-icon">{task.icon}</div>
99-
<div className="home-input-card-text-content">
100-
<Text className="home-input-card-title">{task.title}</Text>
101-
<Text className="home-input-card-description">{task.description}</Text>
84+
85+
<div className="home-input-quick-tasks-section">
86+
<div className="home-input-quick-tasks-header">
87+
<Text className="home-input-quick-tasks-title">Quick tasks</Text>
88+
</div>
89+
<div className="home-input-quick-tasks">
90+
{quickTasks.map((task) => (
91+
<Card
92+
key={task.id}
93+
className="home-input-quick-task-card"
94+
onClick={() => onQuickTaskSelect(task.id)}
95+
>
96+
<div className="home-input-card-content">
97+
<div className="home-input-card-icon">{task.icon}</div>
98+
<div className="home-input-card-text-content">
99+
<Text className="home-input-card-title">{task.title}</Text>
100+
<Text className="home-input-card-description">{task.description}</Text>
101+
</div>
102102
</div>
103-
</div>
104-
</Card>
105-
))}
103+
</Card>
104+
))}
105+
</div>
106106
</div>
107107
</div>
108108
</div>
109109
</div>
110-
</div>
111110
);
112111
}
113112

‎src/frontend_react/src/index.tsx‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,41 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import App from './App';
55
import reportWebVitals from './reportWebVitals';
6-
import { FluentProvider } from '@fluentui/react-components';
6+
import { FluentProvider, teamsLightTheme, teamsDarkTheme } from "@fluentui/react-components";
77

88
const root = ReactDOM.createRoot(
99
document.getElementById('root') as HTMLElement
1010
);
11-
root.render(
12-
<FluentProvider style={{ height: "100vh" }}>
13-
<App />
14-
</FluentProvider>
15-
);
11+
const AppWrapper = () => {
12+
// State to store the current theme
13+
const [isDarkMode, setIsDarkMode] = useState(
14+
window.matchMedia("(prefers-color-scheme: dark)").matches
15+
);
16+
17+
useEffect(() => {
18+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
19+
20+
const handleThemeChange = (event: MediaQueryListEvent) => {
21+
setIsDarkMode(event.matches);
22+
document.body.classList.toggle("dark-mode", event.matches); // ✅ Add this
23+
};
24+
25+
// Apply dark-mode class initially
26+
document.body.classList.toggle("dark-mode", isDarkMode);
27+
28+
mediaQuery.addEventListener("change", handleThemeChange);
29+
return () => mediaQuery.removeEventListener("change", handleThemeChange);
30+
}, []);
1631

32+
return (
33+
<FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>
34+
<App />
35+
</FluentProvider>
36+
);
37+
};
38+
root.render(<AppWrapper />);
1739
// If you want to start measuring performance in your app, pass a function
1840
// to log results (for example: reportWebVitals(console.log))
1941
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

‎src/frontend_react/src/pages/HomePage.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,14 @@ const HomePage: React.FC = () => {
138138
/>
139139
)}
140140
</PanelLeft>
141-
<Content>
142-
<HomeInput
143-
onInputSubmit={handleNewTask}
144-
onQuickTaskSelect={handleNewTask}
145-
/>
146-
</Content>
147141
</div>
142+
<Content>
143+
<HomeInput
144+
onInputSubmit={handleNewTask}
145+
onQuickTaskSelect={handleNewTask}
146+
/>
147+
</Content>
148+
148149
</CoralShellRow>
149150
</CoralShellColumn>
150151
</>

‎src/frontend_react/src/styles/HomeInput.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,6 @@
131131
width: 32px;
132132
height: 32px;
133133
border-radius: 4px;
134-
background-color: #f5f5f5; /* tokens.colorNeutralBackground2 */
135134
color: #0f6cbd; /* tokens.colorBrandForeground1 */
136135
}
137136

0 commit comments

Comments
 (0)