Inconsistency in Button Colours/Icons/Font

[abhaychawla]

Description

Various buttons like edit, delete, view exist in the app and are inconsistent in their colour and/or icon/font at some places which is not a good user experience. (A few example screenshots are attached below)

The following is a list of those places where the inconsistency exists:

• [x] View User
• [x] Manage Offices
• [x] View Holiday
• [x] Standing Instructions History
• [x] View Provisioning Criteria
• [x] Create Entity Data Table Check
• [x] Teller/Cashier Management
• [x] Currency Configuration
• [x] Payment Type
• [x] View Data Table
• [x] View Code
• [x] View Role
• [x] View Hook
• [x] View entity to entity mapping
• [x] View survey
• [x] Audit Trails
• [x] View Report
• [x] Schedular jobs
• [x] Configurations
• [x] View Account number preferences
• [x] View External Services
• [x] Loan Products
• [x] Savings Products
• [x] Share Products
• [x] Fixed Deposit Products
• [x] Recurring Deposit Products
• [x] View Charge
• [x] View Product Mix
• [x] Create/Edit Floating rate
• [x] Manage Tax Groups
• [x] View Template
• [x] View Transaction
• [x] Delete financial activity mapping
• [x] View chart of accounts
• [x] View Account Closure
• [x] View Accounting rules
• [x] View provisioning entries
• [x] Checker inbox and tasks
• [x] Home/Dashboard
• [x] Reports

Steps to Reproduce

Inconsistency can be noticed by visiting following places: Admin -> User -> Click any user (view user) Admin -> Organisation -> Manage Offices -> Click any office (Assets, view data table entry) Admin -> Organisation -> Click any holiday (view holiday) Admin -> Organisation -> Standing Instructions History Admin -> Organisation -> Provisioning Criteria -> Click any criteria (view provisioning criteria) Admin -> Organisation -> Entity Data Table Checks -> Create Entity Data Table Check/Remove any entity data table check Admin -> Organisation -> Teller/Cashier Management (View Cashiers for teller -> View Transaction) Admin -> Organisation -> Currency Configuration -> Add/Edit Admin -> Organisation -> Payment Type Admin -> System -> Manage Data Tables -> Click any data table (view data table) Admin -> System -> Manage Codes Admin -> System -> Manage Roles and Permissions -> Click any role (view role) Admin -> System -> Manage Hooks -> Click any hook (view hook) Admin -> System -> Entity to entity mapping -> Click any mapping (view mapping) Admin -> System -> Manage Surveys -> Click any survey (view/edit survey) Admin -> System -> Audit Trails Admin -> System -> Manage Reports -> Click on any report (view report) Admin -> System -> Schedular jobs
Admin -> System -> Configurations Admin -> System -> Account number preferences -> Click any entry (view entry) Admin -> System -> External services -> View any service Admin -> Products -> Loan Products Admin -> Products -> Savings Products Admin -> Products -> Share Products Admin -> Products -> Fixed Deposit Products Admin -> Products -> Recurring Deposit Products Admin -> Products -> Charges -> Click any charge (view charge) Admin -> Products -> Products Mix -> Click any product (view product) Admin -> Products -> Floating Rates -> Create/Edit Floating rate Admin -> Products -> Manage Tax Configurations -> Manage Tax Groups -> Create tax group / View any tax group -> Edit Admin -> Templates -> Click any template (view template) Accounting -> Search Journal Entries -> Search -> Click any transaction -> Click any entry on table (review journal entry) Accounting -> Accounts linked to financial activities -> Click any mapping -> Delete Accounting -> Chart of accounts -> Click any account (view account) Accounting -> Closing entries -> Click any entry (view entry) Accounting -> Accounting rules -> Click any rule (view rule) Accounting -> Provisioning entry Checker inbox and tasks (from side navbar) First screen on login Reports (Run any report)

Expected Behaviour

There should be a specific standard for the colours of buttons which should be followed in the entire app for better user experience. The convention which can be followed is given below: Home -> Blue with home icon Dashboard -> Blue with tachometer icon Create/Add -> Blue with plus icon Edit/Recreate -> Blue with paper and pencil icon Submit/Save/Confirm/Upload/Summary/Proceed -> Blue Tree View -> Blue with graph icon List View -> Blue with list icon Import -> Blue with import icon Export -> Blue with file icon Download -> Blue with cloud icon Refresh -> Blue with round arrow icon Search -> Blue with magnifying glass icon Change Password -> Blue with gear icon Remove -> Blue with cross icon Delete -> Red with trash icon Activate/Enable -> Blue with unlock icon/Circular or normal green button with tick icon Disable/Deactivate -> Red with lock icon/Circular or normal red button with cross icon Approve/Disburse -> Green with tick icon Reject -> Orange with cross icon Cancel/Close/Back -> White View -> Light Blue with eye icon Filter -> Blue with funnel icon Suspend -> Orange with cross icon Error log -> Orange with exclamation mark icon Run -> Blue with play icon Next/Previous -> White with black arrow icon Show -> Square blue button with plus icon Hide -> Square blue button with minus icon Allocate Cash -> Green with level down icon Settle Cash -> Orange with level up icon Select All -> Blue Deselect All -> White Reset -> Blue with undo icon Dividends -> Blue with archive icon Initiate -> Blue with plus icon Post -> Blue with briefcase icon

Class of button: Blue -> btn-primary White -> btn-default Red -> btn-danger Light Blue -> btn-info Orange -> btn-warning Green -> btn-success

Actual Behaviour

Mostly buttons are blue. The delete button is red, orange or blue at different places. There are view and reject buttons at two different places, both are orange.

Settings

• Mifos X version: 17.07.01.RELEASE
• Browser used: Google Chrome

Screenshots, if any

[abhaychawla]

@mbj36 @gkrishnan724 I would like to work on this if it seems a valid issue?

[gkrishnan724]

Seems like a valid issue @abhaychawla, please make a checklist in the issue, regarding all the places where this inconsitensy exists and send a PR

[abhaychawla]

Okay!