Merge pull request #58 from wahanegi/PC-82

PC-82: Develop the Form Component for Customer Info page

Author: Maryna-Harasko

Gemfile

@@ -6,15 +6,16 @@ gem "activeadmin", "~> 3.3.0"                                       # A framewor
 # gem "bcrypt", "~> 3.1"                                            # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
 gem "bootsnap", '~> 1.18.4', require: false                         # Reduces boot times through caching; required in config/boot.rb
 gem "cssbundling-rails", '~> 1.4.3'                                 # Bundle and process CSS [https://github.com/rails/cssbundling-rails]
-# gem "image_processing", "~> 1.2"                                  # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 gem "devise", "~> 4.9.4"                                            # Authentication
+gem "image_processing", "~> 1.2"                                    # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 gem "jbuilder", '~> 2.13.0'                                         # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jsbundling-rails", '~> 1.3.1'                                  # Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
 gem "jsonapi-serializer", "~> 2.2.0"                                # Fast, simple and easy to use JSON:API serialization library (also known as fast_jsonapi).
 gem "kamal", '~> 2.5.3', require: false                             # Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
 gem "pg", "~> 1.5.9"                                                # Use postgresql as the database for Active Record
 gem "puma", "~> 6.6.0"                                              # Use the Puma web server [https://github.com/puma/puma]
 gem "rails", "~> 8.0.2"                                             # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
+gem "ruby-vips", "~> 2.2"                                           # Ruby extension for the libvips image processing library.
 gem 'sass-rails', '~> 6.0.0'                                        # Ruby on Rails stylesheet engine for Sass
 gem "solid_cable", '~> 3.0.7'                                       # Use the database-backed adapters for Action Cable
 gem "solid_cache", '~> 1.0.7'                                       # Use the database-backed adapters for Rails.cache

Gemfile.lock

@@ -165,6 +165,9 @@ GEM
       activesupport (>= 5.2)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
+    image_processing (1.14.0)
+      mini_magick (>= 4.9.5, < 6)
+      ruby-vips (>= 2.0.17, < 3)
     inherited_resources (1.14.0)
       actionpack (>= 6.0)
       has_scope (>= 0.6)
@@ -229,6 +232,9 @@ GEM
       net-pop
       net-smtp
     marcel (1.0.4)
+    mini_magick (5.2.0)
+      benchmark
+      logger
     mini_mime (1.1.5)
     minitest (5.25.5)
     msgpack (1.8.0)
@@ -370,6 +376,9 @@ GEM
       rubocop (~> 1.72, >= 1.72.1)
       rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
+    ruby-vips (2.2.3)
+      ffi (~> 1.12)
+      logger
     ruby2_keywords (0.0.5)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
@@ -449,6 +458,7 @@ GEM
     zeitwerk (2.7.2)
 
 PLATFORMS
+  arm64-darwin-23
   arm64-darwin-24
   x86_64-darwin-24
   x86_64-linux
@@ -465,6 +475,7 @@ DEPENDENCIES
   dotenv
   factory_bot_rails
   faker
+  image_processing (~> 1.2)
   jbuilder (~> 2.13.0)
   jsbundling-rails (~> 1.3.1)
   jsonapi-serializer (~> 2.2.0)
@@ -478,6 +489,7 @@ DEPENDENCIES
   rubocop
   rubocop-rails
   rubocop-rspec_rails
+  ruby-vips (~> 2.2)
   sass-rails (~> 6.0.0)
   shoulda-matchers
   solid_cable (~> 3.0.7)

app/assets/images/icons/arrow-down.svg

@@ -22,4 +22,7 @@ $utilities: map-merge(
 @import 'application/buttons';
 @import 'application/customer_info';
 @import 'application/layout';
-@import 'application/login_page';
+@import 'application/login_page';
+@import 'application/customer_form.scss';
+@import 'application/input.scss';
+@import 'application/header';

app/assets/images/icons/arrow-up.svg

@@ -15,8 +15,8 @@
     }
 
     &:disabled {
-      border-color: $gray-disable !important;
-      color: $text-gray-disable !important;
+      border-color: $secondary!important;
+      color: $secondary!important;
       background: $white !important;
     }
   }

app/assets/images/icons/cross.svg

@@ -0,0 +1,27 @@
+.customer-form {
+  max-width: 1120px;
+  padding: 31px;
+}
+
+.image-placeholder {
+  max-width: 136px;
+  width: 136px;
+
+  label:hover {
+    cursor: pointer;
+  }
+}
+
+.client-input {
+  max-width: 615px;
+}
+
+.title-input {
+  max-width: 241px;
+}
+
+@media (max-width: 575px) {
+  .title-input {
+    max-width: 100%;
+  }
+}