From 4065f768003f82e2c2a996fbf49c1835cbb0c652 Mon Sep 17 00:00:00 2001
From: Rupesh Tiwari <rupeshti@amazon.com>
Date: Thu, 16 Feb 2023 18:03:13 -0500
Subject: [PATCH] chore: refactor code  pull out css to style file

---
 src/App.js    | 40 +++-------------------------------------
 src/index.css | 49 +++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/App.js b/src/App.js
index cc128c3..e771e90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,6 @@ class App extends Component {
       method: 'POST',
       data: JSON.stringify(data),
       headers: { 'Content-Type': 'application/json' },
-
       url: api,
     })
       .then((response) => {
@@ -40,37 +39,8 @@ class App extends Component {
   render() {
     return (
       <div className='container'>
-        <div
-          id='overlay'
-          style={{
-            position: 'absolute',
-            display: 'none',
-            width: '100%',
-            height: '100%',
-            top: '0',
-            left: '0',
-            right: '0',
-            bottom: '0',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            zIndex: '2',
-            cursor: 'pointer',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              fontSize: '50px',
-              color: 'white',
-              transform: 'translate(-50%,-50%)',
-              msTransform: 'translate(-50%,-50%)',
-            }}
-          >
-            Loading your image please wait...
-          </div>
+        <div id='overlay'>
+          <div id='overlayText'>Loading your image please wait...</div>
         </div>
         <form onSubmit={this.handleSubmit}>
           <h1> Welcome to Stable Diffusion AI</h1>
@@ -89,11 +59,7 @@ class App extends Component {
             <img
               id='myImage'
               alt='Your Image will appear here'
-              style={{
-                maxInlineSize: '100%',
-                blockSize: 'auto',
-                aspectRatio: '2/1.5',
-              }}
+              className='imageContainer'
             />
           </div>
         </form>
diff --git a/src/index.css b/src/index.css
index 9f992d4..74e60b6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,20 @@
- /* Style inputs with type="text", select elements and textareas */
-input[type=text], select, textarea {
+/* Style inputs with type="text", select elements and textareas */
+input[type='text'],
+select,
+textarea {
   width: 100%; /* Full width */
-  padding: 12px; /* Some padding */ 
+  padding: 12px; /* Some padding */
   border: 1px solid #ccc; /* Gray border */
   border-radius: 4px; /* Rounded borders */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
   margin-top: 6px; /* Add a top margin */
   margin-bottom: 16px; /* Bottom margin */
-  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
+  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
 }
 
 /* Style the submit button with a specific background color etc */
-input[type=submit] {
-  background-color: #04AA6D;
+input[type='submit'] {
+  background-color: #04aa6d;
   color: white;
   padding: 12px 20px;
   border: none;
@@ -21,7 +23,7 @@ input[type=submit] {
 }
 
 /* When moving the mouse over the submit button, add a darker green color */
-input[type=submit]:hover {
+input[type='submit']:hover {
   background-color: #45a049;
 }
 
@@ -30,4 +32,35 @@ input[type=submit]:hover {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
-} 
\ No newline at end of file
+}
+
+#overlay {
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 2;
+  cursor: pointer;
+  align-items: 'center';
+  justify-content: 'center';
+}
+
+#overlayText {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 50px;
+  color: white;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+#myImage {
+  max-inline-size: '100%';
+  block-size: 'auto';
+}