Merge pull request #586 from mahasultan/ishighrisk

Implemented the isHighRisk Component to Activist
activist-org · Nov 29, 2023 · 60359b1 · 60359b1
2 parents ad6ad64 + 2ba4318
commit 60359b1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/frontend/components/card/discussion/CardDiscussionInput.vue b/frontend/components/card/discussion/CardDiscussionInput.vue
@@ -83,20 +83,33 @@
           />
         </div>
       </div>
-      <div class="w-full md:w-full">
+      <div v-if="discussionInput.highRisk" class="w-full md:w-full">
         <textarea
           id="message"
           rows="4"
-          class="block p-2.5 w-full text-sm text-light-text bg-light-content rounded-lg border border-light-section-div dark:bg-dark-content dark:border-dark-section-div placeholder-light-special-text dark:placeholder-dark-special-text dark:text-dark-text focus-brand"
-          :placeholder="$t('components.card-discussion-input.leave-comment')"
+          class="block p-2.5 w-full text-sm rounded-lg border border-light-action-red dark:border-dark-action-red placeholder-light-special-text focus-brand font-bold placeholder:text-light-action-red  dark:placeholder:text-dark-action-red dark:text-dark-text bg-light-content dark:bg-dark-content"
+          :placeholder="$t('components.card-discussion-input.leave-comment-highRisk')"
         ></textarea>
       </div>
+       <div v-else class="w-full md:w-full">
+        <textarea
+              id="message"
+              rows="4"
+              class="block p-2.5 w-full text-sm text-light-text rounded-lg border border-light-section-div placeholder-light-special-text dark:placeholder-dark-special-text dark:text-dark-text  dark:bg-dark-distinct focus-brand"
+              :placeholder="$t('components.card-discussion-input.leave-comment')"
+        ></textarea>
+    </div>
       <div class="flex items-center justify-between px-1">
         <p class="inline-flex items-center">
           {{ $t("components.card-discussion-input.markdown-support") }}
           <Icon class="mx-1" name="bi:markdown" size="1.25em"></Icon>
         </p>
-        <div class="flex space-x-1">
+        <div class="flex space-x-3 items-center">
+          <div v-if="discussionInput.highRisk" class="w-full md:w-full">
+            <div class="cursor-pointer rounded-lg p-1 text-light-text dark:text-light-action-red dark:bg-dark-action-red/20 dark:border-dark-action-red bg-light-action-red border border-light-text focus-brand w-16 h-10 flex justify-center items-center">
+              <Icon name="bi:exclamation-octagon" size="1.4em" />
+            </div>
+          </div>         
           <BtnLabeled
             class="inline-flex justify-center items-center w-small"
             :cta="true"
@@ -155,3 +168,4 @@ const listol = () => {
   console.log("click on listol");
 };
 </script>
+
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
@@ -127,7 +127,8 @@
   "components.card-danger-zone.username-label": "Your username",
   "components.card-danger-zone.username-placeholder": "Enter your username",
   "components.card-discussion-input.comment": "Comment",
-  "components.card-discussion-input.leave-comment": "Leave a comment",
+  "components.card-discussion-input.leave-comment": "Leave a public comment",
+  "components.card-discussion-input.leave-comment-highRisk": "You are a member of a high risk organization. Please be careful what you write.",
   "components.card-discussion-input.markdown-support": "This editor supports Markdown",
   "components.card-discussion-input.preview": "Preview",
   "components.card-discussion-input.write": "Write",

diff --git a/frontend/pages/events/[id]/discussion.vue b/frontend/pages/events/[id]/discussion.vue
@@ -71,5 +71,6 @@ const discussionInput: DiscussionInput = {
   supporters: 123,
   description: "I love to test!",
   category: "Category",
+  highRisk: true,
 };
 </script>
diff --git a/frontend/types/card-discussion-input.d.ts b/frontend/types/card-discussion-input.d.ts
@@ -4,4 +4,6 @@ export interface DiscussionInput {
   supporters: number;
   description: string;
   category: string;
+  highRisk: boolean;
+
 }