new styles for the filtering

src/User/UserButtons.scss

@@ -22,10 +22,6 @@
         &:hover {
             transform: scale(1.1);
         }
-        .arrow-icon {
-
-        }
-
         .user-name {
             color: #0f0;
             font-weight: bold;

src/forms/TournamentFilterForm.js

@@ -1,6 +1,8 @@
 import React, {forwardRef, useEffect, useImperativeHandle, useState} from 'react';
 import {TournamentService} from "../services/TournamentService";
 import './TournamentFilterForm.scss';
+import ArrowDown from '../resources/arrow-down.svg';
+import ArrowUp from '../resources/arrow-up.svg';
 
 const TournamentFilterForm = forwardRef(function TournamentFilterForm({
                                                currentPage,
@@ -10,6 +12,7 @@ const TournamentFilterForm = forwardRef(function TournamentFilterForm({
                                                setPageCount,
                                                setMessage
                                              }, ref) {
+  const [showFilters, setShowFilters] = useState(false);  
   const [tournamentTitle, setTournamentTitle] = useState('');
   const [minPlayOutDate, setMinPlayOutDate] = useState(new Date(0));
   const [maxPlayOutDate, setMaxPlayOutDate] = useState(new Date(new Date().setFullYear(new Date().getFullYear() + 10)));
@@ -67,10 +70,26 @@ const TournamentFilterForm = forwardRef(function TournamentFilterForm({
     setTournamentTitle('');
   };
 
+  const toggleFilters = () => setShowFilters(!showFilters);
+
   return (
     <div className="tournaments-form-container">
+            <button className="filter-dropdown-button" onClick={toggleFilters}>Filter tournaments
+            <svg
+                            className={`arrow-icon ${showFilters ? 'open' : ''}`}
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                        >
+                            <g>
+                                <path d="M12,2A10,10,0,1,0,22,12,10.011,10.011,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,12,20Z"/>
+                                <polygon points="12 12.586 8.707 9.293 7.293 10.707 12 15.414 16.707 10.707 15.293 9.293 12 12.586"/>
+                            </g>
+            </svg>
+            </button>
+            {showFilters && (
       <form onSubmit={filterTournaments}>
-        <h2>Filter tournaments</h2>
         <div className="tournaments-form">
           <div className="tournaments-form-wrapper">
             <label htmlFor="title">Title</label>
@@ -133,6 +152,7 @@ const TournamentFilterForm = forwardRef(function TournamentFilterForm({
           </div>
         </div>
       </form>
+      )}
     </div>
   )
 })

src/forms/TournamentFilterForm.scss

@@ -1,38 +1,142 @@
 .tournaments-form-container {
     margin-top: 25px;
-    h2 {
-        margin: 20px 0;
-        text-align: center;
-        overflow-wrap: break-word;
+    padding: 20px;
+    border: 2px solid #0be400; /* Primary color */
+    border-radius: 8px;
+    background-color: rgba(13, 13, 13, 0.9); /* Updated to darker background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    font-family: 'Roboto', Arial, sans-serif; /* Updated font */
+    letter-spacing: 0.5px; /* Added letter spacing */
+    margin-bottom: 20px;
+    max-width: 800px; /* Limit the width */
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+}
+
+h2 {
+    margin: 20px 0;
+    text-align: center;
+    overflow-wrap: break-word;
+    color: #14980D; /* Main Primary color */
+    font-size: 1.5rem;
+}
+
+.tournaments-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px; /* Adjust spacing */
+}
+
+.tournaments-form-wrapper {
+    flex: 1 1 calc(50% - 20px); /* Adjust width */
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    label {
+        font-weight: bold;
+        color: #2E602B; /* Primary color */
+        font-size: 1.7rem;
     }
-    .tournaments-form {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        .tournaments-form-wrapper {
-            max-width: 100%;
-        }
-        .tournaments-form-button-container {
-            display: flex;
-            flex-grow: 1;
-            margin-top: 10px;
-            justify-content: space-evenly;
+
+    input {
+        padding: 10px;
+        border: 1px solid #333; /* Darker border */
+        border-radius: 4px;
+        font-size: 1rem;
+        background-color: #222; /* Darker input backgrounds */
+        color: #ddd; /* Light text color for visibility */
+    }
+}
+
+.tournaments-form-button-container {
+    display: flex;
+    flex-grow: 3;
+    flex-basis: 700px;
+    margin-top: 20px;
+    justify-content: space-evenly;
+
+    button {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        background-color: #14980D; /* Main Primary color */
+        color: white;
+        letter-spacing: 1px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background-color 0.3s;
+
+        &:hover {
+            background-color: #0BE400; /* Primary color */
         }
-        div {
-            padding: 0 20px;
-            label {
-                margin-right: 20px;
-                overflow-wrap: break-word;
-            }
+    }
+
+    button:last-child {
+        background-color: #BC9310; /* Main Secondary color */
+
+        &:hover {
+            background-color: #FFC300; /* Secondary color */
         }
     }
-    border: 2px solid #393a39;
-    margin-bottom: 20px;
-    padding: 10px;
-    font-family: Arial, Helvetica, sans-serif;
 
     @media (max-width: 768px) {
+        .tournaments-form-wrapper {
+            flex: 1 1 100%;
+        }
+
         font-size: 0.8rem;
-        width: 100%;
     }
+
 }
+
+.filter-dropdown-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    letter-spacing: 1px;
+    width: 100%;
+    padding: 10px;
+    background-color: black;
+    box-shadow: 0 0 0.2cm #088f0f; /* Primary color */
+    color: white;
+    border: none;
+    text-align: center;
+    cursor: pointer;
+    font-size: 1.3rem;
+    border-radius: 4px;
+    margin: 10px; 
+    color: rgb(57, 185, 31);/* Space between button and form */
+
+    .arrow-icon {
+        width: 20px;
+        height: 20px;
+        fill: #0f0;
+        transition: width 0.3s ease, height 0.3s ease;
+        margin-left: 5px;
+
+        .hover & {
+            width: 24px;
+            height: 24px;
+        }
+
+        &.open {
+            transform: rotate(180deg);
+        }
+    }
+
+}
+
+.filter-dropdown-button:hover {
+    background-color: white;
+    color: black; /* Darker green on hover */
+}
+
+
+