feat: browser & right panel ui

src/components/molecules/BrowserNavBar.tsx

@@ -77,7 +77,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
   };
 
   return (
-    <StyledNavBar browserWidth={browserWidth}>
+    <StyledNavBar browserWidth={900}>
       <NavBarButton
         type="button"
         onClick={() => {

src/components/molecules/BrowserTabs.tsx

@@ -31,7 +31,7 @@ export const BrowserTabs = (
 
   return (
     <Box sx={{
-      width: `${width}px`,
+      width: 800,
       display: 'flex',
       overflow: 'auto',
       alignItems: 'center',

src/components/molecules/InterpretationButtons.tsx

@@ -160,7 +160,7 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: 500,
+          width: 300,
           background: 'white',
           border: '2px solid #000',
           boxShadow: '24',

src/components/molecules/InterpretationLog.tsx

@@ -114,7 +114,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           background: '#3f4853',
           border: 'none',
           padding: '10px 20px',
-          width: 1280,
+          width: 900,
           textAlign: 'left'
         }}>
         Interpretation Log
@@ -129,7 +129,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: 'white',
             color: 'black',
             padding: '10px',
-            height: 720,
+            height: 300,
             width: width - 10,
             display: 'flex'
           }
@@ -173,7 +173,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
               <FormLabel>
                 <h4>What is the maximum number of rows you want to extract?</h4>
               </FormLabel>
-              <RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '500px' }}>
+              <RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '300px' }}>
                 <FormControlLabel value="10" control={<Radio />} label="10" />
                 <FormControlLabel value="100" control={<Radio />} label="100" />
                 <FormControlLabel value="custom" control={<Radio />} label="Custom" />

src/components/molecules/NavBar.tsx

@@ -94,7 +94,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                         color: 'white',
                         marginRight: '10px',
                         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                        fontWeight: '500',
+                        fontWeight: '300',
                         fontSize: '0.875rem',
                         lineHeight: '1.75',
                         letterSpacing: '0.02857em',
@@ -112,7 +112,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                       color: 'white',
                       marginRight: '10px',
                       fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                      fontWeight: '500',
+                      fontWeight: '300',
                       fontSize: '0.875rem',
                       lineHeight: '1.75',
                       letterSpacing: '0.02857em',
@@ -129,7 +129,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                   color: 'white',
                   marginRight: '10px',
                   fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                  fontWeight: '500',
+                  fontWeight: '300',
                   fontSize: '0.875rem',
                   lineHeight: '1.75',
                   letterSpacing: '0.02857em',

src/components/molecules/SaveRecording.tsx

@@ -78,7 +78,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
         marginRight: '10px',
         borderRadius: '5px',
         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-        fontWeight: '500',
+        fontWeight: '300',
         fontSize: '0.875rem',
         lineHeight: '1.75',
         letterSpacing: '0.02857em',