fix styling issues + rename proof of identity

app/frontend/src/javascript/components/base/fab-input.tsx

@@ -6,7 +6,7 @@ type inputType = string|number|readonly string [];
 interface FabInputProps {
   id: string,
   onChange?: (value: inputType, validity?: ValidityState) => void,
-  defaultValue: inputType,
+  defaultValue?: inputType,
   icon?: ReactNode,
   addOn?: ReactNode,
   addOnClassName?: string,

app/frontend/src/javascript/components/base/fab-panel.tsx

@@ -20,7 +20,9 @@ export const FabPanel: React.FC<FabPanelProps> = ({ className, header, size, chi
           {children}
         </div>
       </div>}
-      {!header && children}
+      {!header && <div className="no-header">
+        {children}
+      </div>}
     </div>
   );
 };

app/frontend/src/javascript/components/supporting-documents/supporting-documents-files.tsx

@@ -13,6 +13,7 @@ import ProofOfIdentityFileAPI from '../../api/proof-of-identity-file';
 import { IFablab } from '../../models/fablab';
 import { FabAlert } from '../base/fab-alert';
 import { FabPanel } from '../base/fab-panel';
+import { FabButton } from '../base/fab-button';
 
 declare let Fablab: IFablab;
 
@@ -186,9 +187,9 @@ export const SupportingDocumentsFiles: React.FC<SupportingDocumentsFilesProps> =
         })}
       </div>
       {hasProofOfIdentityTypes() && (
-        <button type="button" className="save-btn" onClick={onFileUpload} disabled={errors.length > 0}>
+        <FabButton className="save-btn" onClick={onFileUpload} disabled={errors.length > 0}>
           {t('app.logged.dashboard.supporting_documents_files.save')}
-        </button>
+        </FabButton>
       )}
     </FabPanel>
   );

app/frontend/src/javascript/components/supporting-documents/supporting-documents-types-list.tsx

@@ -196,12 +196,10 @@ const SupportingDocumentsTypesList: React.FC<SupportingDocumentsTypesListProps>
       <div className="types-list">
         <div className="groups">
           <p>{t('app.admin.settings.account.supporting_documents_types_list.supporting_documents_type_info')}</p>
-          <div className="no-groups">
-            <FabAlert level="warning">
-              <HtmlTranslate trKey="app.admin.settings.account.supporting_documents_types_list.no_groups_info" />
-            </FabAlert>
+          <FabAlert level="warning">
+            <HtmlTranslate trKey="app.admin.settings.account.supporting_documents_types_list.no_groups_info" />
             <FabButton onClick={addGroup}>{t('app.admin.settings.account.supporting_documents_types_list.create_groups')}</FabButton>
-          </div>
+          </FabAlert>
         </div>
 
         <div className="title">

app/frontend/src/stylesheets/modules/base/fab-panel.scss

