Create a small variant for SharedDialog to be small

nulib · Mar 5, 2024 · ddb5db3 · ddb5db3
1 parent 37baf21
commit ddb5db3
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 60 deletions.
diff --git a/components/Search/GenerativeAI.styled.ts b/components/Search/GenerativeAI.styled.ts
@@ -0,0 +1,61 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+
+import { styled } from "@/stitches.config";
+
+/* eslint sort-keys: 0 */
+
+const GenerativeAIToggleWrapper = styled("div", {
+  color: "$black50",
+  fontSize: "$gr2",
+  display: "flex",
+  flexShrink: "0",
+  alignItems: "center",
+  marginRight: "$gr1",
+
+  "& label": {
+    cursor: "pointer",
+    flexShrink: "0",
+    marginLeft: "3px",
+    marginRight: "4px",
+  },
+
+  "& svg": {
+    position: "relative",
+    padding: "0 0 1px",
+    height: "$gr3",
+    width: "$gr3",
+    fill: "$black50",
+  },
+});
+
+const GenerativeAIDialogMessage = styled("p", {});
+
+const FlexBody = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  width: "100%",
+});
+
+const DialogButtonRow = styled("div", {
+  display: "flex",
+  justifyContent: "flex-end",
+});
+
+const TooltipTrigger = styled(Tooltip.Trigger, {
+  background: "transparent",
+  border: "none",
+});
+
+const TooltipContent = styled(Tooltip.Content, {
+  zIndex: 2,
+});
+
+export {
+  DialogButtonRow,
+  FlexBody,
+  GenerativeAIDialogMessage,
+  GenerativeAIToggleWrapper,
+  TooltipContent,
+  TooltipTrigger,
+};
diff --git a/components/Search/GenerativeAIToggle.tsx b/components/Search/GenerativeAIToggle.tsx
@@ -5,9 +5,13 @@ import {
   CheckboxRoot as CheckboxRootStyled,
 } from "@/components/Shared/Checkbox.styled";
 import {
+  DialogButtonRow,
+  FlexBody,
   GenerativeAIDialogMessage,
   GenerativeAIToggleWrapper,
-} from "@/components/Search/Search.styled";
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/Search/GenerativeAI.styled";
 import { TooltipArrow, TooltipBody } from "../Shared/Tooltip.styled";
 
 import { Button } from "@nulib/design-system";
@@ -16,18 +20,8 @@ import { IconCheck } from "@/components/Shared/SVG/Icons";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
 import React from "react";
 import { generativeAIWarning } from "@/components/Chat/components/Answer/Information";
-import { styled } from "@/stitches.config";
 import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
 
