Show warning message in UI when setting is enabled

givepraise · Dec 14, 2023 · 4d52f40 · 4d52f40
1 parent d5a4a36
commit 4d52f40
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/frontend/src/components/ui/Button.tsx b/packages/frontend/src/components/ui/Button.tsx
@@ -29,8 +29,8 @@ export const Button = ({
   const disabledModifier =
     'disabled:cursor-default disabled:bg-themecolor-3/50 disabled:text-white/50';
 
-  const defaultClass = `px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
-  const outlineClass = `border-2 border-themecolor-3 px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
+  const defaultClass = `h-10 whitespace-nowrap px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
+  const outlineClass = `h-10 whitespace-nowrap border-2 border-themecolor-3 px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
   const roundClass = `flex items-center justify-center rounded-full hover:bg-warm-gray-300 w-7 h-7 dark:text-white dark:hover:bg-slate-800 ${disabledModifier}`;
 
   let variantClass = defaultClass;

diff --git a/packages/frontend/src/pages/PeriodDetails/components/PeriodDetailsHead.tsx b/packages/frontend/src/pages/PeriodDetails/components/PeriodDetailsHead.tsx
@@ -14,6 +14,7 @@ import { CloseButton } from './CloseButton';
 import { PeriodDateForm } from './PeriodDateForm';
 import { PeriodNameForm } from './PeriodNameForm';
 import { AssignButton } from './AssignButton';
+import { SingleSetting } from '../../../model/settings/settings';
 
 export const PeriodDetailsHead = (): JSX.Element | null => {
   const { periodId } = useParams<PeriodPageParams>();
@@ -22,6 +23,9 @@ export const PeriodDetailsHead = (): JSX.Element | null => {
   useLoadSinglePeriodDetails(periodId); // Fetch additional period details
   const period = useRecoilValue(SinglePeriod(periodId));
   const isAdmin = useRecoilValue(HasRole(ROLE_ADMIN));
+  const directQuantEnabled = useRecoilValue(
+    SingleSetting('DISCORD_BOT_DIRECT_PRAISE_QUANTIFICATION_ENABLED')
+  );
 
   if (!period || !allPeriods) return null;
 
@@ -63,13 +67,22 @@ export const PeriodDetailsHead = (): JSX.Element | null => {
           <div>Number of praise: {period.numberOfPraise}</div>
           <div className="mt-5">
             {period.status === 'OPEN' || period.status === 'QUANTIFY' ? (
-              <div className="flex justify-between gap-4">
+              <div className="flex items-center justify-between gap-10">
                 {period.status === 'OPEN' &&
                 period.receivers &&
                 period?.receivers.length > 0 &&
                 hasPeriodEnded(period) ? (
-                  <AssignButton />
+                  directQuantEnabled?.valueRealized ? (
+                    <div className="max-w-md">
+                      Direct quantification is enabled for this community which
+                      means each praise is quantified by the praise giver at
+                      praise time. Regular quantifications are disabled.
+                    </div>
+                  ) : (
+                    <AssignButton />
+                  )
                 ) : null}
+
                 <CloseButton />
               </div>
             ) : null}