Fixes #136 UI design mismatch fix bug (#138)

* team new user / edit user modal max margin fixed * adnew user input box design fix * new user invite employee selected by default * show hand icon when hover over role * minor fix * letter spacing in team page for header and invitation pending fixed * close button in new and edit modal radius and colour changed * close button backgroung color changed * moved placeholder to en.yml * added background hover effect to edit and delete icon * removed extra code * changed placeholder in en.yml
saeloun · Feb 9, 2022 · 093cbb8 · 093cbb8
1 parent f5daf50
commit 093cbb8
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 32 deletions.
diff --git a/app/models/user.rb b/app/models/user.rb
@@ -77,9 +77,4 @@ def full_name
   def admin?
     self.has_role?(:admin) || self.has_role?(:owner)
   end
-
-  # # check whether the user present is in active state or not
-  # def active_for_authentication?
-  #   super and self.active?
-  # end
 end
diff --git a/app/views/devise/invitations/_new.html.erb b/app/views/devise/invitations/_new.html.erb
@@ -4,7 +4,7 @@
   <div class="mt-4">
     <div class="field">
       <div class="field_with_errors">
-        <label class="tracking-wider block text-xs font-semibold text-miru-dark-purple-1000"><%= t('team.form_name') %></label>
+        <label class="tracking-wider block text-xs font-normal text-miru-dark-purple-1000"><%= t('team.form_name') %></label>
         <%=
           if f.object.errors.include?(:first_name)
             error_message_on(f.object, :first_name)
@@ -15,10 +15,10 @@
       </div>
       <div class="mt-1 flex -space-x-px">
         <div class="mr-4 w-1/2 flex-1 min-w-0">
-          <%= f.text_field :first_name, class: "#{error_message_class(f.object, :first_name)}" %>
+          <%= f.text_field :first_name, placeholder: t('team.first_name'),  class: "rounded tracking-wider appearance-none border block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-medium text-sm text-miru-dark-purple-1000 focus:outline-none sm:text-base #{error_message_class(f.object, :first_name)}" %>
         </div>
         <div class="w-1/2 flex-1 min-w-0">
-          <%= f.text_field :last_name, class: "#{error_message_class(f.object, :last_name)}" %>
+          <%= f.text_field :last_name, placeholder: t('team.last_name'), class: "rounded tracking-wider appearance-none border block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-medium text-sm text-miru-dark-purple-1000 focus:outline-none sm:text-base #{error_message_class(f.object, :last_name)}" %>
         </div>
       </div>
     </div>
@@ -27,33 +27,33 @@
     <div class="mt-4">
       <div class="field">
         <div class="field_with_errors">
-          <label class="tracking-wider block text-xs font-semibold text-miru-dark-purple-1000">
+          <label class="tracking-wider block text-xs font-normal text-miru-dark-purple-1000">
             <%= t('team.form_email') %>
           </label>
           <%= error_message_on(f.object, field) %>
         </div>
         <div class="mt-1">
-          <%= f.text_field field, class: "#{error_message_class(f.object, field)}" %>
+          <%= f.text_field field, placeholder: t('team.email'), class: "rounded tracking-wider appearance-none border block w-full px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-medium text-sm text-miru-dark-purple-1000 focus:outline-none sm:text-base #{error_message_class(f.object, field)}" %>
         </div>
       </div>
     </div>
   <% end -%>
 
   <div class="mt-4">
     <div class="field">
-      <label class="tracking-wider block text-xs font-semibold text-miru-dark-purple-1000"><%= t('team.form_role') %></label>
+      <label class="tracking-wider block text-xs font-normal text-miru-dark-purple-1000"><%= t('team.form_role') %></label>
       <div class="mt-1">
         <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
           <div class="flex items-center">
-            <%= f.radio_button :roles, 'Admin', class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000" %>
-            <label for="admin" class="ml-3 block text-sm  font-semibold text-miru-dark-purple-1000">
+            <%= f.radio_button :roles, 'Admin', class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" %>
+            <label for="admin" class="ml-3 block text-sm font-medium text-miru-dark-purple-1000">
               <%= t('team.form_admin') %>
             </label>
           </div>
 
           <div class="flex items-center">
