PLT-3010 - Updating system console (#3146)

* Updating system console

* Updating system console stuff

* Updating ldap settings

webapp/components/admin_console/admin_sidebar.jsx

@@ -265,6 +265,7 @@ export default class AdminSidebar extends React.Component {
                             />
                         </AdminSidebarCategory>
                         <AdminSidebarCategory
+                            sectionClass='sections--settings'
                             parentLink='/admin_console'
                             icon='fa-gear'
                             title={
@@ -276,6 +277,7 @@ export default class AdminSidebar extends React.Component {
                         >
                             <AdminSidebarSection
                                 name='general'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.general'
@@ -310,6 +312,7 @@ export default class AdminSidebar extends React.Component {
                                         />
                                     }
                                 />
+                                {complianceSettings}
                                 <AdminSidebarSection
                                     name='logging'
                                     title={
@@ -322,6 +325,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='authentication'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.authentication'
@@ -351,6 +355,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='security'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.security'
@@ -406,6 +411,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='notifications'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.notifications'
@@ -434,6 +440,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='integrations'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.integrations'
@@ -460,17 +467,9 @@ export default class AdminSidebar extends React.Component {
                                     }
                                 />
                             </AdminSidebarSection>
-                            <AdminSidebarSection
-                                name='database'
-                                title={
-                                    <FormattedMessage
-                                        id='admin.sidebar.database'
-                                        defaultMessage='Database'
-                                    />
-                                }
-                            />
                             <AdminSidebarSection
                                 name='files'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.files'
@@ -499,6 +498,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='customization'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.customization'
@@ -526,7 +526,16 @@ export default class AdminSidebar extends React.Component {
                                     }
                                 />
                             </AdminSidebarSection>
-                            {complianceSettings}
+                            <AdminSidebarSection
+                                name='advanced'
+                                type='text'
+                                title={
+                                    <FormattedMessage
+                                        id='admin.sidebar.advanced'
+                                        defaultMessage='Advanced'
+                                    />
+                                }
+                            >
                                 <AdminSidebarSection
                                     name='rate'
                                     title={
@@ -536,6 +545,15 @@ export default class AdminSidebar extends React.Component {
                                         />
                                     }
                                 />
+                                <AdminSidebarSection
+                                    name='database'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.database'
+                                            defaultMessage='Database'
+                                        />
+                                    }
+                                />
                                 <AdminSidebarSection
                                     name='developer'
                                     title={
@@ -545,6 +563,7 @@ export default class AdminSidebar extends React.Component {
                                         />
                                     }
                                 />
+                            </AdminSidebarSection>
                         </AdminSidebarCategory>
                         {this.renderTeams()}
                         <AdminSidebarCategory

webapp/components/admin_console/admin_sidebar_category.jsx

@@ -11,6 +11,7 @@ export default class AdminSidebarCategory extends React.Component {
             name: React.PropTypes.string,
             title: React.PropTypes.node.isRequired,
             icon: React.PropTypes.string.isRequired,
+            sectionClass: React.PropTypes.string,
             parentLink: React.PropTypes.string,
             children: React.PropTypes.node,
             action: React.PropTypes.node
@@ -57,7 +58,7 @@ export default class AdminSidebarCategory extends React.Component {
         let clonedChildren = null;
         if (this.props.children && this.context.router.isActive(link)) {
             clonedChildren = (
-                <ul className='sections'>
+                <ul className={'sections ' + this.props.sectionClass}>
                     {
                         React.Children.map(this.props.children, (child) => {
                             if (child === null) {

webapp/components/admin_console/admin_sidebar_section.jsx

@@ -10,6 +10,7 @@ export default class AdminSidebarSection extends React.Component {
         return {
             name: React.PropTypes.string.isRequired,
             title: React.PropTypes.node.isRequired,
+            type: React.PropTypes.string,
             parentLink: React.PropTypes.string,
             subsection: React.PropTypes.bool,
             children: React.PropTypes.arrayOf(React.PropTypes.element),
@@ -59,8 +60,7 @@ export default class AdminSidebarSection extends React.Component {
             className += ' sidebar-subsection';
         }
 
-        return (
+        let sidebarItem = (
-            <li className={className}>
             <Link
                 className={`${className}-title`}
                 activeClassName={`${className}-title ${className}-title--active`}
@@ -73,6 +73,26 @@ export default class AdminSidebarSection extends React.Component {
                 </span>
                 {this.props.action}
             </Link>
+        );
+
+        if (this.props.type === 'text') {
+            sidebarItem = (
+                <div
+                    className={`${className}-title`}
+                    activeClassName={`${className}-title ${className}-title--active`}
+                    onlyActiveOnIndex={this.props.onlyActiveOnIndex}
+                >
+                    <span className={`${className}-title__text`}>
+                        {this.props.title}
+                    </span>
+                    {this.props.action}
+                </div>
+            );
+        }
+
+        return (
+            <li className={className}>
+                {sidebarItem}
                 {clonedChildren}
             </li>
         );

webapp/components/admin_console/configuration_settings.jsx

@@ -34,8 +34,8 @@ export default class ConfigurationSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
+                    id='admin.general.configuration'
-                    defaultMessage='General Settings'
+                    defaultMessage='Configuration'
                 />
             </h3>
         );
@@ -43,14 +43,7 @@ export default class ConfigurationSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.general.configuration'
-                        defaultMessage='Configuration'
-                    />
-                }
-            >
                 <ReloadConfigButton/>
                 <TextSetting
                     id='listenAddress'

webapp/components/admin_console/connection_settings.jsx

@@ -36,8 +36,8 @@ export default class ConnectionSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
+                    id='admin.security.connection'
-                    defaultMessage='Security Settings'
+                    defaultMessage='Connections'
                 />
             </h3>
         );
@@ -45,14 +45,7 @@ export default class ConnectionSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.security.connection'
-                        defaultMessage='Connections'
-                    />
-                }
-            >
                 <TextSetting
                     id='allowCorsFrom'
                     label={

webapp/components/admin_console/custom_brand_settings.jsx

@@ -41,8 +41,8 @@ export default class CustomBrandSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.customization.title'
+                    id='admin.customization.customBrand'
-                    defaultMessage='Customization Settings'
+                    defaultMessage='Custom Branding'
                 />
             </h3>
         );
@@ -104,14 +104,7 @@ export default class CustomBrandSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.customization.customBrand'
-                        defaultMessage='Custom Branding'
-                    />
-                }
-            >
                 <TextSetting
                     id='siteName'
                     label={

webapp/components/admin_console/email_authentication_settings.jsx

@@ -35,8 +35,8 @@ export default class EmailAuthenticationSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
+                    id='admin.authentication.email'
-                    defaultMessage='Authentication Settings'
+                    defaultMessage='Email'
                 />
             </h3>
         );
@@ -44,14 +44,7 @@ export default class EmailAuthenticationSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.email'
-                        defaultMessage='Email'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='enableSignUpWithEmail'
                     label={

webapp/components/admin_console/email_settings.jsx

@@ -52,8 +52,8 @@ export default class EmailSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.notifications.title'
+                    id='admin.notifications.email'
-                    defaultMessage='Notification Settings'
+                    defaultMessage='Email'
                 />
             </h3>
         );
@@ -61,14 +61,7 @@ export default class EmailSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.notifications.email'
-                        defaultMessage='Email'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='sendEmailNotifications'
                     label={

webapp/components/admin_console/external_service_settings.jsx

@@ -35,8 +35,8 @@ export default class ExternalServiceSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.integration.title'
+                    id='admin.integrations.external'
-                    defaultMessage='Integration Settings'
+                    defaultMessage='External Services'
                 />
             </h3>
         );
@@ -44,14 +44,7 @@ export default class ExternalServiceSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.integrations.external'
-                        defaultMessage='External Services'
-                    />
-                }
-            >
                 <TextSetting
                     id='segmentDeveloperKey'
                     label={

webapp/components/admin_console/generated_setting.jsx

@@ -83,6 +83,7 @@ export default class GeneratedSetting extends React.Component {
                     <div className='help-text'>
                         {this.props.helpText}
                     </div>
+                    <div className='help-text'>
                         <button
                             className='btn btn-default'
                             onClick={this.regenerate}
@@ -92,6 +93,7 @@ export default class GeneratedSetting extends React.Component {
                         </button>
                     </div>
                 </div>
+            </div>
         );
     }
 }

webapp/components/admin_console/gitlab_settings.jsx

@@ -44,8 +44,8 @@ export default class GitLabSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
+                    id='admin.authentication.gitlab'
-                    defaultMessage='Authentication Settings'
+                    defaultMessage='GitLab'
                 />
             </h3>
         );
@@ -53,14 +53,7 @@ export default class GitLabSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.gitlab'
-                        defaultMessage='GitLab'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='enable'
                     label={

webapp/components/admin_console/image_settings.jsx

@@ -43,8 +43,8 @@ export default class ImageSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.files.title'
+                    id='admin.files.images'
-                    defaultMessage='File Settings'
+                    defaultMessage='Images'
                 />
             </h3>
         );
@@ -52,14 +52,7 @@ export default class ImageSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.files.images'
-                        defaultMessage='Images'
-                    />
-                }
-            >
                 <TextSetting
                     id='thumbnailWidth'
                     label={

webapp/components/admin_console/ldap_settings.jsx

@@ -68,8 +68,8 @@ export default class LdapSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
+                    id='admin.authentication.ldap'
-                    defaultMessage='Authentication Settings'
+                    defaultMessage='LDAP'
                 />
             </h3>
         );
@@ -82,15 +82,7 @@ export default class LdapSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.ldap'
-                        defaultMessage='LDAP'
-                    />
-
-                }
-            >
                 <Banner
                     description={
                         <FormattedMessage

webapp/components/admin_console/legal_and_support_settings.jsx

@@ -41,8 +41,8 @@ export default class LegalAndSupportSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.customization.title'
+                    id='admin.customization.support'
-                    defaultMessage='Customization Settings'
+                    defaultMessage='Legal and Support'
                 />
             </h3>
         );
@@ -50,14 +50,7 @@ export default class LegalAndSupportSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.customization.support'
-                        defaultMessage='Legal and Support'
-                    />
-                }
-            >
                 <TextSetting
                     id='termsOfServiceLink'
                     label={

webapp/components/admin_console/log_settings.jsx

@@ -45,8 +45,8 @@ export default class LogSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
+                    id='admin.general.log'
-                    defaultMessage='General Settings'
+                    defaultMessage='Logging'
                 />
             </h3>
         );
@@ -60,15 +60,7 @@ export default class LogSettings extends AdminSettings {
         ];
 
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.general.log'
-                        defaultMessage='Logging'
-                    />
-
-                }
-            >
                 <BooleanSetting
                     id='enableConsole'
                     label={

webapp/components/admin_console/login_settings.jsx

@@ -41,8 +41,8 @@ export default class LoginSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
+                    id='admin.security.login'
-                    defaultMessage='Security Settings'
+                    defaultMessage='Login'
                 />
             </h3>
         );
@@ -73,14 +73,7 @@ export default class LoginSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.security.login'
-                        defaultMessage='Login'
-                    />
-                }
-            >
                 <GeneratedSetting
                     id='passwordResetSalt'
                     label={

webapp/components/admin_console/privacy_settings.jsx

@@ -33,8 +33,8 @@ export default class PrivacySettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
+                    id='admin.general.privacy'
-                    defaultMessage='General Settings'
+                    defaultMessage='Privacy'
                 />
             </h3>
         );
@@ -42,14 +42,7 @@ export default class PrivacySettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.general.privacy'
-                        defaultMessage='Privacy'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='showEmailAddress'
                     label={

webapp/components/admin_console/public_link_settings.jsx

@@ -34,8 +34,8 @@ export default class PublicLinkSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
+                    id='admin.security.public_links'
-                    defaultMessage='Security Settings'
+                    defaultMessage='Public Links'
                 />
             </h3>
         );
@@ -43,14 +43,7 @@ export default class PublicLinkSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.security.public_links'
-                        defaultMessage='Public Links'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='enablePublicLink'
                     label={

webapp/components/admin_console/session_settings.jsx

@@ -39,8 +39,8 @@ export default class SessionSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
+                    id='admin.security.session'
-                    defaultMessage='Security Settings'
+                    defaultMessage='Sessions'
                 />
             </h3>
         );
@@ -48,14 +48,7 @@ export default class SessionSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.security.session'
-                        defaultMessage='Sessions'
-                    />
-                }
-            >
                 <TextSetting
                     id='sessionLengthWebInDays'
                     label={

webapp/components/admin_console/signup_settings.jsx

@@ -36,8 +36,8 @@ export default class SignupSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
+                    id='admin.security.signup'
-                    defaultMessage='Security Settings'
+                    defaultMessage='Signup'
                 />
             </h3>
         );
@@ -45,14 +45,7 @@ export default class SignupSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.security.signup'
-                        defaultMessage='Signup'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='requireEmailVerification'
                     label={

webapp/components/admin_console/storage_settings.jsx

@@ -49,8 +49,8 @@ export default class StorageSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.files.title'
+                    id='admin.files.storage'
-                    defaultMessage='File Settings'
+                    defaultMessage='Storage'
                 />
             </h3>
         );
@@ -58,14 +58,7 @@ export default class StorageSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.files.storage'
-                        defaultMessage='Storage'
-                    />
-                }
-            >
                 <TextSetting
                     id='maxFileSize'
                     label={

webapp/components/admin_console/users_and_teams_settings.jsx

@@ -48,8 +48,8 @@ export default class UsersAndTeamsSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
+                    id='admin.general.usersAndTeams'
-                    defaultMessage='General Settings'
+                    defaultMessage='Users and Teams'
                 />
             </h3>
         );
@@ -57,14 +57,7 @@ export default class UsersAndTeamsSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.general.usersAndTeams'
-                        defaultMessage='Users and Teams'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='enableUserCreation'
                     label={

webapp/components/admin_console/webhook_settings.jsx

@@ -41,8 +41,8 @@ export default class WebhookSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.integration.title'
+                    id='admin.integrations.webhook'
-                    defaultMessage='Integration Settings'
+                    defaultMessage='Webhooks and Commands'
                 />
             </h3>
         );
@@ -50,14 +50,7 @@ export default class WebhookSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
+            <SettingsGroup>
-                header={
-                    <FormattedMessage
-                        id='admin.integrations.webhook'
-                        defaultMessage='Webhooks and Commands'
-                    />
-                }
-            >
                 <BooleanSetting
                     id='enableIncomingWebhooks'
                     label={

webapp/i18n/en.json

@@ -433,6 +433,7 @@
   "admin.sidebar.privacy": "Privacy",
   "admin.sidebar.publicLinks": "Public Links",
   "admin.sidebar.push": "Mobile Push",
+  "admin.sidebar.advanced": "Advanced",
   "admin.sidebar.rateLimiting": "Rate Limiting",
   "admin.sidebar.reports": "SITE REPORTS",
   "admin.sidebar.rmTeamSidebar": "Remove team from sidebar menu",

webapp/root.jsx

@@ -370,6 +370,10 @@ function renderRootComponent() {
                                 path='privacy'
                                 component={PrivacySettings}
                             />
+                            <Route
+                                path='compliance'
+                                component={ComplianceSettings}
+                            />
                             <Route
                                 path='logging'
                                 component={LogSettings}
@@ -435,10 +439,6 @@ function renderRootComponent() {
                                 component={ExternalServiceSettings}
                             />
                         </Route>
-                        <Route
-                            path='database'
-                            component={DatabaseSettings}
-                        />
                         <Route path='files'>
                             <IndexRedirect to='storage'/>
                             <Route
@@ -461,18 +461,21 @@ function renderRootComponent() {
                                 component={LegalAndSupportSettings}
                             />
                         </Route>
-                        <Route
+                        <Route path='advanced'>
-                            path='compliance'
+                            <IndexRedirect to='rate'/>
-                            component={ComplianceSettings}
-                        />
                             <Route
                                 path='rate'
                                 component={RateSettings}
                             />
+                            <Route
+                                path='database'
+                                component={DatabaseSettings}
+                            />
                             <Route
                                 path='developer'
                                 component={DeveloperSettings}
                             />
+                        </Route>
                         <Route path='team'>
                             <Redirect
                                 from=':team'

webapp/sass/components/_buttons.scss

@@ -15,6 +15,18 @@
         }
     }
 
+    &.btn-default {
+        background: alpha-color($black, .7);
+        color: $white;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: alpha-color($black, .8);
+            color: $white;
+        }
+    }
+
     &.btn-danger {
         color: $white;
 

webapp/sass/routes/_admin-console.scss

@@ -103,8 +103,8 @@
         }
 
         .help-text {
-            color: #777;
+            color: alpha-color($black, .5);
-            margin: 10px 0 0 15px;
+            margin: 10px 0 0;
 
             &.no-margin {
                 margin: 0;
@@ -261,10 +261,11 @@
     }
 
     .nav-pills__container {
-        background: #111;
         @include font-smoothing(initial);
-        height: calc(100% - 80px);
+        background: #111;
+        height: calc(100% - 50px);
         margin-top: 1px;
+        padding-bottom: 20px;
         position: relative;
     }
 
@@ -291,6 +292,23 @@
         > .sidebar-section-title {
             position: relative;
         }
+
+        .nav__sub-menu {
+            margin-bottom: 7px;
+        }
+    }
+
+    .sections {
+        &.sections--settings {
+            .sidebar-section-title {
+                text-transform: uppercase;
+
+                &:hover,
+                &:focus {
+                    color: alpha-color($white, .5);
+                }
+            }
+        }
     }
 
     .sidebar-section-title {
@@ -303,7 +321,8 @@
 
     .sidebar-section-title,
     .sidebar-subsection-title {
-        color: #bbb;
+        @include clearfix;
+        color: alpha-color($white, .5);
         display: block;
         font-size: 13px;
         position: relative;
@@ -318,8 +337,14 @@
         }
 
         &--active {
+            background: alpha-color($white, .1);
             color: $white;
-            font-weight: 600;
+
+            &:hover,
+            &:focus {
+                background: alpha-color($white, .1);
+                color: $white;
+            }
 
             &:after {
                 -moz-osx-font-smoothing: grayscale;