Merge branch 'ChangingFromControllerToEndpoints' into maksCSS

Made the site look closer to the mock-up

WebApp/Controllers/EventApiController.cs

@@ -1,86 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-using WebApp.Data;
-using WebApp.Entities;
-
-namespace WebApp.Controllers.Api;
-
-[ApiController]
-[Route("api/events")]
-public class EventsApiController : ControllerBase
-{
-    private readonly ApplicationDbContext _context;
-
-    public EventsApiController(ApplicationDbContext context)
-    {
-        _context = context;
-    }
-
-    // GET: /api/events
-    [HttpGet]
-    public IActionResult GetAll()
-    {
-        var events = _context.Events.ToList();
-        return Ok(events);
-    }
-
-    // GET: /api/events/5
-    [HttpGet("{id}")]
-    public IActionResult GetById(int id)
-    {
-        var ev = _context.Events.Find(id);
-        if (ev == null)
-            return NotFound();
-
-        return Ok(ev);
-    }
-
-    // POST: /api/events
-    [HttpPost]
-    public IActionResult Create([FromBody] Event ev)
-    {
-        if (!ModelState.IsValid)
-            return BadRequest(ModelState);
-
-        ev.EventDate = DateTime.SpecifyKind(ev.EventDate, DateTimeKind.Utc);
-
-        _context.Events.Add(ev);
-        _context.SaveChanges();
-
-        return CreatedAtAction(nameof(GetById), new { id = ev.EventId }, ev);
-    }
-
-    // PUT: /api/events/5
-    [HttpPut("{id}")]
-    public IActionResult Update(int id, [FromBody] Event updated)
-    {
-        if (id != updated.EventId)
-            return BadRequest("ID w URL nie zgadza się z obiektem.");
-
-        var ev = _context.Events.Find(id);
-        if (ev == null)
-            return NotFound();
-
-        ev.Title = updated.Title;
-        ev.Description = updated.Description;
-        ev.Location = updated.Location;
-        ev.EventDate = updated.EventDate;
-        ev.OrganisationId = updated.OrganisationId;
-
-        _context.SaveChanges();
-        return NoContent();
-    }
-
-    // DELETE: /api/events/5
-    [HttpDelete("{id}")]
-    public IActionResult Delete(int id)
-    {
-        var ev = _context.Events.Find(id);
-        if (ev == null)
-            return NotFound();
-
-        _context.Events.Remove(ev);
-        _context.SaveChanges();
-
-        return NoContent();
-    }
-}

WebApp/DTOs/EventCreateDto.cs

@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+using WebApp.Entities;
+
+namespace WebApp.DTOs;
+
+// Input values in JSON file to create event
+public record class EventCreateDto
+(
+    [Required] int? OrganisationId, 
+    [Required][StringLength(50)] string Title,
+    [StringLength(500)] string Description,
+    [Required][StringLength(100)] string Location,
+    [Required] DateTime? EventDate,
+    ICollection<EventSkill> EventSkills
+);

WebApp/DTOs/EventDetailsDto.cs

@@ -0,0 +1,17 @@
+using System.ComponentModel.DataAnnotations;
+using WebApp.Entities;
+
+namespace WebApp.DTOs;
+
+// Output values in JSON file
+public record class EventDetailsDto
+(
+    int EventId,
+    [Required] int? OrganisationId,
+    [Required][StringLength(50)] string Title,
+    [StringLength(500)] string Description,
+    [Required][StringLength(100)] string Location,
+    [Required] DateTime? EventDate,
+    ICollection<EventSkill> EventSkills,
+    ICollection<EventRegistration> EventRegistrations
+);

WebApp/DTOs/EventSummaryDto.cs

