Add line for policy above annotation buttons

DiSSCo · Nov 8, 2024 · efef89b · efef89b
1 parent 658cfc9
commit efef89b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/elements/annotationSidePanel/AnnotationSidePanel.tsx b/src/components/elements/annotationSidePanel/AnnotationSidePanel.tsx
@@ -144,6 +144,7 @@ const AnnotationSidePanel = (props: Props) => {
                                     StartAnnotationWizard={() => setAnnotationWizardToggle(true)}
                                     RefreshAnnotations={RefreshAnnotations}
                                     OpenMasMenu={() => setMasMenuToggle(true)}
+                                    ShowPolicyText={() => setPolicyTextToggle(true)}
                                 />
                             }
                         </>

diff --git a/src/components/elements/annotationSidePanel/components/AnnotationsOverview.tsx b/src/components/elements/annotationSidePanel/components/AnnotationsOverview.tsx
@@ -33,7 +33,8 @@ type Props = {
     SetFilterSortValues: Function,
     StartAnnotationWizard: Function,
     RefreshAnnotations: Function,
-    OpenMasMenu: Function
+    OpenMasMenu: Function,
+    ShowPolicyText: Functon
 };
 
 
@@ -46,10 +47,11 @@ type Props = {
  * @param StartAnnotationWizard Function that starts the annotation wizard
  * @param RefresAnnotations Function to refresh the annotations in the annotations overview
  * @param OpenMasMenu Function to open the MAS menu
+ * @param ShowPolicyText Function to show the annotation policy text in the side panel
  * @returns JSX Component
  */
 const AnnotationsOverview = (props: Props) => {
-    const { annotations, filterSortValues, schemaTitle, SetFilterSortValues, StartAnnotationWizard, RefreshAnnotations, OpenMasMenu } = props;
+    const { annotations, filterSortValues, schemaTitle, SetFilterSortValues, StartAnnotationWizard, RefreshAnnotations, OpenMasMenu, ShowPolicyText } = props;
 
     /* Hooks */
     const dispatch = useAppDispatch();
@@ -166,7 +168,22 @@ const AnnotationsOverview = (props: Props) => {
                 <Col className="px-0">
                     <Card />
 
-                    <Row className="flex-row-reverse mt-3">
+                    <p className="fs-5 tc-grey mt-2 text-end">
+                        {`To make an annotation you must agree with our `}
+                        <span className="tc-accent">
+                            <Button type="button"
+                                variant="blank"
+                                className="py-0 px-0"
+                                OnClick={() => ShowPolicyText()}
+                            >
+                                <p className="fs-5">
+                                    annotation policy
+                                </p>
+                            </Button>
+                        </span>
+                    </p>
+
+                    <Row className="flex-row-reverse mt-2">
                         {/* Add annotation button */}
                         <Col lg="auto"
                             className="ps-1"