Merge branch 'master' of git://github.com/microsoft/nni

README.md

@@ -17,9 +17,9 @@
 NNI (Neural Network Intelligence) is a toolkit to help users run automated machine learning (AutoML) experiments.
 The tool dispatches and runs trial jobs generated by tuning algorithms to search the best neural architecture and/or hyper-parameters in different environments like local machine, remote servers and cloud.
 
-### **NNI [v0.8](https://github.com/Microsoft/nni/releases) has been released!**
+### **NNI [v0.9](https://github.com/Microsoft/nni/releases) has been released! &nbsp;<a href="#nni-released-reminder"><img width="48" src="docs/img/release_icon.png"></a>**
 <p align="center">
-  <a href="#nni-v05-has-been-released"><img src="docs/img/overview.svg" /></a>
+  <a href="#nni-has-been-released"><img src="docs/img/overview.svg" /></a>
 </p>
 <table>
   <tbody>
@@ -138,7 +138,7 @@ Linux and MacOS
 * Run the following commands in an environment that has `python >= 3.5`, `git` and `wget`.
 
 ```bash
-    git clone -b v0.8 https://github.com/Microsoft/nni.git
+    git clone -b v0.9 https://github.com/Microsoft/nni.git
     cd nni
     source install.sh
 ```
@@ -148,7 +148,7 @@ Windows
 * Run the following commands in an environment that has `python >=3.5`, `git` and `PowerShell`
 
 ```bash
-  git clone -b v0.8 https://github.com/Microsoft/nni.git
+  git clone -b v0.9 https://github.com/Microsoft/nni.git
   cd nni
   powershell -ExecutionPolicy Bypass -file install.ps1
 ```
@@ -164,7 +164,7 @@ The following example is an experiment built on TensorFlow. Make sure you have *
 * Download the examples via clone the source code.
 
 ```bash
-    git clone -b v0.8 https://github.com/Microsoft/nni.git
+    git clone -b v0.9 https://github.com/Microsoft/nni.git
 ```
 
 Linux and MacOS

README_zh_CN.md

@@ -10,7 +10,7 @@
 
 NNI (Neural Network Intelligence) 是自动机器学习（AutoML）的工具包。 它通过多种调优的算法来搜索最好的神经网络结构和（或）超参，并支持单机、本地多机、云等不同的运行环境。
 
-### **NNI [v0.8](https://github.com/Microsoft/nni/releases) 已发布！**
+### **NNI [v0.9](https://github.com/Microsoft/nni/releases) 已发布！**
 
 <p align="center">
   <a href="#nni-v05-has-been-released"><img src="docs/img/overview.svg" /></a>

docs/en_US/ExperimentConfig.md

@@ -23,8 +23,12 @@ maxTrialNum:
 #choice: local, remote, pai, kubeflow
 trainingServicePlatform:
 searchSpacePath:
-#choice: true, false
+#choice: true, false, default: false
 useAnnotation:
+#choice: true, false, default: false
+multiPhase:
+#choice: true, false, default: false
+multiThread:
 tuner:
   #choice: TPE, Random, Anneal, Evolution
   builtinTunerName:
@@ -55,8 +59,12 @@ maxTrialNum:
 #choice: local, remote, pai, kubeflow
 trainingServicePlatform:
 searchSpacePath:
-#choice: true, false
+#choice: true, false, default: false
 useAnnotation:
+#choice: true, false, default: false
+multiPhase:
+#choice: true, false, default: false
+multiThread:
 tuner:
   #choice: TPE, Random, Anneal, Evolution
   builtinTunerName:
@@ -93,8 +101,12 @@ maxExecDuration:
 maxTrialNum:
 #choice: local, remote, pai, kubeflow
 trainingServicePlatform:
-#choice: true, false
+#choice: true, false, default: false
 useAnnotation:
+#choice: true, false, default: false
+multiPhase:
+#choice: true, false, default: false
+multiThread:
 tuner:
   #choice: TPE, Random, Anneal, Evolution
   builtinTunerName:
