refactor(ui): add/tweak icons (#1819)

* refactor(ui): add prev/next button icons * refactor(ui): use mail icon instead of at symbol icon for email * refactor(ui): use ↻ symbol instead of ⤾ for reload button * refactor(ui): add missing icons to password reset pages * refactor(ui): add icons for save & test buttons Co-authored-by: sct <ryan@sct.dev>
2021-07-13 05:44:15 -04:00
parent 1133a34ffd
commit 8b960acf73
28 changed files with 227 additions and 106 deletions
--- a/public/offline.html
+++ b/public/offline.html
@@ -31,7 +31,7 @@
  <body>
    <h1>You are offline</h1>

-    <button type="button">⤾ Reload</button>
+    <button type="button">↻ Reload</button>

    <!-- Inline the page's JavaScript file. -->
    <script>
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -1,4 +1,9 @@
-import { FilterIcon, SortDescendingIcon } from '@heroicons/react/solid';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  FilterIcon,
+  SortDescendingIcon,
+} from '@heroicons/react/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -271,13 +276,15 @@ const RequestList: React.FC = () => {
              disabled={!hasPrevPage}
              onClick={() => updateQueryParams('page', (page - 1).toString())}
            >
-              {intl.formatMessage(globalMessages.previous)}
+              <ChevronLeftIcon />
+              <span>{intl.formatMessage(globalMessages.previous)}</span>
            </Button>
            <Button
              disabled={!hasNextPage}
              onClick={() => updateQueryParams('page', (page + 1).toString())}
            >
