voxel51 · brimoor · Nov 5, 2022 · Nov 4, 2022 · Nov 4, 2022 · Nov 5, 2022
diff --git a/app/packages/components/src/components/HelpPanel/HelpPanel.tsx b/app/packages/components/src/components/HelpPanel/HelpPanel.tsx
@@ -13,20 +13,9 @@ import {
   lookerPanelFlex,
   lookerPanelHeader,
 } from "./panel.module.css";
-import closeIcon from "../../icons/close.svg";
+import { Close as CloseIcon } from "@fiftyone/components";
 import { Fragment } from "react";
 
-function Close({ onClick }) {
-  return (
-    <img
-      src={closeIcon}
-      className={lookerPanelClose}
-      title="Close JSON"
-      onClick={onClick}
-    />
-  );
-}
-
 export default function HelpPanel({ containerRef, onClose, items }) {
   return (
     <div
@@ -44,7 +33,14 @@ export default function HelpPanel({ containerRef, onClose, items }) {
               ))}
             </Items>
           </Scroll>
-          <Close onClick={onClose} />
+          <CloseIcon
+            className={lookerPanelClose}
+            titleAccess="Close JSON"
+            onClick={onClose}
+            sx={{
+              fontSize: "1.75rem",
+            }}
+          />
         </div>
       </div>
     </div>

diff --git a/app/packages/components/src/components/HelpPanel/panel.module.css b/app/packages/components/src/components/HelpPanel/panel.module.css
@@ -15,7 +15,7 @@
   scrollbar-width: none;
   position: relative;
   pointer-events: all;
-  opacity: 0.9;
+  opacity: 0.95;
 }
 
 .lookerPanel::-webkit-scrollbar {
@@ -71,6 +71,7 @@
 
 .lookerPanelClose:hover {
   background-color: var(--joy-palette-primary-plainColor);
+  color: var(--joy-palette-text-buttonHighlight);
   transform: translate(0, -1px);
 }
 

diff --git a/app/packages/components/src/components/Icons/Icons.tsx b/app/packages/components/src/components/Icons/Icons.tsx
@@ -72,6 +72,23 @@ export function Close(props: SvgIconProps) {
     </SvgIcon>
   );
 }
