It seems to be picking up different sizing and colours which is affecting the layout and use (including making certain aspects unusable such as the font colour dropdown).

These changes are most likely caused by css rules in your template's stylesheet, that are overriding the editor's own toolbar button styles on <div> and <td> tags.

Please send me a login so I can look at the css conflicts that are causing the issue - https://www.joomlacontenteditor.net/contact/site-login

We have used these templates for 5 years along with JCE , is there any reason for this change ?

In JCE 2.7 we updated the editor toolbar to improve the HTML used, so it is more semantic, eg: the <button> tag is used for button elements. Your template stylesheet includes a number of styles for the button element - line 60 of templates/allbusiness/css/template.css - Some of these include an !important statement which makes the css style override any other style for the button element. You will need to remove !important from these styles to fix the issue, eg:

.button,
button,
a.button,
.btn,
#com-form-login-remember input.default,
.camera_caption a.button,
a.product-details,
input.addtocart-button,
a.ask-a-question,
.highlight-button,
.vm-button-correct,
span.quantity-controls input.quantity-plus,
span.quantity-controls input.quantity-minus,
a.details {
    padding: 10px 22px 10px 22px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.40);
    line-height: 16px;
    border-style: solid;
    border-width: 0px;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
    display: inline-block;
    text-align: center;
    margin: 5px;
}

There apppear to be a number of "inline" styles, possibly in the index.php file of the template, that also contain overrides and will need the important statement removed, eg:

.button,
button,
a.button,
.btn,
dt.tabs.closed:hover,
dt.tabs.closed:hover h3 a,
.closemenu,
.vmproduct.product-details .spacer:hover .pr-add,
.vmproduct.product-details .spacer:hover .pr-add-bottom,
a.product-details,
a.ask-a-question,
.highlight-button,
.vm-button-correct,
.cartpanel span.closecart,
.vm-pagination ul li a,
#LoginForm .btn-group>.dropdown-menu,
#LoginForm .btn-group>.dropdown-menu a,
a.details,
#stickymenuButton,
.img_style2 .con_style2 p::before,
.product-neighbours a.previous-page::before,
.product-neighbours a.next-page::after,
input.addtocart-button,
.camera_caption .button.b-arrow::after,
#com-form-login-remember input.default,
.camera_caption_bg a.button,
#sbox-btn-close:hover::after,
.owl-theme .owl-controls .owl-buttons div.owl-prev:hover::before,
.owl-theme .owl-controls .owl-buttons div.owl-next:hover::before,
.activeOrder,
.view-as li a,
.button.light:hover,
.button.light.white:hover,
.button.light.black:hover {
    color: #ffffff;
    background-color: #77bc1f;
}