-const TooltipTrigger = styled(Tooltip.Trigger, {
-  background: "transparent",
-  border: "none",
-});
-
-const TooltipContent = styled(Tooltip.Content, {
-  zIndex: 2,
-});
-
 function GenerativeAITooltip() {
   return (
     <Tooltip.Provider delayDuration={20}>
@@ -74,20 +68,27 @@ export default function GenerativeAIToggle({
         <GenerativeAITooltip />
       </GenerativeAIToggleWrapper>
 
-      <GenerativeAIDialog
-        isOpen={dialog.isOpen}
-        title={dialog.title}
-        handleCloseClick={closeDialog}
-      >
-        <GenerativeAIDialogMessage>
-          You must be logged in with a Northwestern NetID to use the Generative
-          AI search feature.
-        </GenerativeAIDialogMessage>
-        <Button isPrimary onClick={handleLogin}>
-          Login
-        </Button>
-        <Button onClick={closeDialog}>Cancel</Button>
-      </GenerativeAIDialog>
+      <div style={{ display: "flex" }}>
+        <GenerativeAIDialog
+          isOpen={dialog.isOpen}
+          title={dialog.title}
+          handleCloseClick={closeDialog}
+          size="small"
+        >
+          <FlexBody>
+            <GenerativeAIDialogMessage>
+              You must be logged in with a Northwestern NetID to use the
+              Generative AI search feature.
+            </GenerativeAIDialogMessage>
+            <DialogButtonRow>
+              <Button isPrimary onClick={handleLogin}>
+                Login
+              </Button>
+              <Button onClick={closeDialog}>Cancel</Button>
+            </DialogButtonRow>
+          </FlexBody>
+        </GenerativeAIDialog>
+      </div>
     </>
   );
 }
diff --git a/components/Search/Search.styled.ts b/components/Search/Search.styled.ts
@@ -100,35 +100,6 @@ const Clear = styled("button", {
   },
 });
 
-const GenerativeAIToggleWrapper = styled("div", {
-  color: "$black50",
-  fontSize: "$gr2",
-  display: "flex",
-  flexShrink: "0",
-  alignItems: "center",
-  marginRight: "$gr1",
-
-  "& label": {
-    cursor: "pointer",
-    //width: "120px",
-    flexShrink: "0",
-    marginLeft: "3px",
-    marginRight: "4px",
-  },
-
-  "& svg": {
-    position: "relative",
-    padding: "0 0 1px",
-    height: "$gr3",
-    width: "$gr3",
-    fill: "$black50",
-  },
-});
-
-const GenerativeAIDialogMessage = styled("p", {
-  marginBottom: "$gr4",
-});
-
 const ResultsMessage = styled("span", {
   color: "$black50",
   padding: "0 $gr4 $gr4",
@@ -173,8 +144,6 @@ const ResultsWrapper = styled("div", {
 export {
   Button,
   Clear,
-  GenerativeAIDialogMessage,
-  GenerativeAIToggleWrapper,
   Input,
   NoResultsMessage,
   ResultsMessage,

diff --git a/components/Shared/Dialog.styled.ts b/components/Shared/Dialog.styled.ts
@@ -1,4 +1,5 @@
 import * as Dialog from "@radix-ui/react-dialog";
+
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
@@ -113,6 +114,16 @@ const DialogContent = styled(Dialog.Content, {
 
   variants: {
     size: {
+      small: {
+        top: "12rem",
+        left: "12rem",
+        width: "calc(100vw - 24rem)",
+        height: "calc(100vh - 24rem)",
+
+        [`& ${DialogBody}`]: {
+          display: "flex",
+        },
+      },
       large: {
         top: "5rem",
         left: "5rem",

diff --git a/components/Shared/Dialog.tsx b/components/Shared/Dialog.tsx
@@ -1,26 +1,28 @@
 import * as Dialog from "@radix-ui/react-dialog";
+
 import {
   DialogBody,
   DialogClose,
   DialogContent,
   DialogHeader,
   DialogOverlay,
 } from "@/components/Shared/Dialog.styled";
+
 import { IconClear } from "@/components/Shared/SVG/Icons";
 import { ReactNode } from "react";
 
 interface SharedDialogProps {
   children: ReactNode;
   handleCloseClick: () => void;
   isOpen: boolean;
-  large?: boolean;
+  size?: "small" | "large";
   title: string;
 }
 
 const SharedDialog: React.FC<SharedDialogProps> = ({
   children,
   handleCloseClick,
-  large,
+  size,
   isOpen,
   title,
 }) => {
@@ -30,7 +32,7 @@ const SharedDialog: React.FC<SharedDialogProps> = ({
         <DialogOverlay />
         <DialogContent
           onInteractOutside={handleCloseClick}
-          {...(large && { size: "large" })}
+          {...(size ? { size } : {})}
         >
           <DialogHeader>
             <Dialog.Title>{title}</Dialog.Title>

diff --git a/components/Work/ActionsDialog/ActionsDialog.tsx b/components/Work/ActionsDialog/ActionsDialog.tsx
@@ -43,7 +43,7 @@ const WorkActionsDialog: React.FC<WorkActionsDialogProps> = ({
       <SharedDialog
         handleCloseClick={close}
         isOpen={!!activeDialog}
-        large
+        size="large"
         title={renderTitle()}
       >
         {renderContent()}