browse page progress

web/src/components/browse/project-accordion.tsx

@@ -0,0 +1,31 @@
+import { Editor } from '@monaco-editor/react';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+
+import { PageLayout } from '../components/layout/page-layout';
+import { SchemaHeader } from '../components/schemas/schema-header';
+import { SchemaInterface } from '../components/schemas/schema-interface';
+import { useSession } from '../contexts/session-context';
+import { useSchema } from '../hooks/queries/useSchema';
+
+export function Schema() {
+  const { user } = useSession();
+  const { namespace, schema } = useParams();
+  const { data: schemaData, isFetching: isLoading } = useSchema(namespace, schema);
+
+  const {} = useForm();
+
+  const canEdit = (user && (user.login === namespace || user.orgs.includes(namespace || 'NONE'))) || false;
+
+  return (
+    <PageLayout title={`${namespace}/${schema} schema`} fullWidth>
+      <SchemaInterface
+        namespace={namespace!}
+        name={schema!}
+        key={schemaData?.schema || 'NONE'}
+        canEdit={canEdit}
+        schemaData={schemaData}
+      />
+    </PageLayout>
+  );
+}

web/src/components/project/view-selector.tsx

@@ -80,7 +80,7 @@ export const ViewSelector = (props: ViewSelectorProps) => {
               }}
               className="top-z w-100"
               options={[
-                { value: null, label: "Default view" },
+                { value: null, label: "Default View" },
                 ...(projectViews?.views.map((view) => ({
                   view: view.name,
                   description: view.description || 'No description',
@@ -115,7 +115,7 @@ export const ViewSelector = (props: ViewSelectorProps) => {
               }
               value={
                 view === undefined 
-                  ? { value: null, label: "Default view" } 
+                  ? { value: null, label: "Default View" } 
                   : { view: view, description: view, value: view, label: view }
               }
             />

web/src/components/schemas/schemas-nav.tsx

@@ -33,7 +33,7 @@ export const SchemasNav = (props: Props) => {
     <div className="d-flex flex-column align-items-center gap-2">
       <div className="d-flex align-items-center justify-content-between w-100">
         <div className="d-flex align-items-center">
-          <h1 className="m-0 fw-bold">PEPhub schemas</h1>
+          <h3 className="m-0 fw-semibold">PEPhub schemas</h3>
         </div>
         {user && (
           <div className="d-flex align-items-center gap-1">

web/src/globals.css

@@ -8,7 +8,8 @@ body {
   transition: all 180ms;
 }
 
-.namespace-nav .nav-link:hover {
+.namespace-nav .nav-link:hover,
+.namespace-card:hover {
   background-color: #052c6512;
   color: #052c65;
 }
@@ -778,7 +779,7 @@ body {
   background-color: white !important;
   color: black !important;
   box-shadow: .5px 1px 7px 1px #00000010 !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
 }
 
 .modal-pill .nav-pills .nav-item {
@@ -809,7 +810,7 @@ body {
 
 .modal-pill .nav-tabs .nav-link.active { 
   color: black !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
 }
 
 .modal-pill .nav-tabs .nav-link { 

web/src/main.tsx

@@ -26,7 +26,7 @@ import { LoginSuccessPage } from './pages/LoginSuccess';
 import { NamespacePage } from './pages/Namespace';
 import { ProjectPage } from './pages/Project';
 import { Schema } from './pages/Schema';
-import { Schemas } from './pages/Schemas';
+import { Browse } from './pages/Browse';
 import { SearchPage } from './pages/Search';
 import { EidoValidator } from './pages/Validator';
 
@@ -73,7 +73,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/schemas',
-    element: <Schemas />,
+    element: <Browse />,
   },
   {
     path: '/schemas/:namespace',