mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get rid of onboarding requirements

Browse Source
This commit is contained in:
m5r
2021-10-16 00:24:28 +02:00
parent c8f707af9c
commit 3cc6f35071
33 changed files with 291 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/settings/components/account/danger-zone.tsx
View File

@ -4,7 +4,7 @@ import clsx from "clsx";
import Button from "../button";
import SettingsSection from "../settings-section";
import Modal, { ModalTitle } from "../modal";
import Modal, { ModalTitle } from "app/core/components/modal";
import deleteUser from "../../mutations/delete-user";
export default function DangerZone() {

61
app/settings/components/modal.tsx
View File

@ -1,61 +0,0 @@
import type { FunctionComponent, MutableRefObject } from "react";
import { Fragment } from "react";
import { Transition, Dialog } from "@headlessui/react";
type Props = {
initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
isOpen: boolean;
onClose: () => void;
};
const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClose }) => {
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
className="fixed z-30 inset-0 overflow-y-auto"
initialFocus={initialFocus}
onClose={onClose}
open={isOpen}
static
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center md:block md:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
enterTo="opacity-100 translate-y-0 md:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 md:scale-100"
leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
{children}
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
};
export const ModalTitle: FunctionComponent = ({ children }) => (
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
{children}
</Dialog.Title>
);
export default Modal;

8
app/settings/components/settings-layout.tsx
View File

@ -6,6 +6,7 @@ import {
IoLogOutOutline,
IoNotificationsOutline,
IoCardOutline,
IoCallOutline,
IoPersonCircleOutline,
} from "react-icons/io5";
@ -15,6 +16,7 @@ import Divider from "./divider";
const subNavigation = [
{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
{ name: "Phone", href: Routes.PhoneSettings(), icon: IoCallOutline },
{ name: "Billing", href: Routes.Billing(), icon: IoCardOutline },
{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
];
@ -36,7 +38,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
<nav className="h-full flex flex-col">
<nav className="space-y-1 h-full flex flex-col">
{subNavigation.map((item) => {
const isCurrentPage = item.href.pathname === router.pathname;
@ -47,7 +49,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
isCurrentPage
? "bg-gray-50 text-primary-600 hover:bg-white"
: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
"mb-1 group rounded-md px-3 py-2 flex items-center text-sm font-medium",
"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
)}
aria-current={isCurrentPage ? "page" : undefined}
>
@ -66,7 +68,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
);
})}
<Divider className="mt-auto mb-1" />
<Divider />
<button
onClick={() => logoutMutation()}
className="group text-gray-900 hover:text-gray-900 hover:bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm font-medium"