This repository has no description
tweak loading text
author
damedotblog
date
(Feb 19, 2025, 1:30 PM -0500)
commit
ebee5f76
ebee5f7677d1b575e64013e73b58ff91609a32c4
parent
6e4772fc
6e4772fcc610ac5c8e83503c7b0b44a674f9e21a
+26
-22
+2
-2
src/App.jsx
+2
-2
src/App.jsx
···
11
11
import Privacy from './components/PrivacyTerms/Privacy';
12
12
import AltTextRatingTool from './components/AltTextRating/AltTextRatingTool';
13
13
import UserProfile from './components/UserProfile/UserProfile';
14
-
import TestMatterPage from './components/TestMatterPage';
14
+
import ZenPage from './components/ZenPage';
15
15
import CompareScores from './components/CompareScores/CompareScores';
16
16
import "./App.css";
17
17
import { AuthContext } from './AuthContext';
···
44
44
<Route path="/terms" element={<Terms />} />
45
45
<Route path="/newsletter" element={<Newsletter />} />
46
46
<Route path="/:username" element={<UserProfile />} />
47
-
<Route path="/test-matter" element={<TestMatterPage />} />
47
+
<Route path="/zen" element={<ZenPage />} />
48
48
{/* Default redirect */}
49
49
<Route path="/" element={<Navigate to="/home" replace />} />
50
50
<Route path="*" element={<Navigate to="/home" replace />} />
+4
-2
src/components/MatterLoadingAnimation.css
+4
-2
src/components/MatterLoadingAnimation.css
···
36
36
37
37
.circle-counters {
38
38
display: flex;
39
-
gap: 10px;
39
+
gap: 24.5px;;
40
40
margin-top: 10px;
41
41
font-size: 1.2em;
42
-
opacity: 25%;
42
+
align-content: center;
43
+
justify-content: center;
43
44
}
44
45
45
46
.circle-counters p {
···
62
63
border-radius: 50%;
63
64
border-width: 3px;
64
65
border-style: solid;
66
+
margin-bottom: 3px;
65
67
}
66
68
67
69
.regular-circle {
+16
-14
src/components/MatterLoadingAnimation.js
+16
-14
src/components/MatterLoadingAnimation.js
···
323
323
boxSizing: "border-box",
324
324
}}
325
325
/>
326
-
<p className={`loading-text ${fade ? "fade" : ""}`} style={{ marginTop: "20px", fontSize: "1em" }}>
327
-
{message}<span className="dots"></span>
328
-
</p>
329
-
<div className="circle-counters">
330
-
<div className="counter-item">
331
-
<div className="legend-circle regular-circle" />
332
-
<p>{circleCount}</p>
333
-
</div>
334
-
<div className="counter-item">
335
-
<div className="legend-circle special-circle" />
336
-
<p>{specialCircleCount}</p>
326
+
<div className="loading-text-container">
327
+
<p className={`loading-text ${fade ? "fade" : ""}`} style={{ marginTop: "20px", fontSize: "1em" }}>
328
+
{message}<span className="dots"></span>
329
+
</p>
330
+
<div className="circle-counters">
331
+
<div className="counter-item">
332
+
<div className="legend-circle regular-circle" />
333
+
<p className="counter-item-regular">{circleCount}</p>
334
+
</div>
335
+
<div className="counter-item">
336
+
<div className="legend-circle special-circle" />
337
+
<p className="counter-item-special">{specialCircleCount}</p>
338
+
</div>
337
339
</div>
338
-
</div>
339
-
<div className="version-number">
340
-
<p>cred.blue v1.0</p>
340
+
<div className="version-number">
341
+
<p>cred.blue v1.0</p>
342
+
</div>
341
343
</div>
342
344
</div>
343
345
);
+4
-4
src/components/TestMatterPage.js
src/components/ZenPage.js
+4
-4
src/components/TestMatterPage.js
src/components/ZenPage.js
···
1
-
// src/pages/TestMatterPage.jsx
1
+
// src/pages/ZenPage.jsx
2
2
import React from "react";
3
3
import "./MatterLoadingAnimation.css";
4
-
import MatterLoadingAnimation from "../components/MatterLoadingAnimation";
4
+
import MatterLoadingAnimation from "./MatterLoadingAnimation";
5
5
6
-
const TestMatterPage = () => {
6
+
const ZenPage = () => {
7
7
return (
8
8
<div style={{
9
9
display: "flex",
···
18
18
);
19
19
};
20
20
21
-
export default TestMatterPage;
21
+
export default ZenPage;