fix: update some styles

src/App.css

@@ -48,24 +48,25 @@
 }
 
 .pane-btn {
-  border-radius: 4px;
-  border: 0;
+  border-radius: 8px;
+  border: 3px solid #494949;
   display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  width: 150px;
+  height: 62px;
+  width: 62px;
   cursor: pointer;
   outline: none;
   font-weight: bold;
+  background: #494949;
+  color: #eee;
+  box-sizing: border-box;
 }
 
 .pane-btn.checked {
-  background-color: #02b564;
-  color: white;
+  border: 3px solid #00DE7A;
 }
 
 .pane-btn + .pane-btn {
-  margin-left: 10px;
+  margin-left: 14px;
 }
 
 .generate-btn {
@@ -85,17 +86,16 @@
   display: flex;
   align-items: center;
   position: fixed;
-  right: 40px;
-  top: 30px;
+  right: 24px;
+  top: 24px;
   z-index: 1000;
 }
 
 .language-select-container .language-select {
-  margin-left: 10px;
-  width: 135px;
-  height: 35px;
-  background-color: #eef1f6;
-  color: #333333;
+  width: 156px;
+  height: 42px;
+  background-color: #36383A;
+  color: #EEEEEE;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -103,12 +103,16 @@
 
 .language-select-warpper {
   position: relative;
+  border-radius: 5px;
+  background: #36383A;
+  border: 1px solid #5B5B5B;
+  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
 .language-select-warpper .language-icon {
   position: absolute;
-  left: 18px;
-  top: 8px;
+  left: 14px;
+  top: 11px;
   z-index: 2000;
 }
 

src/App.js

@@ -28,6 +28,17 @@ import queryString from "query-string";
 import { withTranslation } from "react-i18next";
 import i18n from "i18next";
 import languageImg from "./images/language.png";
+import Arrow from './images/arrow.svg'
+
+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>
+  );
+}
 
 class App extends React.Component {
   constructor(props) {
@@ -285,6 +296,7 @@ class App extends React.Component {
               className="language-select"
               value={language}
               label={t("language")}
+              IconComponent={CustomIcon}
               onChange={(e) => {
                 let lang = e.target.value;
                 this.setState({

src/Components/deviceFrame/index.css

@@ -1,33 +1,45 @@
 .deviceFrameContainer {
   width: 100%;
+  height: 100vh;
   flex: 1 1 0%;
   align-items: center;
   position: relative;
   display: flex;
-  height: 100vh;
   justify-content: center;
   overflow: hidden;
+  background: #36383A;
 }
 
 .refreshButton {
   position: absolute;
-  left: 30px;
-  bottom: 30px;
+  right: 24px;
+  bottom: 24px;
   cursor: pointer;
 }
 
 .qrCode {
   position: absolute;
-  right: 40px;
-  top: 100px;
+  right: 24px;
+  top: 82px;
+  background: #DBDBDB;
+  width: 156px;
+  text-align: center;
+  border-radius: 5px;
+  padding-top: 14px;
+  padding-bottom: 11px;
 }
 
 .qrCode p {
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding-left: 23px;
+  color: #666666;
+  font-size: 14px;
 }
 
 .qrCode img {
-    margin-left: 6px;
+}
+
+#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";
@@ -12,41 +12,63 @@ import React, { useEffect, useState } from "react";
 import { BaseUrl } from "../../constants";
 import { Alert, Snackbar } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import zIndex from "@mui/material/styles/zIndex";
 
 var configMap = {
 	"android-h": {
-		bkg: androidHPng,
-		width: "512px",
-		height: "286px",
-		offsetv: "5px",
+		bkg: androidVPng,
+		rotate: true,
+		width: "666px",
+		height: "321px",
+		offsetv: "4px",
 	},
 	"android-v": {
 		bkg: androidVPng,
-		width: "286px",
-		height: "512px",
+		width: "321px",
+		height: "666px",
 		offsetv: "5px",
 	},
 	"iphone-h": {
-		bkg: iphoneHPng,
-		width: "628px",
-		height: "322px",
+		bkg: iphoneVPng,
+		rotate: true,
+		width: "690px",
+		height: "325px",
+		styles: {
+			borderRadius: '13px'
+		}
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
 		width: "322px",
-		height: "628px",
+		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)",
+		}
 	},
 };
 
@@ -75,13 +97,14 @@ function DeviceFrame(props) {
 			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
 			{props.qrDataUrl && (
 				<div className="qrCode">
-					<p style={{ margin: "0" }}>
+					<img src={props.qrDataUrl} alt="qr code" />
+					<p style={{ margin: "0", }}>
 						{t("scan")}
 						<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
 							<img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
 						</CopyToClipboard>
 					</p>
-					<img src={props.qrDataUrl} alt="qr code" />
+
 				</div>
 			)}
 			<Snackbar
@@ -97,7 +120,7 @@ function DeviceFrame(props) {
 				</Alert>
 			</Snackbar>
 			<div>
-				<img src={config.bkg} alt="background" />
+				<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"
@@ -105,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,43 +1,58 @@
 .Pane {
-    width: 350px;
-    background-color: rgb(52, 90, 176);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+  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: 80px;
-    margin-right: 10px;
-    margin-bottom: -24px;
+  width: auto;
+  height: 76px;
+  margin-bottom: 10px;
+  margin-top: 7px;
+}
+.deviceText {
 }
 
 .deviceContent {
-    text-align: left;
-    color: white;
+  height: 100%;
+  color: #eeeeee;
 }
 
 .deviceButtons {
-    width: 160px;
-    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 {
-    margin-top: auto;
-}
+  position: absolute;
+  width: 322px;
+  bottom: 24px;
+  text-align: center;
+  img {
+    width: 280px;
+  }
+}
+
+.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border: none;
+}

src/Components/pane/index.js

@@ -4,8 +4,11 @@ import MenuItem from "@mui/material/MenuItem";
 import { useEffect, useState } from "react";
 import { CircularProgress, List, ListItem } from "@mui/material";
 import ipadPng from "../../images/ipad.png";
+import ipadTextPng from "../../images/ipad-text.png";
 import iphonePng from "../../images/iphone.png";
+import iphoneTextPng from '../../images/iphone-text.png'
 import androidPng from "../../images/android.png";
+import androidTextPng from '../../images/android-text.png'
 import logoPanePng from "../../images/logo-pane.png";
 import horizentalChecked from "../../images/horizental-button-checked.png";
 import horizentalButton from "../../images/horizental-button.png";
@@ -13,23 +16,35 @@ import verticalChecked from "../../images/vertical-button-checked.png";
 import verticalButton from "../../images/vertical-button.png";
 import modeSelectPng from "../../images/mode-select.png";
 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>
+	);
+}
 
 var deviceConfigs = [
 	{
 		name: "iPhone",
 		icon: iphonePng,
+		text: iphoneTextPng,
 		vertical: "iphone-v",
 		horizental: "iphone-h",
 	},
 	{
 		name: "Android Phone",
 		icon: androidPng,
+		text: androidTextPng,
 		vertical: "android-v",
 		horizental: "android-h",
 	},
 	{
 		name: "iPad",
 		icon: ipadPng,
+		text: ipadTextPng,
 		vertical: "ipad-v",
 		horizental: "ipad-h",
 	},
@@ -64,39 +79,77 @@ function Pane(props) {
 
 	return (
 		<div className="Pane">
-			<Select
-				id="mode-select"
-				value={mode}
-				onChange={(e) => modeChange(e)}
-				startAdornment={<img src={modeSelectPng} height={"30px"} alt="selected" />}
+			<div>
+				{props.loading ? (
+					<CircularProgress color="inherit" />
+				) : (
+					project && (
+						<Select
+							id="project-select"
+							value={project}
+							onChange={(e) => projectSelect(e)}
+							IconComponent={CustomIcon}
+							placeholder="选择项目"
+							sx={{
+								width: "100%",
+								height: '42px',
+								border: "1px solid #757575",
+								background: "#535353",
+								borderRadius: '5px',
+								color: "white",
+								boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+								// '&.MuiOutlinedInput-notchedOutline': {
+								// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
+								// 	},
+								'&.Mui-focused': {
+									borderColor: '#757575',
+									'&.MuiOutlinedInput-notchedOutline': {
+										borderColor: '#757575 !important',
+									},
+								},
+							}}
+							MenuProps={{
+								classes: {
+									paper: "selectPager",
+								},
+							}}
+						>
+							{props.projects.map((pName, i) => (
+								<MenuItem key={i} value={pName}>
+									{pName}
+								</MenuItem>
+							))}
+						</Select>
+					)
+				)}
+			</div>
+
+			<List
 				sx={{
-					width: "100%",
-					border: "none",
-					background: "rgb(69, 115, 191)",
-					color: "white",
-					fontWeight: "bold",
+					paddingTop: '20px'
 				}}
-				MenuProps={{
-					classes: {
-						paper: "selectPager",
-					},
-				}}>
-				<MenuItem value={"normal"}>Normal Preview</MenuItem>
-				<MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
-			</Select>
-			<List>
+			>
 				{deviceConfigs.map((_device) => (
 					<ListItem
 						key={_device.name}
 						sx={{
 							display: "flex",
 							textAlign: "center",
+							justifyContent: "space-between",
+							borderRadius: '5px',
+							background: '#535353',
+							border: '1px solid #757575',
+							boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+							paddingLeft: '23px',
+							paddingRight: '20px',
+							marginBottom: '14px'
+
 						}}>
-						<div style={{ width: "120px", alignItems: "center" }}>
-							<img className="deviceIcon" 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">
-							<p style={{ margin: "14px 0" }}>{_device.name}</p>
 							<div className="deviceButtons">
 								<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
 									{t("horizontal")}
@@ -111,35 +164,8 @@ function Pane(props) {
 					</ListItem>
 				))}
 			</List>
-			<div
-				style={{
-					marginTop: "50px",
-					color: "white",
-				}}>
-				{props.loading ? (
-					<CircularProgress color="inherit" />
-				) : (
-					project && (
-						<Select
-							id="project-select"
-							value={project}
-							onChange={(e) => projectSelect(e)}
-							placeholder="选择项目"
-							sx={{
-								background: "rgb(115, 158, 211)",
-								width: "80%",
-								color: "white",
-							}}>
-							{props.projects.map((pName, i) => (
-								<MenuItem key={i} value={pName}>
-									{pName}
-								</MenuItem>
-							))}
-						</Select>
-					)
-				)}
-			</div>
-			{!props.hideLogo && <img src={logoPanePng} alt="logo" width={"100%"} className="bottomLogo" />}
+
+			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
 		</div>
 	);
 }

src/apis/loginApi.js

@@ -1,4 +1,5 @@
-var BaseUrl = "https://api.soyootech.com/";
+// var BaseUrl = "https://api.soyootech.com/";
+var BaseUrl = "api/";
 export async function UserLogin(loginForm) {
   try {
     var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {

src/images/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13.435028612613678" height="13.435028612613678" viewBox="0 0 13.435028612613678 13.435028612613678"><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-4.335786265016024,2.9675144346638707)"><path d="M0.41421353816986084,15.217514306306839L8.91421353816986,15.217514306306839L8.91421353816986,13.217514306306839L2.414213538169861,13.217514306306839L2.414213538169861,6.717514306306839L0.41421353816986084,6.717514306306839L0.41421353816986084,15.217514306306839Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g></svg>

src/images/svg/arrow.jsx

@@ -0,0 +1,10 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import React from "react";
+
+export function ArrowIcon(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>
+    );
+  }

src/locales/en.json

@@ -6,7 +6,7 @@
     "submit": "Submit",
     "noAuth": "No permission",
     "loginError": "Account or password is incorrect",
-    "horizontal": "Horizontal",
+    "horizontal": "Hor",
     "vertical": "Vertical",
     "scan": "Mobile preview",
     "none": "None",

src/setupProxy.js

@@ -1,12 +1,12 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = function (app) {
-	// app.use(
-	// 	"/api",
-	// 	createProxyMiddleware({
-	// 		target: "https://api.soyootech.com/",
-	// 		changeOrigin: true,
-	// 		pathRewrite: { "^/api": "" },
-	// 	})
-	// );
+	app.use(
+		"/api",
+		createProxyMiddleware({
+			target: "https://api.soyootech.com/",
+			changeOrigin: true,
+			pathRewrite: { "^/api": "" },
+		})
+	);
 };