Standardize styling for hr elements and remove custom hr styling and classes that were no longer needed.

Fix styling on a few hr elements that looked wrong after global style was applied

styles/components/_error_page.scss

@@ -8,7 +8,6 @@
       padding: $gap 0;
 
       hr {
-        width: 100%;
         border: 1px solid $color-red;
       }
 
@@ -20,16 +19,16 @@
     &__body {
       padding: $gap * 2;
       margin: 0;
+
+      hr {
+        width: 80%;
+        margin: auto;
+        margin-bottom: $gap * 3;
+      }
     }
   }
 
   .icon {
     @include icon-size(60);
   }
-
-  hr {
-    margin-bottom: $gap * 4;
-    width: 80%;
-    border: 0.5px solid $color-gray-light;
-  }
 }

styles/components/_modal.scss

@@ -127,11 +127,6 @@ body {
       }
     }
 
-    hr {
-      border-bottom: 1px solid $color-gray-lighter;
-      margin: 0 (-$gap * 1.5) ($gap * 3);
-    }
-
     .form-row {
       margin: 0;
     }

styles/core/_util.scss

@@ -80,3 +80,9 @@
 p {
   max-width: 80ch;
 }
+
+hr {
+  border: 0;
+  border-bottom: 1px solid $color-gray-light;
+  margin: ($gap * 3) ($site-margins * -4);
+}

styles/elements/_panels.scss

@@ -119,11 +119,4 @@
   &__actions {
     @include panel-actions;
   }
-
-  hr,
-  &__break {
-    border: 0;
-    border-bottom: 1px solid $color-gray-light;
-    margin: ($gap * 4) ($site-margins * -4);
-  }
 }

styles/sections/_application_edit.scss

@@ -77,11 +77,6 @@
       }
     }
   }
-
-  hr {
-    border: none;
-    border-bottom: 1px solid $color-gray-lighter;
-  }
 }
 
 .environment-roles {

styles/sections/_home.scss

@@ -18,13 +18,6 @@
     margin-top: 0;
   }
 
-  hr {
-    border: 0;
-    border-bottom: 1px solid $color-gray-light;
-    margin-top: $gap * 4;
-    margin-bottom: $gap * 4;
-  }
-
   .links {
     justify-content: flex-start;
 

styles/sections/_reports.scss

@@ -8,7 +8,6 @@
   &__col {
     hr {
       margin: (2 * $gap) 0;
-      border-bottom: 1px solid $color-gray-lightest;
     }
 
     @include media($medium-screen) {

styles/sections/_task_order.scss

@@ -29,10 +29,8 @@
   }
 
   hr {
-    border: 0;
+    margin-left: auto;
-    margin-top: $gap * 4;
+    margin-right: auto;
-    margin-bottom: $gap * 4;
-    border-bottom: 1px solid $color-gray-lighter;
   }
 
   table {

templates/applications/new/step_1.html

@@ -31,7 +31,7 @@
               {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
             </div>
           </div>
-          <hr class="panel__break">
+          <hr>
           <div class="form-row">
             <div class="form-col form-col--two-thirds">
               {{ TextInput(form.description, paragraph=True, optional=True) }}

templates/applications/new/step_2.html

@@ -20,7 +20,7 @@
     <p>
       {{ 'portfolios.applications.new.step_2_description' | translate }}
     </p>
-    <hr class="panel__break">
+    <hr>
     <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
       <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
         <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>

templates/applications/new/step_3.html

@@ -15,7 +15,7 @@
     <p>
       {{ ('portfolios.applications.new.step_3_description' | translate) }}
     </p>
-    <hr class="panel__break">
+    <hr>
 
     {{ MemberManagementTemplate(
       application, 

templates/error.html

@@ -17,8 +17,8 @@
         {%- endif %}
       </p>
     </div>
-    <hr>
     <div class="panel__body">
+      <hr>
       <p>
         {{ "common.lorem" | translate }}
       </p>

templates/portfolios/new.html

@@ -11,7 +11,7 @@
   {% include "fragments/flash.html" %}
   <h1>New Portfolio Form</h1>
   <base-form inline-template>
-    <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
+    <form class="panel__content" id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
       {{ form.csrf_token }}
 
       {{ TextInput(form.name, optional=False) }}