use an icon for warning sign and replace clipboard with double squares (

skrub-data#1061)

examples/00_getting_started.py

@@ -2,7 +2,6 @@
 Getting Started
 ===============
 
-
 This guide showcases the features of ``skrub``, an open-source package that aims at
 bridging the gap between tabular data sources and machine-learning models.
 

skrub/_reporting/_data/templates/base.css

@@ -19,6 +19,9 @@
     --mediumg: #d0d0d0;
     --lightg: #f0f0f0;
 
+    --darkred: #a32929;
+    --red: #dd0000;
+
     --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
 }
 
@@ -248,7 +251,7 @@ dd {
 }
 
 .critical {
-    color: red;
+    color: var(--red);
 }
 
 /* Misc tweaks */

skrub/_reporting/_data/templates/buttons.html

@@ -4,7 +4,7 @@
     type="button"
     onclick="copyButtonClick(event)"
     data-target-id="{{ target }}">
-    {% include "icons/clipboard.svg" %}
+    {% include "icons/copy.svg" %}
     {% include "icons/check-lg.svg" %}
     <div class="copied-message">Copied!</div>
 </button>

skrub/_reporting/_data/templates/tabs.css

@@ -32,6 +32,7 @@
 
 .tab {
     display: flex;
+    align-items: center;
     column-gap: var(--micro);
     border: 1px solid transparent;
     border-bottom: none;
@@ -41,29 +42,40 @@
     padding-bottom: var(--tiny);
     font-size: var(--small);
     background-color: transparent;
-    opacity: 0.8;
+    --color-muted: var(--darkg);
+    --color-default: inherit;
+    color: var(--color-muted);
 }
 
 .tab:hover {
-    opacity: 1.0;
+    color: var(--color-default);
 }
 
 .tab[data-is-selected] {
     border-color: var(--darkg);
     background-color: white;
-    opacity: 1.0;
+    color: var(--color-default);
 }
 
 /* When a tab contains critical content we highlight the corresponding button so */
 /* the user is more likely to click on it. ATM this is just used for the */
 /* associations tab when some columns are very strongly associated. */
 
-.tab-list .tab[data-has-warning] {
-    color: red;
+.tab-list .tab .warning-sign {
+    display: none;
+    width: 1em;
+    height: 1em;
+    margin: 1px;
+}
+
+.tab-list .tab[data-has-warning] .warning-sign {
+    display: inline-block;
 }
 
-.tab-list .tab[data-has-warning]::before {
-    content: "⚠️ ";
+.tab-list .tab[data-has-warning] {
+    --color-muted: var(--darkred);
+    --color-default: var(--red);
+
 }
 
 /* The panels (the main content) */

skrub/_reporting/_data/templates/tabs.html

@@ -32,7 +32,11 @@
                 <button type="button" data-target-panel-id="column-associations-panel"
                     data-role="tab" class="tab" {% if associations_warning %}
                     data-has-warning {% endif %} data-test="associations-tab"
-                    title="{{ associations_title }}">Associations</button>
+                    title="{{ associations_title }}">
+                    <div class="warning-sign">
+                        {% include "icons/exclamation-triangle.svg" %}
+                    </div>
+                    Associations</button>
             </div>
         </div>
         {% include "column-filter.html" %}