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

@@ -1,58 +1,58 @@
 .Pane {
-    width: 370px;
-    background-color: #535353;
-    min-height: 100vh;
-    padding: 24px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  width: 370px;
+  background-color: #535353;
+  min-height: 100vh;
+  padding: 24px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 .modeSelect {
-    width: 100%;
-    border: none;
+  width: 100%;
+  border: none;
 }
 
 .deviceIcon {
-    width: auto;
-    height: 76px;
-    margin-bottom: 10px;
+  width: auto;
+  height: 76px;
+  margin-bottom: 10px;
+  margin-top: 7px;
 }
 .deviceText {
-
 }
 
 .deviceContent {
-    height: 100%;
-    color: #EEEEEE;
+  height: 100%;
+  color: #eeeeee;
 }
 
 .deviceButtons {
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
 .deviceButtons img {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .selectPager {
-    left: 0 !important;
-    width: 350px;
+  left: 25px !important;
+  width: 319px !important;
 }
 
 .bottomLogo {
-    position: absolute;
-    width: 322px;
-    bottom: 24px;
-    text-align: center;
-    img {
-        width: 280px;
-    }
+  position: absolute;
+  width: 322px;
+  bottom: 24px;
+  text-align: center;
+  img {
+    width: 280px;
+  }
 }
 
 .Mui-focused .MuiOutlinedInput-notchedOutline {
-    border: none;
+  border: none;
 }

src/Components/pane/index.js

@@ -19,11 +19,11 @@ import { useTranslation } from "react-i18next";
 import SvgIcon from '@mui/material/SvgIcon';
 
 function CustomIcon(props) {
-  return (
-    <SvgIcon viewBox="0 0 24 24" {...props}>
-      <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
-    </SvgIcon>
-  );
+	return (
+		<SvgIcon viewBox="0 0 24 24" {...props}>
+			<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
+		</SvgIcon>
+	);
 }
 
 var deviceConfigs = [
@@ -123,10 +123,11 @@ function Pane(props) {
 					)
 				)}
 			</div>
+
 			<List
-			sx={{
-				paddingTop: '20px'
-			}}
+				sx={{
+					paddingTop: '20px'
+				}}
 			>
 				{deviceConfigs.map((_device) => (
 					<ListItem
@@ -144,9 +145,9 @@ 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} />
-							<img className="deviceText"  src={_device.text} 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">
 							<div className="deviceButtons">
@@ -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>
 	);
 }