+export function JSONIcon(props: SvgIconProps = {}) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z" />
+    </SvgIcon>
+  );
+}
+export function HelpIcon(props: SvgIconProps = {}) {
+  return (
+    <SvgIcon {...props}>
+      <path
+        data-for-panel="help"
+        d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+      />
+    </SvgIcon>
+  );
+}
 
 export { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 export { IconButton } from "@mui/material";
diff --git a/app/packages/components/src/components/Icons/index.ts b/app/packages/components/src/components/Icons/index.ts
@@ -8,4 +8,6 @@ export {
   IconButton,
   Close,
   Copy,
+  JSONIcon,
+  HelpIcon,
 } from "./Icons";
diff --git a/app/packages/components/src/components/JSONPanel/json.module.css b/app/packages/components/src/components/JSONPanel/json.module.css
@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  opacity: 0.9;
+  opacity: 0.95;
 }
 
 .lookerJSONPanel pre {

diff --git a/app/packages/components/src/components/JSONPanel/panel.module.css b/app/packages/components/src/components/JSONPanel/panel.module.css
@@ -7,7 +7,7 @@
   line-height: 1;
   font-weight: bold;
   color: var(--joy-palette-text-secondary);
-  background-color: var(--joy-palette-background-level2);
+  background-color: var(--joy-palette-background-level3);
   border: 1px solid var(--joy-palette-primary-plainBorder);
   box-shadow: 0 8px 15px 0 var(--joy-palette-neutral-softBg);
   border-radius: 3px;

diff --git a/app/packages/components/src/components/PopoutSectionTitle/PopoutSectionTitle.tsx b/app/packages/components/src/components/PopoutSectionTitle/PopoutSectionTitle.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export default styled.div`
   margin: 0 -0.5rem;
   padding: 0 0.5rem;
-  border-bottom: 1px solid ${({ theme }) => theme.background.level1};
+  border-bottom: 1px solid ${({ theme }) => theme.primary.plainBorder};
   font-size: 1rem;
   line-height: 2;
   font-weight: bold;

diff --git a/app/packages/components/src/components/ThemeProvider/index.tsx b/app/packages/components/src/components/ThemeProvider/index.tsx
@@ -54,6 +54,7 @@ let theme = extendJoyTheme({
           secondary: "hsl(200, 0%, 30%)",
           tertiary: "hsl(200, 0%, 50%)",
           lookerTag: "hsl(200, 0%, 100%)",
+          invert: "hsl(200, 0%, 100%)",
         },
         custom: {
           shadow: "hsl(200, 0%, 90%)",
@@ -104,6 +105,7 @@ let theme = extendJoyTheme({
           tertiary: "hsl(200, 0%, 50%)",
           buttonHighlight: "hsl(200, 0%, 100%)",
           lookerTag: "hsl(200, 0%, 100%)",
+          invert: "hsl(200, 0%, 5%)",
         },
         custom: {
           shadow: "hsl(200, 0%, 10%)",

diff --git a/app/packages/looker-3d/src/Looker3d.tsx b/app/packages/looker-3d/src/Looker3d.tsx
@@ -30,8 +30,8 @@ import {
   Loading,
   PopoutSectionTitle,
   TabOption,
-  jsonIcon,
-  helpIcon,
+  JSONIcon,
+  HelpIcon,
 } from "@fiftyone/components";
 import { colorMap, dataset } from "@fiftyone/state";
 import { removeListener } from "process";
@@ -544,11 +544,11 @@ const ActionBarContainer = styled.div`
   transition: opacity 0.5s;
   width: 100%;
 
-  opacity: 0.9;
+  opacity: 0.95;
   height: 37px;
-  background-color: hsl(210, 11%, 11%);
-  border: 1px solid var(--joy-palette-divider);
-  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.43);
+  background-color: var(--joy-palette-background-level3);
+  border: 1px solid var(--joy-palette-primary-plainBorder);
+  border-left: 0;
   padding: 0 1rem;
 `;
 
@@ -566,7 +566,11 @@ const ActionPopOverDiv = styled.div`
   width: 16rem;
   position: absolute;
   bottom: 2.5rem;
-  background-color: hsl(210, 11%, 11%);
+  background-color: var(--joy-palette-background-level2);
+  border: 1px solid var(--joy-palette-primary-plainBorder);
+  box-shadow: 0 8px 15px 0 var(--joy-palette-neutral-softBg);
+  border-radius: 3px;
+  color: var(--joy-palette-text-secondary);
   overflow: hidden;
 `;
 
@@ -587,13 +591,22 @@ const ActionItem = styled.div`
   align-content: center;
   text-align: center;
   cursor: pointer;
+  color: var(--joy-palette-text-secondary);
+  -webkit-transition: 0.2s ease-in-out;
+  -moz-transition: 0.2s ease-in-out;
+  -o-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+
+  &:hover {
+    transform: translate(0, -1px);
+  }
 `;
 
 const ViewButton = styled.div`
   line-height: 1rem;
-  padding: 0.2rem 0.4rem;
-  background-color: #fff;
-  color: #000;
+  padding: 3px 6px;
+  background-color: var(--joy-palette-text-secondary);
+  color: var(--joy-palette-text-invert);
   border-radius: 1rem;
   border: none;
   font-weight: bold;
