chore: fix openfin tabs

AdaptiveConsulting · Mar 6, 2025 · bfc76a2 · bfc76a2
1 parent 0720dee
commit bfc76a2
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 51 deletions.
diff --git a/...ent/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketCore.styles.tsx b/...ent/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketCore.styles.tsx
@@ -28,9 +28,6 @@ export const Banner = styled.div`
   gap: 8px;
   color: ${({ theme }) =>
     theme.newTheme.color["Colors/Text/text-primary (900)"]};
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 500;
 `
 
 export const Diamond = styled.div<{ state: SellSideQuoteState }>`

diff --git a/packages/client/src/client/OpenFin/Window/ChildWindowFrame.styles.tsx b/packages/client/src/client/OpenFin/Window/ChildWindowFrame.styles.tsx
@@ -66,4 +66,9 @@ export const FrameRoot = styled.div`
     background-size: 30px !important;
     margin: 0.5rem 1.5rem 0 0;
   }
+
+  .lm_header .lm_tab .lm_title {
+    color: ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-primary (900)"]};
+  }
 `
diff --git a/packages/client/src/client/OpenFin/Window/ChildWindowHeader.tsx b/packages/client/src/client/OpenFin/Window/ChildWindowHeader.tsx
@@ -1,4 +1,5 @@
-import Header from "@/client/App/Header"
+import { Stack } from "@/client/components/Stack"
+import { Typography } from "@/client/components/Typography"
 
 import { Props as ControlsProps, WindowControls } from "./WindowControls"
 import { TitleBar } from "./WindowHeader.styles"
@@ -7,13 +8,11 @@ interface Props extends ControlsProps {
   title: string
 }
 
-const EMPTY = <></>
-
 export const ChildWindowHeader = ({ title, ...controlsProps }: Props) => (
-  <Header
-    logo={EMPTY}
-    controls={<WindowControls {...controlsProps} />}
-    filler={<TitleBar>{title}</TitleBar>}
-    switches={EMPTY}
-  />
+  <Stack>
+    <TitleBar>
+      <Typography variant="Text md/Regular">{title}</Typography>
+    </TitleBar>
+    <WindowControls {...controlsProps} />
+  </Stack>
 )
diff --git a/packages/client/src/client/OpenFin/Window/WindowControls.tsx b/packages/client/src/client/OpenFin/Window/WindowControls.tsx
@@ -56,41 +56,25 @@ export const WindowControls = ({ close, minimize, maximize, popIn }: Props) => {
   return (
     <ControlsWrapper>
       {minimize && (
-        <Control
-          accent="aware"
-          onClick={minimize}
-          data-qa="openfin-chrome__minimize"
-        >
+        <Control onClick={minimize} data-qa="openfin-chrome__minimize">
           <MinimizeIcon />
         </Control>
       )}
 
       {maximize && (
-        <Control
-          accent="primary"
-          onClick={maximize}
-          data-qa="openfin-chrome__maximize"
-        >
+        <Control onClick={maximize} data-qa="openfin-chrome__maximize">
           <MaximizeIcon />
         </Control>
       )}
 
       {popIn && (
-        <Control
-          accent="primary"
-          onClick={popIn}
-          data-qa="openfin-chrome__popin"
-        >
+        <Control onClick={popIn} data-qa="openfin-chrome__popin">
           {<PopInIcon />}
         </Control>
       )}
 
       {close && (
-        <Control
-          accent="aware"
-          onClick={wrappedClose}
-          data-qa="openfin-chrome__close"
-        >
+        <Control onClick={wrappedClose} data-qa="openfin-chrome__close">
           <ExitIcon />
         </Control>
       )}

diff --git a/packages/client/src/client/OpenFin/Window/WindowFrame.styles.tsx b/packages/client/src/client/OpenFin/Window/WindowFrame.styles.tsx
@@ -42,7 +42,6 @@ export const FrameRoot = styled.div`
   .lm_tab {
     background-color: ${({ theme }) =>
       theme.newTheme.color["Colors/Background/bg-secondary_subtle"]};
-    font-size: 3rem;
   }
 
   .lm_tabs {
@@ -70,9 +69,9 @@ export const FrameRoot = styled.div`
       theme.newTheme.color["Colors/Text/text-primary (900)"]};
   }
 
-  .lm_title {
+  .lm_header .lm_tab .lm_title {
     color: ${({ theme }) =>
-      theme.newTheme.color["Colors/Text/text-primary (900)"]} !important;
+      theme.newTheme.color["Colors/Text/text-primary (900)"]};
   }
 
   .lm_close_tab {

diff --git a/packages/client/src/client/OpenFin/Window/WindowHeader.styles.ts b/packages/client/src/client/OpenFin/Window/WindowHeader.styles.ts
@@ -1,21 +1,20 @@
 import styled from "styled-components"
 
-import { TouchableIntentName } from "@/client/theme"
-
-export const Control = styled.div<{ accent: TouchableIntentName }>`
+export const Control = styled.div`
   display: flex;
   cursor: pointer;
   justify-content: center;
   align-self: center;
+  border-radius: ${({ theme }) => theme.newTheme.radius.xxs};
 
   color: ${(props) =>
     props.theme.newTheme.color["Colors/Foreground/fg-quaternary (500)"]};
 
   &:hover {
-    color: ${({ theme, accent }) =>
-      accent === "aware"
-        ? theme.newTheme.color["Colors/Foreground/fg-warning-primary"]
-        : theme.newTheme.color["Colors/Foreground/fg-brand-primary (600)"]};
+    background-color: ${({ theme }) =>
+      theme.newTheme.color["Colors/Background/bg-primary_hover"]};
+    color: ${({ theme }) =>
+      theme.newTheme.color["Colors/Foreground/fg-brand-primary (600)"]};
   }
 
   &:disabled {
@@ -31,14 +30,11 @@ export const ControlsWrapper = styled.div`
 export const TitleBar = styled.div`
   display: flex;
   flex: 1;
-  width: 100%;
+
   justify-content: center;
   align-items: center;
-  text-transform: uppercase;
-  font-weight: normal;
   min-height: 1.5rem;
   margin: 0;
-  font-size: 0.625rem;
   height: 100%;
   user-select: none;
 

diff --git a/packages/client/src/client/OpenFin/Window/WindowHeader.tsx b/packages/client/src/client/OpenFin/Window/WindowHeader.tsx
@@ -1,6 +1,7 @@
 import Header from "@/client/App/Header"
 import LoginControls from "@/client/App/Header/LoginControls"
 import ThemeSwitcher from "@/client/App/Header/theme-switcher"
+import { Typography } from "@/client/components/Typography"
 
 import { LayoutLock } from "./LayoutLock"
 import { Props as WindowControlProps, WindowControls } from "./WindowControls"
@@ -18,7 +19,13 @@ export const WindowHeader = ({ title, ...controlsProps }: Props) => (
         <WindowControls {...controlsProps} />
       </>
     }
-    filler={<TitleBar>{title}</TitleBar>}
+    filler={
+      <TitleBar>
+        <Typography variant="Text md/Regular" textTransform="uppercase">
+          {title}
+        </Typography>
+      </TitleBar>
+    }
     switches={
       <>
         <LayoutLock />

diff --git a/packages/client/src/client/OpenFin/icons/ExitIcon.tsx b/packages/client/src/client/OpenFin/icons/ExitIcon.tsx
@@ -10,7 +10,6 @@ export const ExitIcon = ({ width = 24, height = 24 }: Props) => (
     height={height}
     viewBox="0 0 24 24"
   >
-    <path d="M0 0h24v24H0z" />
     <path
       d="M16.003 7.627a.5.5 0 0 1 .04.707l-3.037 3.39 3.036 3.392a.5.5 0 0 1 .023.64l-.062.066a.5.5 0 0 1-.706-.039l-2.963-3.309-2.961 3.31a.5.5 0 0 1-.746-.668l3.036-3.392-3.036-3.39a.5.5 0 0 1-.022-.64l.061-.067a.5.5 0 0 1 .707.04l2.962 3.308 2.962-3.309a.5.5 0 0 1 .706-.039z"
       fill="currentColor"

diff --git a/packages/client/src/client/OpenFin/icons/MaximizeIcon.tsx b/packages/client/src/client/OpenFin/icons/MaximizeIcon.tsx
@@ -6,7 +6,6 @@ export const MaximizeIcon = () => (
     viewBox="0 0 24 24"
   >
     <g fill="none" fillRule="evenodd">
-      <path d="M0 0H24V24H0z" />
       <path
         fill="currentColor"
         d="M9 8a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1H9zm0-1h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2z"

diff --git a/packages/client/src/client/OpenFin/icons/MinimizeIcon.tsx b/packages/client/src/client/OpenFin/icons/MinimizeIcon.tsx
@@ -6,7 +6,6 @@ export const MinimizeIcon = () => (
     viewBox="0 0 24 24"
   >
     <g fill="none" fillRule="evenodd">
-      <path d="M0 0h24v24H0z" />
       <path
         fill="currentColor"
         d="M9 13a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H9zm0-1h6a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2z"

diff --git a/packages/client/src/client/Web/index.tsx b/packages/client/src/client/Web/index.tsx
@@ -94,7 +94,6 @@ export const WebApp = () => {
         {canUseAdmin && (
           <Route path={ROUTES_CONFIG.admin} element={<Admin />} />
         )}
-        <Route path={ROUTES_CONFIG.admin} element={<Admin />} />
 
         <Route
           path={ROUTES_CONFIG.tiles}