updated styling

co-authored-by: Crys Lim [email protected]
co-authored-by: William Cheng [email protected]
co-authored-by: Ron Fu [email protected]

Author: chrisjtang

app/src/components/bottom/UseStateModal.tsx

@@ -22,17 +22,15 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
       <div className="useState-header">
         <span>Choose State Source</span>
         <button
-          style={{ padding: '1px', float: 'right' }}
+          style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
           onClick={() => setOpen(false)}
         >
           X
         </button>
       </div>
       <div className="useState-window">
         <div className="useState-dropdown">
-          <div>
-            {components}
-          </div>
+          {components}
         </div>
         <div className="useState-stateDisplay">
           <TableStateProps
@@ -51,7 +49,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
 
   return (
     <div>
-      <button onClick={() => setOpen(true)}>Use State</button>
+      <button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
       <Modal open={open}>{body}</Modal>
     </div>
   );

app/src/interfaces/Interfaces.ts

@@ -39,7 +39,8 @@ export interface Component {
   stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
   annotations?: string;
   useStateCodes: string[];
-  useContext?: object // {providerId: {attribute: stateId, ....}, ...}
+  useContext?: object // structure --> {providerId: {attribute: stateId, ....}, ...}
+  // example:
   // {1: {compText: 1, compLink: 2}}
   // {1: {compText: 1}, 2: {compLink: 1}, ....}
 }

app/src/public/styles/style.css

@@ -609,16 +609,30 @@ a.nav_link:hover {
   z-index: 999;
 }
 
+.useState-btn {
+  color: rgb(241, 240, 240);
+  background-color: #0099E6;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.useState-btn {
+  color: rgb(241, 240, 240);
+  background-color: #0099E6;
+  border: 1px solid #186BB4;
+  border-radius: 3;
+  box-shadow: "0 0px 0px 2px #1a1a1a";
+  padding: 2px 2px 2px 2px;
+}
+
 /* UseStateModal Styling */
 
 .useState-position {
   display: flex;
   flex-direction: column;
   position: fixed;
-  align-items:flex-start;
+  align-items: center;
   top: 30%;
   left: 30%;
-
 }
 
 .useState-header {
@@ -633,16 +647,23 @@ a.nav_link:hover {
   border-radius: 15px 15px 0px 0px;
 }
 
+.useState-dropdown {
+  align-self: flex-start;
+}
+
 .useState-window {
   width: 600px;
-  height: 300px;
+  height: 400px;
   resize: none;
   white-space: pre-line;
   font-size: 18px;
-  border: 3px;
+  border: 2px;
   border-style: solid;
   border-color: black;
   border-radius: 0px 0px 15px 15px;
   font-family: Arial, Helvetica, sans-serif;
-  background-color: rgb(241, 240, 240);;
+  background-color: rgb(241, 240, 240);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }