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>
pull/1874/head^2
TheCatLady 4 years ago committed by GitHub
parent 1133a34ffd
commit 8b960acf73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -31,7 +31,7 @@
<body> <body>
<h1>You are offline</h1> <h1>You are offline</h1>
<button type="button"> Reload</button> <button type="button"> Reload</button>
<!-- Inline the page's JavaScript file. --> <!-- Inline the page's JavaScript file. -->
<script> <script>

@ -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 Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -271,13 +276,15 @@ const RequestList: React.FC = () => {
disabled={!hasPrevPage} disabled={!hasPrevPage}
onClick={() => updateQueryParams('page', (page - 1).toString())} onClick={() => updateQueryParams('page', (page - 1).toString())}
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
onClick={() => updateQueryParams('page', (page + 1).toString())} onClick={() => updateQueryParams('page', (page + 1).toString())}
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

@ -1,4 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
@ -68,7 +68,8 @@ const ResetPassword: React.FC = () => {
<span className="flex justify-center mt-4 rounded-md shadow-sm"> <span className="flex justify-center mt-4 rounded-md shadow-sm">
<Link href="/login" passHref> <Link href="/login" passHref>
<Button as="a" buttonType="ghost"> <Button as="a" buttonType="ghost">
{intl.formatMessage(messages.gobacklogin)} <ArrowLeftIcon />
<span>{intl.formatMessage(messages.gobacklogin)}</span>
</Button> </Button>
</Link> </Link>
</span> </span>
@ -125,7 +126,7 @@ const ResetPassword: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<AtSymbolIcon /> <MailIcon />
<span> <span>
{intl.formatMessage(messages.emailresetlink)} {intl.formatMessage(messages.emailresetlink)}
</span> </span>

@ -1,3 +1,4 @@
import { SupportIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
@ -165,9 +166,12 @@ const ResetPassword: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SupportIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -253,9 +254,12 @@ const NotificationsDiscord: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -264,9 +268,12 @@ const NotificationsDiscord: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -437,9 +438,12 @@ const NotificationsEmail: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -448,9 +452,12 @@ const NotificationsEmail: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -232,9 +233,12 @@ const NotificationsLunaSea: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -243,9 +247,12 @@ const NotificationsLunaSea: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -212,9 +213,12 @@ const NotificationsPushbullet: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -223,9 +227,12 @@ const NotificationsPushbullet: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -258,9 +259,12 @@ const NotificationsPushover: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -269,9 +273,12 @@ const NotificationsPushover: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -210,9 +211,12 @@ const NotificationsSlack: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -221,9 +225,12 @@ const NotificationsSlack: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -306,9 +307,12 @@ const NotificationsTelegram: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -317,9 +321,12 @@ const NotificationsTelegram: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -132,9 +133,12 @@ const NotificationsWebPush: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -143,9 +147,12 @@ const NotificationsWebPush: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || isTesting} disabled={isSubmitting || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid'; import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
@ -327,9 +328,12 @@ const NotificationsWebhook: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
{isTesting <BeakerIcon />
? intl.formatMessage(globalMessages.testing) <span>
: intl.formatMessage(globalMessages.test)} {isTesting
? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@ -338,9 +342,12 @@ const NotificationsWebhook: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,4 +1,6 @@
import { import {
ChevronLeftIcon,
ChevronRightIcon,
ClipboardCopyIcon, ClipboardCopyIcon,
DocumentSearchIcon, DocumentSearchIcon,
FilterIcon, FilterIcon,
@ -421,7 +423,8 @@ const SettingsLogs: React.FC = () => {
updateQueryParams('page', (page - 1).toString()) updateQueryParams('page', (page - 1).toString())
} }
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
@ -429,7 +432,8 @@ const SettingsLogs: React.FC = () => {
updateQueryParams('page', (page + 1).toString()) updateQueryParams('page', (page + 1).toString())
} }
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import { RefreshIcon } from '@heroicons/react/solid'; import { RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
@ -406,9 +407,12 @@ const SettingsMain: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,5 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import DiscordLogo from '../../assets/extlogos/discord.svg'; import DiscordLogo from '../../assets/extlogos/discord.svg';
@ -30,7 +29,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email), text: intl.formatMessage(messages.email),
content: ( content: (
<span className="flex items-center"> <span className="flex items-center">
<AtSymbolIcon className="h-4 mr-2" /> <MailIcon className="h-4 mr-2" />
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</span> </span>
), ),

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid'; import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Formik } from 'formik'; import { Field, Formik } from 'formik';
@ -520,9 +521,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React from 'react'; import React from 'react';
@ -200,9 +201,12 @@ const SettingsUsers: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,5 +1,7 @@
import { TrashIcon } from '@heroicons/react/outline'; import { TrashIcon } from '@heroicons/react/outline';
import { import {
ChevronLeftIcon,
ChevronRightIcon,
InboxInIcon, InboxInIcon,
PencilIcon, PencilIcon,
SortDescendingIcon, SortDescendingIcon,
@ -740,7 +742,8 @@ const UserList: React.FC = () => {
updateQueryParams('page', (page - 1).toString()) updateQueryParams('page', (page - 1).toString())
} }
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
@ -748,7 +751,8 @@ const UserList: React.FC = () => {
updateQueryParams('page', (page + 1).toString()) updateQueryParams('page', (page + 1).toString())
} }
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -357,9 +358,12 @@ const UserGeneralSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -146,9 +147,12 @@ const UserNotificationsDiscord: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -144,9 +145,12 @@ const UserEmailSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -182,9 +183,12 @@ const UserTelegramSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -96,9 +97,12 @@ const UserWebPushSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,5 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { CloudIcon, MailIcon } from '@heroicons/react/solid';
import { CloudIcon } from '@heroicons/react/solid';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
@ -34,7 +33,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email), text: intl.formatMessage(messages.email),
content: ( content: (
<span className="flex items-center"> <span className="flex items-center">
<AtSymbolIcon className="h-4 mr-2" /> <MailIcon className="h-4 mr-2" />
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</span> </span>
), ),

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -223,9 +224,12 @@ const UserPasswordChange: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -114,9 +115,12 @@ const UserPermissions: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting <SaveIcon />
? intl.formatMessage(globalMessages.saving) <span>
: intl.formatMessage(globalMessages.save)} {isSubmitting
? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

@ -303,11 +303,11 @@ button.input-action {
.button-md svg, .button-md svg,
button.input-action svg, button.input-action svg,
.plex-button 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 { .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 { .modal-icon {

Loading…
Cancel
Save