Skip to content

Commit ab8ea4c

Browse files
ElishaKayElishaKay
committed
setup for modular css and fetching gptr api url from props of react component
1 parent 48ed0e9 commit ab8ea4c

File tree

4 files changed

+319
-312
lines changed

4 files changed

+319
-312
lines changed

‎frontend/nextjs/app/globals.css

+99-95
Original file line numberDiff line numberDiff line change
@@ -2,121 +2,125 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
@keyframes gradientBG {
6-
0% {background-position: 0% 50%;}
7-
50% {background-position: 100% 50%;}
8-
100% {background-position: 0% 50%;}
9-
}
10-
11-
html {
12-
scroll-behavior: smooth;
13-
}
14-
15-
textarea {
16-
max-height: 300px; /* Set an appropriate max height */
17-
overflow-y: auto; /* Enable internal scrolling */
18-
/* transition: height 0.2s ease-in-out; */
19-
}
5+
.gptr-root {
206

21-
.log-message {
22-
word-wrap: break-word; /* For handling long URLs or text */
23-
overflow-wrap: break-word; /* For handling overflow in modern browsers */
24-
overflow-x: hidden; /* Hide horizontal overflow */
25-
word-break: break-word; /* Break long words if needed */
26-
}
27-
28-
body {
29-
font-family: 'Montserrat', sans-serif;
30-
line-height: 1.6;
31-
background-size: 200% 200%;
32-
background-image: linear-gradient(170deg, #151A2D, #036f73, #151A2D);
33-
/*animation: gradientBG 10s ease infinite;*/
34-
}
35-
36-
.landing {
37-
display: flex;
38-
justify-content: center;
39-
align-items: center;
40-
height: 30vh;
41-
text-align: center;
42-
color: white;
43-
}
7+
@keyframes gradientBG {
8+
0% {background-position: 0% 50%;}
9+
50% {background-position: 100% 50%;}
10+
100% {background-position: 0% 50%;}
11+
}
4412

45-
.landing h1 {
46-
font-size: 3.5rem;
47-
font-weight: 700;
48-
margin-bottom: 2rem;
49-
}
13+
html {
14+
scroll-behavior: smooth;
15+
}
5016

51-
@layer utilities {
52-
.text-balance {
53-
text-wrap: balance;
17+
textarea {
18+
max-height: 300px; /* Set an appropriate max height */
19+
overflow-y: auto; /* Enable internal scrolling */
20+
/* transition: height 0.2s ease-in-out; */
5421
}
55-
/* Hide scrollbar for Chrome, Safari and Opera */
56-
.no-scrollbar::-webkit-scrollbar {
57-
display: none;
22+
23+
.log-message {
24+
word-wrap: break-word; /* For handling long URLs or text */
25+
overflow-wrap: break-word; /* For handling overflow in modern browsers */
26+
overflow-x: hidden; /* Hide horizontal overflow */
27+
word-break: break-word; /* Break long words if needed */
5828
}
59-
/* Hide scrollbar for IE, Edge and Firefox */
60-
.no-scrollbar {
61-
-ms-overflow-style: none; /* IE and Edge */
62-
scrollbar-width: none; /* Firefox */
29+
30+
body {
31+
font-family: 'Montserrat', sans-serif;
32+
line-height: 1.6;
33+
background-size: 200% 200%;
34+
background-image: linear-gradient(170deg, #151A2D, #036f73, #151A2D);
35+
/*animation: gradientBG 10s ease infinite;*/
6336
}
64-
.loader {
65-
text-align: left;
37+
38+
.landing {
6639
display: flex;
67-
gap: 3px;
40+
justify-content: center;
41+
align-items: center;
42+
height: 30vh;
43+
text-align: center;
44+
color: white;
6845
}
6946

70-
.loader span {
71-
display: inline-block;
72-
vertical-align: middle;
73-
width: 7px;
74-
height: 7px;
75-
/* background: #4b4b4b; */
76-
background: white;
77-
border-radius: 50%;
78-
animation: loader 0.6s infinite alternate;
47+
.landing h1 {
48+
font-size: 3.5rem;
49+
font-weight: 700;
50+
margin-bottom: 2rem;
7951
}
8052

81-
.loader span:nth-of-type(2) {
82-
animation-delay: 0.2s;
83-
}
53+
@layer utilities {
54+
.text-balance {
55+
text-wrap: balance;
56+
}
57+
/* Hide scrollbar for Chrome, Safari and Opera */
58+
.no-scrollbar::-webkit-scrollbar {
59+
display: none;
60+
}
61+
/* Hide scrollbar for IE, Edge and Firefox */
62+
.no-scrollbar {
63+
-ms-overflow-style: none; /* IE and Edge */
64+
scrollbar-width: none; /* Firefox */
65+
}
66+
.loader {
67+
text-align: left;
68+
display: flex;
69+
gap: 3px;
70+
}
8471

85-
.loader span:nth-of-type(3) {
86-
animation-delay: 0.6s;
87-
}
72+
.loader span {
73+
display: inline-block;
74+
vertical-align: middle;
75+
width: 7px;
76+
height: 7px;
77+
/* background: #4b4b4b; */
78+
background: white;
79+
border-radius: 50%;
80+
animation: loader 0.6s infinite alternate;
81+
}
8882

89-
@keyframes loader {
90-
0% {
91-
opacity: 1;
92-
transform: scale(0.6);
83+
.loader span:nth-of-type(2) {
84+
animation-delay: 0.2s;
9385
}
9486

95-
100% {
96-
opacity: 0.3;
97-
transform: scale(1);
87+
.loader span:nth-of-type(3) {
88+
animation-delay: 0.6s;
89+
}
90+
91+
@keyframes loader {
92+
0% {
93+
opacity: 1;
94+
transform: scale(0.6);
95+
}
96+
97+
100% {
98+
opacity: 0.3;
99+
transform: scale(1);
100+
}
98101
}
99102
}
100-
}
101103

102-
body {
103-
margin: 0px !important;
104-
}
104+
body {
105+
margin: 0px !important;
106+
}
105107

106-
/* Add these styles for the scrollbar */
107-
.scrollbar-thin {
108-
scrollbar-width: thin;
109-
}
108+
/* Add these styles for the scrollbar */
109+
.scrollbar-thin {
110+
scrollbar-width: thin;
111+
}
110112

111-
.scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
112-
background-color: #4B5563;
113-
border-radius: 6px;
114-
}
113+
.scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
114+
background-color: #4B5563;
115+
border-radius: 6px;
116+
}
115117

116-
.scrollbar-track-gray-300::-webkit-scrollbar-track {
117-
background-color: #D1D5DB;
118-
}
118+
.scrollbar-track-gray-300::-webkit-scrollbar-track {
119+
background-color: #D1D5DB;
120+
}
121+
122+
.scrollbar-thin::-webkit-scrollbar {
123+
width: 6px;
124+
}
119125

120-
.scrollbar-thin::-webkit-scrollbar {
121-
width: 6px;
122126
}

‎frontend/nextjs/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function RootLayout({
4444
}>) {
4545

4646
return (
47-
<html lang="en">
47+
<html className="gptr-root" lang="en">
4848
<head>
4949
<PlausibleProvider domain="localhost:3000" />
5050
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID!} />

0 commit comments

Comments
 (0)