diff --git a/src/app/components/event/event.component.css b/src/app/components/event/event.component.css index d631cbe..190bbc8 100644 --- a/src/app/components/event/event.component.css +++ b/src/app/components/event/event.component.css @@ -1,7 +1,3 @@ -table, th, td { - border: .05em solid black; -} - p.has-error { color: red; } @@ -9,4 +5,63 @@ p.has-error { td.has-error { border-color: red; border-width: 2px; + margin-top: 5px; + font-size: 14px; + background-color: lightcoral; +} + +/* Styling for individual event lines */ +tr.app-event { + border: 1px solid black; +} + +/* Styling for input fields */ +input[type="text"], +input[type="date"], +input[type="time"], +select { + width: 100%; + padding: 6px; + box-sizing: border-box; +} + +/* Styling for disabled input fields */ +input:disabled { + background-color: #f5f5f5; +} + +/* Styling for Save and Delete buttons */ +button { + padding: 8px 12px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + margin-right: 5px; +} + +button:hover { + background-color: #0056b3; +} + +/* Adjust spacing for input and button elements */ +td > input, +td > select, +td > button { + margin-top: 5px; +} + +/* Styling for checkbox */ +td input[type="checkbox"] { + margin: 0; +} + +/* Center align text in table cells */ +td { + text-align: center; +} + +/* Styling for readonly input fields */ +td[readonly] { + background-color: #f5f5f5; } diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html index 933e551..8d121d7 100644 --- a/src/app/components/event/event.component.html +++ b/src/app/components/event/event.component.html @@ -22,7 +22,7 @@ - + {{event?.createdBy}} diff --git a/src/app/components/events-table/events-table.component.css b/src/app/components/events-table/events-table.component.css index 86bb390..4e6309b 100644 --- a/src/app/components/events-table/events-table.component.css +++ b/src/app/components/events-table/events-table.component.css @@ -1,3 +1,51 @@ -table, th, td { - border: .05em solid black; +/* Styling for the whole table */ +table { + border-collapse: collapse; + width: 100%; + margin-top: 20px; + font-family: Arial, sans-serif; } + +/* Styling for table header cells */ +th { + background-color: #f2f2f2; + font-weight: bold; + text-align: left; + padding: 8px; + border: 1px solid #ddd; +} + +/* Styling for table data cells */ +td { + padding: 8px; + border: 1px solid #ddd; +} + +/* Add some hover effect to rows */ +tr:hover { + background-color: #f5f5f5; +} + +/* Styling for the "Add Event" button */ +button { + padding: 10px 15px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +/* Styling for individual event lines */ +tr:nth-child(odd) { + background-color: #f2f2f2; /* Light gray for odd rows */ +} + +tr:nth-child(even) { + background-color: #ffffff; /* White for even rows */ +} + diff --git a/src/app/pages/admin/admin.component.css b/src/app/pages/admin/admin.component.css index e69de29..2cbcdac 100644 --- a/src/app/pages/admin/admin.component.css +++ b/src/app/pages/admin/admin.component.css @@ -0,0 +1,105 @@ +/* Styling for buttons */ +button { + padding: 8px 12px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + margin-right: 5px; +} + +button:hover { + background-color: #0056b3; +} + +/* Styling for dropdowns */ +select { + padding: 6px; + border: 1px solid #ccc; + border-radius: 4px; + background-color: white; +} + +/* Styling for spans */ +span { + margin-right: 5px; +} + +/* Styling for the container of the buttons and dropdowns */ +.buttons-container { + margin-bottom: 20px; + display: flex; + align-items: center; +} + +/* Add some spacing between buttons and dropdowns */ +.buttons-container > * { + margin-right: 10px; +} + + + + +/* Login form */ + +/* Styling for form container */ +.form-container { + background-color: #f5f5f5; + padding: 20px; + border: 1px solid #ccc; + border-radius: 4px; + margin: 0 auto; /* Center the form horizontally */ + width: 50%; /* Set the width to 50% */ + box-sizing: border-box; +} + +/* Styling for form labels */ +label { + display: block; + margin-top: 10px; +} + +/* Styling for form inputs */ +input[type="text"], +input[type="password"] { + width: 100%; + padding: 8px; + margin-top: 6px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +/* Styling for form buttons */ +button { + padding: 8px 12px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + margin-top: 10px; +} + +button:hover { + background-color: #0056b3; +} + +/* Styling for password policy message */ +p.password-policy { + color: #dc3545; + font-size: 14px; + margin-top: 5px; +} + +/* Styling for passwords mismatch message */ +p.password-mismatch { + color: #dc3545; + font-size: 14px; + margin-top: 5px; +} + +/* Add some spacing between form elements */ +.form-container > * { + margin-bottom: 10px; +} + diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index a60cdb5..e781e91 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -1,4 +1,4 @@ -
+

Please log in: