Fix missing styling in pf-popups (#84)

* Fix missing styling in pf-popups * pf button sets text color * fix pf-button minimal in light mode * Change Scale Text color was weird
eclipsesource · Nov 20, 2023 · a0f72a6 · a0f72a6
1 parent 45c1835
commit a0f72a6
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 4 deletions.
diff --git a/ui/src/assets/widgets/button.scss b/ui/src/assets/widgets/button.scss
@@ -24,6 +24,7 @@
   padding: 4px 8px;
   white-space: nowrap;
   min-width: max-content;
+  color: white;
 
   & > .pf-left-icon {
     float: left;
@@ -64,6 +65,7 @@
 
   // Remove default background in minimal mode, showing only the text
   &.pf-minimal {
+    color: inherit;
     background: $pf-minimal-background;
 
     &:hover {

diff --git a/ui/src/assets/widgets/menu.scss b/ui/src/assets/widgets/menu.scss
@@ -31,7 +31,6 @@
     cursor: pointer;
 
     background: $pf-minimal-background;
-    color: $pf-minimal-foreground;
     transition: background $pf-anim-timing;
 
     & > .material-icons {

diff --git a/ui/src/assets/widgets/popup.scss b/ui/src/assets/widgets/popup.scss
@@ -21,6 +21,7 @@
 
 .pf-popup {
   background-color: var(--alt-background-color);
+  color: var(--main-foreground-color);
   border: solid 1px $pf-colour-thin-border;
   border-radius: $pf-border-radius;
   box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);

diff --git a/ui/src/assets/widgets/select.scss b/ui/src/assets/widgets/select.scss
@@ -21,13 +21,14 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
-  border-bottom: solid 1px $pf-minimal-foreground; // Thin underline
+  border-bottom: solid 1px var(--main-foreground-color); // Thin underline
   background: none;
   transition: border $pf-anim-timing, box-shadow $pf-anim-timing,
     background $pf-anim-timing;
   // Round only the top corners to avoid rounding the edges of the underline
   border-radius: $pf-border-radius $pf-border-radius 0 0;
   cursor: pointer;
+  color: inherit;
 
   // Very opinionated min width for a select input
   // ... any smaller and it stops looking like a select input!

diff --git a/ui/src/assets/widgets/text_input.scss b/ui/src/assets/widgets/text_input.scss
@@ -19,7 +19,7 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
-  border-bottom: solid 1px $pf-minimal-foreground; // Thin underline
+  border-bottom: solid 1px var(--main-foreground-color); // Thin underline
   background: none;
   transition: border $pf-anim-timing, box-shadow $pf-anim-timing,
     background $pf-anim-timing;

diff --git a/ui/src/frontend/widgets/popup.ts b/ui/src/frontend/widgets/popup.ts
@@ -140,7 +140,7 @@ export class Popup implements m.ClassComponent<PopupAttrs> {
     } = attrs;
 
     const portalAttrs: PortalAttrs = {
-      className: 'pf-popup-portal',
+      className: 'perfetto pf-popup-portal',
       onBeforeContentMount: (dom: Element): MountOptions => {
         // Check to see if dom is a descendant of a popup
         // If so, get the popup's "container" and put it in there instead