Add icons for each of the local-setting pages

3 files changed, 12 insertions, 4 deletions

diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js
index a992b1ffc..1a6485753 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js
@@ -38,30 +38,35 @@ export default class LocalSettingsNavigation extends React.PureComponent {
           active={index === 0}
           index={0}
           onNavigate={onNavigate}
+          icon='cogs'
           title={intl.formatMessage(messages.general)}
         />
         <LocalSettingsNavigationItem
           active={index === 1}
           index={1}
           onNavigate={onNavigate}
+          icon='pencil'
           title={intl.formatMessage(messages.compose)}
         />
         <LocalSettingsNavigationItem
           active={index === 2}
           index={2}
           onNavigate={onNavigate}
+          textIcon='CW'
           title={intl.formatMessage(messages.content_warnings)}
         />
         <LocalSettingsNavigationItem
           active={index === 3}
           index={3}
           onNavigate={onNavigate}
+          icon='angle-double-up'
           title={intl.formatMessage(messages.collapsed)}
         />
         <LocalSettingsNavigationItem
           active={index === 4}
           index={4}
           onNavigate={onNavigate}
+          icon='image'
           title={intl.formatMessage(messages.media)}
         />
         <LocalSettingsNavigationItem
@@ -76,6 +81,7 @@ export default class LocalSettingsNavigation extends React.PureComponent {
           className='close'
           index={6}
           onNavigate={onClose}
+          icon='times'
           title={intl.formatMessage(messages.close)}
         />
       </nav>
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js
index b67d479e7..68a998b6c 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js
@@ -12,6 +12,7 @@ export default class LocalSettingsPage extends React.PureComponent {
     className: PropTypes.string,
     href: PropTypes.string,
     icon: PropTypes.string,
+    textIcon: PropTypes.string,
     index: PropTypes.number.isRequired,
     onNavigate: PropTypes.func,
     title: PropTypes.string,
@@ -32,6 +33,7 @@ export default class LocalSettingsPage extends React.PureComponent {
       className,
       href,
       icon,
+      textIcon,
       onNavigate,
       title,
     } = this.props;
@@ -40,14 +42,14 @@ export default class LocalSettingsPage extends React.PureComponent {
       active,
     }, className);
 
-    const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null;
+    const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
 
     if (href) return (
       <a
         href={href}
         className={finalClassName}
       >
-        {iconElem} {title}
+        {iconElem} <span>{title}</span>
       </a>
     );
     else if (onNavigate) return (
@@ -57,7 +59,7 @@ export default class LocalSettingsPage extends React.PureComponent {
         tabIndex='0'
         className={finalClassName}
       >
-        {iconElem} {title}
+        {iconElem} <span>{title}</span>
       </a>
     );
     else return null;
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index a6e5c9892..288248f7c 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -72,7 +72,7 @@
 
 .glitch.local-settings__navigation {
   background: lighten($ui-secondary-color, 8%);
-  width: 200px;
+  width: 212px;
   font-size: 15px;
   line-height: 20px;
   overflow-y: auto;