-              {intl.formatMessage(globalMessages.next)}
+              <span>{intl.formatMessage(globalMessages.next)}</span>
+              <ChevronRightIcon />
            </Button>
          </div>
        </nav>
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -1,4 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
+import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -68,7 +68,8 @@ const ResetPassword: React.FC = () => {
                <span className="flex justify-center mt-4 rounded-md shadow-sm">
                  <Link href="/login" passHref>
                    <Button as="a" buttonType="ghost">
-                      {intl.formatMessage(messages.gobacklogin)}
+                      <ArrowLeftIcon />
+                      <span>{intl.formatMessage(messages.gobacklogin)}</span>
                    </Button>
                  </Link>
                </span>
@@ -125,7 +126,7 @@ const ResetPassword: React.FC = () => {
                              type="submit"
                              disabled={isSubmitting || !isValid}
                            >
-                              <AtSymbolIcon />
+                              <MailIcon />
                              <span>
                                {intl.formatMessage(messages.emailresetlink)}
                              </span>
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -1,3 +1,4 @@
+import { SupportIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -165,9 +166,12 @@ const ResetPassword: React.FC = () => {
                              type="submit"
                              disabled={isSubmitting || !isValid}
                            >
+                              <SupportIcon />
+                              <span>
                                {isSubmitting
                                  ? intl.formatMessage(globalMessages.saving)
                                  : intl.formatMessage(globalMessages.save)}
+                              </span>
                            </Button>
                          </span>
                        </div>
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -253,9 +254,12 @@ const NotificationsDiscord: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -264,9 +268,12 @@ const NotificationsDiscord: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -437,9 +438,12 @@ const NotificationsEmail: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -448,9 +452,12 @@ const NotificationsEmail: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -232,9 +233,12 @@ const NotificationsLunaSea: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -243,9 +247,12 @@ const NotificationsLunaSea: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -212,9 +213,12 @@ const NotificationsPushbullet: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -223,9 +227,12 @@ const NotificationsPushbullet: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -258,9 +259,12 @@ const NotificationsPushover: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -269,9 +273,12 @@ const NotificationsPushover: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -210,9 +211,12 @@ const NotificationsSlack: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -221,9 +225,12 @@ const NotificationsSlack: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -306,9 +307,12 @@ const NotificationsTelegram: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -317,9 +321,12 @@ const NotificationsTelegram: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useEffect, useState } from 'react';
@@ -132,9 +133,12 @@ const NotificationsWebPush: React.FC = () => {
                        testSettings();
                      }}
                    >
+                      <BeakerIcon />
+                      <span>
                        {isTesting
                          ? intl.formatMessage(globalMessages.testing)
                          : intl.formatMessage(globalMessages.test)}
+                      </span>
                    </Button>
                  </span>
                  <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -143,9 +147,12 @@ const NotificationsWebPush: React.FC = () => {
                      type="submit"
                      disabled={isSubmitting || isTesting}
                    >
+                      <SaveIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(globalMessages.saving)
                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -327,9 +328,12 @@ const NotificationsWebhook: React.FC = () => {
                      testSettings();
                    }}
                  >
+                    <BeakerIcon />
+                    <span>
                      {isTesting
                        ? intl.formatMessage(globalMessages.testing)
                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -338,9 +342,12 @@ const NotificationsWebhook: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -1,4 +1,6 @@
 import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
  ClipboardCopyIcon,
  DocumentSearchIcon,
  FilterIcon,
@@ -421,7 +423,8 @@ const SettingsLogs: React.FC = () => {
                        updateQueryParams('page', (page - 1).toString())
                      }
                    >
-                      {intl.formatMessage(globalMessages.previous)}
+                      <ChevronLeftIcon />
+                      <span>{intl.formatMessage(globalMessages.previous)}</span>
                    </Button>
                    <Button
                      disabled={!hasNextPage}
@@ -429,7 +432,8 @@ const SettingsLogs: React.FC = () => {
                        updateQueryParams('page', (page + 1).toString())
                      }
                    >
-                      {intl.formatMessage(globalMessages.next)}
+                      <span>{intl.formatMessage(globalMessages.next)}</span>
+                      <ChevronRightIcon />
                    </Button>
                  </div>
                </nav>
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -406,9 +407,12 @@ const SettingsMain: React.FC = () => {
                        type="submit"
                        disabled={isSubmitting || !isValid}
                      >
+                        <SaveIcon />
+                        <span>
                          {isSubmitting
                            ? intl.formatMessage(globalMessages.saving)
                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                      </Button>
                    </span>
                  </div>
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -1,5 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
-import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
+import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import DiscordLogo from '../../assets/extlogos/discord.svg';
@@ -30,7 +29,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
      text: intl.formatMessage(messages.email),
      content: (
        <span className="flex items-center">
-          <AtSymbolIcon className="h-4 mr-2" />
+          <MailIcon className="h-4 mr-2" />
          {intl.formatMessage(messages.email)}
        </span>
      ),
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
@@ -520,9 +521,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                      type="submit"
                      disabled={isSubmitting || !isValid}
                    >
+                      <SaveIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(globalMessages.saving)
                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/src/components/Settings/SettingsUsers/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React from 'react';
@@ -200,9 +201,12 @@ const SettingsUsers: React.FC = () => {
                        type="submit"
                        disabled={isSubmitting}
                      >
+                        <SaveIcon />
+                        <span>
                          {isSubmitting
                            ? intl.formatMessage(globalMessages.saving)
                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                      </Button>
                    </span>
                  </div>
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -1,5 +1,7 @@
 import { TrashIcon } from '@heroicons/react/outline';
 import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
  InboxInIcon,
  PencilIcon,
  SortDescendingIcon,
@@ -740,7 +742,8 @@ const UserList: React.FC = () => {
                      updateQueryParams('page', (page - 1).toString())
                    }
                  >
-                    {intl.formatMessage(globalMessages.previous)}
+                    <ChevronLeftIcon />
+                    <span>{intl.formatMessage(globalMessages.previous)}</span>
                  </Button>
                  <Button
                    disabled={!hasNextPage}
@@ -748,7 +751,8 @@ const UserList: React.FC = () => {
                      updateQueryParams('page', (page + 1).toString())
                    }
                  >
-                    {intl.formatMessage(globalMessages.next)}
+                    <span>{intl.formatMessage(globalMessages.next)}</span>
+                    <ChevronRightIcon />
                  </Button>
                </div>
              </nav>
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -357,9 +358,12 @@ const UserGeneralSettings: React.FC = () => {
                      type="submit"
                      disabled={isSubmitting}
                    >
+                      <SaveIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(globalMessages.saving)
                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -146,9 +147,12 @@ const UserNotificationsDiscord: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -144,9 +145,12 @@ const UserEmailSettings: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -182,9 +183,12 @@ const UserTelegramSettings: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -96,9 +97,12 @@ const UserWebPushSettings: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid}
                  >
+                    <SaveIcon />
+                    <span>
                      {isSubmitting
                        ? intl.formatMessage(globalMessages.saving)
                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -1,5 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
-import { CloudIcon } from '@heroicons/react/solid';
+import { CloudIcon, MailIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -34,7 +33,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
      text: intl.formatMessage(messages.email),
      content: (
        <span className="flex items-center">
-          <AtSymbolIcon className="h-4 mr-2" />
+          <MailIcon className="h-4 mr-2" />
          {intl.formatMessage(messages.email)}
        </span>
      ),
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -223,9 +224,12 @@ const UserPasswordChange: React.FC = () => {
                      type="submit"
                      disabled={isSubmitting || !isValid}
                    >
+                      <SaveIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(globalMessages.saving)
                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -114,9 +115,12 @@ const UserPermissions: React.FC = () => {
                      type="submit"
                      disabled={isSubmitting}
                    >
+                      <SaveIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(globalMessages.saving)
                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -303,11 +303,11 @@ button.input-action {
 .button-md svg,
 button.input-action svg,
 .plex-button svg {
-  @apply w-5 h-5 mr-2 last:mr-0;
+  @apply w-5 h-5 ml-2 mr-2 first:ml-0 last:mr-0;
 }

 .button-sm svg {
-  @apply w-4 h-4 mr-1.5 last:mr-0;
+  @apply w-4 h-4 ml-1.5 mr-1.5 first:ml-0 last:mr-0;
 }

 .modal-icon {