feat(landing page): redefine color constants

widefix · Sep 7, 2023 · fb4f029 · fb4f029
1 parent ee9c348
commit fb4f029
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 48 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -14,36 +14,35 @@
  *= require_self
  */
 
- @import "bulma";
- @import "font-awesome";
+$text: hsl(270, 50%, 29%);
+$text-light: hsl(270, 50%, 48%);
+$text-strong: hsl(270, 50%, 21%);
 
+@import "bulma";
+@import "font-awesome";
 
- .navbar {
+.navbar {
   background-color: white;
- }
+}
 
- @media (max-width: 1024px) {
-    .reverse-columns {
-      flex-direction: column-reverse;
-      display: flex;
-    }
- }
+@media (max-width: 1024px) {
+  .stacked-elements {
+    flex-direction: column;
+    display: flex;
+  }
+}
 
 @media (min-width: 1408px) {
-  .ml-6-pmoney-fullhd  {
+  .ml-6-pmoney-fullhd {
     margin-left: 3rem !important;
   }
 }
 
-.is-pmoney-primary {
-  background-color: rgb(102, 51, 153);
-  color: white;
-}
-
-.is-pmoney-primary:hover {
-  color: white;
+.is-primary {
+  background-color: rgb(102, 51, 153) !important ;
+  color: rgb(102, 51, 153);
 }
 
-.has-text-pmoney-color {
-  color: rgb(102, 51, 153) !important;
+.is-light {
+  color: $text-light !important ;
 }
diff --git a/app/views/account_automatic_topup_configs/edit.html.slim b/app/views/account_automatic_topup_configs/edit.html.slim
@@ -6,4 +6,4 @@
         = f.text_field :amount, autofocus: true, class: "input", placeholder: "Weekly amount"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Update', class: "button is-pmoney-primary"
+        = f.submit 'Update', class: "button is-primary"
diff --git a/app/views/account_automatic_topup_configs/new.html.slim b/app/views/account_automatic_topup_configs/new.html.slim
@@ -6,4 +6,4 @@
         = f.text_field :amount, autofocus: true, class: "input", placeholder: "Weekly amount"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: "button is-pmoney-primary"
+        = f.submit 'Save', class: "button is-primary"
diff --git a/app/views/account_shares/new.html.slim b/app/views/account_shares/new.html.slim
@@ -12,4 +12,4 @@
       br
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_shares_path(account), class: 'button is-light'
-        = f.submit "Send invitation", class: 'button is-pmoney-primary'
+        = f.submit "Send invitation", class: 'button is-primary'
diff --git a/app/views/accounts/edit.html.slim b/app/views/accounts/edit.html.slim
@@ -13,4 +13,4 @@
       br
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: 'button is-pmoney-primary'
+        = f.submit 'Save', class: 'button is-primary'
diff --git a/app/views/accounts/new.html.slim b/app/views/accounts/new.html.slim
@@ -8,4 +8,4 @@
         br
         div.buttons.is-flex.is-justify-content-flex-end
           = link_to 'Back', my_account_path, class: 'button is-light'
-          = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
+          = f.submit 'Save', class: "button is-primary is-fullwidth"
diff --git a/app/views/devise/registrations/edit.html.slim b/app/views/devise/registrations/edit.html.slim
@@ -20,4 +20,4 @@
           | (we need your current password to confirm your changes)
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer.present? && request.referer != edit_user_registration_path ? request.referer : root_path, class: 'button is-light'
-        = f.submit "Update",  class: "button is-pmoney-primary"
+        = f.submit "Update",  class: "button is-primary"
diff --git a/app/views/devise/registrations/new.html.slim b/app/views/devise/registrations/new.html.slim
@@ -15,7 +15,7 @@
       br
       .actions.is-flex.is-flex-direction-column.is-align-items-end
       div.is-fullwidth
-        = f.submit 'Sign up',  class: "button is-pmoney-primary is-fullwidth"
+        = f.submit 'Sign up',  class: "button is-primary is-fullwidth"
       br
       .is-flex.is-justify-content-center
         | Already have an account? &nbsp;

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,18 +1,18 @@
-<section class="hero is-small is-white is-halfheight">
+<section class="hero is-small is-halfheight">
   <div class="hero-body">
     <div class="container">
-      <div class="columns is-vcentered reverse-columns">
+      <div class="columns is-vcentered stacked-elements">
         <div class="column
                     is-10-mobile is-offset-0-mobile
                     is-10-tablet is-offset-1-tablet
                     is-5-desktop is-offset-1-desktop
                     is-5-widescreen is-offset-1-widescreen
                     is-5-fullhd ml-6-pmoney-fullhd">
-          <h1 class="title titled is-1 mb-6 has-text-pmoney-color is-size-3-mobile">
+          <h1 class="title titled is-1 mb-6 is-size-3-mobile">
             Spend less on kids's toys and save the family budget
           </h1>
           <div class="buttons">
-            <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-pmoney-primary ' %>
+            <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
           </div>
         </div>
         <div class="column
@@ -30,10 +30,10 @@
   </div>
 </section>
 <% @pocket_money_reasons.each_slice(2) do |reason| %>
-  <section class="hero is-white is-halfheight">
+  <section class="hero is-halfheight">
     <div class="hero-body">
       <div class="container">
-        <div class="columns is-vcentered reverse-columns">
+        <div class="columns is-vcentered stacked-elements">
           <div class="column
                       is-10-mobile is-offset-1-mobile
                       is-10-tablet is-offset-1-tablet
@@ -50,29 +50,29 @@
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
                       is-5-fullhd is-offset-1-fullhd">
-            <h1 class="titled title is-2 mb-6 has-text-pmoney-color is-size-3-mobile">
+            <h1 class="titled title is-2 mb-6 is-size-3-mobile">
               <%= reason[0]['name']%>
             </h1>
-            <h2 class="subtitled subtitle has-text-pmoney-color">  <%= reason[0]['explanation']%></h2>
+            <h2 class="subtitled subtitle">  <%= reason[0]['explanation']%></h2>
           </div>
         </div>
       </div>
     </div>
   </section>
-  <section class="hero is-white is-halfheight">
+  <section class="hero is-halfheight">
     <div class="hero-body">
       <div class="container">
-        <div class="columns is-vcentered reverse-columns">
+        <div class="columns is-vcentered stacked-elements">
           <div class="column
                       is-10-mobile is-offset-1-mobile
                       is-10-tablet is-offset-1-tablet
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
                       is-5-fullhd is-offset-1-fullhd">
-            <h1 class="title titled is-2 mb-6 has-text-pmoney-color is-size-3-mobile">
+            <h1 class="title titled is-2 mb-6 is-size-3-mobile">
               <%= reason[1]['name']%>
             </h1>
-            <h2 class="subtitled subtitle has-text-pmoney-color">  <%= reason[1]['explanation']%></h2>
+            <h2 class="subtitled subtitle">  <%= reason[1]['explanation']%></h2>
           </div>
           <div class="column
                       is-10-mobile is-offset-1-mobile

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -30,7 +30,7 @@
               <div class="buttons">
                 <% if user_signed_in? %>
                   <div class="navbar-item has-dropdown is-hoverable">
-                    <a class="button is-pmoney-primary">
+                    <a class="button is-primary">
                       <span class="icon">
                         <i class="fa fa-user"></i>
                       </span>
@@ -42,7 +42,7 @@
                     </div>
                   </div>
                 <% else %>
-                  <%= link_to 'Sign up', new_user_registration_path, class: 'button is-pmoney-primary' %>
+                  <%= link_to 'Sign up', new_user_registration_path, class: 'button is-primary' %>
                   <%= link_to 'Log in', new_user_session_path, class: 'button is-light' %>
                 <% end %>
               </div>

diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
@@ -1,7 +1,7 @@
 .columns
   .column.is-flex.is-justify-content-flex-end
     - if account.children.present? || shared_accounts.present?
-      = link_to 'Add account', new_account_path, class: 'button is-pmoney-primary'
+      = link_to 'Add account', new_account_path, class: 'button is-primary'
 
 - if account.children.present? || shared_accounts.present?
   - account.children.each do |child|
@@ -66,4 +66,4 @@
               h1.title.titled.is-5.mb-6
                 p Welcome to our app!
                 p We invite you to embark on your journey by creating your first account
-              = link_to 'Add account', new_account_path, class: 'button is-pmoney-primary'
+              = link_to 'Add account', new_account_path, class: 'button is-primary'
diff --git a/app/views/objectives/new.html.slim b/app/views/objectives/new.html.slim
@@ -10,4 +10,4 @@
         = f.text_field :image_url, class: "input", placeholder: "Image URL"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', account_path(account), class: 'button is-light'
-        = f.submit 'Save', class: 'button is-pmoney-primary'
+        = f.submit 'Save', class: 'button is-primary'
diff --git a/app/views/public_account_shares/new.html.slim b/app/views/public_account_shares/new.html.slim
@@ -4,4 +4,4 @@
   p Create a new Public Account Share
 
 = form_with(url: account_public_account_shares_path, method: :post) do |form|
-  = form.submit 'Create', class: 'button is-pmoney-primary'
+  = form.submit 'Create', class: 'button is-primary'
diff --git a/app/views/spends/new.html.slim b/app/views/spends/new.html.slim
@@ -14,4 +14,4 @@
         = f.text_field :description, class: "input", placeholder: "Description"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer, class: 'button is-light'
-        = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
+        = f.submit 'Save', class: "button is-primary is-fullwidth"
diff --git a/app/views/topups/new.html.slim b/app/views/topups/new.html.slim
@@ -14,4 +14,4 @@
         = f.text_field :description, class: "input", placeholder: "Description"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer, class: 'button is-light'
-        = f.submit 'Save', class: "button is-pmoney-primary is-fullwidth"
+        = f.submit 'Save', class: "button is-primary is-fullwidth"
diff --git a/config/initializers/bulma_form_builder.rb b/config/initializers/bulma_form_builder.rb
@@ -78,7 +78,7 @@ def submit(value = nil, options = {})
 
   # Submit button with the primary colour for most forms
   def submit_primary(value = nil, options = {})
-    submit(value, merge_class(options, 'is-pmoney-primary'))
+    submit(value, merge_class(options, 'is-primary'))
   end
 
   private