Merge pull request #40 from ConnorMarcus/styling-enhancements

Updated styling for new pages
ConnorMarcus · Nov 26, 2023 · 0acae0c · 0acae0c
2 parents 7289e5a + c0f5c3d
commit 0acae0c
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 41 deletions.
diff --git a/src/main/resources/static/css/DeadlineStyles.css b/src/main/resources/static/css/DeadlineStyles.css
@@ -1,5 +1,6 @@
 body {
     font-family: Arial, sans-serif;
+    margin: 0;
     background-color: #f5f5f5;
 }
 
@@ -43,8 +44,8 @@ body {
 
 .main-content p {
     text-align: center;
-    font-size: 20px;
-    margin-top: 30px;
+    font-size: 18px;
+    margin-top: 40px;
 }
 
 .center {

diff --git a/src/main/resources/static/css/HomePageStyles.css b/src/main/resources/static/css/HomePageStyles.css
@@ -1,9 +1,10 @@
 body {
+    font-family: Arial, sans-serif;
+    margin: 0;
     background-color: #f5f5f5;
 }
 
 div.main-content {
-    font-family: Arial, sans-serif;
     text-align: center;
     margin-top: 50px;
     color: #333;

diff --git a/src/main/resources/static/css/ProjectCreateStyles.css b/src/main/resources/static/css/ProjectCreateStyles.css
@@ -1,11 +1,12 @@
 body {
+    font-family: Arial, sans-serif;
+    margin: 0;
     background-color: #f5f5f5;
 }
 
 div.main-content {
     font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
+    margin-top: 50px;
 }
 
 div.main-content h1 {
@@ -51,7 +52,7 @@ div.main-content button {
     color: #fff;
     padding: 10px 20px;
     border: none;
-    border-radius: 5px;
+    border-radius: 3px;
     cursor: pointer;
     font-size: 16px;
     margin: 10px 5px 0 5px;

diff --git a/src/main/resources/static/css/StudentReportUploadStyles.css b/src/main/resources/static/css/StudentReportUploadStyles.css
@@ -1,4 +1,6 @@
 body {
+    font-family: Arial, sans-serif;
+    margin: 0;
     background-color: #f5f5f5;
 }
 
@@ -7,20 +9,20 @@ body {
 }
 
 .main-content .container {
-    height: 100vh;
-    width: 100%;
+    margin-top: 50px;
     align-items: center;
     display: flex;
     justify-content: center;
-    background-color: #fcfcfc;
 }
 
 .main-content .card {
     border-radius: 10px;
     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
-    width: 600px;
-    height: 300px;
-    padding: 10px 30px 40px;
+    width: 550px;
+    height: fit-content;
+    padding: 10px 30px 20px;
+    display: flex;
+    flex-direction: column;
 }
 
 .main-content .card h3 {
@@ -52,54 +54,57 @@ body {
     color: #a3a3a3;
 }
 
-.main-content .btn {
-    text-decoration: none;
-    background-color: #007bff;
+.main-content input {
+    border: medium solid #007bff;
+    width: 100%;
+}
+
+.main-content .file-upload::file-selector-button {
     color: #ffffff;
+    background-color: #007bff;
     padding: 10px 20px;
+    margin-right: 10px;
     border: none;
-    outline: none;
-    transition: 0.3s;
+    cursor: pointer;
+}
+
+.main-content .file-upload::file-selector-button:hover {
+    background-color: #0056b3;
+    cursor: pointer;
 }
 
-.main-content .btn:hover {
-    text-decoration: none;
-    color: #007bff;
+.main-content .submit-button {
+    background-color: #007bff;
+    color: #ffffff;
     padding: 10px 20px;
+    border-radius: 3px;
     border: none;
-    outline: 1px solid #010101;
 }
 
-.main-content .form input {
-    margin: 10px 0;
-    width: 100%;
-    border: none;
-    outline: none;
-    padding: 12px 20px;
-    border-radius: 4px;
+.main-content .submit-button:hover {
+    background-color: #0056b3;
 }
 
-.main-content .submit-button-container {
+.main-content .center {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
-}
-
-.main-content .btn.submit-button {
+    align-content: center;
     margin-top: 10px;
 }
 
 p {
     text-align: center;
+    font-size: 20px;
+    margin-top: 20px;
 }
 
 .not-in-project {
-    margin-top: 100px;
+    margin-top: 50px;
     font-size: 30px;
 }
 
 .deadline-message {
-    margin-top: 30px;
+    margin-top: 50px;
     font-size: 20px;
     color: red;
 }
diff --git a/src/main/resources/static/css/ViewProjectsStyles.css b/src/main/resources/static/css/ViewProjectsStyles.css
@@ -1,4 +1,6 @@
 body {
+    font-family: Arial, sans-serif;
+    margin: 0;
     background-color: #f5f5f5;
 }
 
@@ -48,15 +50,19 @@ div.main-content button {
     background-color: #ff0000;
 }
 
+.delete:hover {
+    background-color: #b60000;
+}
+
 .join, .leave, .create {
-    background-color: #0056b3;
+    background-color: #007bff;
 }
 
 .create {
     font-size: 15px;
     margin-top: 30px;
 }
 
-div.main-content button:hover {
-    opacity: 70%;
+.join:hover, .leave:hover, .create:hover {
+    background-color: #0056b3;
 }
diff --git a/src/main/resources/templates/studentReportUpload.html b/src/main/resources/templates/studentReportUpload.html
@@ -17,13 +17,15 @@ <h3>Upload Report File</h3>
                         <h4>Select File here</h4>
                     </header>
                     <p>Files Supported: PDF</p>
-                    <input name="file" type="file" accept=".pdf" id="fileID" class="btn" />
-                    <button class="btn submit-button" type="submit">Submit</button>
+                    <input name="file" type="file" accept=".pdf" id="fileID" class="file-upload" />
+                </div>
+                <div class="center">
+                    <button class="submit-button" type="submit">Submit</button>
                 </div>
             </div>
         </form>
         <p class="deadline-message" th:if="${inProject && beforeDeadline}" th:text="'Submission Deadline: ' + ${deadline}"></p>
-        <div th:if="${inProject}"><span>Submitted Report: </span><a th:text="${reportName}" href="/downloadReport"></a></div>
+        <p th:if="${inProject}"><span>Submitted Report: </span><a th:text="${reportName}" href="/downloadReport"></a></p>
         <p class="not-in-project" th:if="${!inProject}">You must join a project before submitting a report!</p>
     </div>
 </body>