@@ -0,0 +1,16 @@
+using System.ComponentModel.DataAnnotations;
+using WebApp.Entities;
+
+namespace WebApp.DTOs;
+
+// Output values in JSON file
+public record class EventSummaryDto(
+    int EventId,
+    [Required] string Organisation,
+    [Required] [StringLength(50)] string Title,
+    [StringLength(500)] string Description,
+    [Required] [StringLength(100)] string Location,
+    [Required] DateTime? EventDate,
+    ICollection<EventSkill> EventSkills,
+    ICollection<EventRegistration> EventRegistrations
+    );

WebApp/DTOs/EventUpdateDto.cs

@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+using WebApp.Entities;
+
+namespace WebApp.DTOs;
+
+// Input values in JSON file to update event
+public record class EventUpdateDto
+(
+    [Required] int? OrganisationId, 
+    [Required][StringLength(50)] string Title,
+    [StringLength(500)] string Description,
+    [Required][StringLength(100)] string Location,
+    [Required] DateTime? EventDate,
+    ICollection<EventSkill> EventSkills
+);

WebApp/DTOs/EventsDto.cs

@@ -1,15 +0,0 @@
-using System.ComponentModel.DataAnnotations;
-using WebApp.Entities;
-
-namespace WebApp.DTOs;
-public record class EventsDto(
-    int EventId,
-    int OrganisationId, //foreign key
-    [StringLength(200)] string Title,
-    [StringLength(800)] string Description,
-    [StringLength(100)] string Location,
-    DateTime EventDate,
-    Organisation? Organisation,
-    ICollection<EventSkill> EventSkills,
-    ICollection<EventRegistration> EventRegistrations
-    );

WebApp/Endpoints/EventsEndpoints.cs

@@ -0,0 +1,124 @@
+using Microsoft.EntityFrameworkCore;
+using WebApp.Data;
+using WebApp.DTOs;
+using WebApp.Entities;
+using WebApp.Mapping;
+
+namespace WebApp.Endpoints
+{
+    public static class EventsEndpoints
+    {
+        const string GetEventEndpointName = "GetEvent"; 
+
+        public static RouteGroupBuilder MapEventsEndpoints(this WebApplication app)
+        {
+            var group = app.MapGroup("api/events")
+                                    .WithParameterValidation();
+
+            // GET /events
+            group.MapGet("/", async (ApplicationDbContext dbContext) => 
+                await dbContext.Events
+                               .Include(Eve => Eve.Organisation)
+                               .OrderByDescending(Eve => Eve.EventId)
+                               .Select(Eve => Eve.ToEventSummaryDto()) //EventSummaryDto
+                               .AsNoTracking()
+                               .ToListAsync());
+
+            // GET /events/1
+            group.MapGet("/{id}", async (int id, ApplicationDbContext dbContext) =>
+            {
+                Event? Eve = await dbContext.Events.FindAsync(id);
+
+                if (Eve is null) return Results.NotFound();
+
+                // Sprawdź, czy token należy do organizacji, a jeżeli tak, to do której.
+                // ...
+
+                // Jeśli token należy do organizacji, która utworzyła to wydarzenie,
+                // to zwróć także EventRegistrations. W przeciwnym razie usuń to pole
+                // przed jego wysłaniem!
+                // ...
+
+                return Results.Ok(Eve.ToEventDetailsDto()); //EventDetailsDto
+            })
+            .WithName(GetEventEndpointName);
+
+            // POST /events
+            group.MapPost("/", async (EventCreateDto newEvent, ApplicationDbContext dbContext) =>
+            {
+
+                // Uzyskaj organizację z tokenu
+                // ...
+
+                Event Eve = newEvent.ToEntity();
+
+                // Wyzeruj EventRegistrations, ponieważ nie są to dane,
+                // które powinniśmy przyjmować bez zgody wolontariuszy!
+                // ...
+
+                dbContext.Events.Add(Eve);
+                await dbContext.SaveChangesAsync();
+
+                return Results.CreatedAtRoute(
+                    GetEventEndpointName, 
+                    new { id = Eve.EventId }, 
+                    Eve.ToEventDetailsDto()); //EventDetailsDto
+            });
+
+            // PUT /events/1
+            group.MapPut("/{id}", async (int id, EventUpdateDto updatedEvent, ApplicationDbContext dbContext) =>
+            {
+                var existingEvent = await dbContext.Events.FindAsync(id);
+
+                if (existingEvent is null)
+                {
+                    return Results.NotFound();
+                }
+
+                // Uzyskaj organizację z tokenu
+                // ...
+
+                // Sprawdź, czy organizacja ma prawo
+                // do zmodyfikowania tego (EventId = id) eventu.
+                // ...
+
+                // Nadpisz organisationId (obecne w updatedEvent,
+                // lecz nie sprawdzane poniżej) na to, co odczytaliśmy
+                // do existingEvent.
+                // ...
+
+                dbContext.Entry(existingEvent)
+                         .CurrentValues
+                         .SetValues(updatedEvent.ToEntity(id));
+
+                dbContext.Entry(existingEvent)
+                         .Collection(Eve => Eve.EventRegistrations)
+                         .IsModified = false;
+
+                await dbContext.SaveChangesAsync();
+
+                return Results.NoContent();
+            });
+
+            // DELETE /events/1
+            group.MapDelete("/{id}", async (int id, ApplicationDbContext dbContext) =>
+            {
+
+                // Uzyskaj organizację z tokenu
+                // ...
+
+                // Sprawdź, czy organizacja ma prawo
+                // do usunięcia tego (EventId = id) eventu.
+                // ...
+
+                await dbContext.Events
+                         .Where(Eve => Eve.EventId == id)
+                         .ExecuteDeleteAsync();
+
+                return Results.NoContent();
+            });
+
+            return group;
+        }
+    }
+}

