opensource-society · yashp386 · Jul 22, 2025 · Jul 22, 2025
diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
@@ -1,52 +1,74 @@
 ---
 name: Comprehensive Pull Request
 about: Use this template for bug fixes, features, enhancements, documentation, or security updates.
-title: "[PR] <Short, descriptive title>"
+title: "[PR] Fix: UI Enhancements and Bug Fixes"
 ---
 
 ## Type of Change
 
 Please check all that apply:
-- [ ] Bug Fix
-- [ ] Feature
-- [ ] Enhancement
+- [x] Bug Fix
+- [x] Feature
+- [x] Enhancement
 - [ ] Documentation
 - [ ] Security
 - [ ] Other (please specify below)
 
 ## Description
 
-<!-- Provide a detailed description of your changes and the problem they solve. Be sure to reference any related issues. -->
+This pull request addresses several UI issues and introduces a new night theme feature. The changes include:
+
+*   **UI Enhancements:**
+    *   Introduced a more visually appealing color scheme and typography.
+    *   Added subtle animations and transitions to improve the user experience.
+    *   Refined the layout and spacing of various UI components.
+*   **Bug Fixes:**
+    *   Fixed an issue where fonts were not being correctly applied to the challenges grid.
+    *   Resolved conflicting styles by consolidating all styles into a single `styles.css` file.
+*   **Features:**
+    *   Added a new night theme feature with a dedicated toggle button.
 
 ## Motivation & Context
 
-<!-- Why is this change necessary? What problem does it address? Link to issues, discussions, or feature requests when possible. -->
+The previous UI had several inconsistencies and bugs that affected the user experience. The new UI is more modern, professional, and easier to use. The night theme feature is a great addition for users who prefer to work in a dark environment.
 
 ## Related Issues
 
-<!-- List all related issues or pull requests (e.g. Fixes #123, Closes #456). -->
+N/A
 
 ## How Has This Been Tested?
 
 - [ ] Unit tests
 - [ ] Integration tests
-- [ ] Manual testing
+- [x] Manual testing
 - [ ] Other (please specify below)
 
-<!-- Describe the testing steps you followed and results. Include setup instructions if applicable. -->
+I have manually tested the changes in the following browsers:
+
+*   Chrome
+*   Firefox
+*   Edge
 
 ## Screenshots / Media
 
-<!-- Attach screenshots, videos, or logs that demonstrate your change. -->
+N/A
 
 ## Implementation Details
 
-<!-- write detailed explanation -->
+*   **UI Enhancements:**
+    *   Updated the `styles.css` file to use the "Poppins" font and a new color scheme.
+    *   Added animations and transitions to buttons, cards, and navigation links.
+*   **Bug Fixes:**
+    *   Consolidated all styles into a single `styles.css` file to resolve conflicting styles.
+    *   Removed the `styles/challenges.css`, `styles/themes.css`, and `submit-challenge/styles.css` files.
+*   **Features:**
+    *   Added a new `.night-theme` class to the `styles.css` file.
+    *   Updated the `scripts/theme.js` file to toggle the `.night-theme` class on the body when the theme toggle button is clicked.
 
 ## Checklist
 
-- [ ] My code follows the project’s coding style and conventions
-- [ ] I have performed a self-review of my code
+- [x] My code follows the project’s coding style and conventions
+- [x] I have performed a self-review of my code
 - [ ] I have commented my code, particularly in hard-to-understand areas
 - [ ] I have updated documentation where necessary
 - [ ] I have added tests that prove my fix/feature works
@@ -55,4 +77,4 @@ Please check all that apply:
 
 ## Additional Context
 
-<!-- Add any other relevant information, context, or screenshots. -->
+N/A
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -8,16 +9,10 @@
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <!-- Merge both font options for flexibility -->
-    <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <!-- Styles -->
-    <!-- If you want to keep all challenge styles in one file, use: -->
-    <link rel="stylesheet" href="../styles.css">
-    <!-- Or, if you want to scope styles to just challenges, use: -->
-    <!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <!-- Header Component -->
@@ -213,194 +208,6 @@ <h4>Community</h4>
   <script type="module" src="../scripts/theme.js"></script>
   <script src="../scripts/challenges.js"></script>
 
-  <style>
-    /* Additional styles for challenges page */
-    .challenges-hero {
-      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-      padding: 6rem 0 4rem;
-      text-align: center;
-    }
-
-    .challenges-hero__title {
-      font-size: 3.5rem;
-      font-weight: 700;
-      margin-bottom: 1.5rem;
-      color: white;
-    }
-
-    .challenges-hero__description {
-      font-size: 1.2rem;
-      color: rgba(255, 255, 255, 0.9);
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    .challenges-filter {
-      background: var(--bg-secondary);
-      padding: 2rem 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-
-    .filter-controls {
-      display: flex;
-      gap: 2rem;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    .filter-group {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .filter-select, .search-input {
-      padding: 0.5rem 1rem;
-      border: 1px solid var(--border-color);
-      border-radius: 0.5rem;
-      background: white;
-      font-size: 0.9rem;
-    }
-
-    .search-group {
-      margin-left: auto;
-    }
-
-    .search-input {
-      width: 300px;
-    }
-
-    .challenges-grid {
-      padding: 3rem 0;
-    }
-
-    .challenges-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-      gap: 2rem;
-    }
-
-    .challenge-card {
-      background: white;
-      border-radius: 1rem;
-      padding: 1.5rem;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .challenge-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    }
-
-    .challenge-card__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 1rem;
-    }
-
-    .challenge-card__title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--text-dark);
-      margin: 0;
-    }
-
-    .difficulty-badge {
-      padding: 0.25rem 0.75rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .difficulty-easy {
-      background: #d4edda;
-      color: #155724;
-    }
-
-    .difficulty-medium {
-      background: #fff3cd;
-      color: #856404;
-    }
-
-    .difficulty-hard {
-      background: #f8d7da;
-      color: #721c24;
-    }
-
-    .challenge-card__description {
-      color: var(--text-muted);
-      margin-bottom: 1rem;
-      line-height: 1.5;
-    }
-
-    .challenge-card__meta {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-      flex-wrap: wrap;
-    }
-
-    .category-tag {
-      background: var(--bg-light);
-      color: var(--primary-color);
-      padding: 0.25rem 0.75rem;
-      border-radius: 1rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-
-    .challenge-card__actions {
-      text-align: right;
-    }
-
-    .btn-sm {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-    }
-
-    #theme-toggle {
-      position: fixed;
-      right: 2rem;
-      bottom: 2rem;
-      background: var(--bg-primary, #fff);
-      border: none;
-      border-radius: 50%;
-      padding: 0.75rem;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      cursor: pointer;
-      z-index: 1000;
-      transition: background 0.2s;
-    }
-
-    #theme-toggle svg {
-      vertical-align: middle;
-    }
-
-    @media (max-width: 768px) {
-      .challenges-hero__title {
-        font-size: 2.5rem;
-      }
-
-      .filter-controls {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      .search-group {
-        margin-left: 0;
-      }
-
-      .search-input {
-        width: 100%;
-      }
-
-      .challenges-list {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
+
 </body>
 </html>
diff --git a/index_resolved.html b/index_resolved.html
@@ -8,8 +8,7 @@
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
 
   <!-- Material Icons -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -138,3 +137,4 @@ <h1 class="hero__title">
   <script type="module" src="./scripts/theme.js"></script>
 </body>
 </html>
+