@@ -619,6 +632,8 @@ function ChooseColorSpace() {
     <Fragment>
       <ActionItem>
         <ColorLensIcon
+          sx={{ fontSize: 24 }}
+          color="inherit"
           onClick={(e) => {
             const targetAction = "colorBy";
             const nextAction =
@@ -675,8 +690,9 @@ function ViewJSON({ sample, jsonPanel }) {
   return (
     <Fragment>
       <ActionItem>
-        <img
-          src={jsonIcon}
+        <JSONIcon
+          sx={{ fontSize: 24 }}
+          color="inherit"
           onClick={(e) => {
             const targetAction = "json";
             const nextAction =
@@ -717,8 +733,9 @@ function ViewHelp({ helpPanel }) {
   return (
     <Fragment>
       <ActionItem>
-        <img
-          src={helpIcon}
+        <HelpIcon
+          sx={{ fontSize: 24 }}
+          color="inherit"
           onClick={(e) => {
             const targetAction = "help";
             const nextAction =

diff --git a/app/packages/looker/src/elements/common/controls.module.css b/app/packages/looker/src/elements/common/controls.module.css
@@ -21,6 +21,7 @@
 
   background-color: var(--joy-palette-background-level3);
   border: 1px solid var(--joy-palette-primary-plainBorder);
+  border-right: 0;
   box-shadow: 0 8px 15px 0 var(--joy-palette-neutral-softBg);
 }
 

diff --git a/app/packages/looker/src/elements/common/controls.ts b/app/packages/looker/src/elements/common/controls.ts
@@ -82,7 +82,7 @@ export class NextElement<State extends BaseState> extends BaseElement<
       return this.element;
     }
     if (showControls) {
-      this.element.style.opacity = "0.9";
+      this.element.style.opacity = "0.95";
       this.element.style.height = "unset";
       this.element.style.display = "flex";
     } else {
@@ -138,7 +138,7 @@ export class PreviousElement<State extends BaseState> extends BaseElement<
       return this.element;
     }
     if (showControls) {
-      this.element.style.opacity = "0.9";
+      this.element.style.opacity = "0.95";
       this.element.style.height = "unset";
       this.element.style.display = "flex";
     } else {
@@ -188,7 +188,7 @@ export class ControlsElement<
       return this.element;
     }
     if (showControls) {
-      this.element.style.opacity = "0.9";
+      this.element.style.opacity = "0.95";
       this.element.style.height = "unset";
     } else {
       this.element.style.opacity = "0.0";

diff --git a/app/packages/looker/src/elements/common/options.module.css b/app/packages/looker/src/elements/common/options.module.css
@@ -9,7 +9,7 @@
   padding: 5px;
   line-height: 1;
   opacity: 0;
-  z-index: 20;
+  z-index: 100;
   display: flex;
   flex-direction: row;
   justify-content: center;

diff --git a/app/packages/looker/src/elements/common/options.ts b/app/packages/looker/src/elements/common/options.ts
@@ -8,9 +8,9 @@ import { BaseElement, Events } from "../base";
 import { lookerOptionsPanel, lookerOptionsInput } from "./options.module.css";
 import { makeCheckboxRow } from "./util";
 
-export class OptionsPanelElement<State extends BaseState> extends BaseElement<
-  State
-> {
+export class OptionsPanelElement<
+  State extends BaseState
+> extends BaseElement<State> {
   private showOptions: boolean = false;
   getEvents(): Events<State> {
     return {
@@ -46,7 +46,7 @@ export class OptionsPanelElement<State extends BaseState> extends BaseElement<
       return this.element;
     }
     if (showOptions) {
-      this.element.style.opacity = "0.9";
+      this.element.style.opacity = "0.95";
       this.element.style.display = "grid";
     } else {
       this.element.style.opacity = "0.0";

diff --git a/app/packages/looker/src/elements/common/thumbnail.module.css b/app/packages/looker/src/elements/common/thumbnail.module.css
@@ -28,7 +28,7 @@
   );
   display: flex;
   justify-content: space-between;
-  color: var(--font);
+  color: #ffffff;
   font-weight: bold;
   font-size: 1.2rem;
 }