@@ -194,6 +206,16 @@ machineList:
 
     Note: if set useAnnotation=True, the searchSpacePath field should be removed.
 
+* __multiPhase__
+  * Description
+
+    __multiPhase__ enable [multi-phase experiment](./MultiPhase.md).
+
+* __multiThread__
+  * Description
+
+    __multiThread__ enable multi-thread mode for dispatcher, if multiThread is set to `true`, dispatcher will start a thread to process each command from NNI Manager.
+
 * __nniManagerIp__
   * Description
 

docs/en_US/Nnictl.md

@@ -368,8 +368,14 @@ Debug mode will disable version check function in Trialkeeper.
   * Usage
 
     ```bash
-    nnictl experiment list
+    nnictl experiment list [OPTIONS]
     ```
+  
+  * Options
+
+  |Name, shorthand|Required|Default|Description|
+  |------|------|------ |------|
+  |--all|  False| |list all of experiments|
 
 * __nnictl experiment delete__
 
@@ -388,6 +394,7 @@ Debug mode will disable version check function in Trialkeeper.
   |Name, shorthand|Required|Default|Description|
   |------|------|------ |------|
   |id|  False| |ID of the experiment|
+  |--all|  False| |delete all of experiments|
 
 
 

docs/en_US/Release.md

 # ChangeLog
 
