Skip to content

Commit 34bb958

Browse files
sdankelsdankel
authored
Merge pull request #36 from FuelLabs/sophie/package-detail
feat: scaffolding for package detail
2 parents c1a1182 + 3a06f1a commit 34bb958

40 files changed

+3235
-630
lines changed

‎.github/workflows/frontend-build-and-test.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,7 @@ jobs:
2121
run: |
2222
cd app && npm ci && npm run build
2323
cp -r build ../build
24+
25+
- name: Format check
26+
run: cd app && npm run format-check
27+

‎app/.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Ignore artifacts:
2+
build
3+
coverage

‎app/.prettierrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎app/package-lock.json‎

Lines changed: 1416 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/package.json‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"axios": "^1.6.8",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21+
"react-markdown": "^10.0.1",
2122
"react-router-dom": "^6.22.3",
2223
"react-scripts": "5.0.1",
2324
"react-use-cookie": "^1.5.0",
@@ -30,7 +31,9 @@
3031
"start": "react-scripts start",
3132
"build": "react-scripts build",
3233
"test": "react-scripts test",
33-
"eject": "react-scripts eject"
34+
"eject": "react-scripts eject",
35+
"format": "npx prettier . --write",
36+
"format-check": "npx prettier ."
3437
},
3538
"eslintConfig": {
3639
"extends": [
@@ -49,5 +52,13 @@
4952
"last 1 firefox version",
5053
"last 1 safari version"
5154
]
52-
}
55+
},
56+
"devDependencies": {
57+
"@eslint/js": "^9.21.0",
58+
"eslint": "^8.57.1",
59+
"eslint-config-prettier": "^10.0.2",
60+
"prettier": "3.5.3",
61+
"typescript-eslint": "^8.26.0"
62+
},
63+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
5364
}

