update: usability on desktop

AMBER-Open-Source-Metaverse · Dec 21, 2022 · 57dc6c8 · 57dc6c8
1 parent 9d595a8
commit 57dc6c8
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,22 +7,26 @@ import SetupPassPhraseNewAccount from './component/SetupPassPhraseNewAccount';
 import RecoverAccount from './component/RecoverAccount';
 
 function App() {
-	
+
 
 	return (
-		<Router>
-			<Switch>
-				<Route path="/" exact>
-					<Home />
-				</Route>
-				<Route path="/setup-passphrase-new-account">
-					<SetupPassPhraseNewAccount />
-				</Route>
-				<Route path="/recover-account">
-					<RecoverAccount />
-				</Route>
-			</Switch>
-		</Router>
+		<div className='bg-[#070f15]'>
+			<div className=' max-w-[625px] left-[50%] translate-x-[-50%] relative'>
+				<Router>
+					<Switch>
+						<Route path="/" exact>
+							<Home />
+						</Route>
+						<Route path="/setup-passphrase-new-account">
+							<SetupPassPhraseNewAccount />
+						</Route>
+						<Route path="/recover-account">
+							<RecoverAccount />
+						</Route>
+					</Switch>
+				</Router>
+			</div>
+		</div>
 	);
 }
 

diff --git a/src/index.css b/src/index.css
@@ -559,14 +559,30 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
 
+.relative {
+  position: relative;
+}
+
 .bottom-10 {
   bottom: 2.5rem;
 }
 
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -684,6 +700,10 @@ video {
   min-width: 25px;
 }
 
+.max-w-screen-sm {
+  max-width: 640px;
+}
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -692,6 +712,26 @@ video {
   max-width: 100%;
 }
 
+.max-w-\[560px\] {
+  max-width: 560px;
+}
+
+.max-w-\[625px\] {
+  max-width: 625px;
+}
+
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-90 {
   --tw-rotate: 90deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -769,6 +809,11 @@ video {
   border-width: 2px;
 }
 
+.border-\[\#b70f36\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(183 15 54 / var(--tw-border-opacity));
+}
+
 .border-\[\#25d695\] {
   --tw-border-opacity: 1;
   border-color: rgb(37 214 149 / var(--tw-border-opacity));
@@ -779,11 +824,6 @@ video {
   border-color: rgb(16 87 60 / var(--tw-border-opacity));
 }
 
-.border-\[\#b70f36\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(183 15 54 / var(--tw-border-opacity));
-}
-
 .bg-\[\#122633\] {
   --tw-bg-opacity: 1;
   background-color: rgb(18 38 51 / var(--tw-bg-opacity));
@@ -803,6 +843,11 @@ video {
   background-color: transparent;
 }
 
+.bg-\[\#070f15\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(7 15 21 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }