Merge pull request #20 from oslabs-beta/brian

fixed button styles on canvas

Author: johnwage

app/src/components/main/Canvas.tsx

@@ -390,26 +390,28 @@ const Canvas = (props: {}): JSX.Element => {
         )}
         <label className="switch">
           {userList.length > 1 && (
-            <button
+            <Button
               className="btn-toggle"
               onClick={multipleClicks}
               style={{
                 position: 'fixed',
-                width: 'max-content',
-                height: 'max-content',
-                bottom: '100px',
-                left: '51vw',
+                width: '100px',
+                height: '35px',
+                bottom: '200px',
+                right: '45vw',
+                padding: '5px',
                 textAlign: 'center',
-                color: '#FFFFFF',
+                color: '#ffffff',
                 backgroundColor: '#151515',
                 zIndex: 0,
-                padding: '5px',
-                borderColor: '#354e9c',
-                borderRadius: '5px'
+                border: '2px solid #354e9c',
+                whiteSpace: 'nowrap',
+                cursor: 'pointer',
+                textTransform: 'none'
               }}
             >
               {toggleText === 'on' ? 'View Cursors' : 'Hide Cursors'}
-            </button>
+            </Button>
           )}
         </label>
       </div>

app/src/components/main/CanvasContainer.tsx

@@ -28,28 +28,33 @@ function CanvasContainer(props): JSX.Element {
 
   const codePreviewStyle: React.CSSProperties = {
     position: 'fixed',
-    width: 'max-content',
-    height: 'max-content',
+    width: '100px',
+    height: '35px',
     bottom: '150px',
     right: '45vw',
+    padding: '5px',
     textAlign: 'center',
     color: '#ffffff',
     backgroundColor: '#151515',
     zIndex: 0,
-    border: '2px solid #354e9c'
+    border: '2px solid #354e9c',
+    whiteSpace: 'nowrap',
+    textTransform: 'none'
   } as const;
 
   const backToTop: React.CSSProperties = {
     position: 'fixed',
-    width: 'max-content',
-    height: 'max-content',
+    width: '100px',
+    height: '35px',
     bottom: '100px',
     right: '45vw',
     textAlign: 'center',
     color: '#ffffff',
     backgroundColor: '#151515',
     zIndex: 0,
-    border: '2px solid #354e9c'
+    border: '2px solid #354e9c',
+    whiteSpace: 'nowrap',
+    textTransform: 'none',
   } as const;
 
   //containerRef references the container that will ultimately have the scroll functionality