+## Release 0.9 - 7/1/2019
+
+### Major Features
+* General NAS programming interface
+    * Add `enas-mode`  and `oneshot-mode` for NAS interface: [PR #1201](https://github.com/microsoft/nni/pull/1201#issue-291094510)
+* [Gaussian Process Tuner with Matern kernel](./GPTuner.md) 
+
+* Multiphase experiment supports
+    * Added new training service support for multiphase experiment: PAI mode supports multiphase experiment since v0.9.
+    * Added multiphase capability for the following builtin tuners: 
+        * TPE, Random Search, Anneal, Naïve Evolution, SMAC, Network Morphism, Metis Tuner.
+    
+    For details, please refer to [Write a tuner that leverages multi-phase](./MultiPhase.md#write-a-tuner-that-leverages-multi-phase)
+
+* Web Portal
+    * Enable trial comparation in Web Portal. For details, refer to [View trials status](WebUI.md#view-trials-status)
+    * Allow users to adjust rendering interval of Web Portal. For details, refer to [View Summary Page](WebUI.md#view-summary-page)
+    * show intermediate results more friendly. For details, refer to [View trials status](WebUI.md#view-trials-status)
+* [Commandline Interface](Nnictl.md)
+    * `nnictl experiment delete`: delete one or all experiments, it includes log, result, environment information and cache. It uses to delete useless experiment result, or save disk space.
+    * `nnictl platform clean`: It uses to clean up disk on a target platform. The provided YAML file includes the information of target platform, and it follows the same schema as the NNI configuration file.
+### Bug fix and other changes
+* Tuner Installation Improvements: add [sklearn](https://scikit-learn.org/stable/) to nni dependencies.
+* (Bug Fix) Failed to connect to PAI http code - [Issue #1076](https://github.com/microsoft/nni/issues/1076)
+* (Bug Fix) Validate file name for PAI platform - [Issue #1164](https://github.com/microsoft/nni/issues/1164)
+* (Bug Fix) Update GMM evaluation in Metis Tuner
+* (Bug Fix) Negative time number rendering in Web Portal - [Issue #1182](https://github.com/microsoft/nni/issues/1182), [Issue #1185](https://github.com/microsoft/nni/issues/1185)
+* (Bug Fix) Hyper-parameter not shown correctly in WebUI when there is only one hyper parameter - [Issue #1192](https://github.com/microsoft/nni/issues/1192)
+
 ## Release 0.8 - 6/4/2019
 
 ### Major Features

src/webui/src/App.css

 .nni{
-  font-family: 'Segoe';
   color: #212121;
   font-size: 14px;
   background: #f2f2f2;

src/webui/src/components/Modal/Compare.tsx

@@ -127,7 +127,7 @@ class Compare extends React.Component<CompareProps, {}> {
                         <td />
                         {Object.keys(idList).map(key => {
                             return (
-                                <td className="value" key={key}>{idList[key]}</td>
+                                <td className="value idList" key={key}>{idList[key]}</td>
                             );
                         })}
                     </tr>
@@ -193,6 +193,7 @@ class Compare extends React.Component<CompareProps, {}> {
                 destroyOnClose={true}
                 maskClosable={false}
                 width="90%"
+                // centered={true}
             >
                 <Row>{this.intermediate()}</Row>
                 <Row>{this.initColumn()}</Row>

src/webui/src/components/SlideBar.tsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
 import MediaQuery from 'react-responsive';
 import { DOWNLOAD_IP } from '../static/const';
-import { Row, Col, Menu, Dropdown, Icon, Select } from 'antd';
+import { Row, Col, Menu, Dropdown, Icon, Select, Button } from 'antd';
 const { SubMenu } = Menu;
 const { Option } = Select;
 import '../static/style/slideBar.scss';
@@ -14,6 +14,7 @@ interface SliderState {
     version: string;
     menuVisible: boolean;
     navBarVisible: boolean;
+    isdisabledFresh: boolean;
 }
 
 interface SliderProps {
@@ -37,6 +38,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
             version: '',
             menuVisible: false,
             navBarVisible: false,
+            isdisabledFresh: false
         };
     }
 
@@ -224,9 +226,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
             <Menu onClick={this.handleMenuClick} className="menuModal">
                 <Menu.Item key="overview"><Link to={'/oview'}>Overview</Link></Menu.Item>
                 <Menu.Item key="detail"><Link to={'/detail'}>Trials detail</Link></Menu.Item>
-                <Menu.Item key="fresh">
-                    <span className="fresh" onClick={this.fresh}><span>Fresh</span></span>
-                </Menu.Item>
                 <Menu.Item key="feedback">
                     <a href={feedBackLink} target="_blank">Feedback</a>
                 </Menu.Item>
@@ -249,25 +248,41 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
     }
 
     select = () => {
+        const { isdisabledFresh } = this.state;
         return (
-            <Select
-                onSelect={this.getInterval}
-                defaultValue="Refresh every 10s"
-                className="interval"
-            >
-                <Option value="close">Disable Auto Refresh</Option>
-                <Option value="10">Refresh every 10s</Option>
-                <Option value="20">Refresh every 20s</Option>
-                <Option value="30">Refresh every 30s</Option>
-                <Option value="60">Refresh every 1min</Option>
-            </Select>
+            <div className="interval">
+                <Button
+                    className="fresh"
+                    onClick={this.fresh}
+                    type="ghost"
+                    disabled={isdisabledFresh}
+                >
+                    <Icon type="sync" /><span>Refresh</span>
+                </Button>
+                <Select
+                    onSelect={this.getInterval}
+                    defaultValue="Refresh every 10s"
+                >
+                    <Option value="close">Disable Auto Refresh</Option>
+                    <Option value="10">Refresh every 10s</Option>
+                    <Option value="20">Refresh every 20s</Option>
+                    <Option value="30">Refresh every 30s</Option>
+                    <Option value="60">Refresh every 1min</Option>
+                </Select>
+            </div>
         );
     }
 
     fresh = (event: React.SyntheticEvent<EventTarget>) => {
         event.preventDefault();
-        const whichPage = window.location.pathname;
-        this.props.changeFresh(whichPage);
+        event.stopPropagation();
+        if (this._isMounted) {
+            this.setState({ isdisabledFresh: true }, () => {
+                const whichPage = window.location.pathname;
+                this.props.changeFresh(whichPage);
+                setTimeout(() => { this.setState(() => ({ isdisabledFresh: false })); }, 1000);
+            });
+        }
     }
 
     componentDidMount() {
@@ -284,74 +299,75 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         return (
             <Row>
-                <MediaQuery query="(min-width: 1299px)">
-                    <Row className="nav">
-                        <ul className="link">
-                            <li className="logo">
+                <Col span={18}>
+                    <MediaQuery query="(min-width: 1299px)">
+                        <Row className="nav">
+                            <ul className="link">
+                                <li className="logo">
+                                    <Link to={'/oview'}>
+                                        <img
+                                            src={require('../static/img/logo2.png')}
+                                            style={{ width: 88 }}
+                                            alt="NNI logo"
+                                        />
+                                    </Link>
+                                </li>
+                                <li className="tab firstTab">
+                                    <Link to={'/oview'} activeClassName="high">
+                                        Overview
+                                    </Link>
+                                </li>
+                                <li className="tab">
+                                    <Link to={'/detail'} activeClassName="high">
+                                        Trials detail
+                                    </Link>
+                                </li>
+                                <li className="feedback">
+                                    <Dropdown
+                                        className="dropdown"
+                                        overlay={this.menu()}
+                                        onVisibleChange={this.handleVisibleChange}
+                                        visible={menuVisible}
+                                        trigger={['click']}
+                                    >
+                                        <a className="ant-dropdown-link" href="#">
+                                            Download <Icon type="down" />
+                                        </a>
+                                    </Dropdown>
+                                    <a href={feed} target="_blank">
+                                        <img
+                                            src={require('../static/img/icon/issue.png')}
+                                            alt="NNI github issue"
+                                        />
+                                        Feedback
+                                </a>
+                                    <span className="version">Version: {version}</span>
+                                </li>
+                            </ul>
+                        </Row>
+                    </MediaQuery>
+                </Col>
+                <Col span={18}>
+                    <MediaQuery query="(max-width: 1299px)">
+                        <Row className="little">
+                            <Col span={1} className="menu">
+                                <Dropdown overlay={this.navigationBar()} trigger={['click']}>
+                                    <Icon type="unordered-list" className="more" />
+                                </Dropdown>
+                            </Col>
+                            <Col span={14} className="logo">
                                 <Link to={'/oview'}>
                                     <img
                                         src={require('../static/img/logo2.png')}
-                                        style={{ width: 88 }}
+                                        style={{ width: 80 }}
                                         alt="NNI logo"
                                     />
                                 </Link>
-                            </li>
-                            <li className="tab firstTab">
-                                <Link to={'/oview'} activeClassName="high">
-                                    Overview
-                                    </Link>
-                            </li>
-                            <li className="tab">
-                                <Link to={'/detail'} activeClassName="high">
-                                    Trials detail
-                                    </Link>
-                            </li>
-                            <li className="feedback">
-                                <span className="fresh" onClick={this.fresh}>
-                                    <Icon type="sync" /><span>Fresh</span>
-                                </span>
-                                <Dropdown
-                                    className="dropdown"
-                                    overlay={this.menu()}
-                                    onVisibleChange={this.handleVisibleChange}
-                                    visible={menuVisible}
-                                    trigger={['click']}
-                                >
-                                    <a className="ant-dropdown-link" href="#">
-                                        Download <Icon type="down" />
-                                    </a>
-                                </Dropdown>
-                                <a href={feed} target="_blank">
-                                    <img
-                                        src={require('../static/img/icon/issue.png')}
-                                        alt="NNI github issue"
-                                    />
-                                    Feedback
-                            </a>
-                                <span className="version">Version: {version}</span>
-                            </li>
-                        </ul>
-                    </Row>
-                </MediaQuery>
-                <MediaQuery query="(max-width: 1299px)">
-                    <Row className="little">
-                        <Col span={6} className="menu">
-                            <Dropdown overlay={this.navigationBar()} trigger={['click']}>
-                                <Icon type="unordered-list" className="more" />
-                            </Dropdown>
-                        </Col>
-                        <Col span={10} className="logo">
-                            <Link to={'/oview'}>
-                                <img
-                                    src={require('../static/img/logo2.png')}
-                                    style={{ width: 88 }}
-                                    alt="NNI logo"
-                                />
-                            </Link>
-                        </Col>
-                    </Row>
-                </MediaQuery>
-                {this.select()}
+                            </Col>
+                        </Row>
+                    </MediaQuery>
+                </Col>
+                <Col span={3}> {this.select()} </Col>
             </Row>
         );
     }

src/webui/src/components/TrialsDetail.tsx

@@ -394,15 +394,13 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     </Col>
                     <Col span={14} className="right">
                         <Button
-                            type="primary"
-                            className="tableButton editStyle"
+                            className="common"
                             onClick={this.tableList ? this.tableList.addColumn : this.test}
                         >
                             Add column
                         </Button>
                         <Button
-                            type="primary"
-                            className="tableButton editStyle mediateBtn"
+                            className="mediateBtn common"
                             // use child-component tableList's function, the function is in child-component.
                             onClick={this.tableList ? this.tableList.compareBtn : this.test}
                         >

src/webui/src/components/trial-detail/Duration.tsx

@@ -163,9 +163,9 @@ class Duration extends React.Component<DurationProps, DurationState> {
     }
 
     shouldComponentUpdate(nextProps: DurationProps, nextState: DurationState) {
-    
+
         const { whichGraph, source } = nextProps;
-        if (whichGraph === '3') { 
+        if (whichGraph === '3') {
             const beforeSource = this.props.source;
             if (whichGraph !== this.props.whichGraph) {
                 return true;
@@ -174,13 +174,14 @@ class Duration extends React.Component<DurationProps, DurationState> {
             if (source.length !== beforeSource.length) {
                 return true;
             }
-            
-            if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
-                return true;
-            }
 
-            if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
-                return true;
+            if (beforeSource[beforeSource.length - 1] !== undefined) {
+                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
+                    return true;
+                }
+                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
+                    return true;
+                }
             }
         }
         return false;

src/webui/src/components/trial-detail/Intermeidate.tsx

@@ -12,7 +12,7 @@ interface IntermediateState {
     eachIntermediateNum: number; // trial's intermediate number count
     isLoadconfirmBtn: boolean;
     isFilter: boolean;
-    length: number; 
+    length: number;
     clickCounts: number; // user filter intermediate click confirm btn's counts
 }
 
@@ -136,7 +136,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'Scape'
+                    name: 'metric'
                 }
             };
             if (this._isMounted) {
@@ -209,7 +209,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
     componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState) {
         const { isFilter, filterSource } = nextState;
         const { whichGraph, source } = nextProps;
-        
+
         if (whichGraph === '4') {
             if (isFilter === true) {
                 const pointVal = this.pointInput !== null ? this.pointInput.value : '';
@@ -226,16 +226,14 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
     }
 
     shouldComponentUpdate(nextProps: IntermediateProps, nextState: IntermediateState) {
-        const { whichGraph } = nextProps;
+        const { whichGraph, source } = nextProps;
         const beforeGraph = this.props.whichGraph;
         if (whichGraph === '4') {
-            
-            const { source } = nextProps;
             const { isFilter, length, clickCounts } = nextState;
             const beforeLength = this.state.length;
-            const beforeSource = this.state.detailSource;
+            const beforeSource = this.props.source;
             const beforeClickCounts = this.state.clickCounts;
-    
+
             if (isFilter !== this.state.isFilter) {
                 return true;
             }
@@ -243,7 +241,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             if (clickCounts !== beforeClickCounts) {
                 return true;
             }
-            
+
             if (isFilter === false) {
                 if (whichGraph !== beforeGraph) {
                     return true;
@@ -251,15 +249,20 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 if (length !== beforeLength) {
                     return true;
                 }
-                if (source[source.length - 1].description.intermediate.length !==
-                    beforeSource[beforeSource.length - 1].description.intermediate.length) {
+                if (beforeSource.length !== source.length) {
                     return true;
                 }
-                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
-                    return true;
-                }
-                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
-                    return true;
+                if (beforeSource[beforeSource.length - 1] !== undefined) {
+                    if (source[source.length - 1].description.intermediate.length !==
+                        beforeSource[beforeSource.length - 1].description.intermediate.length) {
+                        return true;
+                    }
+                    if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
+                        return true;
+                    }
+                    if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
+                        return true;
+                    }
                 }
             }
         }
@@ -291,7 +294,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             ?
                             <div>
                                 <Col span={3}>
-                                    <span>Scape</span>
+                                    <span>Step</span>
                                     <input
                                         placeholder="point"
                                         ref={input => this.pointInput = input}

src/webui/src/index.css

@@ -49,8 +49,4 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-@font-face {
-	font-family: 'Segoe';
-	src: url('./static/font/SegoePro-Regular.ttf');
-}
 

src/webui/src/static/style/compare.scss

 .compare{
     width: 92%;
+    table-layout: fixed;
     margin: 0 auto;
     color: #333;
     tr{
         line-height: 30px;
-        border-bottom: 1px solid #ccc;
+    }
+    tr:nth-of-type(even){
+        background-color: gainsboro;
     }
     .column{
-        width: 124px;
+        max-width: 124px;
         padding-left: 18px;
         font-weight: 700;
     }
     .value{
-        width: 152px;
+        max-width: 152px;
         padding-right: 18px;
-        text-align: right;
+        text-align: left;
+    }
+    .idList{
+        font-weight: 700;
     }
 }

src/webui/src/static/style/search.scss

@@ -4,6 +4,13 @@
     margin: 0 auto;
     .right{
         text-align: right;
+        .common{
+            border-radius: 0;
+        }
+        .common:hover{
+            color: #0071BC;
+            border-radius: 0;
+        }
     }
     .entry{
         width: 120px;
@@ -31,8 +38,9 @@
     }
 }
 
+/* compare button style */
 Button.mediateBtn{
-    margin: 0 32px;
+    margin: 0 2px 0 8px;
 }
 
 /* each row's Intermediate btn -> Modal*/

src/webui/src/static/style/slideBar.scss

@@ -34,18 +34,10 @@ $drowHoverBgColor: #e2e2e2;
 
 .feedback{
     position: fixed;
-    right: 19%;
+    right: 26%;
     line-height: $barHeight;
     font-size: 16px;
     color: #fff;
-    .fresh{
-        span{
-            margin: 0 10px 0 3px;
-        }
-    }
-    .fresh:hover{
-        cursor: pointer;
-    }
     a{
         color: #fff;
         text-decoration: none;
@@ -60,6 +52,17 @@ $drowHoverBgColor: #e2e2e2;
     }
 }
 
+/* refresh button */
+.fresh{
+    border: none;
+    color: #fff;
+    font-size: 16px;
+    padding: 0;
+}
+.fresh:hover{
+    color: #fff;
+}
+
 .link li{
     float: left;
 }
@@ -70,8 +73,10 @@ $drowHoverBgColor: #e2e2e2;
 }
 .interval{
     position: fixed;
-    right: 7%;
+    right: 6%;
     top: 12px;
+    font-size: 16px;
+    color: #fff;
     .ant-select-selection{
         background-color: transparent;
         border: none;
@@ -82,6 +87,10 @@ $drowHoverBgColor: #e2e2e2;
     .ant-select-arrow{
         color: #fff;
     }
+    .ant-btn-ghost[disabled]{
+        background-color: transparent;
+        color: #fff;
+    }
 }
 /* set select bgcolor */
 .ant-select-dropdown-menu{
@@ -120,8 +129,9 @@ $drowHoverBgColor: #e2e2e2;
 
 /* nav style*/
 .little{
-    width: 100%;
+    width: 90%;
     .menu{
+        margin-left: 33px;
         .more{
             color: #fff;
             font-size: 24px;
@@ -132,10 +142,10 @@ $drowHoverBgColor: #e2e2e2;
         }
     }
     .logo{
-        text-align: center;
+        text-align: right;
     }
 }
 
 .menuModal{
-    width: 180px;
+    width: 198px;
 }