From b9ec16ad4d6c21452b51d9ed4fde08027bcd568c Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Thu, 23 Nov 2023 15:22:29 -0600
Subject: [PATCH] feat(ui): show divider in app bar

---
 src/components/Shell/ShellAppBar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Shell/ShellAppBar.tsx b/src/components/Shell/ShellAppBar.tsx
index f0b74b2..bff71f7 100644
--- a/src/components/Shell/ShellAppBar.tsx
+++ b/src/components/Shell/ShellAppBar.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles'
 
 import IconButton from '@mui/material/IconButton'
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
@@ -9,6 +9,7 @@ import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import Slide from '@mui/material/Slide'
 import Zoom from '@mui/material/Zoom'
+import Divider from '@mui/material/Divider'
 
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import Fullscreen from '@mui/icons-material/Fullscreen'
@@ -85,6 +86,7 @@ export const ShellAppBar = ({
   isFullscreen,
   setIsFullscreen,
 }: ShellAppBarProps) => {
+  const theme = useTheme()
   const { peerList, isEmbedded, showRoomControls } = useContext(ShellContext)
   const handleQRCodeClick = () => setIsQRCodeDialogOpen(true)
   const onClickFullscreen = () => setIsFullscreen(!isFullscreen)
@@ -149,6 +151,12 @@ export const ShellAppBar = ({
                 </Tooltip>
               </>
             )}
+            {isEmbedded ? null : (
+              <Divider
+                orientation="vertical"
+                sx={{ height: theme.spacing(3.5), mx: theme.spacing(1) }}
+              />
+            )}
             <Tooltip
               title={
                 showRoomControls ? 'Hide Room Controls' : 'Show Room Controls'