Merge branch 'develop' into feature/version-propagation-rework

ingef · May 14, 2024 · 0443e62 · 0443e62
2 parents 6b46c5b + 37f6b1c
commit 0443e62
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 179 deletions.
diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx
@@ -147,11 +147,7 @@ const FormConceptCopyModal = ({
   }
 
   return (
-    <Modal
-      onClose={onClose}
-      closeIcon
-      headline={t("externalForms.copyModal.headline")}
-    >
+    <Modal onClose={onClose} headline={t("externalForms.copyModal.headline")}>
       <InputSelect
         label={t("externalForms.copyModal.selectLabel")}
         options={conceptListFieldOptions}

diff --git a/frontend/src/js/headings/Headings.tsx b/frontend/src/js/headings/Headings.tsx
@@ -1,16 +1,5 @@
-import styled from "@emotion/styled";
+import tw from "tailwind-styled-components";
 
-export const Heading3 = styled("h3")`
-  line-height: 1.3;
-  font-weight: 700;
-  font-size: ${({ theme }) => theme.font.md};
-  color: ${({ theme }) => theme.col.black};
-`;
+export const Heading3 = tw("h3")`text-lg font-normal text-gray-800`;
 
-export const Heading4 = styled("h4")`
-  line-height: 1.2;
-  font-weight: 400;
-  font-size: ${({ theme }) => theme.font.sm};
-  color: ${({ theme }) => theme.col.gray};
-  text-transform: uppercase;
-`;
+export const Heading4 = tw("h4")`text-sm font-normal text-gray-500 uppercase`;
diff --git a/frontend/src/js/modal/Modal.tsx b/frontend/src/js/modal/Modal.tsx
@@ -1,12 +1,11 @@
 import styled from "@emotion/styled";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { ReactNode, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 
 import { TransparentButton } from "../button/TransparentButton";
 import { useClickOutside } from "../common/helpers/useClickOutside";
-import FaIcon from "../icon/FaIcon";
+import { Heading3 } from "../headings/Headings";
 import WithTooltip from "../tooltip/WithTooltip";
 
 const Root = styled("div")`
@@ -43,12 +42,6 @@ const TopRow = styled("div")`
   align-items: flex-start;
 `;
 
-const Headline = styled("h3")`
-  margin: 0 10px 15px 0;
-  font-size: ${({ theme }) => theme.font.md};
-  color: ${({ theme }) => theme.col.blueGrayDark};
-`;
-
 const Subtitle = styled(`p`)`
   margin: -15px 0 20px;
   max-width: 600px;
@@ -74,8 +67,7 @@ const ModalContent = ({
   );
 };
 
-// A modal with three ways to close it
-// - a button
+// A modal with two ways to close it
 // - click outside
 // - press esc
 const Modal = ({
@@ -84,7 +76,6 @@ const Modal = ({
   headline,
   subtitle,
   doneButton,
-  closeIcon,
   scrollable,
   onClose,
 }: {
@@ -93,7 +84,6 @@ const Modal = ({
   headline?: ReactNode;
   subtitle?: ReactNode;
   doneButton?: boolean;
-  closeIcon?: boolean;
   scrollable?: boolean;
   onClose: () => void;
 }) => {
@@ -105,14 +95,7 @@ const Modal = ({
     <Root className={className}>
       <ModalContent onClose={onClose} scrollable={scrollable}>
         <TopRow>
-          <Headline>{headline}</Headline>
-          {closeIcon && (
-            <WithTooltip text={t("common.closeEsc")}>
-              <TransparentButton small onClick={onClose}>
-                <FaIcon icon={faTimes} />
-              </TransparentButton>
-            </WithTooltip>
-          )}
+          <Heading3>{headline}</Heading3>
           {doneButton && (
             <WithTooltip text={t("common.closeEsc")}>
               <TransparentButton small onClick={onClose}>

diff --git a/frontend/src/js/pane/TabNavigation.tsx b/frontend/src/js/pane/TabNavigation.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FC } from "react";
 
 import tw from "tailwind-styled-components";
 import FaIcon from "../icon/FaIcon";
@@ -15,7 +14,7 @@ const Root = styled("div")`
   align-items: flex-start;
 `;
 
-const Headline = tw("h2")<{ active: boolean }>`
+const Headline = tw("h2")<{ $active: boolean }>`
   text-sm
   mb-0
   mt-[6px]
@@ -30,10 +29,10 @@ const Headline = tw("h2")<{ active: boolean }>`
   tracking-wider
 
   border-b-[3px]
-  ${({ active }) =>
-    active ? "text-primary-500" : "text-gray-500 hover:text-black"};
-  ${({ active }) =>
-    active
+  ${({ $active }) =>
+    $active ? "text-primary-500" : "text-gray-500 hover:text-black"};
+  ${({ $active }) =>
+    $active
       ? "border-primary-500"
       : "border-transparent hover:border-primary-200"};
 
@@ -54,18 +53,16 @@ export interface TabNavigationTab {
   loading?: boolean;
 }
 
-interface PropsT {
-  onClickTab: (tab: string) => void;
-  activeTab: string | null;
-  tabs: TabNavigationTab[];
-  dataTestId: string;
-}
-
-const TabNavigation: FC<PropsT> = ({
+const TabNavigation = ({
   tabs,
   activeTab,
   onClickTab,
   dataTestId,
+}: {
+  onClickTab: (tab: string) => void;
+  activeTab: string | null;
+  tabs: TabNavigationTab[];
+  dataTestId: string;
 }) => {
   function createClickHandler(key: string) {
     return () => {
@@ -82,7 +79,7 @@ const TabNavigation: FC<PropsT> = ({
           <HoverNavigatable key={key} triggerNavigate={createClickHandler(key)}>
             <SxWithTooltip text={tooltip} lazy>
               <Headline
-                active={activeTab === key}
+                $active={activeTab === key}
                 onClick={createClickHandler(key)}
               >
                 {label}

diff --git a/frontend/src/js/preview/DiagramModal.tsx b/frontend/src/js/preview/DiagramModal.tsx
@@ -38,7 +38,7 @@ export default function DiagramModal({
   useHotkeys("esc", () => onClose());
 
   return (
-    <Modal closeIcon onClose={() => onClose()}>
+    <Modal onClose={onClose}>
       <Horizontal>
         <SxDiagram stat={statistic} />
         {previewStatsIsBarStats(statistic) &&

diff --git a/frontend/src/js/previous-queries/list/AddFolderModal.tsx b/frontend/src/js/previous-queries/list/AddFolderModal.tsx
@@ -34,7 +34,7 @@ const AddFolderModal = ({ onClose, onSubmit, isValidName }: Props) => {
   const [folderName, setFolderName] = useState<string>("");
 
   return (
-    <Modal onClose={onClose} closeIcon headline={t("addFolderModal.headline")}>
+    <Modal onClose={onClose} headline={t("addFolderModal.headline")}>
       <Content>
         <p>{t("addFolderModal.description")}</p>
         <form

diff --git a/frontend/src/js/previous-queries/list/ProjectItem.tsx b/frontend/src/js/previous-queries/list/ProjectItem.tsx
@@ -134,12 +134,6 @@ const SxDownloadButton = styled(DownloadButton)`
   }
 `;
 
-const Row = styled("div")`
-  display: flex;
-  align-items: flex-start;
-  gap: 5px;
-`;
-
 const SxFaIcon = styled(FaIcon)`
   opacity: 0.7;
 `;
@@ -237,8 +231,8 @@ const ProjectItem = forwardRef<
                 disabled={!mayEdit}
               />
             </WithTooltip>
-            {!isFormConfig(item) && item.resultUrls.length > 0 ? (
-              <Row>
+            <div className="flex items-center gap-2">
+              {!isFormConfig(item) && item.resultUrls.length > 0 ? (
                 <WithTooltip text={t("previousQuery.downloadResults")}>
                   <SxDownloadButton
                     tight
@@ -250,15 +244,15 @@ const ProjectItem = forwardRef<
                     {topLeftLabel}
                   </SxDownloadButton>
                 </WithTooltip>
-                {!item.containsDates && (
-                  <WithTooltip text={t("previousQuery.hasNoDates")}>
-                    <SxFaIcon red icon={faCalendar} />
-                  </WithTooltip>
-                )}
-              </Row>
-            ) : (
-              <NonBreakingText>{topLeftLabel}</NonBreakingText>
-            )}
+              ) : (
+                <NonBreakingText>{topLeftLabel}</NonBreakingText>
+              )}
+              {!isFormConfig(item) && !item.containsDates && (
+                <WithTooltip text={t("previousQuery.hasNoDates")}>
+                  <SxFaIcon red icon={faCalendar} />
+                </WithTooltip>
+              )}
+            </div>
           </TopLeft>
           <TopRight>
             {executedAt}