curio cfg edit: ux cleanups (#11985)

* fixed popper and bools * local fonts * dark select boxes
filecoin-project · May 10, 2024 · f5b6c4e · f5b6c4e
1 parent 4f70204
commit f5b6c4e
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 11 deletions.
diff --git a/curiosrc/web/static/config/edit.html b/curiosrc/web/static/config/edit.html
@@ -1,12 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" data-bs-theme="dark">
 <head>
     <title>JSON Schema Editor</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/theme.min.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@json-editor/[email protected]/dist/jsoneditor.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/theme.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body style="visibility: hidden;">
 <style>
@@ -86,7 +90,7 @@
                 Unchecking a box will reset the value to default.</p>
             </div>
 
-            <div id="editor" ></div>
+            <div id="editor" data-bs-theme="dark"></div>
             <script>
                 var editor;
                 var urlParams = new URLSearchParams(window.location.search);

diff --git a/curiosrc/web/static/pipeline_porep.html b/curiosrc/web/static/pipeline_porep.html
@@ -4,7 +4,6 @@
     <script src="https://unpkg.com/[email protected]" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
     <script type="module" src="/chain-connectivity.mjs"></script>
-    <link href="https://fonts.cdnfonts.com/css/metropolis-2" rel="stylesheet" crossorigin="anonymous">
     <link rel="stylesheet" href="/ux/main.css">
     <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/build/web/hack-subset.css'>
     <style>

diff --git a/curiosrc/web/static/ux/curio-ux.mjs b/curiosrc/web/static/ux/curio-ux.mjs
@@ -23,9 +23,7 @@ class CurioUX extends LitElement {
     document.head.innerHTML += `
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link href="https://fonts.cdnfonts.com/css/metropolis-2" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="/ux/main.css" onload="document.body.style.visibility = 'initial'">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 `

diff --git a/curiosrc/web/static/ux/fonts/Metropolis-Bold.woff b/curiosrc/web/static/ux/fonts/Metropolis-Bold.woff
diff --git a/curiosrc/web/static/ux/fonts/Metropolis-ExtraLight.woff b/curiosrc/web/static/ux/fonts/Metropolis-ExtraLight.woff
diff --git a/curiosrc/web/static/ux/fonts/Metropolis-Light.woff b/curiosrc/web/static/ux/fonts/Metropolis-Light.woff
diff --git a/curiosrc/web/static/ux/fonts/Metropolis-Medium.woff b/curiosrc/web/static/ux/fonts/Metropolis-Medium.woff
diff --git a/curiosrc/web/static/ux/fonts/Metropolis-Regular.woff b/curiosrc/web/static/ux/fonts/Metropolis-Regular.woff
diff --git a/curiosrc/web/static/ux/fonts/Metropolis-Thin.woff b/curiosrc/web/static/ux/fonts/Metropolis-Thin.woff
diff --git a/curiosrc/web/static/ux/main.css b/curiosrc/web/static/ux/main.css
@@ -1,15 +1,16 @@
-/*@import url('https://fonts.cdnfonts.com/css/metropolis-2');*/
 
 html {
     min-height: 100vh;
     background: rgb(11, 22, 34);
     padding: 0;
 }
+
 body {
     margin: 0;
     padding: 3px 4px;
     background: rgb(11, 22, 34);
 }
+
 curio-ux {
     /*  To resemble Clarity Design  */
     color: rgb(227, 234, 237);
@@ -22,9 +23,11 @@ curio-ux {
 .app-head {
     width: 100%;
 }
+
 .head-left {
     display: inline-block;
 }
+
 .head-right {
     display: inline-block;
     float: right;
@@ -34,7 +37,8 @@ a {
     text-decoration: none;
 }
 
-a:link, a:visited {
+a:link,
+a:visited {
     color: #adf7ad;
 }
 
@@ -45,9 +49,60 @@ a:hover {
 .success {
     color: greenyellow;
 }
+
 .warning {
     color: yellow;
 }
+
 .error {
     color: red;
 }
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 400;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-Regular.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 400;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-ExtraLight.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 400;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-Light.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 400;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-Thin.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 500;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-Medium.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 700;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-Bold.woff) format('woff')
+}
+
+@font-face {
+    font-family: metropolis;
+    font-style: normal;
+    font-weight: 800;
+    src: local('Metropolis'), url(/ux/fonts/Metropolis-ExtraBold.woff) format('woff')
+}