-            <%= f.radio_button :roles, 'Employee', class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000" %>
-            <label for="Employee" class="ml-3 block text-sm  font-semibold text-miru-dark-purple-1000">
+            <%= f.radio_button :roles, 'Employee', :checked=>true , class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" %>
+            <label for="Employee" class="ml-3 block text-sm font-medium text-miru-dark-purple-1000">
               <%= t('team.form_employee') %>
             </label>
           </div>

diff --git a/app/views/team/_form.html.erb b/app/views/team/_form.html.erb
@@ -29,15 +29,15 @@
       <div class="mt-1">
         <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
           <div class="flex items-center">
-            <%= f.radio_button :roles, "admin", :checked=>(@user.primary_role.titlecase == "Admin"), class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000" %>
+            <%= f.radio_button :roles, "admin", :checked=>(@user.primary_role.titlecase == "Admin"), class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" %>
             <label for="admin" class="ml-3 block text-sm font-medium text-miru-dark-purple-1000">
               <%= t('team.form_admin') %>
             </label>
           </div>
 
           <div class="flex items-center">
-            <%= f.radio_button :roles, "employee", :checked=>(@user.primary_role.titlecase == "Employee"), class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000" %>
-            <label for="Employee" class="ml-3 block text-sm  font-medium text-miru-dark-purple-1000">
+            <%= f.radio_button :roles, "employee", :checked=>(@user.primary_role.titlecase == "Employee"), class: "focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000 cursor-pointer" %>
+            <label for="Employee" class="ml-3 block text-sm font-medium text-miru-dark-purple-1000">
               <%= t('team.form_employee') %>
             </label>
           </div>

diff --git a/app/views/team/_team.html.erb b/app/views/team/_team.html.erb
@@ -22,13 +22,13 @@
 <td id="pending-<%= member.id %>" class="px-3 py-3 whitespace-nowrap">
   <% if current_user.has_any_role?(:owner, :admin) %>
     <% if member.unconfirmed_email? %>
-      <span class="px-2 inline-flex text-xs leading-5 tracking-wider font-semibold rounded-full bg-miru-han-purple-100 text-miru-han-purple-1000">
+      <span class="px-2 inline-flex text-xs leading-5 tracking-widest font-semibold rounded-full bg-miru-han-purple-100 text-miru-han-purple-1000">
         <%= t('team.reconfirmation') %>
       </span>
     <% else %>
       <% unless member.invitation_accepted? %>
         <% if (member.id != current_user.id) %>
-          <span class="px-2 inline-flex text-xs leading-5 tracking-wider font-semibold rounded-full bg-miru-han-purple-100 text-miru-han-purple-1000">
+          <span class="px-2 inline-flex text-xs leading-5 tracking-widest font-semibold rounded-full bg-miru-han-purple-100 text-miru-han-purple-1000">
             <%= t('team.invitation') %>
           </span>
         <% end %>
@@ -39,12 +39,14 @@
 <td id="full_name-<%= member.id %>" class="px-3 py-3 whitespace-nowrap text-right text-sm font-medium">
   <% if current_user.has_any_role?(:owner, :admin) %>
     <%= link_to edit_team_path(member), remote: true do %>
-      <img id="mid-<%= member.id %>" class="bottom h-6 w-6" src="<%= image_url 'edit_image_button.svg' %>" onclick="openModal('another-modal')">
+      <img id="mid-<%= member.id %>" class="bottom h-6 w-6p-2 rounded hover:bg-opacity-20 hover:bg-miru-gray-1000" src="<%= image_url 'edit_image_button.svg' %>" onclick="openModal('another-modal')">
     <% end %>
   <% end %>
 </td>
 <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
   <% if current_user.has_any_role?(:owner, :admin) %>
