feature secret rotations v2

frontend/src/components/v2/Blur/Blur.tsx

@@ -9,7 +9,7 @@ interface IProps {
 
 export const Blur = ({ className, tooltipText }: IProps) => {
   return (
-    <Tooltip content={tooltipText} isDisabled={!tooltipText}>
+    <Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
       <div
         className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
         tabIndex={0}

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -1,14 +1,17 @@
 import { ChangeEventHandler, useState } from "react";
-import { DayPicker, DayPickerProps } from "react-day-picker";
+import { DayPicker, DayPickerProps, getDefaultClassNames, UI } from "react-day-picker";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
 import { format, setHours, setMinutes } from "date-fns";
+import { twMerge } from "tailwind-merge";
 
 import { Button } from "../Button";
 import { Input } from "../Input";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
 
+const defaultClassNames = getDefaultClassNames();
+
 export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   value?: Date;
   onChange: (date?: Date) => void;
@@ -58,7 +61,30 @@ export const DatePicker = ({
           {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-fit p-2" {...popUpContentProps}>
+      <PopoverContent
+        {...popUpContentProps}
+        className={twMerge(
+          "w-fit border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter",
+          popUpContentProps.className
+        )}
+      >
+        <div className="px-2 pt-4">
+          <DayPicker
+            {...props}
+            mode="single"
+            selected={value}
+            onSelect={handleDaySelect}
+            className="font-inter text-mineshaft-200"
+            classNames={{
+              today: "text-primary border-primary",
+              selected: " text-mineshaft-100 bg-mineshaft-500",
+              root: `text-mineshaft-300  ${defaultClassNames}`,
+              [UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
+              [UI.Weekday]: "px-3 pt-3",
+              [UI.Chevron]: "fill-mineshaft-300"
+            }}
+          />
+        </div>
         <div className="mx-4 my-4">
           <Input
             type="time"
@@ -67,17 +93,6 @@ export const DatePicker = ({
             className="bg-mineshaft-700 text-white [color-scheme:dark]"
           />
         </div>
-        <DayPicker
-          {...props}
-          mode="single"
-          selected={value}
-          onSelect={handleDaySelect}
-          modifiersStyles={{
-            selected: {
-              background: "#cad62d"
-            }
-          }}
-        />
       </PopoverContent>
     </Popover>
   );

frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  label: string;
+  children?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+};
+
+export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
+  return (
+    <div className={className}>
+      <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
+      {children ? (
+        <p className="text-sm text-mineshaft-100">{children}</p>
+      ) : (
+        <p className="text-sm italic text-mineshaft-400/50">None</p>
+      )}
+    </div>
+  );
+};

frontend/src/components/v2/GenericFieldLabel/index.ts

@@ -0,0 +1 @@
+export * from "./GenericFieldLabel";

frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  title: string;
+  children: ReactNode;
+};
+
+export const NoticeBannerV2 = ({ title, children }: Props) => {
+  return (
+    <div className="flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
+      <div className="mb-1 flex items-center text-sm">
+        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+};

frontend/src/components/v2/index.tsx

@@ -16,12 +16,14 @@ export * from "./EmptyState";
 export * from "./FilterableSelect";
 export * from "./FontAwesomeSymbol";
 export * from "./FormControl";
+export * from "./GenericFieldLabel";
 export * from "./HoverCardv2";
 export * from "./IconButton";
 export * from "./Input";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NoticeBanner";
+export * from "./NoticeBannerV2";
 export * from "./PageHeader";
 export * from "./Pagination";
 export * from "./Popoverv2";