Updated general styling, alignment and responsiveness.

COS301-SE-2023 · Sep 16, 2023 · 9e1206c · 9e1206c
1 parent 8d89db1
commit 9e1206c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/frontend/infosafe_frontend/src/components/Subsystems/DataScopes.js b/frontend/infosafe_frontend/src/components/Subsystems/DataScopes.js
@@ -21,7 +21,7 @@ export const DataScopes = () => {
                         <EditDataScopePopup
                             popupClose={() => setEditDataScopeOpen(false)}
                             popupOpen={editDataScopeOpen}
-                            datascope={datascope}
+                            // datascope={datascope}
                         />
                     ) : null}{' '}
                 </div>
@@ -71,7 +71,7 @@ export const DataScopes = () => {
     };
 
     const CreateDataScope = () => {
-        if(roles.includes("data_scope_creates")) {
+        if(roles.includes("data_scope_create")) {
             return (
                 <div className="CreateDataScopeDiv">
                     <button

diff --git a/frontend/infosafe_frontend/src/styling/DataScopes.css b/frontend/infosafe_frontend/src/styling/DataScopes.css
@@ -1,6 +1,6 @@
 .dataScopesBackground{
     background-color: #FFFFFF;
-    border-radius: 20px;
+    border-radius: 4px;
     box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
     height: 90%;
     width: 98%;
@@ -11,9 +11,9 @@
     background-color: transparent;
     width: 90%;
     margin: 0 auto;
-    height: 80%;
+    height: 60%;
     position: relative;
-    top: 5%;
+    top: 0;
     overflow-y: scroll;
     box-sizing: content-box;
     scrollbar-width: none;
@@ -28,13 +28,13 @@
 }
 .datascopesList li {
     position: relative;
-    height: 4vh;
+    height: 5vh;
     color: #000000;
     width: 100%;
     text-transform: none;
     background-color: #CECECE;
     padding: 5px;
-    border-radius: 5px;
+    border-radius: 4px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
     margin-top: 4px;
 }
@@ -46,6 +46,7 @@
     position: relative;
     top: 50%;
     left: 1%;
+    width: fit-content;
 }
 .datascopesList li:hover {
     z-index: 4;
@@ -57,28 +58,32 @@
     position: relative;
     right: 4.2vw;
     justify-content: right;
-    height: 3%;
-    top: 3%;
+    height: 20%;
+    top: 0;
 }
 .dataScopesSearchInput{
     background-color: #CECECE;
+    height: 3vh;
     border: none;
     outline: none;
-    border-radius: 12px;
+    border-radius: 4px;
     font-family: 'Roboto', sans-serif;
     color: #383838;
-    padding-right: 3px;
-    padding-left: 1%;
+    padding-right: 0;
+    padding-left: 10px;
+    position: relative;
+    top: 40%;
 }
 .dataScopesSearchInput:focus{
     border: 2px solid #9E0000;
 }
 .dataScopesSearchIcon
 {
     position: absolute;
-    top: 15%;
+    height: 100%;
     right: 0;
     margin-right: 1%;
+    padding-left: 2px;
     color: #9E0000;
 }
 .dataScopesEditButton{
@@ -90,7 +95,7 @@
     right: 4vw;
     height: 70%;
     top: 15%;
-    border-radius: 6px;
+    border-radius: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -100,7 +105,7 @@
     color: #FFFFFF;
     width: 110%;
     position: relative;
-    left: 2%;
+
 }
 .dataScopesDeleteButton{
     background-color: #E90000;
@@ -110,7 +115,7 @@
     right: 1vw;
     height: 70%;
     top: 15%;
-    border-radius: 6px;
+    border-radius: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -120,4 +125,33 @@
     color: #FFFFFF;
     width: 130%;
     outline: 2px black;
+}
+.CreateDataScopeButton {
+    background: #373737;
+    border: 1px solid #3a3a3a;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    text-align: center;
+    letter-spacing: 1px;
+    color: #ffffff;
+    padding: 0.5% 2%;
+    width: fit-content;
+    position: relative;
+    height: 30%;
+    top: 40%
+}
+.CreateDataScopeDiv {
+    position: relative;
+    height: 20%;
+    top: 0;
+    width: 100%;
+    left: 5%;
+    padding: 0;
+    margin: 0;
+
 }