Skip to content

Fix #1256: Add dark mode to studio settings for UI consistency #1277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shuklatul1021 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix #1256: Add dark mode to studio settings for UI consistency #1277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions apps/studio/src/components/Modals/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Fragment, useRef, useCallback } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { useModal } from '@ebay/nice-modal-react';
import { Fragment, useRef, useCallback } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { useModal } from "@ebay/nice-modal-react";

import type { ReactNode, FunctionComponent, PropsWithChildren } from 'react';
import type { ReactNode, FunctionComponent, PropsWithChildren } from "react";

interface ConfirmModalProps {
title: ReactNode;
Expand All @@ -19,13 +19,15 @@ interface ConfirmModalProps {
onCancel?: () => void;
}

export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps>> = ({
export const ConfirmModal: FunctionComponent<
PropsWithChildren<ConfirmModalProps>
> = ({
title,
description,
warning,
link,
confirmText = 'Save',
cancelText = 'Cancel',
confirmText = "Save",
cancelText = "Cancel",
confirmDisabled = true,
cancelDisabled = false,
closeAfterSumbit = true,
Expand Down Expand Up @@ -57,7 +59,11 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps

return (
<>
<Transition.Root show={modal.visible} as={Fragment} afterLeave={handleAfterLeave}>
<Transition.Root
show={modal.visible}
as={Fragment}
afterLeave={handleAfterLeave}
>
<Dialog
as="div"
static
Expand Down Expand Up @@ -95,22 +101,24 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm: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 sm:my-8 sm:align-middle sm:max-w-2xl w-2/5 sm:p-6 ${containerClassName}`}>
<div
className={`inline-block align-bottom bg-[#1a1a1a] rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-2/5 sm:p-6 ${containerClassName}`}
>
<div>
<div>
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-gray-900"
className="text-xl leading-7 font-semibold text-white mb-2"
>
{title}
</Dialog.Title>
{description && (
<p className="text-gray-500 text-xs">{description}</p>
<p className="text-white text-sm mt-1">{description}</p>
)}
{warning && (
<a
href={link}
className='text-red-500 text-xs underline'
className="text-red-400 text-sm underline hover:text-red-300 mt-2 inline-block"
target="_blank"
rel="noreferrer"
>
Expand All @@ -120,11 +128,13 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
<div className="my-8 space-y-4">{children}</div>
</div>
</div>
<div className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? 'sm:grid-cols-2' : ''}`}>
<div
className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? "sm:grid-cols-2" : ""}`}
>
{onSubmit && (
<button
type="button"
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:col-start-2 sm:text-sm ${confirmDisabled ? 'opacity-10' : 'opacity-100'}`}
type="button"
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-pink-500 sm:col-start-2 sm:text-sm transition-colors ${confirmDisabled ? "opacity-40 cursor-not-allowed" : "opacity-100"}`}
disabled={confirmDisabled}
onClick={handleOnSubmit}
data-test="modal-confirm-button"
Expand All @@ -134,7 +144,7 @@ export const ConfirmModal: FunctionComponent<PropsWithChildren<ConfirmModalProps
)}
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:mt-0 sm:col-start-1 sm:text-sm"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-gray-200 hover:bg-gray-700 hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500 sm:mt-0 sm:col-start-1 sm:text-sm transition-colors"
onClick={handleOnCancel}
disabled={cancelDisabled}
ref={cancelButtonRef}
Expand Down
8 changes: 4 additions & 4 deletions apps/studio/src/components/Modals/Settings/SettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ShowGovernanceOption: FunctionComponent<ShowGovernanceOptionProps> = ({
<div className="flex flex-row content-center justify-between">
<label
htmlFor={`settings-governance-show-${label}`}
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
className="flex justify-right items-center w-1/2 content-center font-medium text-white"
>
Show&nbsp;<strong>{label}</strong>&nbsp;governance issues
</label>
Expand Down Expand Up @@ -116,7 +116,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
<div className="flex flex-row content-center justify-between">
<label
htmlFor="settings-auto-saving"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
className="flex justify-right items-center w-1/2 content-center font-medium text-white"
>
Auto saving
</label>
Expand All @@ -133,7 +133,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
<div className="flex flex-row content-center justify-between">
<label
htmlFor="settings-template-delay"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
className="flex justify-right items-center w-1/2 content-center font-medium text-white"
>
Delay (in miliseconds)
</label>
Expand Down Expand Up @@ -179,7 +179,7 @@ export const SettingsModal = create<SettingsModalProps>(({ activeTab = 'editor'
<div className="flex flex-row content-center justify-between">
<label
htmlFor="asyncapi-version"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
className="flex justify-right items-center w-1/2 content-center font-medium text-white"
>
Auto rendering
</label>
Expand Down