added styles to announcement form

announcements/templates/announcements/new_announcement.html

@@ -9,12 +9,11 @@
 
 {% block content %}
 <h1 class="announcement-heading">New Announcement</h1>
-<form action="{% url 'announcements:new-announcement' %}" method="POST">
+<form action="{% url 'announcements:new-announcement' %}" method="POST"  class="announcement-form">
   {% csrf_token %}
   {{ form.as_p }}
 
-  <button class="announcement-button" type="submit">Save Announcement</button>
+  <button class="announcement-button save-button" type="submit">Save Announcement</button>
+  <button class="announcement-button back-button" type="button"><a href="/announcements">Back to Announcements</a></button>
 </form>
-
-<button class="announcement-button" type="submit"><a href="/announcements">Back to Announcements</a></button>
 {% endblock %}
\ No newline at end of file

announcements/templates/index.html

@@ -20,5 +20,5 @@
   </li>
   {% endfor %}
 </ul>
-<a href="/announcements/add" class="new-announcement">New Announcement</a>
+<a href="/announcements/add" class="announcement-button">New Announcement</a>
 {% endblock %}
\ No newline at end of file

static/announcements.css

@@ -26,7 +26,8 @@
   margin-bottom: 24px;
 }
 
-.new-announcement {
+.announcement-button {
+  background-color: transparent;
   text-decoration: none;
   color: black;
   font-weight: 600;
@@ -35,6 +36,20 @@
   padding: 8px 24px;
 }
 
+.announcement-button a {
+  text-decoration: none;
+  color: black;
+}
+
+.save-button {
+  margin-top: 32px;
+}
+
+.back-button {
+  margin-top: 32px;
+  margin-left: 24px;
+}
+
 .announcement-image {
   width: 20%;
 }
@@ -66,3 +81,7 @@
 .announcement-reactions p:last-child {
   color: #B72A3F;
 }
+
+.announcement-form {
+  text-align: center;
+}
\ No newline at end of file