fix: update some styles

src/Components/deviceFrame/index.css

@@ -39,3 +39,7 @@
 
 .qrCode img {
 }
+
+#deviceFrame {
+  border-radius: 10px;
+}

src/Components/deviceFrame/index.js

@@ -3,7 +3,7 @@ import androidHPng from "../../images/android-h.png";
 import androidVPng from "../../images/android-v.png";
 import iphoneHPng from "../../images/iphone-h.png";
 import iphoneVPng from "../../images/iphone-v.png";
-import ipadHPng from "../../images/iPad-h.png";
+import ipadHPng from "../../images/ipad-horizontal.png";
 import ipadVPng from "../../images/iPad-v.png";
 import copyPng from "../../images/copy.png";
 import refreshButtonPng from "../../images/refresh-button.png";
@@ -31,25 +31,44 @@ var configMap = {
 	"iphone-h": {
 		bkg: iphoneVPng,
 		rotate: true,
-		width: "692px",
-		height: "322px",
+		width: "690px",
+		height: "325px",
+		styles: {
+			borderRadius: '13px'
+		}
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
 		width: "322px",
 		height: "693px",
+		styles: {
+			borderRadius: '13px'
+		}
 	},
 	"ipad-h": {
 		bkg: ipadHPng,
-		width: "433px",
+		rotate: true,
+		width: "458px",
 		height: "326px",
 		offsetv: "5px",
+		imgStyle: {
+			transform: 'rotate(-90deg) scale(1.4)',
+		},
+		styles: {
+			transform: "translate(-50%, -50%) scale(1.42)",
+		}
 	},
 	"ipad-v": {
-		bkg: ipadVPng,
-		width: "324px",
-		height: "433px",
+		bkg: ipadHPng,
+		width: "326px",
+		height: "458px",
 		offsetv: "5px",
+		imgStyle: {
+			transform: 'scale(1.4)',
+		},
+		styles: {
+			transform: "translate(-50%, -50%) scale(1.42)",
+		}
 	},
 };
 
@@ -101,7 +120,7 @@ function DeviceFrame(props) {
 				</Alert>
 			</Snackbar>
 			<div>
-				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none' }} />
+				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none', ...config.imgStyle }} />
 				{props.htmlUrl && (
 					<iframe
 						id="deviceFrame"
@@ -109,8 +128,9 @@ function DeviceFrame(props) {
 							position: "absolute",
 							top: "50%",
 							left: "50%",
-							transform: "translate(-50%, -50%)",
+							transform: "translate(-50%, -50%) scale(1.007)",
 							paddingBottom: config.offsetv,
+							...config.styles
 						}}
 						allow="clipboard-read; clipboard-write *"
 						title="preview"

src/Components/pane/index.css

@@ -18,14 +18,14 @@
   width: auto;
   height: 76px;
   margin-bottom: 10px;
+  margin-top: 7px;
 }
 .deviceText {
-
 }
 
 .deviceContent {
   height: 100%;
-    color: #EEEEEE;
+  color: #eeeeee;
 }
 
 .deviceButtons {
@@ -39,8 +39,8 @@
 }
 
 .selectPager {
-    left: 0 !important;
-    width: 350px;
+  left: 25px !important;
+  width: 319px !important;
 }
 
 .bottomLogo {

src/Components/pane/index.js

@@ -123,6 +123,7 @@ function Pane(props) {
 					)
 				)}
 			</div>
+
 			<List
 				sx={{
 					paddingTop: '20px'
@@ -144,8 +145,8 @@ function Pane(props) {
 							marginBottom: '14px'
 
 						}}>
-						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px'}}>
-							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px'}} src={_device.icon} alt={_device.name} />
+						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
+							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
 							<img className="deviceText" src={_device.text} alt={_device.name} />
 						</div>
 						<div className="deviceContent">
@@ -164,7 +165,7 @@ function Pane(props) {
 				))}
 			</List>
 
-			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div> }
+			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
 		</div>
 	);
 }