diff --git a/front-end/src/Pages/Downloads.jsx b/front-end/src/Pages/Downloads.jsx
index 0a94a29c..9b94222b 100644
--- a/front-end/src/Pages/Downloads.jsx
+++ b/front-end/src/Pages/Downloads.jsx
@@ -111,6 +111,10 @@ const FileUploadDownload = () => {
}
};
+ // Filter files into two groups: visible to all and visible to logged-in users only
+ const visibleToAllFiles = uploadedFiles.filter(file => file.visibleToAll);
+ const visibleToLoggedInFiles = uploadedFiles.filter(file => !file.visibleToAll && loggedInUser.isLoggedIn);
+
return (
@@ -172,19 +176,39 @@ const FileUploadDownload = () => {
{errorMessage &&
{errorMessage}
}
- {uploadedFiles.map((file) => (
- (file.visibleToAll || loggedInUser.isLoggedIn) && (
+
Download Files here
+ {visibleToAllFiles.length > 0 ? (
+ visibleToAllFiles.map(file => (
{file.displayName}
-
{loggedInUser.isLoggedIn && (
-
+
)}
- )
- ))}
+ ))
+ ) : (
+
No files visible to all
+ )}
+
+ {loggedInUser.isLoggedIn && (
+ <>
+
Files for the CYCLE Team
+ {visibleToLoggedInFiles.length > 0 ? (
+ visibleToLoggedInFiles.map(file => (
+
+
+
{file.displayName}
+
+
+
+ ))
+ ) : (
+
No files visible to logged-in users
+ )}
+ >
+ )}
);
diff --git a/front-end/src/components/Download.css b/front-end/src/components/Download.css
index 552eaf4f..f624b156 100644
--- a/front-end/src/components/Download.css
+++ b/front-end/src/components/Download.css
@@ -41,14 +41,9 @@
flex-direction: column;
align-items: center;
padding: 20px;
- /* border: 1.5px solid hsl(222, 83%, 98%); */
border: 2px solid rgba(10, 48, 128);
border-radius: 20px;
background-color: #e1edf9;
- /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1),
- -2px -2px 5px rgba(255, 255, 255, 0.7),
- 2px -2px 5px rgba(255, 255, 255, 0.7),
- -2px 2px 5px rgba(63, 108, 148, 0.1); */
width: 90%;
max-width: 400px;
margin-left: 5%;
@@ -101,8 +96,6 @@
color: #ffffff;
cursor: pointer;
font-size: 16px;
- /* font-weight: bold; */
- /* transition: background 0.3s ease, transform 0.2s ease; */
}
.upload-form button:hover {
@@ -121,7 +114,7 @@
background-color: hsl(0, 0%, 100%);;
margin-left: 5%;
margin-right: 5%;
- margin-bottom: 2%;
+ margin-bottom: 5%;
}
@@ -134,15 +127,10 @@
background: hsl(94, 41%, 97%);
border: 2px solid hsl(105, 68%, 24%);
border-radius: 10px;
- /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1),
- -2px -2px 5px rgba(255, 255, 255, 0.7),
- 2px -2px 5px rgba(255, 255, 255, 0.7),
- -2px 2px 5px rgba(63, 108, 148, 0.1); */
width: auto;
}
.fileItem p {
- /* margin: 10px 0; */
text-align: left;
}
@@ -167,14 +155,17 @@
margin-top: 10px;
}
+.downloadSection h4{
+ text-align: left;
+ font-size: 20px;
+ font-family: 'Caudex';
+ color: #000000;
+}
+
.downloadLinks {
border: 2px solid rgba(10, 48, 128);
border-radius: 20px;
background-color: #e1edf9;
- /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1),
- -2px -2px 5px rgba(255, 255, 255, 0.7),
- 2px -2px 5px rgba(255, 255, 255, 0.7),
- -2px 2px 5px rgba(63, 108, 148, 0.1); */
padding: 10px;
display: center;
margin-left: 5%;
@@ -220,11 +211,6 @@
display: center;
}
-
-
-
-
-
@media (max-width: 760px) {
.downloadSection {