Merge branch 'application-mgt-new' into 'application-mgt-new'

Add UI improvements See merge request entgra/carbon-device-mgt!176
2025-10-06 02:01:45 +00:00 · 2019-07-12 10:47:55 +00:00 · 2019-07-12 10:47:55 +00:00 · 1ec26cef06
commit 1ec26cef06
parent 8108122b0a a5f75df99a
37 changed files with 426 additions and 367 deletions
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@ -29,6 +29,7 @@
    "react-scripts": "2.1.8",
    "react-star-ratings": "^2.3.0",
    "redux-thunk": "^2.3.0",
+    "shade-blend-color": "^1.0.0",
    "storm-react-diagrams": "^5.2.1"
  },
  "devDependencies": {
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
@ -1,7 +1,9 @@
 {
  "theme": {
    "type": "default",
-    "value": "lightBaseTheme"
+    "value": "lightBaseTheme",
+    "logo" : "https://entgra.io/assets/images/svg/logo.svg",
+    "primaryColor": "rgb(24, 144, 255)"
  },
  "serverConfig": {
    "protocol": "https",
@ -18,16 +20,24 @@
  },
  "defaultPlatformIcons": {
    "default": {
-      "icon": "mobile",
-      "color": "#535c68"
+      "icon": "global",
+      "color": "#535c68",
+      "theme": "outlined"
    },
    "android": {
      "icon": "android",
-      "color": "#7db343"
+      "color": "#7db343",
+      "theme": "filled"
    },
    "ios": {
      "icon": "apple",
-      "color": "#535c68"
+      "color": "#535c68",
+      "theme": "filled"
+    },
+    "windows": {
+      "icon": "windows",
+      "color": "#008cc4",
+      "theme": "filled"
    }
  }
 }
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@ -21,14 +21,14 @@
  padding: 5px;
 }

-.logo {
-  width: 120px;
+.logo-image {
+  /*width: 120px;*/
  height: 31px;
-  margin: 0 0 16px 20px;
+  margin: 0 5px 16px 24px;
  float: left;
 }

-.logo img{
+.logo-image img{
  height: 35px;
 }

--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
@ -1,5 +1,5 @@
 import React from "react";
-import "antd/dist/antd.css";
+import "antd/dist/antd.less";
 import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
 import {
    BrowserRouter as Router,
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
@ -1,5 +1,5 @@
 import React from "react";
-import {Row, Typography, Icon} from "antd";
+import {Row, Typography, Icon, message} from "antd";
 import StarRatings from "react-star-ratings";
 import "./DetailedRating.css";
 import config from "../../../../public/conf/config.json";
@ -41,8 +41,10 @@ class DetailedRating extends React.Component{
            }

        }).catch(function (error) {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+            } else {
+                message.error('Something went wrong while trying to load rating for the release... :(');
            }
        });
    };
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
@ -24,6 +24,7 @@ import config from "../../../../../public/conf/config.json";
 import ReactQuill from "react-quill";
 import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
 import "./AppDetailsDrawer.css";
+import pSBC from "shade-blend-color";

 const {Text, Title} = Typography;
 const {Option} = Select;
