updated EnvModal

Author: sarhiri

app/modals/EnvModal/EnvModal.scss

@@ -5,32 +5,32 @@
 }
 
 .env-button {
-  background-color: transparent;
+  background-color: rgb(201, 198, 198);
   border: 0;
   outline: none;
   white-space: nowrap;
   margin: 10px;
   // padding: 0px;
-  color: $gblue !important;
+  color: white;
   box-shadow: $boxshadow;
   padding: 2rem;
   &:hover {
-    background-color: $lightpurple;
+    background-color: $gblue;
   }
 }
 
 .env-button2 {
-  background-color: transparent;
+  background-color: rgb(201, 198, 198);
   border: 0;
   outline: none;
   white-space: nowrap;
   margin: 10px;
   // padding: 0px;
-  color: $gblue !important;
+  color: white;
   box-shadow: $boxshadow;
   padding: 2rem;
   &:hover {
-    background-color: $lightpurple;
+    background-color: $gblue;
   }
 }
 
@@ -41,3 +41,4 @@ p {
 #card-env {
   margin: 40px 20px;
 }
+

app/modals/EnvModal/EnvModal.tsx

@@ -11,26 +11,27 @@ const EnvModal: React.FC<TModalSetter> = React.memo(
       <div className="add-container">
 
         <div className="card" id="card-env">
-          <button
+          <Button
             className="env-button"
             onClick={() => setModal({isOpen:true,type:'awsModal'})}
+            
           >
             <Typography>
               <CloudQueue fontSize="large" />
             </Typography>
-            <Typography>Cloud-Based</Typography>
-          </button>
+            <Typography>&emsp;Cloud-Based</Typography>
+          </Button>
 
 
-          <button
+          <Button
             className="env-button2"
             onClick={() => setModal({isOpen:true,type:'addModal'})}
           >
             <Typography>
               <Computer fontSize="large" />
             </Typography>
-            <Typography>Local Hosted</Typography>
-          </button>
+            <Typography>&emsp;Local Hosted</Typography>
+          </Button>
         </div>
       </div>
     );