Merge pull request #550 from debtcollective/development

feat: update subscription functions and credit card modal

app/assets/stylesheets/_forms.scss

@@ -32,20 +32,18 @@
   background-color: #fefde5 !important;
 }
 
-.profile-container,
-.edit-card,
-.edit-status {
-  input,
-  .react-date-picker__wrapper,
-  textarea,
-  select,
-  #stripe-elements {
+.profile-container {
+  // , .edit-card {
+  input input {
+    border: none;
+    border-radius: 0;
+  }
+  .react-date-picker__wrapper {
     background: rgba(91, 203, 181, 0.1);
     border: 1px solid #219653;
     box-sizing: border-box;
     border-radius: 6px;
     input {
-      // background: rgba(91, 203, 181, 0.1);
       border: none;
       border-radius: 0;
     }
@@ -54,12 +52,4 @@
     width: 68%;
     min-width: 150px;
   }
-  .submit-btn-container input,
-  button.submit-btn,
-  .pause-membership-btn,
-  .resume-membership-btn {
-    background: #24ba9d;
-    border: solid 1px transparent;
-    border-radius: 8px;
-  }
 }

app/assets/stylesheets/application.scss

@@ -114,3 +114,9 @@ p {
 ul {
   line-height: 2;
 }
+
+select option {
+  background: #ffffff;
+  color: #000000;
+  font-family: 'Libre Franklin', sans-serif !important;
+}

app/assets/stylesheets/base/button.scss

@@ -61,3 +61,10 @@ button:not(:disabled) {
     width: 100%;
   }
 }
+
+.btn-green {
+  background: #24ba9d;
+  border: solid 1px transparent;
+  border-radius: 8px;
+  color: #ffffff;
+}

app/assets/stylesheets/base/input.scss

@@ -0,0 +1,7 @@
+.input-green,
+input[type='text'] {
+  background: rgba(91, 203, 181, 0.1);
+  border: 1px solid #219653;
+  box-sizing: border-box;
+  border-radius: 6px;
+}

app/assets/stylesheets/membership.scss

@@ -1,23 +1,15 @@
-.membership,
-.membership-edit-amount {
-  .subscription-amount,
-  input {
-    background: rgba(91, 203, 181, 0.1);
-    border: 1px solid #219653;
-    box-sizing: border-box;
-    border-radius: 6px;
-  }
-  .update-cc-link,
-  .change-amount-link,
-  .update-status-link,
-  .edit-amount-button {
-    background: #24ba9d;
-    border: solid 1px transparent;
-    border-radius: 8px;
-  }
-}
-
-.membership h3 {
-  // font-size: 4rem;
-  // line-height: 1;
+.membership
+// , .membership-edit-amount
+{
+  // .subscription-amount {
+  //   background: rgba(91, 203, 181, 0.1);
+  //   border: 1px solid #219653;
+  //   // box-sizing: border-box;
+  //   border-radius: 6px;
+  // }
+  // .update-status {
+  //   background: #24ba9d;
+  //   border: solid 1px transparent;
+  //   border-radius: 8px;
+  // }
 }

app/components/address_field_component.html.erb

@@ -3,25 +3,25 @@
   <div class="mt-1 rounded-md shadow-sm">
     <div class="my-4">
       <%= f.label :address_line1, class: "sr-only" %>
-      <%= f.text_field :address_line1, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none rounded-t-md bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "Street" %>
+      <%= f.text_field :address_line1, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "Street" %>
     </div>
     <div class="my-4">
       <%= f.label :address_city, class: "sr-only" %>
-      <%= f.text_field :address_city, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "City" %>
+      <%= f.text_field :address_city, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "City" %>
     </div>
     <div class="flex my-4">
       <div class="w-full mr-2">
         <%= f.label :address_state, class: "sr-only" %>
-        <%= f.text_field :address_state, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "State" %>
+        <%= f.text_field :address_state, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "State" %>
       </div>
       <div class="w-full ml-2">
         <%= f.label :address_zip, class: "sr-only" %>
-        <%= f.text_field :address_zip, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300 border-l-0", placeholder: "Postal code" %>
+        <%= f.text_field :address_zip, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "Postal code" %>
       </div>
     </div>
     <div class="my-4">
       <%= f.label :address_country_code, class: "sr-only" %>
-      <%= f.country_select(:address_country_code, {priority_countries: ['US', 'CA'], include_blank: "Select country"}, {class: 'focus:ring-lilac focus:border-lilac relative block w-full rounded-none rounded-b-md bg-transparent focus:z-10 sm:text-sm border-gray-300', id: 'address-country-code-select', required: true}) %>
+      <%= f.country_select(:address_country_code, {priority_countries: ['US', 'CA'], include_blank: "Select country"}, {class: 'input-green focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm', id: 'address-country-code-select', required: true}) %>
     </div>
   </div>
 </fieldset>

app/components/select_component.html.erb

@@ -1,4 +1,4 @@
 <div>
   <%= f.label name, class: "block text-sm font-medium text-gray-700" %>
-  <%= f.select name, options, {include_blank: include_blank}, class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-lilac focus:border-lilac sm:text-sm rounded-md" %>
+  <%= f.select name, options, {include_blank: include_blank}, class: "input-green mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-lilac focus:border-lilac sm:text-sm rounded-md" %>
 </div>

app/components/text_area_component.rb

@@ -9,8 +9,8 @@ def initialize(name:, form:)
   end
 
   def input_classes
-    classes = "block w-full sm:text-sm"
-    normal_classes = "border-gray-300 rounded-md shadow-sm focus:ring-lilac focus:border-lilac"
+    classes = "input-green block w-full sm:text-sm"
+    normal_classes = "shadow-sm focus:ring-lilac focus:border-lilac"
     error_classes = "pr-10 text-red-900 placeholder-red-300 border-red-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500"
 
     if errors

app/components/text_field_component.rb

@@ -10,7 +10,7 @@ def initialize(name:, form:)
 
   def input_classes
     classes = "block w-full sm:text-sm"
-    normal_classes = "border-gray-300 rounded-md shadow-sm focus:ring-lilac focus:border-lilac"
+    normal_classes = "shadow-sm focus:ring-lilac focus:border-lilac"
     error_classes = "pr-10 text-red-900 placeholder-red-300 border-red-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500"
 
     if errors

app/controllers/memberships_controller.rb

@@ -24,7 +24,7 @@ def update_amount
         format.html do
           flash[:error] = "There were errors updating your membership"
 
-          render :edit_amount
+          render :index
         end
       end
     end

app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 const BillingAddressField = ({ countryOptions = [] }) => {
   return (
-    <fieldset className='mt-2 bg-white'>
-      <legend className='block text-sm font-medium text-gray-700'>
+    <fieldset>
+      <legend className='block text-sm font-medium text-gray-700 -mb-3'>
         Address
       </legend>
-      <div className='mt-1 rounded-md shadow-sm'>
+      <div className='shadow-sm'>
         <div className='my-4'>
           <label htmlFor='address_line1' className='sr-only'>
             Street
@@ -16,7 +16,7 @@ const BillingAddressField = ({ countryOptions = [] }) => {
             name='membership[address_line1]'
             id='address_line1'
             placeholder='Street'
-            className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac rounded-t-md focus:z-10 sm:text-sm'
+            className='relative block w-full focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm'
             required
           />
         </div>
@@ -29,7 +29,7 @@ const BillingAddressField = ({ countryOptions = [] }) => {
             name='membership[address_city]'
             id='address_city'
             placeholder='City'
-            className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm'
+            className='relative block w-full focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm'
             required
           />
         </div>
@@ -43,7 +43,7 @@ const BillingAddressField = ({ countryOptions = [] }) => {
               name='membership[address_state]'
               id='address_state'
               placeholder='State'
-              className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm'
+              className='relative block w-full focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm'
               required
             />
           </div>
@@ -65,7 +65,7 @@ const BillingAddressField = ({ countryOptions = [] }) => {
           <select
             name='membership[address_country_code]'
             defaultValue=''
-            className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac rounded-b-md focus:z-10 sm:text-sm'
+            className='input-green relative block w-full focus:ring-lilac focus:border-lilac rounded-b-md focus:z-10 sm:text-sm'
             required
           >
             <option value='' disabled hidden>