@ -91,10 +92,8 @@ class AppDetailsDrawer extends React.Component {

    getCategories = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+        ).then(res => {
            if (res.status === 200) {
                const categories = JSON.parse(res.data.data);

@ -114,10 +113,10 @@ class AppDetailsDrawer extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong while trying to load app details... :(');

            }
            this.setState({
@ -128,10 +127,8 @@ class AppDetailsDrawer extends React.Component {

    getTags = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+        ).then(res => {
            if (res.status === 200) {
                const tags = JSON.parse(res.data.data);

@ -151,10 +148,10 @@ class AppDetailsDrawer extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load tags.');

            }
            this.setState({
@ -171,14 +168,12 @@ class AppDetailsDrawer extends React.Component {
            const data = {name: name};
            axios.put(
                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
-                data,
-                {
-                    headers: {'X-Platform': config.serverConfig.platform}
-                }
+                data
            ).then(res => {
                if (res.status === 200) {
                    notification["success"]({
-                        message: 'Saved!'
+                        message: 'Saved!',
+                        description: 'App name updated successfully!'
                    });
                    this.setState({
                        loading: false,
@ -191,7 +186,7 @@ class AppDetailsDrawer extends React.Component {
                    message.error('You are not logged in');
                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
                } else {
-                    message.error('Something went wrong... :(');
+                    message.error('Something went wrong when trying to save the app name... :(');
                }

                this.setState({loading: false});
@ -230,7 +225,6 @@ class AppDetailsDrawer extends React.Component {
        });
    };

-
    // handle description change
    handleCategoryChange = (temporaryCategories) => {
        this.setState({temporaryCategories})
@ -249,14 +243,12 @@ class AppDetailsDrawer extends React.Component {
            const data = {categories: temporaryCategories};
            axios.put(
                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
-                data,
-                {
-                    headers: {'X-Platform': config.serverConfig.platform}
-                }
+                data
            ).then(res => {
                if (res.status === 200) {
                    notification["success"]({
-                        message: 'Saved!'
+                        message: 'Saved!',
+                        description: 'App categories updated successfully!'
                    });
                    this.setState({
                        loading: false,
@ -270,7 +262,7 @@ class AppDetailsDrawer extends React.Component {
                    message.error('You are not logged in');
                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
                } else {
-                    message.error('Something went wrong... :(');
+                    message.error('Something went wrong when trying to updating categories');
                }

                this.setState({loading: false});
@ -296,7 +288,7 @@ class AppDetailsDrawer extends React.Component {
        this.setState({temporaryTags})
    };

-    // change app categories
+    // change app tags
    handleTagsSave = () => {
        const {id} = this.props.app;
        const {temporaryTags, tags} = this.state;
@ -310,14 +302,12 @@ class AppDetailsDrawer extends React.Component {
            const data = {tags: temporaryTags};
            axios.put(
                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
-                data,
-                {
-                    headers: {'X-Platform': config.serverConfig.platform}
-                }
+                data
            ).then(res => {
                if (res.status === 200) {
                    notification["success"]({
-                        message: 'Saved!'
+                        message: 'Saved!',
+                        description: 'App tags updated successfully!'
                    });
                    this.setState({
                        loading: false,
@ -330,7 +320,7 @@ class AppDetailsDrawer extends React.Component {
                    message.error('You are not logged in');
                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
                } else {
-                    message.error('Something went wrong... :(');
+                    message.error('Something went wrong when trying to update tags');
                }

                this.setState({loading: false});
@ -348,14 +338,12 @@ class AppDetailsDrawer extends React.Component {
            const data = {description: temporaryDescription};
            axios.put(
                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
-                data,
-                {
-                    headers: {'X-Platform': config.serverConfig.platform}
-                }
+                data
            ).then(res => {
                if (res.status === 200) {
                    notification["success"]({
-                        message: 'Saved!'
+                        message: 'Saved!',
+                        description: 'App description updated successfully!'
                    });
                    this.setState({
                        loading: false,
@ -456,7 +444,7 @@ class AppDetailsDrawer extends React.Component {
                        {!isDescriptionEditEnabled && (
                            <Text
                                style={{
-                                    color: "#1890ff",
+                                    color: config.theme.primaryColor,
                                    cursor: "pointer"
                                }}
                                onClick={this.enableDescriptionEdit}>
@ -492,7 +480,7 @@ class AppDetailsDrawer extends React.Component {
                        <Divider dashed={true}/>
                        <Text strong={true}>Categories </Text>
                        {!isCategoriesEditEnabled && (<Text
-                                style={{color: "#1890ff", cursor: "pointer"}}
+                                style={{color: config.theme.primaryColor, cursor: "pointer"}}
                                onClick={this.enableCategoriesEdit}>
                                <Icon type="edit"/>
                            </Text>
@ -525,7 +513,8 @@ class AppDetailsDrawer extends React.Component {
                            <span>{
                                categories.map(category => {
                                    return (
-                                        <Tag color="#108ee9" key={category} style={{marginBottom: 5}}>
+                                        <Tag color={pSBC(0.30, config.theme.primaryColor)} key={category}
+                                             style={{marginBottom: 5}}>
                                            {category}
                                        </Tag>
                                    );
@ -537,7 +526,7 @@ class AppDetailsDrawer extends React.Component {
                        <Divider dashed={true}/>
                        <Text strong={true}>Tags </Text>
                        {!isTagsEditEnabled && (<Text
-                                style={{color: "#1890ff", cursor: "pointer"}}
+                                style={{color: config.theme.primaryColor, cursor: "pointer"}}
                                onClick={this.enableTagsEdit}>
                                <Icon type="edit"/>
                            </Text>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js
@ -1,10 +1,10 @@
 import React from "react";
-import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button, Form, message} from "antd";
+import {Card, Col, Row,Typography, Input, Divider, Icon, Select, Button, Form, message, Radio} from "antd";
 import axios from "axios";
 import config from "../../../../public/conf/config.json";

 const {Option} = Select;
-const {Title, Text} = Typography;
+const {Title} = Typography;


 class FiltersForm extends React.Component {
@ -26,10 +26,17 @@ class FiltersForm extends React.Component {
                }
            }

-            if(values.hasOwnProperty("deviceType") && values.deviceType==="all"){
+            if(values.hasOwnProperty("deviceType") && values.deviceType==="ALL"){
                delete values["deviceType"];
            }

+            if(values.hasOwnProperty("subscriptionType") && values.subscriptionType==="ALL"){
+                delete values["subscriptionType"];
+            }
+            if(values.hasOwnProperty("appType") && values.appType==="ALL"){
+                delete values["appType"];
+            }
+
            this.props.setFilters(values);
        });
    };
@ -42,10 +49,8 @@ class FiltersForm extends React.Component {

    getCategories = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+        ).then(res => {
            if (res.status === 200) {
                let categories = JSON.parse(res.data.data);
                this.setState({
@ -55,10 +60,10 @@ class FiltersForm extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong while trying to load categories... :(');

            }
            this.setState({
@ -69,10 +74,8 @@ class FiltersForm extends React.Component {

    getTags = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+        ).then(res => {
            if (res.status === 200) {
                let tags = JSON.parse(res.data.data);
                this.setState({
@ -82,10 +85,10 @@ class FiltersForm extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load tags');

            }
            this.setState({
@ -97,10 +100,8 @@ class FiltersForm extends React.Component {

    getDeviceTypes = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
+        ).then(res => {
            if (res.status === 200) {
                const deviceTypes = JSON.parse(res.data.data);
                this.setState({
@ -110,10 +111,10 @@ class FiltersForm extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load device types');

            }
            this.setState({
@ -152,6 +153,15 @@ class FiltersForm extends React.Component {
                        </Col>
                    </Row>

+                    <Form.Item>
+                        {getFieldDecorator('serach', {})(
+                            <Input
+                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="Username"
+                            />,
+                        )}
+                    </Form.Item>
+
                    <Form.Item label="Categories">
                        {getFieldDecorator('categories', {
                            rules: [{
@ -202,8 +212,7 @@ class FiltersForm extends React.Component {
                                    })
                                }
                                <Option
-                                    key="all">
-                                    all
+                                    key="ALL">All
                                </Option>
                            </Select>
                        )}
@ -244,6 +253,7 @@ class FiltersForm extends React.Component {
                                <Option value="ENTERPRISE">Enterprise</Option>
                                <Option value="PUBLIC">Public</Option>
                                <Option value="WEB_CLIP">Web APP</Option>
+                                <Option value="ALL">All</Option>
                            </Select>
                        )}
                    </Form.Item>
@ -251,10 +261,11 @@ class FiltersForm extends React.Component {

                    <Form.Item label="Subscription Type">
                        {getFieldDecorator('subscriptionType', {})(
-                            <Checkbox.Group style={{width: '100%'}}>
-                                <Checkbox value="FREE">Free</Checkbox><br/>
-                                <Checkbox value="PAID">Paid</Checkbox><br/>
-                            </Checkbox.Group>,
+                            <Radio.Group style={{width: '100%'}}>
+                                <Radio value="FREE">Free</Radio>
+                                <Radio value="PAID">Paid</Radio>
+                                <Radio value="ALL">All</Radio>
+                            </Radio.Group>,
                        )}
                    </Form.Item>
                    <Divider/>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
@ -1,6 +1,7 @@
 import React from "react";
-import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
+import {Avatar, Table, Tag, Icon, message} from "antd";
 import axios from "axios";
+import pSBC from 'shade-blend-color';
 import config from "../../../../../public/conf/config.json";
 import "./AppsTable.css";

@ -30,7 +31,7 @@ const columns = [
            <span>
                {categories.map(category => {
                    return (
-                        <Tag color="blue" key={category}>
+                        <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category}>
                            {category}
                        </Tag>
                    );
@ -45,12 +46,14 @@ const columns = [
            const defaultPlatformIcons = config.defaultPlatformIcons;
            let icon = defaultPlatformIcons.default.icon;
            let color = defaultPlatformIcons.default.color;
+            let theme = defaultPlatformIcons.default.theme;
            if (defaultPlatformIcons.hasOwnProperty(platform)) {
                icon = defaultPlatformIcons[platform].icon;
                color = defaultPlatformIcons[platform].color;
+                theme = defaultPlatformIcons[platform].theme;
            }
            return (<span style={{fontSize: 20, color: color, textAlign: "center"}}><Icon type={icon}
-                                                                                          theme="filled"/></span>)
+                                                                                          theme={theme}/></span>)
        }
    },
    {
@ -152,7 +155,7 @@ class AppsTable extends React.Component {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.error('Something went wrong... :(');
+                message.error('Something went wrong while trying to load apps... :(');
            }

            this.setState({loading: false});
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
@ -55,10 +55,9 @@ class LifeCycle extends React.Component {


    fetchData = () => {
-        axios.get(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+        axios.get(
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
+        ).then(res => {
            if (res.status === 200) {
                const lifecycle = res.data.data;
                this.setState({
@ -69,6 +68,8 @@ class LifeCycle extends React.Component {
        }).catch(function (error) {
            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+            } else {
+                message.error('Something went wrong when trying to load lifecycle configuration');
            }
        });
    };
@ -105,11 +106,10 @@ class LifeCycle extends React.Component {
            isConfirmButtonLoading: true,
        });

-        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
-            data,
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+        axios.post(
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
+            data
+        ).then(res => {
            if (res.status === 201) {
                this.setState({
                    isReasonModalVisible: false,
@ -133,7 +133,7 @@ class LifeCycle extends React.Component {
                notification["error"]({
                    message: "Error",
                    description:
-                        "Something went wrong",
+                        "Something went wrong when trying to add lifecycle",
                });
            }
            this.setState({
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
@ -31,20 +31,18 @@ class Reviews extends React.Component {
        const {uuid, type} = this.props;

        axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/admin/reviews/"+type+"/"+uuid,
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/reviews/" + type + "/" + uuid
+        ).then(res => {
            if (res.status === 200) {
                let reviews = res.data.data.data;
                callback(reviews);
            }

        }).catch(function (error) {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load reviews');

            }
        });
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
@ -3,6 +3,7 @@ import {Card, Tag, message, Icon, Input, notification, Divider, Button, Spin, To
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
 import {TweenOneGroup} from 'rc-tween-one';
+import pSBC from "shade-blend-color";


 class ManageCategories extends React.Component {
@ -32,7 +33,7 @@ class ManageCategories extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
                message.warning('Something went wrong');
@ -79,11 +80,11 @@ class ManageCategories extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load categories');
            }
            this.setState({
                loading: false
@ -95,14 +96,14 @@ class ManageCategories extends React.Component {
        const categoryName = category.categoryName;
        const tagElem = (
            <Tag
-                color="blue"
+                color={pSBC ( 0.30, config.theme.primaryColor )}
            >
                {categoryName}
                <Divider type="vertical"/>
                <Tooltip title="edit">
                    <Icon onClick={() => {
                        this.openEditModal(categoryName)
-                    }} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/>
+                    }} type="edit"/>
                </Tooltip>
                <Divider type="vertical"/>
                <Tooltip title="delete">
@ -122,7 +123,7 @@ class ManageCategories extends React.Component {
                        okText="Yes"
                        cancelText="No"
                    >
-                        <Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/>
+                        <Icon type="delete"/>
                    </Popconfirm>
                </Tooltip>
            </Tag>
@ -218,11 +219,11 @@ class ManageCategories extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to add categories');
            }
            this.setState({
                loading: false
@ -280,11 +281,11 @@ class ManageCategories extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to delete the category');
            }
            this.setState({
                loading: false,
@ -306,7 +307,7 @@ class ManageCategories extends React.Component {
        const categoriesElements = categories.map(this.renderElement);
        const temporaryElements = tempElements.map(this.renderTempElement);
        return (
-            <div>
+            <div style={{marginBottom: 16}}>
                <Card title="Categories">
                    <Spin tip="Working on it..." spinning={this.state.loading}>
                        {!isAddNewVisible &&
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
@ -32,10 +32,10 @@ class ManageTags extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load tags');

            }
            this.setState({
@ -58,10 +58,8 @@ class ManageTags extends React.Component {
        });

        axios.delete(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/admin/applications/tags/"+id,
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/admin/applications/tags/"+id
+        ).then(res => {
            if (res.status === 200) {
                notification["success"]({
                    message: "Done!",
@ -82,11 +80,11 @@ class ManageTags extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to delete the tag');
            }
            this.setState({
                loading: false
@ -98,14 +96,14 @@ class ManageTags extends React.Component {
        const tagName = tag.tagName;
        const tagElem = (
            <Tag
-                color="gold"
+                color="#34495e"
            >
                {tagName}
                <Divider type="vertical"/>
                <Tooltip title="edit">
                    <Icon onClick={() => {
                        this.openEditModal(tagName)
-                    }} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/>
+                    }} type="edit"/>
                </Tooltip>
                <Divider type="vertical"/>
                <Tooltip title="delete">
@ -125,7 +123,7 @@ class ManageTags extends React.Component {
                        okText="Yes"
                        cancelText="No"
                    >
-                        <Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/>
+                        <Icon type="delete"/>
                    </Popconfirm>
                </Tooltip>
            </Tag>
@ -219,11 +217,11 @@ class ManageTags extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to delete tag');
            }
            this.setState({
                loading: false
@ -281,11 +279,11 @@ class ManageTags extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.hasOwnProperty("status") && error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to edit tag');
            }
            this.setState({
                loading: false,
@ -307,7 +305,7 @@ class ManageTags extends React.Component {
        const tagsElements = tags.map(this.renderElement);
        const temporaryElements = tempElements.map(this.renderTempElement);
        return (
-            <div>
+            <div style={{marginBottom: 16}}>
                <Card title="Tags">
                    <Spin tip="Working on it..." spinning={this.state.loading}>
                        {!isAddNewVisible &&
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    Card,
    Button,
@ -55,10 +54,8 @@ class AddNewAppFormComponent extends React.Component {

    getCategories = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+        ).then(res => {
            if (res.status === 200) {
                let categories = JSON.parse(res.data.data);
                this.setState({
@ -68,10 +65,10 @@ class AddNewAppFormComponent extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load categories');

            }
            this.setState({
@ -82,10 +79,8 @@ class AddNewAppFormComponent extends React.Component {

    getTags = () => {
        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }).then(res => {
+            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+        ).then(res => {
            if (res.status === 200) {
                let tags = JSON.parse(res.data.data);
                this.setState({
@ -95,10 +90,10 @@ class AddNewAppFormComponent extends React.Component {
            }

        }).catch((error) => {
-            if (error.response.status === 401) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.warning('Something went wrong');
+                message.warning('Something went wrong when trying to load tags');

            }
            this.setState({
@ -210,7 +205,7 @@ class AddNewAppFormComponent extends React.Component {
                    }

                }).catch((error) => {
-                    if (error.response.status === 401) {
+                    if (error.hasOwnProperty("response") && error.response.status === 401) {
                        window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
                    } else {
                        notification["error"]({
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
@ -1,12 +1,15 @@
 import axios from "axios";
 import ActionTypes from "../constants/ActionTypes";
 import config from "../../../public/conf/config.json";
+import {message} from "antd";

 export const getApps = () => dispatch => {

    const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";

-    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
+    return axios.post(
+        config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher,
+        request
    ).then(res => {
        if (res.status === 200) {
            let apps = [];
@ -18,8 +21,10 @@ export const getApps = () => dispatch => {
        }

    }).catch(function (error) {
-        if (error.response.status === 401) {
+        if (error.hasOwnProperty("response") && error.response.status === 401) {
            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+        } else {
+            message.error('Something went wrong when trying to load applications... :(');
        }
    });

@ -29,7 +34,8 @@ export const getRelease = (uuid) => dispatch => {

    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/" + uuid;

-    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
+    return axios.post(
+        config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
    ).then(res => {
        if (res.status === 200) {
            let release = res.data.data;
@ -37,8 +43,10 @@ export const getRelease = (uuid) => dispatch => {
        }

    }).catch(function (error) {
-        if (error.response.status === 401) {
+        if (error.hasOwnProperty("response") && error.response.status === 401) {
            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+        } else {
+            message.error('Something went wrong... :(');
        }
    });

@ -73,7 +81,8 @@ export const closeLifecycleModal = () => dispatch => {
 export const getLifecycle = () => dispatch => {
    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";

-    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
+    return axios.post(
+        config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
    ).then(res => {
        if (res.status === 200) {
            let lifecycle = res.data.data;
@ -81,8 +90,10 @@ export const getLifecycle = () => dispatch => {
        }

    }).catch(function (error) {
-        if (error.response.status === 401) {
+        if (error.hasOwnProperty("response") && error.response.status === 401) {
            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+        } else {
+            message.error('Something went wrong... :(');
        }
    });
 };
@ -97,7 +108,8 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
    const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid;


-    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
+    return axios.post(
+        config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher, request
    ).then(res => {
        if (res.status === 201) {
            let release = res.data.data;
@ -110,7 +122,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
        }

    }).catch(function (error) {
-        if (error.response.status === 401) {
+        if (error.hasOwnProperty("response") && error.response.status === 401) {
            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
        } else if (error.response.status === 500) {
            alert("error");
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.css
@ -0,0 +1,44 @@
+@-moz-keyframes spin {
+    0% {
+        -moz-transform: rotate(0deg) scale(1.0);
+    }
+    100% {
+        -moz-transform: rotate(360deg) scale(0.1);
+    }
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg) scale(1.0);
+    }
+    100% {
+        -webkit-transform: rotate(360deg) scale(0.1);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg) scale(1.0);
+    }
+    100% {
+        -webkit-transform: rotate(360deg) scale(0.1);
+        transform: rotate(360deg) scale(0.1);
+    }
+}
+
+.background {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
+    animation: spin 200s infinite linear;
+}
+
+.content {
+    position: relative;
+    z-index: 1;
+}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
@ -1,8 +1,9 @@
 import React from "react";
-import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
-import styles from './Login.less';
+import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox, message} from 'antd';
+import './Login.css';
 import axios from 'axios';
 import config from "../../public/conf/config.json";
+import "./Login.css";

 const {Title} = Typography;
 const {Text} = Typography;
@ -10,18 +11,27 @@ const {Text} = Typography;
 class Login extends React.Component {
    render() {
        return (
-            <div className={styles.main}>
-                <div className={styles.content}>
+            <div>
+                <div className="background">
+                </div>
+                <div className="content">
                    <Row>
-                        <Col span={4} offset={10}>
+                        <Col xs={3} sm={3} md={10}>
+                        </Col>
+                        <Col xs={18} sm={18} md={4}>
                            <Row style={{marginBottom: 20}}>
-                                <Col>
-                                    <img className={styles.logo} src={require('../../public/images/logo.svg')}/>
+                                <Col style={{textAlign: "center"}}>
+                                    <img style={
+                                        {
+                                            marginTop: 36,
+                                            height: 60
+                                        }
+                                    }
+                                         src={config.theme.logo}/>
                                </Col>
                            </Row>
-                            <Title type="secondary" level={2}>Login</Title>
+                            <Title level={2}>Login</Title>
                            <WrappedNormalLoginForm/>
-
                        </Col>
                    </Row>
                    <Row>
@ -71,12 +81,16 @@ class NormalLoginForm extends React.Component {
                        window.location = res.data.url;
                    }
                }).catch(function (error) {
-                    if (error.response.status === 400) {
+                    if (error.hasOwnProperty("response") && error.response.status === 400) {
+                        thisForm.setState({
+                            inValid: true
+                        });
+                    } else {
+                        message.error('Something went wrong when trying to login... :(');
+                    }
                    thisForm.setState({
-                            inValid: true,
                        loading: false
                    });
-                    }
                });
            }

@ -97,7 +111,7 @@ class NormalLoginForm extends React.Component {
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item>
                    {getFieldDecorator('username', {
-                        rules: [{required: true, message: 'Please input your username!'}],
+                        rules: [{required: true, message: 'Please enter your username'}],
                    })(
                        <Input style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                               placeholder="Username"/>
@ -105,9 +119,9 @@ class NormalLoginForm extends React.Component {
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {
-                        rules: [{required: true, message: 'Please input your Password!'}],
+                        rules: [{required: true, message: 'Please enter your password'}],
                    })(
-                        <Input style={{height: 32}} className={styles.input}
+                        <Input style={{height: 32}}
                               prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                               placeholder="Password"/>
                    )}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
@ -1,34 +0,0 @@
-@nice-blue: #5B83AD;
-@light-blue: @nice-blue + #111;
-
-.header {
-  color: @nice-blue;
-}
-
-.main{
-  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-  background-repeat: no-repeat;
-  background-position: center 110px;
-  background-size: 100%;
-
-  .header {
-    color: @nice-blue;
-  }
-
-
-}
-
-.content{
-  padding-top: 128px;
-}
-
-.logo{
-  height: 44px;
-  margin: auto;
-  width: 100%;
-
-}
-
-input{
-  min-height: 0;
-}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@ -1,10 +1,10 @@
 import React from "react";
 import {Layout, Menu, Icon} from 'antd';
-import Logo from "../../../public/images/logo.svg";
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
 import "../../App.css";
+import config from "../../../public/conf/config.json";

 const {Header, Content, Footer} = Layout;
 const {SubMenu} = Menu;
@ -15,15 +15,17 @@ class Dashboard extends React.Component {
        this.state = {
            routes: props.routes
        };
+
+        this.Logo = config.theme.logo;
    }

    render() {
        return (
            <div>
                <Layout className="layout">
-                    <Header>
-                        <div className="logo">
-                            <img src={Logo}/>
+                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                        <div className="logo-image">
+                            <img alt="logo" src={this.Logo}/>
                        </div>
                        <Menu
                            theme="light"
@ -40,9 +42,12 @@ class Dashboard extends React.Component {
                                     </span>
                                }
                            >
-                                <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public APP</Link></Menu.Item>
-                                <Menu.Item key="setting:2"><Link to="/publisher/add-new-app/enterprise">Enterprise APP</Link></Menu.Item>
-                                <Menu.Item key="setting:3"><Link to="/publisher/add-new-app/web-clip">Web Clip</Link></Menu.Item>
+                                <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
+                                    APP</Link></Menu.Item>
+                                <Menu.Item key="setting:2"><Link to="/publisher/add-new-app/enterprise">Enterprise
+                                    APP</Link></Menu.Item>
+                                <Menu.Item key="setting:3"><Link to="/publisher/add-new-app/web-clip">Web
+                                    Clip</Link></Menu.Item>
                            </SubMenu>
                            <Menu.Item key="2"><Link to="/publisher/manage"><Icon
                                type="control"/>Manage</Link></Menu.Item>
@ -50,7 +55,7 @@ class Dashboard extends React.Component {
                    </Header>
                </Layout>
                <Layout>
-                    <Content style={{padding: '0 0'}}>
+                    <Content style={{marginTop: 2}}>
                        <Switch>
                            <Redirect exact from="/publisher" to="/publisher/apps"/>
                            {this.state.routes.map((route) => (
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    PageHeader,
    Typography
@ -42,12 +41,10 @@ class AddNewEnterpriseApp extends React.Component {
                    title="Add New Enterprise App"
                >
                    <div className="wrap">
-                        <div className="content">
                        <Paragraph>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
                        </Paragraph>
                    </div>
-                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                    <AddNewAppForm formConfig={formConfig}/>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    PageHeader,
    Typography
@ -45,12 +44,10 @@ class AddNewEnterpriseApp extends React.Component {
                    title="Add New Public App"
                >
                    <div className="wrap">
-                        <div className="content">
                        <Paragraph>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
                        </Paragraph>
                    </div>
-                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                    <AddNewAppForm formConfig={formConfig}/>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    PageHeader,
    Typography
@ -45,12 +44,10 @@ class AddNewEnterpriseApp extends React.Component {
                    title="Add New Web Clip"
                >
                    <div className="wrap">
-                        <div className="content">
                        <Paragraph>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
                        </Paragraph>
                    </div>
-                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                    <AddNewAppForm formConfig={formConfig}/>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-release/AddNewRelease.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    PageHeader,
    Typography
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
 import ListApps from "../../../components/apps/list-apps/ListApps";

--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@ -47,9 +47,6 @@ class Release extends React.Component {
        //send request to the invoker
        axios.get(
            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/release/"+ uuid,
-            {
-                headers: {'X-Platform': config.serverConfig.platform}
-            }
        ).then(res => {
            if (res.status === 200) {
                const app = res.data.data;
@ -70,7 +67,7 @@ class Release extends React.Component {
                message.error('You are not logged in');
                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
            } else {
-                message.error('Something went wrong... :(');
+                message.error('Something went wrong when trying to load the release... :(');
            }

            this.setState({loading: false});
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
 import ManageCategories from "../../../components/manage/categories/ManageCategories";
 import ManageTags from "../../../components/manage/categories/ManageTags";
@ -39,18 +38,20 @@ class Manage extends React.Component {
                    title="Manage"
                >
                    <div className="wrap">
-                        <div className="content">
                        <Paragraph>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
                        </Paragraph>
                    </div>
-                    </div>
                </PageHeader>
                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                    <Row gutter={16}>
+                        <Col sm={24} md={12}>
                            <ManageCategories/>
-                    <br/>
+                        </Col>
+                        <Col sm={24} md={12}>
                            <ManageTags/>
-
+                        </Col>
+                    </Row>
                </div>

            </div>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
@ -18,11 +18,12 @@
 var path = require('path');
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const configurations = require("./public/conf/config.json");

 const config = {
    devtool: "source-map",
    output: {
-        publicPath: '/publisher/' // <---- this
+        publicPath: '/publisher/'
    },
    watch: false,
    resolve: {
@ -77,14 +78,16 @@ const config = {
                    },
                    {
                        loader: "css-loader",
-                        options: {
-                            sourceMap: true,
-                            modules: true,
-                            localIdentName: "[local]___[hash:base64:5]"
-                        }
                    },
                    {
-                        loader: "less-loader"
+                        loader: "less-loader",
+                        options: {
+                            modifyVars: {
+                                'primary-color': configurations.theme.primaryColor,
+                                'link-color': configurations.theme.primaryColor,
+                            },
+                            javascriptEnabled: true,
+                        },
                    }
                ]
            },
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
@ -10,24 +10,22 @@
  },
  "license": "Apache License 2.0",
  "dependencies": {
-    "acorn": "^6.1.1",
-    "antd": "^3.15.0",
-    "axios": "^0.18.0",
-    "d3": "^5.9.2",
+    "acorn": "^6.2.0",
+    "antd": "^3.20.1",
+    "axios": "^0.18.1",
+    "d3": "^5.9.7",
    "dagre": "^0.8.4",
    "javascript-time-ago": "^2.0.1",
    "keymirror": "^0.1.1",
    "lodash.debounce": "^4.0.8",
    "rc-viewer": "0.0.9",
-    "react": "^16.8.4",
-    "react-d3-graph": "^2.0.2",
-    "react-dom": "^16.8.4",
+    "react-d3-graph": "^2.1.0",
    "react-highlight-words": "^0.16.0",
    "react-image-viewer-zoom": "^1.0.36",
    "react-infinite-scroller": "^1.2.4",
-    "react-router": "latest",
-    "react-router-config": "^5.0.0",
-    "react-router-dom": "latest",
+    "react-router": "^5.0.1",
+    "react-router-config": "^5.0.1",
+    "react-router-dom": "^5.0.1",
    "react-scripts": "2.1.8",
    "react-star-ratings": "^2.3.0",
    "react-twemoji": "^0.2.3",
@ -36,16 +34,16 @@
    "storm-react-diagrams": "^5.2.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.5.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "body-parser": "^1.18.3",
+    "@babel/register": "^7.4.4",
+    "babel-loader": "^8.0.6",
+    "body-parser": "^1.19.0",
    "chai": "^4.1.2",
    "css-loader": "^0.28.11",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
    "express-pino-logger": "^4.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
@ -58,20 +56,20 @@
    "mocha": "^5.2.0",
    "mock-local-storage": "^1.0.5",
    "node-env-run": "^3.0.2",
-    "node-sass": "^4.11.0",
-    "nodemon": "^1.18.9",
+    "node-sass": "^4.12.0",
+    "nodemon": "^1.19.1",
    "npm-run-all": "^4.1.5",
-    "pino-colada": "^1.4.4",
+    "pino-colada": "^1.4.5",
    "postcss-loader": "^3.0.0",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
-    "react-intl": "^2.4.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-intl": "^2.9.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.18.2",
    "url-loader": "^1.1.2",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
@ -1,7 +1,9 @@
 {
  "theme": {
    "type": "default",
-    "value": "lightBaseTheme"
+    "value": "lightBaseTheme",
+    "logo" : "https://entgra.io/assets/images/svg/logo.svg",
+    "primaryColor": "rgb(24, 144, 255)"
  },
  "serverConfig": {
    "protocol": "https",
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
@ -2,16 +2,15 @@
  height: 170px;
 }

-.release-icon img{
-  width: 100%;
-  border-radius: 28%;
-}
 .release .release-icon{
  margin-right: 15px;
 }
-.appCard .release-icon{
-  margin-bottom: 10px;
+
+.release .release-icon img{
+  width: 100%;
+  border-radius: 28%;
 }
+
 .release .release-title{
  margin-left: 15px;
 }
@ -22,14 +21,14 @@
  padding: 5px;
 }

-.logo {
-  width: 120px;
+.logo-image {
+  /*width: 120px;*/
  height: 31px;
-  margin: 0 0 16px 20px;
+  margin: 0 5px 16px 24px;
  float: left;
 }

-.logo img{
+.logo-image img{
  height: 35px;
 }

--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js
@ -1,5 +1,5 @@
 import React from "react";
-import "antd/dist/antd.css";
+import "antd/dist/antd.less";
 import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
 import {
    BrowserRouter as Router,
@ -15,7 +15,6 @@ class App extends React.Component {
    }

    render() {
-        // console.log(this.routes);
        return (
            <Router>
                <div>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.css
@ -0,0 +1,44 @@
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg) scale(1.0);
+  }
+  100% {
+    -moz-transform: rotate(360deg) scale(0.1);
+  }
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg) scale(1.0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg) scale(0.1);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg) scale(1.0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg) scale(0.1);
+    transform: rotate(360deg) scale(0.1);
+  }
+}
+
+.background {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+  background-repeat: no-repeat;
+  background-position: center 110px;
+  background-size: 100%;
+  animation: spin 200s infinite linear;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@ -1,6 +1,6 @@
 import React from "react";
 import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
-import styles from './Login.less';
+import './Login.css';
 import axios from 'axios';
 import config from "../../public/conf/config.json";

@ -10,16 +10,27 @@ const {Text} = Typography;
 class Login extends React.Component {
    render() {
        return (
-            <div className={styles.main}>
-                <div className={styles.content}>
+            <div>
+                <div className="background">
+                </div>
+                <div className="content">
                    <Row>
-                        <Col span={4} offset={10}>
+                        <Col xs={3} sm={3} md={10}>
+
+                        </Col>
+                        <Col xs={18} sm={18} md={4}>
                            <Row style={{marginBottom: 20}}>
-                                <Col>
-                                    <img className={styles.logo} src={require('../../public/images/logo.svg')}/>
+                                <Col style={{textAlign: "center"}}>
+                                    <img style={
+                                        {
+                                            marginTop: 36,
+                                            height: 60
+                                        }
+                                    }
+                                         src={config.theme.logo}/>
                                </Col>
                            </Row>
-                            <Title type="secondary" level={2}>Login</Title>
+                            <Title level={2}>Login</Title>
                            <WrappedNormalLoginForm/>

                        </Col>
@ -99,7 +110,8 @@ class NormalLoginForm extends React.Component {
                    {getFieldDecorator('username', {
                        rules: [{required: true, message: 'Please input your username!'}],
                    })(
-                        <Input name="username" style={{height: 32}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
+                        <Input name="username" style={{height: 32}}
+                               prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                               placeholder="Username"/>
                    )}
                </Form.Item>
@ -107,7 +119,7 @@ class NormalLoginForm extends React.Component {
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: 'Please input your Password!'}],
                    })(
-                        <Input name="password" style={{height: 32}} className={styles.input}
+                        <Input name="password" style={{height: 32}}
                               prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                               placeholder="Password"/>
                    )}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.less
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.less
@ -1,34 +0,0 @@
-@nice-blue: #5B83AD;
-@light-blue: @nice-blue + #111;
-
-.header {
-  color: @nice-blue;
-}
-
-.main{
-  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-  background-repeat: no-repeat;
-  background-position: center 110px;
-  background-size: 100%;
-
-  .header {
-    color: @nice-blue;
-  }
-
-
-}
-
-.content{
-  padding-top: 128px;
-}
-
-.logo{
-  height: 44px;
-  margin: auto;
-  width: 100%;
-
-}
-
-input{
-  min-height: 0;
-}
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@ -1,13 +1,11 @@
 import React from "react";
 import {Layout, Menu, Icon} from 'antd';
-
 const {Header, Content, Footer} = Layout;
-
-import Logo from "../../../public/images/logo.svg";
-import {Link, NavLink} from "react-router-dom";
+import {Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import {Switch, Redirect} from 'react-router'
+import {Switch} from 'react-router'
 import "../../App.css";
+import config from "../../../public/conf/config.json";

 class Dashboard extends React.Component {
    constructor(props) {
@ -15,7 +13,8 @@ class Dashboard extends React.Component {
        this.state = {
            routes: props.routes,
            selectedKeys : []
-        }
+        };
+        this.Logo = config.theme.logo;
    }

    changeSelectedMenuItem = (key) =>{
@ -29,14 +28,14 @@ class Dashboard extends React.Component {
        return (
            <div>
                <Layout className="layout">
-                    <Header>
-                        <div className="logo">
-                            <img src={Logo}/>
+                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                        <div className="logo-image">
+                            <img alt="logo" src={this.Logo}/>
                        </div>
                        <Menu
                            theme="light"
                            mode="horizontal"
-                            selectedKeys={selectedKeys}
+                            defaultSelectedKeys={selectedKeys}
                            style={{lineHeight: '64px'}}
                        >
                            <Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item>
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import {
    PageHeader,
    Typography,
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/Apps.js
@ -1,5 +1,4 @@
 import React from "react";
-import "antd/dist/antd.css";
 import AppList from "../../../components/apps/AppList";

 class Apps extends React.Component {
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/webpack.config.js
@ -18,11 +18,12 @@
 var path = require('path');
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const configurations = require("./public/conf/config.json");

 const config = {
    devtool: "source-map",
    output: {
-        publicPath: '/store/' // <---- this
+        publicPath: '/store/'
    },
    watch: false,
    resolve: {
@ -77,14 +78,16 @@ const config = {
                    },
                    {
                        loader: "css-loader",
-                        options: {
-                            sourceMap: true,
-                            modules: true,
-                            localIdentName: "[local]___[hash:base64:5]"
-                        }
                    },
                    {
-                        loader: "less-loader"
+                        loader: "less-loader",
+                        options: {
+                            modifyVars: {
+                                'primary-color': configurations.theme.primaryColor,
+                                'link-color': configurations.theme.primaryColor,
+                            },
+                            javascriptEnabled: true,
+                        },
                    }
                ]
            },