WebApp/Mapping/EventMapping.cs

@@ -0,0 +1,64 @@
+using Microsoft.EntityFrameworkCore;
+using WebApp.DTOs;
+using WebApp.Entities;
+
+namespace WebApp.Mapping;
+
+public static class EventMapping
+{
+    public static Event ToEntity(this EventCreateDto ECDto)
+    {
+        return new Event()
+        {
+            OrganisationId = ECDto.OrganisationId!.Value,
+            Title = ECDto.Title,
+            Description = ECDto.Description,
+            Location = ECDto.Location,
+            EventDate = DateTime.SpecifyKind(ECDto.EventDate!.Value, DateTimeKind.Utc),
+            EventSkills = ECDto.EventSkills,
+            EventRegistrations = []
+        };
+    }
+
+    public static Event ToEntity(this EventUpdateDto EUDto, int id)
+    {
+        return new Event()
+        {
+            EventId = id,
+            OrganisationId = EUDto.OrganisationId!.Value,
+            Title = EUDto.Title,
+            Description = EUDto.Description,
+            Location = EUDto.Location,
+            EventDate = DateTime.SpecifyKind(EUDto.EventDate!.Value, DateTimeKind.Utc),
+            EventSkills = EUDto.EventSkills
+        };
+    }
+
+    public static EventSummaryDto ToEventSummaryDto(this Event myEvent)
+    {
+        return new EventSummaryDto(
+            myEvent.EventId,
+            myEvent.Organisation!.Name,
+            myEvent.Title,
+            myEvent.Description,
+            myEvent.Location,
+            myEvent.EventDate,
+            myEvent.EventSkills,
+            myEvent.EventRegistrations
+        );
+    }
+
+    public static EventDetailsDto ToEventDetailsDto(this Event myEvent)
+    {
+        return new EventDetailsDto(
+            myEvent.EventId,
+            myEvent.OrganisationId,
+            myEvent.Title,
+            myEvent.Description,
+            myEvent.Location,
+            myEvent.EventDate,
+            myEvent.EventSkills,
+            myEvent.EventRegistrations
+        );
+    }
+}

