Adding the flexibility to change the css files

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx

@@ -31,18 +31,21 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
+import Theme from './themes/theme';
+
+
 const history = createHistory({basename: '/publisher'});
 
 /**
- * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ *Loading the theme files based on the the user-preference.
  */
-const theme = require("./config.json").theme;
 let muiTheme = null;
-if (theme.current === "default") {
+let selected = Theme.selectedTheme;
-    let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
+if (Theme.currentTheme === "default") {
+    let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
     muiTheme = getMuiTheme(defaultTheme.default);
 } else {
-    let customTheme = require("./themes/" + theme.custom);
+    let customTheme = require("./themes/" + selected + "/theme.js");
     muiTheme = getMuiTheme(customTheme.default);
 }
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx

@@ -24,7 +24,7 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -51,6 +51,20 @@ class ApplicationCreate extends Component {
         };
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-create.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-create.css");
+            }
+        }
+    }
+
     /**
      * Handles next button click event.
      * */
@@ -179,15 +193,15 @@ class ApplicationCreate extends Component {
 
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className="middle createapplicationmiddle">
-                <Card style={{maxHeight: '700px', overflow: 'auto'}}>
+                <Card className="creataapplicationcard">
                     <CardTitle title="Create Application"/>
 
                     {/**
                      * The stepper goes here.
                      */}
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto'}}>
+                        <div className="createapplicationcardaction">
                             <Stepper activeStep={stepIndex}>
                                 <Step>
                                     <StepLabel>Select Application Platform</StepLabel>
@@ -199,7 +213,7 @@ class ApplicationCreate extends Component {
                                     <StepLabel>Release</StepLabel>
                                 </Step>
                             </Stepper>
-                            <div style={contentStyle}>
+                            <div className="createapplicationcontent">
                                 {finished ? (
                                     <div>
                                         <p>Create App?</p>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx

@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -112,6 +113,18 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
+
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-listing.css");
+            }
+        }
     }
 
     /**
@@ -156,12 +169,11 @@ class ApplicationListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className="middle applicationListingMiddle">
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
+                <Card className="applicationListingCard">
-                    <TextField hintText="Search"
+                    <TextField hintText="Search" className="applicationListingSearch"
-                               style={{float:'right', paddingRight: '2px'}}
                                onChange={this._searchApplications.bind(this)}/>
-                    <CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
+                    <CardTitle title="Applications" className="applicationListTitle"/>
                     <CardActions>
 
                     </CardActions>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx

@@ -22,6 +22,9 @@ import MenuItem from 'material-ui/MenuItem';
 import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../themes/theme';
+
+
 
 /**
  * The first step of the application creation wizard.
@@ -51,6 +54,17 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step1.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step1.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step1.css");
+            }
+        }
         //Get the list of available platforms and set to the state.
     }
 
@@ -105,10 +119,9 @@ class Step1 extends Component {
     };
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
             <div>
-                <div style={contentStyle}>
+                <div className="creatediv">
                     <div>
                         <div>
                             <SelectField
@@ -134,7 +147,7 @@ class Step1 extends Component {
 
                         <br/>
                         <br/>
-                        <div style={{marginTop: 12}}>
+                        <div className="nextButton">
                             <RaisedButton
                                 label="Next >"
                                 primary={true}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx

@@ -28,6 +28,7 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
+import Theme from '../../../themes/theme';
 
 /**
  * The Second step of application create wizard.
@@ -66,18 +67,21 @@ class Step2 extends Component {
             screenshots: [],
             icon: []
         };
-
-        this.styles = {
-            chip: {
-                margin: 4,
-            },
-            wrapper: {
-                display: 'flex',
-                flexWrap: 'wrap',
-            },
-        };
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step2.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step2.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step2.css");
+            }
+        }
+    }
 
     /**
      * Create a tag on Enter key press and set it to the state.
@@ -142,8 +146,7 @@ class Step2 extends Component {
             <Chip
                 key={data.key}
                 onRequestDelete={() => this._handleRequestDelete(data.key)}
-                style={this.styles.chip}
+                className="applicationCreateChip">
-            >
                 {data.value}
             </Chip>
         );
@@ -299,9 +302,8 @@ class Step2 extends Component {
 
     render() {
         console.log(this.state.visibilityComponent);
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="createStep2Content">
                 <div>
                     <div>
                         <TextField
@@ -353,7 +355,7 @@ class Step2 extends Component {
                             onChange={this._handleTagChange.bind(this)}
                             onKeyPress={this._addTags.bind(this)}
                         /><br/>
-                        <div style={this.styles.wrapper}>
+                        <div className="applicationCreateWrapper">
                             {this.state.tags.map(this._renderChip, this)}
                         </div>
                         <br/>
@@ -365,18 +367,14 @@ class Step2 extends Component {
                             <MenuItem value={0} primaryText="Business"/>
                         </SelectField> <br/>
                         {/*Platform Specific Properties.*/}
