wip(tel-ui): More styling

Hyp-ed · Oct 24, 2023 · b9d997e · b9d997e
1 parent 1f41e06
commit b9d997e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/telemetry/packages/ui/app/components/controls.tsx b/telemetry/packages/ui/app/components/controls.tsx
@@ -29,26 +29,27 @@ export const ControlsUI = () => {
             <PodDisconnectError status={connectionStatus} podId={currentPod} />
             <Latency podId={currentPod} />
           </div>
-          <h1 className="text-5xl font-title font-black my-2">Controls</h1>
+          <h1 className="text-5xl font-title font-black mt-2">Controls</h1>
         </div>
-        <div className="flex flex-col justify-start h-full mt-4">
+        <div className="flex flex-col justify-start h-full">
           {/* Select component to decide which pod to show the controls for */}
-          <Select
+          {/* TODO: Think about new way to handle multiple pod support */}
+          {/* <Select
             onValueChange={(podId) => setCurrentPod(podId)}
             defaultValue={currentPod}
             style={{ width: 'full' }}
           >
             <SelectTrigger>
-              <SelectValue placeholder="Pod" />
+              <SelectValue className="bg-[#222222]" placeholder="Pod" />
             </SelectTrigger>
             <SelectContent>
               {POD_IDS.map((podId) => (
-                <SelectItem key={podId} value={podId}>
+                <SelectItem key={podId} value={podId} className="bg-[#222222]">
                   {podId}
                 </SelectItem>
               ))}
             </SelectContent>
-          </Select>
+          </Select> */}
           {POD_IDS.map((podId) => (
             <PodControls
               key={podId}

diff --git a/telemetry/packages/ui/app/components/log-viewer.tsx b/telemetry/packages/ui/app/components/log-viewer.tsx
@@ -20,7 +20,7 @@ export const LogViewer = () => {
       {isConnected ? (
         <div
           id="log-viewer"
-          className="max-h-[88vh] overflow-y-scroll scrollbar-track-transparent scrollbar-thumb-[#535353] scrollbar-thin scrollbar-thumb-rounded-full"
+          className="max-h-[88vh] overflow-y-scroll scrollbar-track-transparent scrollbar-thumb-[#222222] scrollbar-thin scrollbar-thumb-rounded-full"
         >
           {logs.map((log, index) => {
             let colour = 'text-white';

diff --git a/telemetry/packages/ui/app/components/nav.tsx b/telemetry/packages/ui/app/components/nav.tsx
@@ -30,13 +30,13 @@ export default function Nav() {
         {/* <button onClick={() => setShowSidebar(!showSidebar)}>
           <Menu width={18} />
         </button> */}
-        <div className="flex flex-col justify-start gap-2 mt-4 px-2">
+        <div className="flex flex-col justify-start gap-2 mt-4 pl-2">
           {COMPONENTS.map((component, index) => (
             <button
               className={cn(
                 'flex items-start justify-start rounded-md px-3 py-2 gap-2',
-                index === selectedComponent ? 'bg-[#535353]' : '',
-                'hover:bg-[#535353] transition',
+                index === selectedComponent ? 'bg-[#222222]' : '',
+                'hover:bg-[#222222] transition',
               )}
               onClick={() => setSelectedComponent(index)}
             >
@@ -50,7 +50,7 @@ export default function Nav() {
           <div
             className={cn(
               COMPONENTS.indexOf(component) === selectedComponent
-                ? 'h-full border border-[#535353] rounded-xl p-2'
+                ? 'h-full border-[2px] border-[#222222] rounded-xl p-2'
                 : 'hidden',
             )}
           >

diff --git a/telemetry/packages/ui/app/components/pod-controls.tsx b/telemetry/packages/ui/app/components/pod-controls.tsx
@@ -103,7 +103,7 @@ export const PodControls = ({ podId, show }: PodControlsProps) => {
             className={cn(
               'px-4 py-10 rounded-md shadow-lg transition text-white text-3xl font-bold',
               clamped && 'bg-blue-600 hover:bg-blue-700',
-              !clamped && 'bg-gray-600 hover:bg-gray-700',
+              !clamped && 'bg-[#535353] hover:bg-[#222222]',
             )}
             onClick={() => {
               if (clamped) retract(podId);
@@ -117,7 +117,7 @@ export const PodControls = ({ podId, show }: PodControlsProps) => {
             className={cn(
               'px-4 py-10 rounded-md shadow-lg transition text-white text-3xl font-bold',
               raised && 'bg-blue-600 hover:bg-blue-700',
-              !raised && 'bg-gray-600 hover:bg-gray-700',
+              !raised && 'bg-[#535353] hover:bg-[#222222]',
             )}
             onClick={() => {
               if (raised) lower(podId);
@@ -131,7 +131,7 @@ export const PodControls = ({ podId, show }: PodControlsProps) => {
             className={cn(
               'px-4 py-10 rounded-md shadow-lg transition text-white text-3xl font-bold',
               deadmanSwitch && 'bg-red-600 hover:bg-red-700',
-              !deadmanSwitch && 'bg-gray-600 hover:bg-gray-700',
+              !deadmanSwitch && 'bg-[#535353] hover:bg-[#222222]',
             )}
             onClick={() => {
               if (deadmanSwitch) stopHP(podId);
@@ -146,7 +146,7 @@ export const PodControls = ({ podId, show }: PodControlsProps) => {
             className={cn(
               'px-4 py-10 rounded-md shadow-lg transition text-white text-3xl font-bold',
               deadmanSwitch && 'bg-red-600 hover:bg-red-700',
-              !deadmanSwitch && 'bg-gray-600 hover:bg-gray-700',
+              !deadmanSwitch && 'bg-[#535353] hover:bg-[#222222]',
             )}
             onClick={() => {
               tilt(podId);

diff --git a/telemetry/packages/ui/app/components/ui/select.tsx b/telemetry/packages/ui/app/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
     //   @ts-ignore
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-gray-800 bg-gray-800 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full items-center justify-between rounded-md border border-[#222222] bg-[#222222] px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-[#535353] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const SelectContent = React.forwardRef<
       // @ts-ignore
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
+        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-[#222222] text-popover-foreground shadow-md animate-in fade-in-80',
         position === 'popper' && 'translate-y-1',
         className,
       )}
@@ -89,7 +89,7 @@ const SelectItem = React.forwardRef<
     //   @ts-ignore
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-[#535353] focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}