Fix Mobile UI for /settings/security (#2703)
* Fix Mobile UI * Remove truncate * Move buttons Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
parent
6c27b04f83
commit
fb042a36b6
3 changed files with 8 additions and 8 deletions
|
@ -61,8 +61,8 @@ const ChangePasswordSection = () => {
|
||||||
<div className="my-3">
|
<div className="my-3">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
|
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex">
|
<div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
|
||||||
<div className="w-1/2 ltr:mr-2 rtl:ml-2">
|
<div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
|
||||||
<label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
|
||||||
{t("current_password")}
|
{t("current_password")}
|
||||||
</label>
|
</label>
|
||||||
|
@ -79,7 +79,7 @@ const ChangePasswordSection = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-2 w-1/2">
|
<div className="w-full sm:w-1/2">
|
||||||
<label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
|
<label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
|
||||||
{t("new_password")}
|
{t("new_password")}
|
||||||
</label>
|
</label>
|
||||||
|
@ -98,7 +98,7 @@ const ChangePasswordSection = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
|
{errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
|
||||||
<div className="flex justify-end py-8">
|
<div className="flex py-8 sm:justify-end">
|
||||||
<Button color="secondary" type="submit">
|
<Button color="secondary" type="submit">
|
||||||
{t("save")}
|
{t("save")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -17,7 +17,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-row justify-between truncate pt-9 pl-2">
|
<div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-row items-center">
|
<div className="flex flex-row items-center">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
|
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
|
||||||
|
@ -27,7 +27,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
|
<p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="self-center">
|
<div className="mt-5 sm:mt-0 sm:self-center">
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
|
|
|
@ -24,12 +24,12 @@ export default function ApiKeyListContainer() {
|
||||||
query={query}
|
query={query}
|
||||||
success={({ data }) => (
|
success={({ data }) => (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-row justify-between truncate pl-2 pr-1 ">
|
<div className=" flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
|
||||||
<div className="mt-9">
|
<div className="mt-9">
|
||||||
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
|
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
|
||||||
<p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
|
<p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="self-center">
|
<div className="mb-9 sm:self-center">
|
||||||
<Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
|
<Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
|
||||||
{t("generate_new_api_key")}
|
{t("generate_new_api_key")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Reference in a new issue