@@ -1,19 +1,18 @@
 .fab-panel {
-  background-color: #f4f3f3;
+  background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   margin: 30px;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
   position: relative;
   display: block;
   border-spacing: 0;
 
   .panel-header {
-    padding: 10px 15px;
-    border-bottom: 1px solid transparent;
+    background-color: #f4f3f3;
+    padding: 18px 15px;
+    border-bottom: 1px solid #ddd;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
 
@@ -25,12 +24,16 @@
   .panel-content {
     padding: 15px;
   }
+
+  .no-header {
+    padding: 15px;
+    background-color: #f4f3f3;
+  }
 }
 
-
-@media (min-width: 1200px) {
+@media (min-width: 768px) {
   .fab-panel {
-    width: 58.3333333333%;
+    width: 100%;
     float: left;
   }
 }
@@ -42,9 +45,10 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   .fab-panel {
-    width: 100%;
+    width: 75%;
     float: left;
   }
 }
+

app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-files.scss

@@ -32,11 +32,28 @@
       .filename-container {
         align-items: center;
         display: inline-flex;
+        float: left;
+        margin-bottom: 0;
+        position: relative;
+        width: 100%;
+        z-index: 2;
+        background-color: #fff;
+        background-image: none;
+        border: 1px solid #c4c4c4;
+        border-radius: 4px;
+        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+        height: 38px;
+        padding: 6px 12px;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        color: #555;
+        font-size: 16px;
+        line-height: 1.5;
 
         .fileinput-filename {
           vertical-align: bottom;
           display: inline-block;
           overflow: hidden;
+          margin-left: 10px;
         }
 
         .file-download {
@@ -68,6 +85,24 @@
         background-image: none;
         touch-action: manipulation;
         overflow: hidden;
+        cursor: pointer;
+        border-collapse: separate;
+        border-spacing: 0;
+
+        input[type=file] {
+          display: block;
+          cursor: pointer;
+          direction: ltr;
+          filter: alpha(opacity=0);
+          font-size: 23px;
+          height: 100%;
+          margin: 0;
+          opacity: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 100%;
+        }
       }
     }
 

app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-types-list.scss

@@ -1,5 +1,6 @@
 .supporting-documents-types-list {
-  margin-top: 20px;
+  margin: 20px 0 30px;
+  width: 100%;
 
   .panel-header span {
     font-weight: 600;
@@ -14,19 +15,23 @@
         margin-left: 15px;
         margin-right: 15px;
       }
-      .no-groups {
+      .fab-alert {
         display: flex;
         flex-direction: row;
-        .fab-alert {
+        justify-content: space-between;
+        span {
           margin-left: 20px;
           margin-right: 20px;
           width: 66.66666666666666%;
         }
+
         .fab-button {
           margin-top: 15px;
           margin-right: 20px;
-          color: #000;
           max-width: 200px;
+          background-color: var(--secondary-dark);
+          border-color: var(--secondary-dark);
+          color: var(--secondary-text-color);
         }
       }
     }
@@ -34,6 +39,7 @@
     .title {
       display: flex;
       flex-direction: row;
+      justify-content: space-between;
 
       h3 {
         margin-left: 15px;
@@ -42,6 +48,9 @@
       .fab-button {
         margin-top: 15px;
         margin-right: 20px;
+        background-color: var(--secondary-dark);
+        border-color: var(--secondary-dark);
+        color: var(--secondary-text-color);
       }
     }
 

app/frontend/templates/dashboard/nav.html

@@ -12,7 +12,7 @@
         <ul class="nav-page nav nav-pills text-u-c text-sm">
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.profile" translate>{{ 'app.public.common.my_profile' }}</a></li>
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.settings" translate>{{ 'app.public.common.my_settings' }}</a></li>
-          <li ng-if="!isAuthorized(['admin', 'manager']) && hasProofOfIdentityTypes" ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.proof_of_identity_files" translate>{{ 'app.public.common.my_proof_of_identity_files' }}</a></li>
+          <li ng-if="!isAuthorized(['admin', 'manager']) && hasProofOfIdentityTypes" ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.proof_of_identity_files" translate>{{ 'app.public.common.my_supporting_documents_files' }}</a></li>
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.projects" translate>{{ 'app.public.common.my_projects' }}</a></li>
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.trainings" translate>{{ 'app.public.common.my_trainings' }}</a></li>
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.events" translate>{{ 'app.public.common.my_events' }}</a></li>

app/frontend/templates/shared/header.html.erb

@@ -41,7 +41,7 @@
       <ul uib-dropdown-menu class="animated fadeInRight">
         <li><a ui-sref="app.logged.dashboard.profile" translate>{{ 'app.public.common.my_profile' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.settings" translate>{{ 'app.public.common.my_settings' }}</a></li>
-        <li ng-if="!isAuthorized(['admin', 'manager']) && hasProofOfIdentityTypes"><a ui-sref="app.logged.dashboard.proof_of_identity_files" translate>{{ 'app.public.common.my_proof_of_identity_files' }}</a></li>
+        <li ng-if="!isAuthorized(['admin', 'manager']) && hasProofOfIdentityTypes"><a ui-sref="app.logged.dashboard.proof_of_identity_files" translate>{{ 'app.public.common.my_supporting_documents_files' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.projects" translate>{{ 'app.public.common.my_projects' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.trainings" translate>{{ 'app.public.common.my_trainings' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.events" translate>{{ 'app.public.common.my_events' }}</a></li>

app/frontend/templates/shared/signupModal.html

@@ -197,7 +197,7 @@
         <div class="alert alert-warning" ng-show="hasProofOfIdentityTypes(user.group_id)">
           <p class="text-sm">
             <i class="fa fa-warning"></i>
-            <span translate translate-values="{GROUP: groupName(user.group_id)}">{{ 'app.public.common.user_proof_of_identity_files_is_required' }}</span>
+            <span translate translate-values="{GROUP: groupName(user.group_id)}">{{ 'app.public.common.user_supporting_documents_required' }}</span>
           </p>
         </div>
 

config/locales/app.admin.en.yml

@@ -968,7 +968,7 @@ en:
         title: "Supporting documents"
         find_below_documents_files: "You will find below the supporting documents submitted by the member."
         to_complete: "To complete"
-        refuse_documents: "Refusing to proof of identity"
+        refuse_documents: "Refusing the documents"
         refuse_documents_info: "After verification, you may notify the member that the evidence submitted is not acceptable. You can specify the reasons for your refusal and indicate the actions to be taken. The member will be notified by e-mail."
       #edit a member
       members_edit:
@@ -1542,12 +1542,12 @@ en:
           organization_profile_custom_fields_info: "You can display additional fields for users who declare themselves to be an organization. You can also choose to make them mandatory at account creation."
           organization_profile_custom_fields_alert: "Attention: the activated fields will be automatically displayed on the issued invoices. Once configured, please do not modify them."
         supporting_documents_type_modal:
-          successfully_created: "The new proof of identity has been created."
-          unable_to_create: "Unable to delete the proof of identity : "
-          successfully_updated: "The proof of identity has been updated."
-          unable_to_update: "Unable to modify the proof of identity : "
-          new_type: "Create a proof of identity"
-          edit_type: "Edit the proof of identity"
+          successfully_created: "The new supporting documents request has been created."
+          unable_to_create: "Unable to delete the supporting documents request: "
+          successfully_updated: "The supporting documents request has been updated."
+          unable_to_update: "Unable to modify the supporting documents request: "
+          new_type: "Create a supporting documents request"
+          edit_type: "Edit the supporting documents request"
           create: "Create"
           edit: "Edit"
         supporting_documents_type_form:
@@ -1568,9 +1568,9 @@ en:
         delete_supporting_documents_type_modal:
           confirmation_required: "Confirmation required"
           confirm: "Confirm"
-          deleted: "The credential has been deleted."
-          proof_of_identity_type_unable_to_delete: "Unable to delete the proof of identity: "
-          confirm_delete_supporting_documents_type: "Do you really want to remove this requested type of credential?"
+          deleted: "The supporting documents request has been deleted."
+          unable_to_delete: "Unable to delete the supporting documents request: "
+          confirm_delete_supporting_documents_type: "Do you really want to remove this requested type of supporting documents?"
         profile_custom_fields_list:
           field_successfully_updated: "The organization field has been updated."
           unable_to_update: "Impossible to modify the field : "

config/locales/app.public.en.yml

@@ -15,7 +15,7 @@ en:
         dashboard: "Dashboard"
         my_profile: "My Profile"
         my_settings: "My Settings"
-        my_proof_of_identity_files: "My proof of identity"
+        my_supporting_documents_files: "My supporting documents"
         my_projects: "My Projects"
         my_trainings: "My Trainings"
         my_events: "My Events"
@@ -93,7 +93,7 @@ en:
         _the_fablab_policy: "the FabLab policy"
         field_required: "Field required"
         profile_custom_field_is_required: "{FEILD} is required"
-        user_proof_of_identity_files_is_required: "Attention !</br>You have declared to be \"{GROUP}\", proof of identity may be requested."
+        user_supporting_documents_required: "Warning !</br>You have declared to be \"{GROUP}\", supporting documents may be requested."
         unexpected_error_occurred: "An unexpected error occurred. Please try again later."
         used_for_statistics: "This data will be used for statistical purposes"
         used_for_invoicing: "This data will be used for billing purposes"

config/locales/mails.en.yml

@@ -24,7 +24,7 @@ en:
       subject: "Your have changed group"
       body:
         warning: "You have changed group. Inspections can be conducted at the lab to verify the legitimacy of this change."
-        user_invalidated: "Your account is invalidated, please upload your new proof of identity to validate your account."
+        user_invalidated: "Your account was invalidated, please upload your new supporting documents to validate your account."
     notify_admin_user_group_changed:
       subject: "A member has changed group"
       body:
@@ -346,14 +346,14 @@ en:
         date: "This is a reminder to verify that the direct bank debit was successfull."
         confirm: "Please confirm the receipt of funds in your payment schedule management interface, so that the corresponding invoice will be generated."
     notify_admin_user_proof_of_identity_files_created:
-      subject: "Proof of identity uploaded by a member"
+      subject: "Supporting documents uploaded by a member"
       body:
-        proof_of_identity_files_uploaded_below: "Member %{NAME} has uploaded the following proof of identity :"
+        proof_of_identity_files_uploaded_below: "Member %{NAME} has uploaded the following supporting documents:"
         validate_user: "Please validate this account"
     notify_admin_user_proof_of_identity_files_updated:
-      subject: "Proof of identity is changed by m member"
+      subject: "Member's supporting documents have changed"
       body:
-        user_update_proof_of_identity_file: "Member %{NAME} has modified the proof of identity below:"
+        user_update_proof_of_identity_file: "Member %{NAME} has modified the supporting documents below:"
         validate_user: "Please validate this account"
     notify_user_is_validated:
       subject: "The account is validated"
@@ -364,13 +364,13 @@ en:
       body:
         account_invalidated: "Your account is invalid."
     notify_user_proof_of_identity_refusal:
-      subject: "Your proof of identity are not accepted"
+      subject: "Your supporting documents were refused"
       body:
-        user_proof_of_identity_files_refusal: "Your proof of identity are not accepted :"
-        action: "Please re-upload the new proof of identity."
+        user_proof_of_identity_files_refusal: "Your supporting documents were refused:"
+        action: "Please re-upload some new supporting documents."
     notify_admin_user_proof_of_identity_refusal:
-      subject: "A member's proof of identity are not accepted"
+      subject: "A member'ssupporting documents were refused"
       body:
-        user_proof_of_identity_files_refusal: "Member %{NAME}'s proof of identity are rejected by %{OPERATOR}:"
+        user_proof_of_identity_files_refusal: "Member %{NAME}'s supporting documents were rejected by %{OPERATOR}:"
     shared:
       hello: "Hello %{user_name}"