-    <%= link_to image_tag("#{image_url 'delete_image_button.svg'}", class:" h-6 w-6"),team_path(member), method: :delete, class: ""%>
+    <%= link_to team_path(member), method: :delete do %>
+      <img class="bottom h-6 w-6p-2 rounded hover:bg-opacity-20 hover:bg-miru-gray-1000" src="<%= image_url 'delete_image_button.svg' %>">
+    <% end %>
   <% end %>
 </td>
diff --git a/app/views/team/index.html.erb b/app/views/team/index.html.erb
@@ -35,19 +35,19 @@
                 <table class="min-w-full divide-y divide-gray-200 mt-4">
                   <thead class="">
                     <tr>
-                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-wider">
+                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-widest">
                         <%= t('team.profile_picture') %>
                       </th>
-                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-wider">
+                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-widest">
                         <%= t('team.name') %>
                       </th>
-                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-wider">
+                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-widest">
                         <%= t('team.email_id') %>
                       </th>
-                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-wider">
+                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-widest">
                         <%= t('team.role') %>
                       </th>
-                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-wider">
+                      <th scope="col" class="px-3 py-5 text-left text-xs font-normal text-miru-dark-purple-600 tracking-widest">
 
                       </th>
                       <th scope="col" class="relative px-3 py-5">
@@ -71,12 +71,12 @@
 
       <!--Modal 1-->
       <div class="px-5 main-modal fixed w-full inset-0 z-50 overflow-hidden flex justify-center items-center animated fadeIn faster" style="background-color: rgba(29, 26, 49,0.6)">
-        <div class="shadow-lg modal-container bg-white w-full sm:w-4/12 md:max-w-11/12 mx-auto rounded-xl shadow-lg z-50 overflow-y-auto">
+        <div class="shadow-lg modal-container bg-white w-full sm:max-w-md mx-auto rounded-xl shadow-lg z-50 overflow-y-auto">
           <div class="modal-content py-4 text-left px-3">
             <div class="flex justify-between items-center mx-3">
               <h6 class="text-base font-extrabold"><%= t('team.create_new_user') %></h6>
               <div class="modal-close cursor-pointer z-50" onclick="modalClose('main-modal')">
-                <img src="<%= image_url 'close_button.svg' %>">
+                <img src="<%= image_url 'close_button.svg' %>" class="p-2 rounded hover:bg-opacity-20 hover:bg-miru-gray-1000">
               </div>
             </div>
             <div class="mb-3 mx-3 flex justify-center">
@@ -89,12 +89,12 @@
 
       <!--Modal 2-->
         <div class="px-5 another-modal fixed w-full inset-0 z-50 overflow-hidden flex justify-center items-center animated fadeIn faster" style="background-color: rgba(29, 26, 49,0.6)">
-          <div class="shadow-lg modal-container bg-white w-full sm:w-4/12 md:max-w-11/12 mx-auto rounded-xl shadow-lg z-50 overflow-y-auto">
+          <div class="shadow-lg modal-container bg-white w-full sm:max-w-md mx-auto rounded-xl shadow-lg z-50 overflow-y-auto">
             <div class="modal-content py-4 text-left px-3">
-              <div class="mx-3 flex justify-between items-center">
+              <div class="flex justify-between items-center mx-3">
                 <h6 class="text-base font-extrabold"><%= t('team.update_user') %></h6>
                 <div class="modal-close cursor-pointer z-50 ml-" onclick="modalClose('another-modal')">
-                  <img src="<%= image_url 'close_button.svg', class: "" %>" class="p-1 rounded-full	border-2 border-miru-white-1000 hover:border-miru-han-purple-1000">
+                  <img src="<%= image_url 'close_button.svg' %>" class="p-2 rounded hover:bg-opacity-20 hover:bg-miru-gray-1000">
                 </div>
               </div>
               <div id="team-modal" class="mb-3 mx-3 flex justify-center">

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -71,3 +71,6 @@ en:
     form_role: Role
     form_admin: Admin
     form_employee: Employee
+    first_name: First Name
+    last_name: Last Name
+    email: Email