-                        <div style={{border: 'solid #BDBDBD 1px'}}>
+                        <div className="platformSpecificPropertyDiv">
-                            <p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
+                            <p className="platformSpecificPropertyP">Platform Specific Properties</p>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
+                            <p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Banner*:</p>
+                            <p className="applicationCreateBannerTitle">Banner*:</p>
-                            <GridList style={{
+                            <GridList className="applicationCreateGrid" cols={1.1}>
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
                                 {this.state.banner.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -387,12 +385,11 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.banner.length === 0 ?
-                                    <Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateBannerDropZone" accept="image/jpeg, image/png"
-                                              accept="image/jpeg, image/png"
                                               onDrop={(banner, rejected) => {
                                                   this.setState({banner, rejected});
                                               }}>
-                                    <p style={{margin: '70px 40px 40px 150px'}}>+</p>
+                                    <p className="applicationCreateBannerp">+</p>
                                 </Dropzone> : <div />}
 
                             </GridList>
@@ -400,13 +397,9 @@ class Step2 extends Component {
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
+                            <p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Screenshots*:</p>
+                            <p className="applicationCreateScreenshotTitle">Screenshots*:</p>
-                            <GridList style={{
+                            <GridList className = "applicationCreateScreenshotGrid" cols={1.1}>
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
                                 {this.state.screenshots.map((file) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={file[0].name}
@@ -417,7 +410,7 @@ class Step2 extends Component {
                                         <img src={file[0].preview}/></GridTile>
                                 ))}
                                 {this.state.screenshots.length < 3 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateScreenshotDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(screenshots, rejected) => {
                                                   let tmpScreenshots = this.state.screenshots;
@@ -425,19 +418,15 @@ class Step2 extends Component {
                                                   this.setState({
                                                       screenshots: tmpScreenshots});
                                               }}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateScreenshotp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
+                            <p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Icon*:</p>
+                            <p className="applicationCreateIconTitle">Icon*:</p>
-                            <GridList style={{
+                            <GridList className="applicationCreateIconGrid" cols={1.1}>
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
                                 {this.state.icon.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -448,10 +437,10 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.icon.length === 0 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateIconDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateIconp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
@@ -460,12 +449,12 @@ class Step2 extends Component {
 
                     <br/>
                     <br/>
-                    <div style={{marginTop: 12}}>
+                    <div className="applicationCreateBackAndNext">
                         <FlatButton
                             label="< Back"
                             disabled={false}
                             onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
+                            className="applicationCreateBack"
                         />
                         <RaisedButton
                             label="Next >"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx

@@ -24,6 +24,7 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../themes/theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -57,6 +58,20 @@ class Step3 extends Component {
         }
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step3.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step3.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step3.css");
+            }
+        }
+    }
+
     /**
      * Handles finish button click.
      * This invokes handleNext function in parent component.
@@ -81,9 +96,8 @@ class Step3 extends Component {
     }
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="applicationCreateStepMiddle">
                 <div>
                     <Toggle
                         label="Release the Application"
@@ -110,13 +124,9 @@ class Step3 extends Component {
                         /><br/>
                     </div>}
 
-                    <div style={{marginTop: 12}}>
+                    <div className="applicationCreateBackAndFinish">
-                        <FlatButton
+                        <FlatButton label="< Back" disabled={false} onClick={this._handlePrev.bind(this)}
-                            label="< Back"
+                                    className="applicationCreateFinish"/>
-                            disabled={false}
-                            onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
-                        />
                         <RaisedButton
                             label="Finish"
                             primary={true}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx

@@ -31,6 +31,8 @@ import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import Theme from '../../themes/theme';
+
 
 /**
  * Base Layout:
@@ -49,7 +51,17 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+          require("../../themes/default/basic-layout.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/basic-layout.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/basic-layout.css");
+            }
+        }
     }
 
     handleApplicationClick() {
@@ -142,16 +154,7 @@ class BaseLayout extends Component {
                         </List>
                     </Drawer>
                 </div>
-                <div style=
+                <div className="basicLayoutDiv">
-                         {
-                             {
-                                 height: 'calc(100% - 64px)',
-                                 marginLeft: '16%',
-                                 width: 'calc(100%-15%)',
-                                 top: 64,
-                                 left: "-100px"
-                             }
-                         }>
                     {this.props.children}
                 </div>
             </div>);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx

@@ -31,6 +31,7 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
+import Theme from '../../themes/theme';
 
 /**
  * Platform Create component.
@@ -64,6 +65,20 @@ class PlatformCreate extends Component {
         }
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-create.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-create.css");
+            }
+        }
+    }
+
     /**
      * Handles toggle button actions.
      * One method is used for all the toggle buttons and, each toggle is identified by the id.
@@ -184,12 +199,12 @@ class PlatformCreate extends Component {
             property} = this.state;
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className="middle createplatformmiddle">
                 <Card>
                     <CardTitle title="Create Platform"/>
 
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
+                        <div className="createplatformcardaction">
                             <form>
                                 <TextField
                                     hintText="Enter the Platform Name."
@@ -224,17 +239,17 @@ class PlatformCreate extends Component {
                                     toggled={enabled}
                                 /> <br/>
                                 <div>
-                                    <p style={{color: '#BaBaBa'}}>Platform Properties</p>
+                                    <p className="createplatformproperties">Platform Properties</p>
                                     <div id="property-container">
                                         {platformProperties.map((p) => {
                                             return <div key={p.key}>{p.key} : {p.value}
                                                 <IconButton onClick={this._removeProperty.bind(this, p)}>
-                                                    <Close style={{height: '10px', width: '10px'}}/>
+                                                    <Close className="createplatformpropertyclose"/>
                                                 </IconButton>
                                             </div>
                                         })}
                                     </div>
-                                    <div style={{display: 'flex'}}>
+                                    <div className="createplatformproperty">
                                         <TextField
                                             id="property"
                                             hintText="Property Name"
@@ -244,7 +259,7 @@ class PlatformCreate extends Component {
                                             onChange={this._onTextChange.bind(this)}
                                         /> <em/>
                                         <SelectField
-                                            style={{flex: '1 1 23% 1', margin: '0 1%'}}
+                                            className="createplatformpropertyselect"
                                             floatingLabelText="Property Type"
                                             value={selectedProperty}
                                             floatingLabelFixed={true}
@@ -262,13 +277,8 @@ class PlatformCreate extends Component {
                                     </div>
                                 </div>
                                 <div>
-                                    {/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
+                                    <p className="createplatformiconp">Platform Icon*:</p>
-                                    <p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
+                                    <GridList className="createplatformicon" cols={1.1}>
-                                    <GridList style={{
-                                        display: 'flex',
-                                        flexWrap: 'nowrap',
-                                        overflowX: 'auto',
-                                    }} cols={1.1}>
                                         {this.state.icon.map((tile) => (
                                             <GridTile key={Math.floor(Math.random() * 1000)}
                                                       title={tile.name}
@@ -280,12 +290,10 @@ class PlatformCreate extends Component {
                                             </GridTile>
                                         ))}
                                         {this.state.icon.length === 0 ?
-                                            <Dropzone style={
+                                            <Dropzone className="createplatformdropzone"
-                                                {width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
-                                            }
                                                       accept="image/jpeg, image/png"
                                                       onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
-                                                <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                                <p className="createplatformdropzonep">+</p>
                                             </Dropzone> : <div />}
                                     </GridList>
                                 </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx

@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -40,6 +41,17 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-listing.css");
+            }
+        }
         //Fetch all the applications from backend and create application objects.
     }
 
@@ -75,12 +87,11 @@ class PlatformListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className= 'middle listingplatformmiddle'>
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
+                <Card className='listingplatformcard'>
-                    <TextField hintText="Search"
+                    <TextField hintText="Search" onChange={this._searchApplications.bind(this)}
-                               style={{float:'right', paddingRight: '2px'}}
+                               className='listingplatformsearch'/>
-                               onChange={this._searchApplications.bind(this)}/>
+                    <CardTitle title="Platforms" className='listingplatformTitle'/>
-                    <CardTitle title="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
                     <CardActions>
 
                     </CardActions>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx

@@ -22,6 +22,7 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * The Custom Table Component.
@@ -60,7 +61,18 @@ class DataTable extends Component {
     };
 
     componentWillMount() {
-        this.setState({data: this.props.data, headers: this.props.headers})
+        this.setState({data: this.props.data, headers: this.props.headers});
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -95,8 +107,8 @@ class DataTable extends Component {
                              adjustForCheckbox={ false }>
                     <TableRow>
                         {headers.map((header) => {
-                                return (<DataTableHeader key={header.data_id}
+                                return (<DataTableHeader key={header.data_id} className="datatableRowColumn"
-                                                         style={{display: 'flex'}} header={header}/>)
+                                                         header={header}/>)
                             }
                         )}
                     </TableRow>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * Data Table header component.
@@ -31,6 +32,20 @@ class DataTableHeader extends Component {
         super();
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
+    }
+
     /**
      * The onClick function of the table header.
      * Invokes the function passed in the header object.
@@ -48,20 +63,13 @@ class DataTableHeader extends Component {
          * */
         if (this.props.header.sortable) {
             headerCell = <FlatButton label={this.props.header.label}
-                                    onClick={this._tableHeaderClick.bind(this)}
+                                    onClick={this._tableHeaderClick.bind(this)} className="sortableHeaderCell"/>;
-                                    style={{color: '#bdbdbd'}}/>;
         } else {
-            headerCell = <span style={{position: 'relative',
+            headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
-                paddingLeft: '16px',
-                paddingRight: '16px',
-                textTransform: 'uppercase',
-                fontWeight: 'normal',
-                color: '#bdbdbd',
-                fontSize: '14px'}}>{this.props.header.label}</span>;
         }
 
         return (
-            <TableHeaderColumn key={this.props.header.id} style={{paddingLeft: '0px'}} >
+            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn" >
                 {headerCell}
             </TableHeaderColumn>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx

@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * Data table row component.
@@ -34,7 +35,18 @@ class DataTableRow extends Component {
     }
 
     componentWillMount() {
-        this.setState({dataItem: this.props.dataItem})
+        this.setState({dataItem: this.props.dataItem});
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
     }
 
     /**
@@ -50,7 +62,7 @@ class DataTableRow extends Component {
                 <TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
                     {Object.keys(dataItem).map((key) => {
                         if (key !== 'id') {
-                            return <TableRowColumn style={{alignItems: 'center'}}
+                            return <TableRowColumn className = "datatableRowColumn"
                                                    key={key}>{dataItem[key]}</TableRowColumn>
                         } else {
                             return <TableRowColumn key={key}/>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json

@@ -1,7 +1,6 @@
 {
   "theme": {
-    "current" : "default",
+    "type": "default",
-    "default" : "lightBaseTheme",
+    "value": "lightBaseTheme"
-    "custom" : "custom-theme"
   }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js

@@ -1,12 +0,0 @@
-import {
-    indigo500, indigo700, redA200,
-} from 'material-ui/styles/colors';
-
-export default {
-    palette: {
-        primary1Color: indigo500,
-        primary2Color: indigo700,
-        accent1Color: redA200,
-        pickerHeaderColor: indigo500,
-    },
-};

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
+ * {
+ *     "theme" : {
+ *       "type" : "custom",
+ *       "value" : "custom-theme"
+ *     }
+ *   }
+ */
+import {
+    indigo500, indigo700, redA200,
+} from 'material-ui/styles/colors';
+
+export default {
+    palette: {
+        primary1Color: indigo500,
+        primary2Color: indigo700,
+        accent1Color: redA200,
+        pickerHeaderColor: indigo500,
+    },
+};

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.creatediv {
+    margin: 0 16px;
+}
+
+.nextButton {
+    margin-top: 12px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css

@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateChip {
+    margin: 4px;
+}
+
+.createStep2Content {
+    margin: 0 16px;
+}
+
+
+.applicationCreateWrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.platformSpecificPropertyDiv {
+    border: solid #BDBDBD 1px;
+}
+
+.platformSpecificPropertyP {
+    color: #BDBDBD;
+}
+
+.applicationCreateBannerError {
+    color: #f44336;
+}
+
+.applicationCreateBannerTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateBannerDropZone {
+    width: 300px;
+    height: 150px;
+    border: dashed #BDBDBD 1px
+}
+
+.applicationCreateBannerp {
+    margin: 70px 40px 40px 150px;
+}
+
+.applicationCreateScreenshotError {
+    color: #f44336;
+}
+
+.applicationCreateScreenshotTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateScreenshotGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateScreenshotDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateScreenshotp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applcationCreateIconError {
+    color: #f44336;
+}
+
+.applicationCreateIconTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateIconGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateIconDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateIconp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applicationCreateBackAndNext {
+    margin-top: 12px;
+}
+
+.applicationCreateBack {
+    margin-right: 12px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateStepMiddle {
+    margin: 0 16px;
+}
+
+.applicationCreateBackAndFinish {
+    margin-top: 12px;
+}
+
+.applicationCreateFinish {
+    margin-right: 12px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createapplicationmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.creataapplicationcard {
+    max-height: 700px;
+    overflow: auto;
+}
+.createapplicationcardaction {
+    width: 100%;
+    margin: auto;
+}
+
+.createapplicationcontent {
+    margin: 0 16px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationListingMiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.applicationListingCard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.applicationListingSearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.applicationListTitle {
+    display: flex;
+    flex-wrap: wrap;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.basicLayoutDiv {
+    height: calc(100% - 64px);
+    margin-left: 16%;
+    width: calc(100% - 15%);
+    top: 64px;
+    left: -100px;
+}
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.tableRow {
+    display: flex;
+}
+
+.datatableRowColumn {
+    align-items: center;
+}
+
+.sortableHeaderCell {
+    color: #bdbdbd;
+}
+
+.notsortableHeaderCell {
+    position: relative;
+    padding-left: 16px;
+    padding-right: 16px;
+    text-transform: uppercase;
+    font-weight: normal;
+    color: #bdbdbd;
+    font-size: 14px;
+}
+
+.datatableHeaderColumn {
+    padding-left: 0;
+}
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%
+}
+
+.createplatformcardaction {
+    width: 100%;
+    margin: auto;
+    padding-left: 10px;
+}
+
+.createplatformproperties {
+    color: #BaBaBa;
+}
+
+.createplatformpropertyclose {
+    height: 10px;
+    width: 10px;
+}
+
+
+.createplatformproperty {
+    display: flex;
+}
+
+.createplatformpropertyselect {
+    flex: 1 1 23% 1;
+    margin: 0 1%
+}
+
+.createplatformicon {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.createplatformiconp {
+    color: #BDBDBD;
+}
+
+.createplatformdropzone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.createplatformdropzonep {
+    margin: 70px 40px 70px 70px
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+.listingplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.listingplatformcard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.listingplatformsearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.listingplatformTitle {
+    display: flex;
+    flex-wrap: wrap;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This class will read through the configuration file and saves the theme names for the usage in other files.
+ * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ */
+class Theme {
+    constructor() {
+        const theme = require("../config.json").theme;
+        this.currentTheme = theme.type;
+        if (this.currentTheme === "default") {
+            this.selectedTheme = theme.value;
+        } else {
+            this.selectedTheme = theme.value;
+        }
+    }
+}
+
+export default (new Theme);