WebApp/Program.cs

@@ -1,25 +1,31 @@
 using Microsoft.EntityFrameworkCore;
 using WebApp.Data;
+using WebApp.Endpoints;
 using WebApp.Entities;
 
+// Create WebAppliaction Builder
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
+// Configure Database Conecction
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
 builder.Services.AddDbContext<ApplicationDbContext>(options =>
     options.UseNpgsql(connectionString));
+
+// Add Developer Exception Filter
 builder.Services.AddDatabaseDeveloperPageExceptionFilter();
 
+// Configure Identity
 builder.Services.AddDefaultIdentity<User>(options => options.SignIn.RequireConfirmedAccount = true)
     .AddEntityFrameworkStores<ApplicationDbContext>();
-builder.Services.AddControllersWithViews();
 
+// API Services For Swagger
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen(c =>
     {
         c.SwaggerDoc("v1", new Microsoft.OpenApi.Models.OpenApiInfo { Title = "hermes", Version = "v1" });
     });
 
+// Build Application
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.
@@ -31,22 +37,18 @@ if (app.Environment.IsDevelopment())
 }
 else
 {
-    app.UseExceptionHandler("/Home/Error");
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
 }
 
-app.UseHttpsRedirection();
+// Middleware Configuration
-app.UseDefaultFiles();
+app.UseHttpsRedirection(); // Redirects all HTTP requests to HTTPS
-app.UseStaticFiles();
+app.UseDefaultFiles(); // Serves default files (index.html) if no specific file is requested
-
+app.UseStaticFiles(); // Serves static files(CSS, JS, Img) from the wwwroot folder.
-app.UseRouting();
+app.UseRouting(); // Enables routing to match incoming request to endpoints
-
 app.UseAuthorization(); 
 
-app.MapControllerRoute(
+// Map Minimal API Endpoints
-    name: "default",
+app.MapEventsEndpoints();
-    pattern: "{controller=Home}/{action=Index}/{id?}");
+
-app.MapRazorPages();
 
 app.Run();

WebApp/WebApp.csproj

@@ -22,6 +22,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.OpenApi" Version="1.6.24" />
+    <PackageReference Include="MinimalApis.Extensions" Version="0.11.0" />
     <PackageReference Include="Npgsql" Version="9.0.3" />
     <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="8.1.1" />

WebApp/wwwroot/create.html

@@ -4,41 +4,84 @@
     <meta charset="UTF-8">
     <title>Nowe wydarzenie</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/panel.css" />
 </head>
 
 
 
 <body class="bg-light">
-    <div class="container mt-5">
+    <div class="">
-        <h1 class="mb-4">Utwórz wydarzenie</h1>
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="text-center mb-4">
+            </div>
+            <nav class="sidebar d-flex flex-column align-items-center pt-3">
+                <div class="icon-box my-2">
+                    <a href="index.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+                        <br /><h8 class="iconText">Home</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+                        <br /><h8 class="iconText">Chats</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
+                        <br /><h8 class="iconText">Calendar</h8>
+                    </a>
+                </div>
+                <div class="icon-box mt-auto mb-4">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+                        <br /><h8 class="iconText">Settings</h8>
+                    </a>
+                </div>
+            </nav>
+        </div>
+        <!-- Top Nav -->
+        <div class="topnav d-flex justify-content-between align-items-center shadow">
+            <a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
+            <div>
+                <button class="button-join">Join now</button>
+                <button class="button-sign">Sign In</button>
+                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
+            </div>
+        </div>
+        <div class="main">
+            <h1 class="mb-4">Create a new event</h1>
+
+            <div class="form-group mb-2">
+                <label for="title">Tytuł</label>
+                <input id="title" class="form-control input-field" />
+            </div>
+            <div class="form-group mb-2">
+                <label for="location">Lokalizacja</label>
+                <input id="location" class="form-control input-field" />
+            </div>
+            <div class="form-group mb-2">
+                <label for="description">Opis</label>
+                <textarea id="description" class="form-control input-field"></textarea>
+            </div>
+            <div class="form-group mb-2">
+                <label for="eventDate">Data</label>
+                <input id="eventDate" type="datetime-local" class="form-control input-field" />
+            </div>
+            <div class="form-group mb-4">
+                <label for="organisationId">ID Organizacji</label>
+                <input id="organisationId" type="number" class="form-control input-field" />
+            </div>
+
+            <button id="saveBtn" class="button"><span>Save</span><span>&#11166;</span></button>
 
