Skip to content

Commit 92df772

Browse files
Bud-MacaulayBud-Macaulay
committed
themes and cleanup
1 parent 6ae8c26 commit 92df772

17 files changed

Lines changed: 816 additions & 246 deletions

File tree

‎src/AiidaExplorer/Breadcrumbs/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ export default function Breadcrumbs({ trail, onClick, maxItems = 10 }) {
44
const items = trail.slice(-maxItems);
55

66
return (
7-
<div className="w-full flex gap-2 flex-wrap overflow-x-auto items-center bg-slate-100 border-t p-2 ">
7+
<div className="w-full flex gap-2 flex-wrap overflow-x-auto items-center bg-theme-100 border-t p-2 ">
88
<span className="">History:</span>
99
{items.map((node, idx) => (
1010
<React.Fragment key={`${node.id}-${idx}`}>
1111
<button
12-
className="bg-gray-200 hover:bg-gray-300 text-sm px-2 py-1 rounded"
12+
className="bg-theme-200 hover:bg-theme-300 text-sm px-2 py-1 rounded"
1313
onClick={() => onClick(node, idx)}
1414
>
1515
{node.data.label} ({node.data.aiida.uuid.split("-")[0]})

‎src/AiidaExplorer/FlowChart/CustomEdge.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function CustomEdge({
6363
/>
6464
<EdgeLabelRenderer>
6565
<div
66-
className={`absolute bg-slate-200 border border-gray-300 rounded-sm px-1 py-0.5 text-gray-700 font-light ${fontSize} pointer-events-drag z-50`}
66+
className={`absolute bg-theme-200 border border-theme-300 rounded-sm px-1 py-0.5 text-theme-700 font-light ${fontSize} pointer-events-drag z-50`}
6767
style={{
6868
left: `${labelX}px`,
6969
top: `${labelY}px`,

‎src/AiidaExplorer/FlowChart/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function FlowChart({
5656
return (
5757
<div className="w-full h-full">
5858
<ReactFlow
59-
className="bg-slate-50"
59+
className="bg-theme-50"
6060
nodes={mappedNodes}
6161
edges={edges}
6262
nodeTypes={nodeTypes}

‎src/AiidaExplorer/GroupsViewer/formatTable.jsx‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎src/AiidaExplorer/GroupsViewer/index.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function formatTableData(nodes, setRootNodeId, isSmallScreen = false) {
8181
newRow[""] = (
8282
<button
8383
onClick={() => setRootNodeId(row.uuid)}
84-
className="px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700 transition"
84+
className="px-2 py-1 rounded bg-theme-500 text-white hover:bg-theme-700 transition"
8585
>
8686
View
8787
</button>
@@ -181,13 +181,13 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
181181
return (
182182
<div className="flex flex-col md:flex-row gap-4 overflow-auto w-full items-start">
183183
{/* Left panel */}
184-
<div className="min-w-[250px] max-w-[400px] flex-shrink-0 bg-slate-50 p-2 px-3 rounded">
184+
<div className="min-w-[250px] max-w-[400px] flex-shrink-0 bg-theme-50 p-2 px-3 rounded">
185185
{/* Top header + button */}
186-
<div className="flex justify-between items-center mb-2">
186+
<div className="flex gap-4 items-center mb-2">
187187
<h4 className="font-medium mt-2">Filter by Node Types</h4>
188188
<button
189189
onClick={() => fetchNodes(0)}
190-
className="px-3 py-1 rounded bg-indigo-700 text-white hover:bg-indigo-800 transition"
190+
className="px-3 py-1 rounded bg-theme-500 text-white hover:bg-theme-700 transition"
191191
>
192192
Apply
193193
</button>
@@ -230,7 +230,7 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
230230
{tableData.length > 0 && (
231231
<button
232232
onClick={() => fetchNodes(offset)}
233-
className="px-3 py-1 rounded bg-gray-700 text-white hover:bg-gray-800 transition"
233+
className="px-3 py-1 rounded bg-theme-500 text-white hover:bg-theme-700 transition"
234234
>
235235
Load next 200
236236
</button>
@@ -244,11 +244,11 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
244244
value={searchNode}
245245
onChange={(e) => setSearchNode(e.target.value)}
246246
placeholder="Navigate to a UUID"
247-
className="border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-700 rounded px-1 py-1"
247+
className="border border-gray-300 focus:outline-none focus:ring-2 focus:ring-theme-700 rounded px-1 py-1"
248248
/>
249249
<button
250250
onClick={handleNodeSearch}
251-
className="px-1 py-0.5 md:px-2 rounded bg-indigo-600 text-white hover:bg-indigo-700 transition"
251+
className="px-1 py-0.5 md:px-2 rounded bg-theme-500 text-white hover:bg-theme-700 transition"
252252
>
253253
Go
254254
</button>
@@ -271,7 +271,7 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
271271
<DataTable
272272
columns={columnsToRender}
273273
data={tableData}
274-
sortableCols={columnsToRender}
274+
sortableCols={["Unique ID", "Label", "Type", "Created", "Modified"]}
275275
renderIfMissing
276276
breakableCols={[
277277
"Unique ID",

‎src/AiidaExplorer/TopBar/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ export default function TopControls({
88
disableGetCounts = false,
99
}) {
1010
return (
11-
<div className="w-full shadow-md bg-slate-50 border-b px-4 py-2 flex justify-between items-center z-50">
11+
<div className="w-full shadow-md bg-theme-50 border-b px-4 py-2 flex justify-between items-center z-50">
1212
{/* Left side buttons */}
1313
<div className="flex gap-2">
1414
<button
15-
className="group px-3 py-1 rounded-md bg-slate-100 text-blue-700 flex items-center gap-1 hover:bg-slate-200 transition-colors"
15+
className="group px-3 py-1 rounded-md bg-theme-100 text-theme-700 flex items-center gap-1 hover:bg-theme-200 transition-colors"
1616
onClick={onFindNode}
1717
>
1818
<GroupIcon className="w-5 h-5" />
1919
<span>Find Node</span>
2020
</button>
2121

2222
<button
23-
className="group px-3 py-1 rounded-md bg-slate-100 text-blue-700 flex items-center gap-1 hover:bg-slate-200 transition-colors"
23+
className="group px-3 py-1 rounded-md bg-theme-100 text-theme-700 flex items-center gap-1 hover:bg-theme-200 transition-colors"
2424
onClick={onGetLinkCounts}
2525
disabled={disableGetCounts || isLoading}
2626
>
@@ -31,7 +31,7 @@ export default function TopControls({
3131

3232
{/* Right side button */}
3333
<button
34-
className="group px-3 py-1 rounded-md bg-slate-100 text-blue-700 flex items-center gap-1 hover:bg-slate-200 transition-colors"
34+
className="group px-3 py-1 rounded-md bg-theme-100 text-theme-700 flex items-center gap-1 hover:bg-theme-200 transition-colors"
3535
onClick={onHelp}
3636
>
3737
<QuestionIcon className="w-5 h-5" />

‎src/AiidaExplorer/VisualiserPane/FormattedMetaData.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function FormattedMetaData({ nodeData, userData }) {
77

88
if (!aiida) {
99
return (
10-
<div className="p-4 text-gray-500 italic">No metadata available</div>
10+
<div className="p-4 text-theme-500 italic">No metadata available</div>
1111
);
1212
}
1313

@@ -19,20 +19,20 @@ export default function FormattedMetaData({ nodeData, userData }) {
1919
<div className="">
2020
{/* Label with arrow on small screens */}
2121
<div
22-
className="flex gap-2 items-center cursor-pointer sm:cursor-default"
22+
className="flex gap-2 items-center cursor-pointer md:cursor-default"
2323
onClick={() => setIsOpen(!isOpen)}
2424
>
25-
<h2 className="text-md md:text-lg font-semibold">
25+
<h2 className="text-md lg:text-lg font-semibold">
2626
{nodeData.label || ""}
2727
</h2>
28-
<span className="md:hidden transition-transform duration-200">
28+
<span className="lg:hidden transition-transform duration-200">
2929
{isOpen ? "▲" : "▼"}
3030
</span>
3131
</div>
3232

3333
{/* Metadata content */}
34-
<div className={`${isOpen ? "block" : "hidden"} mt-1 md:block md:mt-2`}>
35-
<div className="space-y-1 px-1 text-xs md:text-sm">
34+
<div className={`${isOpen ? "block" : "hidden"} mt-1 lg:block lg:mt-2`}>
35+
<div className="space-y-1 px-1 text-xs lg:text-sm">
3636
{aiida.uuid && (
3737
<div>
3838
<span className="font-medium">UUID:</span> {aiida.uuid}

‎src/AiidaExplorer/VisualiserPane/Rich/StructureDataVisualiser.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
123123
</div>
124124
{hasDerived && (
125125
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
126-
<div className="bg-gray-50 p-4 rounded-lg shadow-sm space-y-1">
126+
<div className="bg-theme-100 border-1 border-theme-200 p-2 rounded-lg shadow-md space-y-1">
127127
<p>
128128
<strong>Cell Volume:</strong> {volume?.toFixed(4)} ų
129129
</p>
@@ -139,7 +139,7 @@ export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
139139
</div>
140140

141141
{lattice && (
142-
<div className="bg-gray-50 p-4 rounded-lg shadow-sm space-y-1">
142+
<div className="bg-theme-100 border-1 border-theme-200 p-2 rounded-lg shadow-md space-y-1">
143143
<p>
144144
<strong>Lattice a:</strong> {lattice.a.toFixed(4)} Å
145145
</p>

‎src/AiidaExplorer/VisualiserPane/Rich/UpfDataVisualiser.jsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export default function UpfDataVisualiser({ nodeData }) {
163163
return (
164164
<div className="w-full mx-auto p-4 space-y-6">
165165
{/* Metadata */}
166-
<div className="bg-gray-50 p-4 rounded-lg shadow-sm space-y-1">
166+
<div className="bg-theme-100 border-1 border-theme-200 p-4 rounded-lg shadow-md space-y-1">
167167
<p>
168168
<strong>Element:</strong> {header?.element || "N/A"}
169169
</p>
@@ -182,7 +182,10 @@ export default function UpfDataVisualiser({ nodeData }) {
182182
<h3 className="font-semibold mb-2">Orbital radial functions</h3>
183183

184184
{/* container that constrains width and uses box-sizing */}
185-
<div className="w-full max-w-full" style={{ boxSizing: "border-box" }}>
185+
<div
186+
className="w-full max-w-full bg-theme-100 rounded-md border border-theme-200 shadow-sm p-1"
187+
style={{ boxSizing: "border-box" }}
188+
>
186189
<SimplePlot
187190
data={orbitalTraces}
188191
layout={{
@@ -209,7 +212,10 @@ export default function UpfDataVisualiser({ nodeData }) {
209212
</div>
210213

211214
<h3 className="font-semibold mb-2">Beta projectors</h3>
212-
<div className="w-full max-w-full" style={{ boxSizing: "border-box" }}>
215+
<div
216+
className="w-full max-w-full bg-theme-100 rounded-md border border-theme-200 shadow-sm p-1"
217+
style={{ boxSizing: "border-box" }}
218+
>
213219
<SimplePlot
214220
data={betaprojTraces}
215221
layout={{
@@ -234,7 +240,10 @@ export default function UpfDataVisualiser({ nodeData }) {
234240

235241
<h3 className="font-semibold mb-2">Charge densities</h3>
236242

237-
<div className="w-full max-w-full" style={{ boxSizing: "border-box" }}>
243+
<div
244+
className="w-full max-w-full bg-theme-100 rounded-md border border-theme-200 shadow-sm p-1"
245+
style={{ boxSizing: "border-box" }}
246+
>
238247
<SimplePlot
239248
data={chargeDensitiesTraces}
240249
layout={{

‎src/AiidaExplorer/VisualiserPane/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,17 @@ export default function VisualiserPane({
6565
return (
6666
<div className="w-full h-full flex flex-col overflow-hidden">
6767
{/* Shortened Metadata */}
68-
<div className="px-4 py-3 md:py-2 bg-slate-50">
68+
<div className="px-4 py-3 md:py-2 bg-theme-50">
6969
<FormattedMetaData nodeData={selectedNode.data} userData={userData} />
7070
</div>
7171

7272
{/* Tabs */}
73-
<div className="flex border-y bg-gray-100">
73+
<div className="flex border-y bg-theme-100">
7474
<button
7575
disabled={richTabDisabled}
7676
className={`px-4 py-2 ${
7777
activeTab === "rich"
78-
? "border-b-2 border-blue-500 font-semibold"
78+
? "border-b-2 border-theme-500 font-semibold"
7979
: richTabDisabled
8080
? "text-gray-400 cursor-not-allowed"
8181
: ""
@@ -87,7 +87,7 @@ export default function VisualiserPane({
8787
<button
8888
className={`px-4 py-2 ${
8989
activeTab === "raw"
90-
? "border-b-2 border-blue-500 font-semibold"
90+
? "border-b-2 border-theme-500 font-semibold"
9191
: ""
9292
}`}
9393
onClick={() => setActiveTab("raw")}

0 commit comments

Comments
 (0)