From 9e1206c696d2841e0e6e066951569947f785f000 Mon Sep 17 00:00:00 2001
From: Yane van der Westhuizen
 <93937046+yanevdw19021209@users.noreply.github.com>
Date: Sun, 17 Sep 2023 01:33:15 +0200
Subject: [PATCH] Updated general styling, alignment and responsiveness.

---
 .../src/components/Subsystems/DataScopes.js   |  4 +-
 .../src/styling/DataScopes.css                | 62 ++++++++++++++-----
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/frontend/infosafe_frontend/src/components/Subsystems/DataScopes.js b/frontend/infosafe_frontend/src/components/Subsystems/DataScopes.js
index 16a1901c..d3d84724 100644
--- 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
index 20a0c588..2374c051 100644
--- 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,18 +58,21 @@
     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;
@@ -76,9 +80,10 @@
 .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;
+
 }
\ No newline at end of file