Updates info box (#48)

livebook-dev · Dec 5, 2022 · bcab0fe · bcab0fe
1 parent c356f78
commit bcab0fe
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/lib/assets/map_cell/main.css b/lib/assets/map_cell/main.css
@@ -12,12 +12,21 @@
   --gray-600: #445668;
   --gray-700: #304254;
   --gray-800: #1c2a3a;
+  --gray-900: #0d1829;
 
   --blue-100: #ecf0ff;
 
+  --yellow-100: #fff7ec;
+  --yellow-600: #ffa83f;
+
   --red--300: #F1A3A6;
 }
 
+p,
+pre {
+  margin: 0;
+}
+
 .container {
   border: solid 1px var(--gray-300);
   border-bottom: solid 1px var(--gray-200);
@@ -198,29 +207,29 @@ input[type="number"] {
   background-color: var(--gray-100);
 }
 
-.info-box {
+.box {
   margin-bottom: 24px;
   padding: 16px;
   border-radius: 0.5rem;
-  white-space: pre-wrap;
-  font-weight: 500;
   font-size: 0.875rem;
-  background-color: var(--gray-100);
-  color: var(--gray-500);
+  color: var(--gray-700);
+  border: solid 1px var(--gray-300);
 }
 
-.info-box p {
-  margin: 0;
-  padding: 1em 0 0.3em;
+.box > *:not(:first-child) {
+  margin-top: 1rem;
 }
 
-.info-box p:first-child {
-  padding-top: 0;
+.box pre code {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 14px;
+  color: var(--gray-900);
 }
 
-.info-box span {
-  color: var(--gray-600);
-  padding-left: 0.5em;
+.box.box-warning {
+  color: var(--gray-900);
+  background-color: var(--yellow-100);
+  border-color: var(--yellow-600);
 }
 
 .hidden {

diff --git a/lib/assets/map_cell/main.js b/lib/assets/map_cell/main.js
@@ -10,20 +10,19 @@ export function init(ctx, payload) {
     template: `
       <div class="app">
         <!-- Info Messages -->
-        <div id="info-box" class="info-box" v-if="missingDep">
+        <div class="box box-warning" v-if="missingDep">
           <p>To successfully build maps, you need to add the following dependency:</p>
-          <span>{{ missingDep }}</span>
+          <pre><code>{{ missingDep }}</code></pre>
         </div>
-        <div id="data-info-box" class="info-box" v-if="noSourceVariable">
+        <div class="box box-warning" v-if="noSourceVariable">
           <p>To successfully plot maps, you need at least one source available.</p>
           <p>A source can be a geojson url:</p>
-          <span>earthquakes = "https://maplibre.org/maplibre-gl-js-docs/assets/earthquakes.geojson"</span>
+          <pre><code>earthquakes = "https://maplibre.org/maplibre-gl-js-docs/assets/earthquakes.geojson"</code></pre>
           <p>a Geo struct:</p>
-          <span>conference = %Geo.Point{coordinates: {100.4933, 13.7551}, properties: %{year: 2004}}</span>
+          <pre><code>conference = %Geo.Point{coordinates: {100.4933, 13.7551}, properties: %{year: 2004}}</code></pre>
           <p>or tabular data containing points along with its coordinates:</p>
-          <span>earthquake = %{"latitude" => [32.3646], "longitude" => [101.8781], "mag" => [5.9]}</span>
-          <br>
-          <span>earthquake = %{"coordinates" => ["32.3646, 101.8781"], "mag" => [5.9]}</span>
+          <pre><code>earthquake = %{"latitude" => [32.3646], "longitude" => [101.8781], "mag" => [5.9]}</code></pre>
+          <pre><code>earthquake = %{"coordinates" => ["32.3646, 101.8781"], "mag" => [5.9]}</code></pre>
         </div>
 
         <!-- Map Form -->