binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: themes (#902)

Browse source 
* chore: add next theme and initial setup

* chore: add dark mode colors to layouts

* chore: user general setting page theming

* chore: dashboard theming

* chore: project page theming

* chore: workspace setting page theming

* chore: my issue page theming

* chore: cmdk theming

* chore: change hardcode bg and text color to theme

* chore: change color name according to the design

* style: fix card in the dashboard

* style: fix merge conflict design issues

* style: add light high contrast and dark high contrast

* style: fix cmd k menu color and selection

* feat: change theme from cmdk menu

* chore: add multiple theme field to custom theme

* chore: removed custom theming

* fix: build error

---------

Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
This commit is contained in:
Aaryan Khandelwal 2023-04-20 13:41:24 +05:30 • committed by GitHub
parent 9f04933957
commit 3c2f5d12ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
191 changed files with 1550 additions and 880 deletions
Download patch file Download diff file Expand all files Collapse all files

31
apps/app/pages/[workspaceSlug]/me/profile/index.tsx
View file

@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
// components
import { ImageUploadModal } from "components/core";
import { ImageUploadModal, ThemeSwitch } from "components/core";
// ui
import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@ -147,8 +147,8 @@ const Profile: NextPage = () => {
<div className="space-y-8 sm:space-y-12">
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold">Profile Picture</h4>
<p className="text-gray-500">
<h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4>
<p className="text-brand-secondary">
Max file size is 5MB. Supported file types are .jpg and .png.
</p>
</div>
@ -156,8 +156,8 @@ const Profile: NextPage = () => {
<div className="flex items-center gap-4">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="bg-gray-100 h-12 w-12 p-2 rounded-md">
<UserIcon className="h-full w-full text-gray-300" />
<div className="bg-brand-surface-2 h-12 w-12 p-2 rounded-md">
<UserIcon className="h-full w-full text-brand-secondary" />
</div>
) : (
<div className="relative h-12 w-12 overflow-hidden">
@ -195,8 +195,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold">Full Name</h4>
<p className="text-gray-500">
<h4 className="text-xl font-semibold text-brand-base">Full Name</h4>
<p className="text-brand-secondary">
This name will be reflected on all the projects you are working on.
</p>
</div>
@ -224,8 +224,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold">Email</h4>
<p className="text-gray-500">The email address that you are using.</p>
<h4 className="text-xl font-semibold text-brand-base">Email</h4>
<p className="text-brand-secondary">The email address that you are using.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Input
@ -241,8 +241,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold">Role</h4>
<p className="text-gray-500">Add your role.</p>
<h4 className="text-xl font-semibold text-brand-base">Role</h4>
<p className="text-brand-secondary">Add your role.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Controller
@ -268,6 +268,15 @@ const Profile: NextPage = () => {
/>
</div>
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Theme</h4>
<p className="text-brand-secondary">Select or customize your interface color scheme.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<ThemeSwitch />
</div>
</div>
<div className="sm:text-right">
<SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Updating..." : "Update profile"}