-        <div class="form-group mb-2">
-            <label for="title">Tytuł</label>
-            <input id="title" class="form-control" />
-        </div>
-        <div class="form-group mb-2">
-            <label for="location">Lokalizacja</label>
-            <input id="location" class="form-control" />
-        </div>
-        <div class="form-group mb-2">
-            <label for="description">Opis</label>
-            <textarea id="description" class="form-control"></textarea>
-        </div>
-        <div class="form-group mb-2">
-            <label for="eventDate">Data</label>
-            <input id="eventDate" type="datetime-local" class="form-control" />
-        </div>
-        <div class="form-group mb-4">
-            <label for="organisationId">ID Organizacji</label>
-            <input id="organisationId" type="number" class="form-control" />
         </div>
 
-        <button id="saveBtn" class="button"><span>Zapisz</span><span>&#11166;</span></button>
+        <script type="module" src="/js/eventCreate.js"></script>
-
-    </div>
-
-    <script type="module" src="/js/eventCreate.js"></script>
 </body>
 
 

WebApp/wwwroot/css/panel.css

@@ -1,10 +1,151 @@
+.logo {
+    font-family: 'Nunito', sans-serif;
+    font-weight: 800;
+    font-size: 36px;
+}
+
 body {
     font-family: 'Segoe UI', sans-serif;
 }
+.sidebar {
+    width: 120px;
+    position: fixed;
+    top: 113px;
+    bottom: 0;
+    background-color: white;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+    .sidebar .nav-link {
+        text-align: center;
+        padding: 20px 0;
+        font-size: 20px;
+    }
+.iconText {
+    color: #666666;
+    font-size: 14px;
+}
+.topnav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 113px;
+    background-color: white;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 1050;
+    padding: 0 70px;
+}
+.button-join {
+    width: 150px;
+    height: 50px;
+    background-color: #2898BD;
+    border: none;
+    border-radius: 50px;
+    color: white;
+    font-weight:500;
+    font-size: 22px;
+}
+    .button-join:hover {
+        width: 150px;
+        height: 50px;
+        background-color: #2485A6;
+        border: none;
+        border-radius: 50px;
+        color: white;
+        font-weight: 500;
+        font-size: 22px;
+    }
+.button-sign {
+    width: 150px;
+    height: 50px;
+    background-color: transparent;
+    border: 2px, solid, #2898BD;
+    border-radius: 50px;
+    color: #2898BD;
+    font-weight: 500;
+    font-size: 22px;
+}
+    .button-sign:hover {
+        width: 150px;
+        height: 50px;
+        background-color: #2898BD;
+        border: none;
+        border-radius: 50px;
+        color: white;
+        font-weight: 500;
+        font-size: 22px;
+    }
+
+.icon-box {
+    width: 90px;
+    height: 90px;
+    border-radius: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    transition: box-shadow 0.2s ease;
+    cursor: pointer;
+    padding-top: 30px; 
+}
+
+    .icon-box:hover {
+        box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
+    }
+
+.main {
+    margin-left: 10%; /* exact width of .sidebar */
+    margin-top: 113px; /* exact height of .topnav */
+    padding: 30px;
+    justify-content: center;
+    width: 80%;
+}
+.search-bar {
+    margin-left: 12%;
+    position: relative;
+    width: 60%;
+}
+    .search-bar input {
+        height: 70px;
+        border: 2px solid #2898BD;
+        border-radius: 50px;
+        margin-bottom: 20px;
+        padding-right: 3rem; /* Make space for the icon */
+    }
+    .search-bar input:focus {
+        height: 70px;
+        border: 3px solid #2898BD;
+        border-radius: 50px;
+        margin-bottom: 20px;
+        padding-right: 3rem; /* Make space for the icon */
+        outline: none;
+        box-shadow: none;
+    }
+.button-add {
+    background-color: #2898BD;
+    width: 70px;
+    height: 70px;
+    /* padding: 30px; */
+    z-index: 50;
+}
+
+.events-card {
+    width: 75%; /* or whatever your design max is */
+    margin: 0 auto; /* center it horizontally */
+    background-color: white;
+    padding: 3rem;
+    border-radius: 30px;
+    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
+}
+
+.eventsText {
+    color: #2898BD;
+}
 
 #eventList .event-card {
     background-color: white;