‎app/src/App.css‎

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,73 @@
1-
.App {
1+
/* Dark Mode Theme for Main App Container */
2+
.app-container {
3+
width: 100%;
4+
display: flex;
5+
flex-direction: column;
26
text-align: center;
7+
background-color: #1e1e1e;
8+
height: 100vh;
9+
color: #e0e0e0;
10+
overflow: hidden;
11+
}
12+
13+
.app-toolbar {
14+
background-color: #181818 !important;
15+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
316
}
417

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
18+
.app-logo {
19+
flex-grow: 1;
20+
display: block;
21+
color: #00f58c;
22+
font-size: 24px;
23+
font-family: monospace;
24+
cursor: pointer;
25+
font-weight: bold;
26+
transition: color 0.2s ease;
827
}
928

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
29+
.app-logo:hover {
30+
color: #2dffa0;
1431
}
1532

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
33+
.app-content {
34+
flex: 1;
1935
display: flex;
2036
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
2537
}
2638

27-
.App-link {
28-
color: #61dafb;
39+
/* Global Dark Mode styles */
40+
body {
41+
background-color: #1e1e1e;
42+
color: #e0e0e0;
43+
margin: 0;
44+
padding: 0;
45+
}
46+
47+
/* Button overrides */
48+
.MuiButton-containedPrimary {
49+
background-color: #0d47a1 !important;
50+
color: #ffffff !important;
51+
}
52+
53+
.MuiButton-containedPrimary:hover {
54+
background-color: #1565c0 !important;
55+
}
56+
57+
.MuiButton-containedSecondary {
58+
background-color: #00f58c !important;
59+
color: #111111 !important;
60+
}
61+
62+
.MuiButton-containedSecondary:hover {
63+
background-color: #2dffa0 !important;
64+
}
65+
66+
.MuiButton-containedWarning {
67+
background-color: #bf360c !important;
68+
color: #ffffff !important;
2969
}
3070

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
71+
.MuiButton-containedWarning:hover {
72+
background-color: #e64a19 !important;
3873
}

‎app/src/App.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
2-
import { render, screen } from '@testing-library/react';
3-
import App from './App';
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import App from "./App";
44

5-
test('renders learn react link', () => {
5+
test("renders learn react link", () => {
66
render(<App />);
77
const linkElement = screen.getByText(/learn react/i);
88
expect(linkElement).toBeInTheDocument();

‎app/src/App.tsx‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,27 @@
1-
import React, { ReactNode } from 'react';
2-
import AppBar from '@mui/material/AppBar/AppBar';
3-
import Toolbar from '@mui/material/Toolbar/Toolbar';
4-
import { useNavigate } from 'react-router-dom';
5-
import UserButton from './features/toolbar/components/UserButton';
6-
import { useIsMobile } from './features/toolbar/hooks/useIsMobile';
7-
import SearchBar from './features/toolbar/components/SearchBar';
1+
import React, { ReactNode } from "react";
2+
import AppBar from "@mui/material/AppBar/AppBar";
3+
import Toolbar from "@mui/material/Toolbar/Toolbar";
4+
import { useNavigate } from "react-router-dom";
5+
import UserButton from "./features/toolbar/components/UserButton";
6+
import { useIsMobile } from "./features/toolbar/hooks/useIsMobile";
7+
import SearchBar from "./features/toolbar/components/SearchBar";
8+
import "./App.css";
89

9-
export const FUEL_GREEN = '#00f58c';
10+
export const FUEL_GREEN = "#00f58c";
1011

1112
interface AppProps {
1213
children?: ReactNode;
1314
}
1415

15-
function App({children}: AppProps) {
16+
function App({ children }: AppProps) {
1617
const navigate = useNavigate();
1718
const isMobile = useIsMobile();
1819

1920
return (
20-
<div
21-
style={{
22-
width: '100%',
23-
display: 'flex',
24-
flexDirection: 'column',
25-
textAlign: 'center',
26-
backgroundColor: 'lightGrey',
27-
height: '100vh',
28-
}}>
29-
<AppBar position='static'>
30-
<Toolbar style={{ backgroundColor: '#181818' }}>
31-
<div
32-
style={{
33-
flexGrow: 1,
34-
display: 'block',
35-
color: FUEL_GREEN,
36-
fontSize: '24px',
37-
fontFamily: 'monospace',
38-
cursor: 'pointer'
39-
}} onClick={()=>navigate('/')}>
21+
<div className="app-container">
22+
<AppBar position="static">
23+
<Toolbar className="app-toolbar">
24+
<div className="app-logo" onClick={() => navigate("/")}>
4025
forc.pub
4126
</div>
4227

@@ -45,7 +30,7 @@ function App({children}: AppProps) {
4530
</Toolbar>
4631
{isMobile && <SearchBar />}
4732
</AppBar>
48-
{children}
33+
<div className="app-content">{children}</div>
4934
</div>
5035
);
5136
}

‎app/src/constants.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
export const SERVER_URI = process.env.REACT_APP_SERVER_URI ?? "http://localhost:8080";
2-
export const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI ?? "http://localhost:3000";
1+
export const SERVER_URI =
2+
process.env.REACT_APP_SERVER_URI ?? "http://localhost:8080";
3+
export const REDIRECT_URI =
4+
process.env.REACT_APP_REDIRECT_URI ?? "http://localhost:3000";

‎app/src/features/dahboard/components/PackageDashboard.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* Dark mode styling for Package Dashboard */
2+
.dashboard-container {
3+
margin-top: 24px;
4+
}
5+
6+
.section-title {
7+
border-bottom: 2px solid #90caf9 !important;
8+
padding-bottom: 8px !important;
9+
color: #ffffff !important;
10+
font-weight: 500 !important;
11+
}
12+
13+
.package-card {
14+
margin-bottom: 16px;
15+
border-radius: 8px;
16+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
17+
cursor: pointer;
18+
transition:
19+
transform 0.2s,
20+
background-color 0.2s;
21+
background-color: #2a2a2a !important;
22+
border: 1px solid #333 !important;
23+
}
24+
25+
.package-card-hover {
26+
background-color: #383838 !important;
27+
transform: translateY(-2px);
28+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
29+
}
30+
31+
.card-content {
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
background-color: transparent !important;
36+
}
37+
38+
.package-name {
39+
color: #90caf9 !important;
40+
margin-bottom: 8px !important;
41+
}
42+
43+
.package-timestamp {
44+
color: #b0b0b0 !important;
45+
font-size: 0.85rem !important;
46+
}
47+
48+
.package-description {
49+
color: #e0e0e0 !important;
50+
margin-top: 8px !important;
51+
}
52+
53+
.arrow-icon {
54+
color: #90caf9 !important;
55+
margin-left: 16px;
56+
align-self: center;
57+
font-size: 1.2rem !important;
58+
}

0 commit comments

Comments
 (0)