second iteration of the new sidebar

This commit is contained in:
Vladyslav Matsiiako
2023-07-09 23:58:27 -07:00
parent ec26404b94
commit bdf4ebd1bc
75 changed files with 1927 additions and 1698 deletions
@@ -15,7 +15,7 @@ export const APIKeySection = () => {
] as const);
return (
<div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
<div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
<div className="flex justify-between mb-8">
<p className="text-xl font-semibold text-mineshaft-100">
{t("settings.personal.api-keys.title")}
@@ -90,7 +90,7 @@ export const ChangePasswordSection = () => {
return (
<form
onSubmit={handleSubmit(onFormSubmit)}
className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
>
<h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
Change password
@@ -54,7 +54,7 @@ export const EmergencyKitSection = () => {
return (
<form
onSubmit={handleSubmit(onFormSubmit)}
className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
>
<h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
Emergency Kit
@@ -1,16 +1,13 @@
import { useTranslation } from "react-i18next";
import NavHeader from "@app/components/navigation/NavHeader";
import { PersonalTabGroup } from "./PersonalTabGroup";
export const PersonalSettingsPage = () => {
const { t } = useTranslation();
return (
<div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
<div className="max-w-screen-lg w-full">
<NavHeader pageName={t("settings.personal.title")} isProjectRelated={false} />
<div className="my-8">
<div className="flex justify-center bg-bunker-800 text-white w-full px-6">
<div className="max-w-6xl w-full">
<div className="mt-6 mb-6">
<p className="text-3xl font-semibold text-gray-200">
{t("settings.personal.title")}
</p>
@@ -18,7 +18,7 @@ export const PersonalTabGroup = () => {
{({ selected }) => (
<button
type="button"
className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
>
{tab.name}
</button>
@@ -51,7 +51,7 @@ export const SecuritySection = () => {
return (
<>
<form>
<div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
<div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
<p className="text-xl font-semibold text-mineshaft-100 mb-8">
Two-factor Authentication
</p>
@@ -21,7 +21,7 @@ export const SessionsSection = () => {
}
return (
<div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
<div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
<div className="flex justify-between mb-8">
<h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
Sessions