Add extra styles

codeableorg · Jul 19, 2019 · fd30b7e · fd30b7e
1 parent 877339f
commit fd30b7e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/client/src/views/login.js b/client/src/views/login.js
@@ -37,20 +37,33 @@ function Login() {
     <div
       css={{
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        height: "100vh",
+        position: "fixed",
+        top: "0",
+        width: "100%",
+        backgroundColor: "#0d0d0d8a",
+        backgroundImage: "url(https://i.imgur.com/3hVK2yO.jpg)",
+        backgroundBlendMode: "overlay",
+        backgroundPosition: "center",
+        left: "0",
+        alignItems: "center"
       }}
     >
       <Card
         css={{
-          minWidth: "400px",
           width: "50%",
+          maxWidth: "450px",
           "@media screen and (max-width: 480px)": {
             width: "100%",
             minWidth: "initial"
           }
         }}
       >
         <form onSubmit={handleSubmit}>
+          <h2 css={{ textAlign: "center", fontWeight: "400" }}>
+            Welcome to Kampu
+          </h2>
           <Input
             type="email"
             name="email"
@@ -111,3 +124,4 @@ function Login() {
 }
 
 export default Login;
+
diff --git a/client/src/views/signup.js b/client/src/views/signup.js
@@ -44,13 +44,23 @@ function Signup() {
     <div
       css={{
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        height: "100vh",
+        position: "fixed",
+        top: "0",
+        width: "100%",
+        backgroundColor: "#0d0d0d8a",
+        backgroundImage: "url(https://i.imgur.com/3hVK2yO.jpg)",
+        backgroundBlendMode: "overlay",
+        backgroundPosition: "center",
+        left: "0",
+        alignItems: "center"
       }}
     >
       <Card
         css={{
-          minWidth: "400px",
           width: "50%",
+          maxWidth: "450px",
           "@media screen and (max-width: 480px)": {
             width: "100%",
             minWidth: "initial"