css changes

theatre/studio/src/panels/BasePanel/PanelWrapper.tsx

@@ -8,7 +8,7 @@ const Container = styled.div`
   position: absolute;
   user-select: none;
   box-sizing: border-box;
-  font-family: 'Tonka';
+  font-family: 'OPS-Cubic';
   ${pointerEventsAutoInNormalMode};
   /* box-shadow: 1px 2px 10px -5px black; */
 

theatre/studio/src/panels/DetailPanel/DetailPanel.tsx

@@ -28,7 +28,8 @@ const headerHeight = `32px`
 
 const Container = styled.div<{pin: boolean}>`
   ${pointerEventsAutoInNormalMode};
-  font-family: 'Tonka';
+  font-family: 'OPS-Cubic';
+  text-transform: uppercase;
   background-color: rgba(255, 255, 255, 1);
   border: 2px solid rgba(0, 146, 255, 1);
   border-radius: 15px;

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx

@@ -31,10 +31,10 @@ import {HiOutlineChevronRight} from 'react-icons/all'
 import memoizeFn from '@theatre/shared/utils/memoizeFn'
 
 const Container = styled.div`
-  --step: 15px;
+  --step: 10px;
-  --left-pad: 15px;
+  --left-pad: 10px;
   ${pointerEventsAutoInNormalMode};
-  --right-width: 60%;
+  --right-width: 40%;
 `
 
 const Header = styled.div<{isHighlighted: PropHighlighted}>`

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx

@@ -18,7 +18,7 @@ const Container = deriver(styled.div<{
   isHighlighted: PropHighlighted
 }>`
   display: flex;
-  min-height: 30px;
+  // min-height: 30px;
   justify-content: flex-start;
   align-items: stretch;
   // We cannot calculate both the container (details panel) width and the descendant
@@ -29,7 +29,7 @@ const Container = deriver(styled.div<{
   // The correct solution for tabulated UIs with dynamic container widths is to use
   // CSS grid. For now I fixed this issue by just giving a great enough width
   // to the details panel so most things don't break.
-  --right-width: 60%;
+  --right-width: 40%;
   position: relative;
   ${pointerEventsAutoInNormalMode};
 

theatre/studio/src/panels/OutlinePanel/BaseItem.tsx

@@ -33,7 +33,7 @@ const Header = styled(BaseHeader)`
   align-items: center;
   pointer-events: none;
   white-space: nowrap;
-  font-family: 'Tonka';
+  font-family: 'OPS-Cubic';
 
   border-radius: 2px;
   /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/

theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx

@@ -78,7 +78,7 @@ const Button = styled.div`
 
 export const nextPrevCursorsTheme = {
   offColor: '#555',
-  onColor: '#e0c917',
+  onColor: '#0092FF',
 }
 
 const CurButton = styled(Button)<{
@@ -86,7 +86,7 @@ const CurButton = styled(Button)<{
   presence: PresenceFlag | undefined
 }>`
   &:hover {
-    color: #e0c917;
+    color: #0092ff;
   }
 
   color: ${(props) =>
@@ -181,8 +181,8 @@ namespace Icons {
 
   export const Cur = () => (
     <svg
-      width="8"
+      width="12"
-      height="12"
+      height="14"
       viewBox="0 0 8 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

theatre/studio/src/propEditors/utils/propNameTextCSS.tsx

@@ -3,7 +3,7 @@ import {css} from 'styled-components'
 
 export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
-  font-size: 11px;
+  font-size: 14px;
   color: ${(props) =>
     props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'};
   text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);