Changing the govuk grid to USWDS

app/templates/views/organizations/add-organization.html

@@ -14,11 +14,11 @@
       <a href="{{ url_for('main.choose_account') }}" class="usa-link navigation-service usa-breadcrumb-switch">Switch service</a>
     </div>
 
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
+    <div class="grid-row">
+      <div class="grid-col-3">
         &nbsp;
       </div>
-      <div class="govuk-grid-column-three-quarters">
+      <div class="grid-col-9">
         <main class="govuk-main-wrapper column-main govuk-!-padding-top-0 govuk-!-padding-bottom-0" id="main-content" role="main" >
           {% block beforeContent %}{% endblock %}
           {% block content %}

app/templates/views/organizations/organization/index.html

@@ -16,8 +16,8 @@
     {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
   </div>
 
-  <div class="govuk-grid-row bottom-gutter">
-    <div class="govuk-grid-column-one-half">
+  <div class="grid-row bottom-gutter">
+    <div class="grid-col-6">
       <h2 class="heading-small">Emails</h2>
       <div class="keyline-block">
         {{ big_number(
@@ -27,7 +27,7 @@
         ) }}
       </div>
     </div>
-    <div class="govuk-grid-column-one-half">
+    <div class="grid-col-6">
       <h2 class="heading-small">Text messages</h2>
       <div class="keyline-block">
         {{ big_number(
@@ -58,15 +58,15 @@
       <h3 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-3 govuk-!-margin-top-1 live-search-relevant">
         <a href="{{ url_for('main.usage', service_id=service.service_id) }}" class="usa-link browse-list-link">{{ service.service_name  }}</a>
       </h3>
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-half">
+      <div class="grid-row">
+        <div class="grid-col-6">
           {{ big_number(
             service.emails_sent,
             label=service.emails_sent|message_count_label('email'),
             smallest=True
           ) }}
         </div>
-        <div class="govuk-grid-column-one-half">
+        <div class="grid-col-6">
           {% if service.sms_cost %}
             {{ big_number(
               service.sms_cost,

app/templates/views/organizations/organization/settings/edit-domains.html

@@ -15,8 +15,8 @@
 
 {% block maincolumn_content %}
   {{ page_header("Known email domains") }}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-five-sixths">
+  <div class="grid-row">
+    <div class="grid-col-10">
       <p>
         If a user’s email addresses ends with one of these domains then
         any services they create will be associated with this organization.

app/templates/views/organizations/organization/settings/edit-go-live-notes.html

@@ -15,8 +15,8 @@
 
 {% block maincolumn_content %}
   {{ page_header("Edit request to go live notes") }}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-five-sixths">
+  <div class="grid-row">
+    <div class="grid-col-10">
       <p>
         Text entered here will be displayed in the Zendesk ticket when a service
         belonging to this organization requests to go live.

app/templates/views/organizations/organization/settings/preview-email-branding.html

@@ -10,8 +10,8 @@
 {% block maincolumn_content %}
 
   <h1 class="font-body-2xl margin-bottom-3">Preview email branding</h1>
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-full">
+  <div class="grid-row">
+    <div class="grid-col-12">
       {{ email_branding_preview(form.branding_style.data) }}
       {% call form_wrapper(action=action) %}
         <div class="form-group">

app/templates/views/organizations/organization/settings/set-email-branding.html

@@ -19,12 +19,12 @@
 
   {{ page_header(page_title) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full preview-pane">
+    <div class="grid-row">
+      <div class="grid-col-12 preview-pane">
       </div>
     </div>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
+    <div class="grid-row">
+      <div class="grid-col-12">
         {{ live_search(
           target_selector='.govuk-radios__item',
           show=True,

app/templates/views/organizations/organization/users/index.html

@@ -32,8 +32,8 @@
   <div class="user-list">
     {% for user in users %}
       <div class="user-list-item">
-        <div class="govuk-grid-row">
-          <div class="govuk-grid-column-three-quarters">
+        <div class="grid-row">
+          <div class="grid-col-9">
             <h2 class="user-list-item-heading">
               {%- if user.name -%}
                 <span class="heading-small">{{ user.name }}</span>&ensp;
@@ -51,7 +51,7 @@
               </span>
             </h2>
           </div>
-          <div class="govuk-grid-column-one-quarter">
+          <div class="grid-col-3">
             {% if user.status == 'pending' %}
               <a class="usa-link user-list-edit-link" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
             {% elif user.status != 'cancelled' %}