-    border: 2px dashed #17a2b8;
+    border: 2px dashed #2898BD;
     border-radius: 10px;
     padding: 20px;
     display: flex;
@@ -17,12 +158,28 @@ body {
     }
 
     #eventList .event-card .remove-btn {
-        background-color: #ff4d4d;
+        background-color: #F05234;
         border: none;
-        border-radius: 50%;
+        border-radius: 30px;
         color: white;
         font-size: 1.2rem;
-        width: 36px;
+        width: 99px;
-        height: 36px;
+        height: 50px;
         line-height: 1;
     }
+        #eventList .event-card .remove-btn:hover {
+            background-color: #CD4A31;
+            border: none;
+            border-radius: 30px;
+            color: white;
+            font-size: 1.2rem;
+            width: 99px;
+            height: 50px;
+            line-height: 1;
+        }
+
+.center-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

WebApp/wwwroot/css/style.css

@@ -1,6 +1,21 @@
-.button {
+body {
-    border-radius: 4px;
+    color: #2898BD;
-    background-color: #f4511e;
+}
+.input-field {
+    border-radius: 10px;
+    padding: 10px;
+    border: 2px solid #2898BD;
+    box-shadow: none;
+}
+    .input-field:focus {
+        outline: none;
+        box-shadow: none;
+        border: 3px solid #2898BD;
+    }
+
+.button {
+    border-radius: 30px;
+    background-color: #2898BD;
     color: #FFFFFF;
     text-align: center;
     font-size: 28px;

WebApp/wwwroot/index.html

@@ -4,55 +4,92 @@
 	<meta charset="UTF-8" />
 	<title>Events Panel</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
 	<link href="/css/panel.css" rel="stylesheet" />
 </head>
 <body class="bg-light">
 
-<div class="d-flex">
+	<div class="d-flex">
-	<!-- Sidebar -->
+		<!-- Sidebar -->
-	<div class="bg-white border-end p-3 vh-100" style="width: 80px;">
+		<div class="sidebar">
-		<div class="text-center mb-4">
+			<div class="text-center mb-4">
-			<img src="/img/logo.svg" alt="Logo" style="width: 40px;">
+			</div>
+			<nav class="sidebar d-flex flex-column align-items-center pt-3">
+				<div class="icon-box my-2">
+					<a href="index.html" class="nav-link text-info mb-3">
+						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+						<br /><h8 class="iconText">Home</h8>
+					</a>
+				</div>
+				<div class="icon-box my-2">
+					<a href="#" class="nav-link text-info mb-3">
+						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+						<br /><h8 class="iconText">Chats</h8>
+					</a>
+				</div>
+				<div class="icon-box my-2">
+					<a href="#" class="nav-link text-info mb-3">
+						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
+						<br /><h8 class="iconText">Calendar</h8>
+					</a>
+				</div>
+				<div class="icon-box mt-auto mb-4">
+					<a href="#" class="nav-link text-info mb-3">
+						<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+						<br /><h8 class="iconText">Settings</h8>
+					</a>
+				</div>
+			</nav>
 		</div>
-		<nav class="nav flex-column text-center">
-			<a href="#" class="nav-link text-info mb-3">🏠</a>
-			<a href="#" class="nav-link text-info mb-3">💬</a>
-			<a href="#" class="nav-link text-info mb-3">📅</a>
-			<a href="#" class="nav-link text-info mt-auto">⚙️</a>
-		</nav>
-	</div>
 
-	<!-- Main content -->
+		<!-- Top Nav -->
-	<div class="flex-grow-1 p-4">
+		<div class="topnav d-flex justify-content-between align-items-center shadow">
-		<div class="d-flex justify-content-between align-items-center mb-3">
+			<a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
-			<h2 class="text-primary">Events</h2>
 			<div>
-				<button class="btn btn-outline-info me-2">Join now</button>
+				<button class="button-join">Join now</button>
-				<button class="btn btn-outline-secondary">Sign In</button>
+				<button class="button-sign">Sign In</button>
+				<svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
 			</div>
 		</div>
 
-		<div class="input-group mb-4">
+		<!-- Main content -->
-			<input type="text" class="form-control rounded-start" placeholder="Search events..." />
+		<div class="main">
-			<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
+			<div class="position-relative search-bar">
-		</div>
+				<input type="text" class="form-control pe-5" placeholder="" />
+				<span class="position-absolute top-50 end-0 translate-middle-y me-3">
+					<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
+				</span>
 
-		<div id="eventList" class="d-grid gap-3">
-			<!-- Karty wydarzeń będą ładowane tutaj -->
-			<div class="event-card filled">
-				<span>Event Title</span>
-				<button class="remove-btn delete-btn" data-id="5">−</button> <!-- Przyciski usuwania z ID -->
 			</div>
+			<!--<a href="/create.html" class="button-add text-decoration-none">
+		<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg>
+	</a>-->
+			<div class="events-card bg-white p-4 rounded-4 shadow position-relative">
+				<div class="d-flex justify-content-between align-items-center mb-3">
+					<h2 class="eventsText">Events</h2>
+					<span class="position-absolute end-0 translate-middle-y me-4" style="margin-top: 20px;">
+						<button class="btn btn-link" onclick="">
+							<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
+						</button>
+						<button class="btn btn-link" onclick=""><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z" /></svg></button>
+					</span>
+				</div>
+
+				<div id="eventList" class="d-grid gap-3">
+					<!-- Karty wydarzeń będą ładowane tutaj -->
+					<div class="event-card filled">
+						<span>Event Title</span>
+						<button class="remove-btn delete-btn" data-id="5"><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg></button> <!-- Przyciski usuwania z ID -->
+					</div>
+				</div>
+			</div>
+
+			<script type="module" src="/js/eventList.js"></script>
+			<script type="module" src="/js/eventDelete.js"></script>
+			
 		</div>
-
+		<a href="/create.html" class="button-add mt-xl-auto rounded-5 align-content-center center-text">
-
+			<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg>
-		<!-- Dodaj nowe -->
+		</a>
-		<a href="/create.html" class="btn btn-success">+ Dodaj nowe</a>
-
-	</div>
-</div>
-
-<script type="module" src="/js/eventList.js"></script>
-<script type="module" src="/js/eventDelete.js"></script>
 </body>
 </html>

WebApp/wwwroot/js/eventList.js

@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
             card.className = "event-card filled";
             card.innerHTML = `
                 <span>${ev.title}</span>
-                <button class="remove-btn delete-btn" data-id="${ev.eventId}">−</button>
+                <button class="remove-btn delete-btn" data-id="${ev.eventId}"><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></button>
             `;
             container.appendChild(card);
         }