Skip to content

Commit 9a514e8

Browse files
Fr4nc3Fr4nc3
committed
css review
1 parent 3c696b3 commit 9a514e8

File tree

5 files changed

+186
-76
lines changed

5 files changed

+186
-76
lines changed

‎src/frontend_react/src/App.css‎

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,76 @@
1-
.App {
2-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
3-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
4-
-webkit-font-smoothing: antialiased;
5-
-moz-osx-font-smoothing: grayscale;
1+
/* APP */
2+
3+
4+
.tab {
5+
display: flex;
6+
align-items: center;
7+
gap: 8px;
8+
color: var(--colorNeutralForeground2);
9+
padding: 8px 16px;
10+
border-radius: 6px;
11+
font-size: 14px;
12+
text-decoration: none;
13+
cursor: pointer;
14+
transition: background-color 0.2s ease-in-out;
615
}
716

8-
/* Global styles */
9-
body {
10-
margin: 0;
11-
padding: 0;
12-
background-color: #f9f9f9;
17+
.tab:hover {
18+
background-color: var(--colorSubtleBackgroundHover);
1319
}
1420

15-
/* Utility classes */
16-
.text-center {
17-
text-align: center;
21+
.tab:active {
22+
background-color: var(--colorSubtleBackgroundPressed);
1823
}
1924

20-
.pre-wrap {
21-
white-space: pre-wrap;
25+
26+
/* TASKLIST */
27+
28+
.task-tab {
29+
display: flex;
30+
align-items: center;
31+
padding: 8px 8px 8px 0;
32+
color: var(--colorNeutralForeground2);
33+
border-radius: 6px;
34+
cursor: pointer;
35+
transition: background-color 0.2s ease-in-out;
36+
font-size: var(--fontSizeBase00);
37+
gap: 14px;
38+
2239
}
2340

24-
/* Animation */
25-
@keyframes fade-in {
26-
from {
27-
opacity: 0;
28-
}
29-
to {
30-
opacity: 1;
31-
}
41+
.task-tab:hover {
42+
background-color: var(--colorSubtleBackgroundHover);
3243
}
3344

34-
.fade-in {
35-
animation: fade-in 0.3s ease-in-out;
45+
.task-tab.active {
46+
background-color: var(--colorNeutralBackground1Pressed);
47+
color: var(--colorNeutralForeground1);
48+
font-weight: 500;
49+
3650
}
3751

38-
/* Custom scrollbar */
39-
::-webkit-scrollbar {
40-
width: 8px;
41-
height: 8px;
52+
.task-tab .sideNavTick {
53+
width: 2px;
54+
height: 100%;
55+
min-height: 32px;
56+
background-color: var(--colorCompoundBrandStroke);
57+
opacity: 0;
58+
flex-shrink: 0;
59+
transition: opacity 0.2s ease-in-out;
60+
margin-left: -8px;
61+
4262
}
4363

44-
::-webkit-scrollbar-track {
45-
background: #f1f1f1;
64+
.task-tab.active .sideNavTick {
65+
opacity: 1;
4666
}
4767

48-
::-webkit-scrollbar-thumb {
49-
background: #d4d4d4;
50-
border-radius: 4px;
68+
.task-tab .task-menu-button {
69+
opacity: 0;
70+
transition: opacity 0.2s ease-in-out;
5171
}
5272

53-
::-webkit-scrollbar-thumb:hover {
54-
background: #b8b8b8;
73+
.task-tab:hover .task-menu-button {
74+
opacity: 1;
5575
}
76+

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,12 @@ import {
1010
} from "@fluentui/react-components";
1111
import {
1212
Send20Regular,
13-
Person20Regular,
14-
Phone20Regular,
15-
ShoppingBag20Regular,
16-
DocumentEdit20Regular,
1713
} from "@fluentui/react-icons";
1814
import React, { useRef, useEffect, useState } from "react";
1915
import { useNavigate } from 'react-router-dom';
20-
import "./../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
2116
import "./../../styles/HomeInput.css";
17+
import "./../../styles/Chat.css";
18+
import "../../styles/prism-material-oceanic.css"
2219
import { HomeInputProps, quickTasks, QuickTask } from "../../models/homeInput";
2320
import { TaskService } from "../../services/TaskService";
2421
import { NewTaskService } from "../../services/NewTaskService";

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { Body1, Button, Tag, ToolbarDivider } from "@fluentui/react-components";
88
import { ChatDismiss20Regular, HeartRegular } from "@fluentui/react-icons";
99
import { useRef, useState } from "react";
1010
import ReactMarkdown from "react-markdown";
11-
import "../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
1211
import "../../styles/PlanChat.css"; // Assuming you have a CSS file for additional styles
13-
12+
import "../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
13+
import "../../styles/prism-material-oceanic.css"
1414
const PlanChat: React.FC<PlanChatProps> = ({
1515
planData,
1616
OnChatSubmit
@@ -74,7 +74,8 @@ const PlanChat: React.FC<PlanChatProps> = ({
7474
<span>Thinking...</span>
7575
</div>
7676
)}
77-
</div> {showScrollButton && (
77+
</div>
78+
{showScrollButton && (
7879
<Tag
7980
onClick={scrollToBottom}
8081
className="scroll-to-bottom plan-chat-scroll-button"
@@ -83,7 +84,9 @@ const PlanChat: React.FC<PlanChatProps> = ({
8384
>
8485
Back to bottom
8586
</Tag>
86-
)} <div ref={inputContainerRef} className="plan-chat-input-container">
87+
)}
88+
89+
<div ref={inputContainerRef} className="plan-chat-input-container">
8790
<div className="plan-chat-input-wrapper">
8891
<ChatInput
8992
value={input}

‎src/frontend_react/src/index.css‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,46 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
1+
body, html, :root {
2+
min-height: 100vh;
3+
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
86
}
97

10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}
14-
15-
* {
16-
box-sizing: border-box;
17-
}
18-
19-
html, body, #root {
20-
height: 100%;
21-
}
22-
23-
/* Adjust focus styles for accessibility */
24-
*:focus {
25-
outline: 2px solid rgba(100, 58, 97, 0.5);
26-
outline-offset: 2px;
27-
}
288

29-
/* Better button styling */
30-
button {
31-
cursor: pointer;
32-
}
9+
/* Global Custom Scrollbar */
10+
::-webkit-scrollbar {
11+
overflow-y: auto; /* Ensure scrollable content */
12+
scrollbar-width: thin; /* For Firefox */
13+
scrollbar-color: rgba(100, 100, 100, 0.7) transparent; /* For Firefox */
14+
}
15+
16+
/* Webkit-based browsers */
17+
::-webkit-scrollbar {
18+
width: 6px;
19+
}
20+
21+
::-webkit-scrollbar-thumb {
22+
background-color: rgba(100, 100, 100, 0.7);
23+
border-radius: 3px;
24+
}
25+
26+
::-webkit-scrollbar-thumb:hover {
27+
background-color: rgba(100, 100, 100, 1);
28+
}
29+
30+
::-webkit-scrollbar-track {
31+
/* background: red; */
32+
}
33+
34+
* {
35+
-webkit-overflow-scrolling: touch;
36+
scroll-behavior: smooth;
37+
}
3338

34-
button:active {
35-
transform: translateY(1px);
39+
.chart-container canvas {
40+
--chartBarColor: var(--colorBrandBackground);
41+
--chartHoverColor: var(--colorBrandBackgroundHover);
42+
--chartBorderColor: var(--colorBrandForeground1);
43+
--chartLineColor: var(--colorBrandForeground1);
44+
--chartPointColor: var(--colorBrandBackground);
45+
--chartPointBorderColor: var(--colorBrandForeground1);
3646
}

‎src/frontend_react/src/styles/prism-material-oceanic.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* Light Mode (Default) */
2+
:root {
3+
--color-text: #1e293b;
4+
--color-selection: #cbd5e1;
5+
6+
--color-atrule: #7c3aed;
7+
--color-attr-name: #ea580c;
8+
--color-attr-value: #15803d;
9+
--color-boolean: #7c3aed;
10+
--color-comment: #64748b;
11+
--color-function: #7c3aed;
12+
--color-number: #f97316;
13+
--color-string: #15803d;
14+
--color-tag: #e11d48;
15+
--color-punctuation: #2563eb;
16+
}
17+
18+
/* Dark Mode */
19+
body.dark-mode {
20+
--color-text: #c3cee3;
21+
--color-selection: #363636;
22+
23+
--color-atrule: #c792ea;
24+
--color-attr-name: #ffcb6b;
25+
--color-attr-value: #c3e88d;
26+
--color-boolean: #c792ea;
27+
--color-comment: #546e7a;
28+
--color-function: #c792ea;
29+
--color-number: #fd9170;
30+
--color-string: #c3e88d;
31+
--color-tag: #f07178;
32+
--color-punctuation: #89ddff;
33+
}
34+
35+
/* Base Syntax Highlighting */
36+
code[class*="language-"],
37+
pre[class*="language-"] {
38+
text-align: left;
39+
white-space: pre;
40+
word-spacing: normal;
41+
word-break: normal;
42+
word-wrap: normal;
43+
color: var(--color-text);
44+
font-family: Roboto Mono, monospace;
45+
font-size: .95em;
46+
line-height: 1.8em;
47+
tab-size: 4;
48+
hyphens: none;
49+
}
50+
51+
code[class*="language-"]::selection,
52+
pre[class*="language-"]::selection {
53+
background: var(--color-selection);
54+
}
55+
56+
:not(pre) > code[class*="language-"] {
57+
white-space: normal;
58+
border-radius: 0.2em;
59+
padding: 0.1em;
60+
}
61+
62+
pre[class*="language-"] {
63+
overflow: auto;
64+
position: relative;
65+
margin: 0.5em 0;
66+
padding: 1.25em 1em;
67+
}
68+
69+
/* Token Colors */
70+
.token.atrule { color: var(--color-atrule); }
71+
.token.attr-name { color: var(--color-attr-name); }
72+
.token.attr-value { color: var(--color-attr-value); }
73+
.token.boolean { color: var(--color-boolean); }
74+
.token.comment { color: var(--color-comment); }
75+
.token.function { color: var(--color-function); }
76+
.token.number { color: var(--color-number); }
77+
.token.string { color: var(--color-string); }
78+
.token.tag { color: var(--color-tag); }
79+
.token.punctuation { color: var(--color-punctuation); }

0 commit comments

Comments
 (0)