fix(styles): separe contribution and contact with colors

dataesr · Apr 25, 2024 · 67b48b7 · 67b48b7
1 parent 3b2c65b
commit 67b48b7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git a/src/pages/contribution-page/contribution-card.tsx b/src/pages/contribution-page/contribution-card.tsx
@@ -55,7 +55,7 @@ const ContributionItem = ({
             <HighlightedMessage
               message={
                 data.message.length > 70
-                  ? `${data.message.slice(0, 70)}...`
+                  ? `${data.message.slice(0, 300)}...`
                   : data.message
               }
               highlightedQuery={highlightedQuery}

diff --git a/src/pages/contribution-page/index.tsx b/src/pages/contribution-page/index.tsx
@@ -25,6 +25,7 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [highlightedQuery, setHighlightedQuery] = useState("");
 
   const location = useLocation();
+  console.log(location.pathname);
 
   const { data, isLoading, isError } = useGetContributionData(
     buildURL(sort, status, query, page, searchInMessage),
@@ -63,7 +64,11 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   return (
     <Container className="fr-my-5w">
       <Row gutters className="fr-mb-3w">
-        <Title as="h1">Contribution par objets</Title>
+        {location.pathname.includes("contributionpage") ? (
+          <Title as="h1">Contribution par objets</Title>
+        ) : (
+          <Title as="h1">Contribution via formulaire</Title>
+        )}
         <Col md="8" xs="12">
           <SearchBar
             className="fr-mb-1w"

diff --git a/src/pages/contribution-page/message-preview.tsx b/src/pages/contribution-page/message-preview.tsx
@@ -1,16 +1,21 @@
 import { Col, Row, Text } from "@dataesr/dsfr-plus";
 import type { Contribution } from "../../types";
 import HighlightedMessage from "../../components/highlightedMessage";
+import { useLocation } from "react-router-dom";
 const MessagePreview = ({
   data,
   highlightedQuery,
 }: {
   data: Contribution;
   highlightedQuery: string;
 }) => {
+  const location = useLocation();
+  const contributorClassName = location.pathname.includes("contributionpage")
+    ? "contributorSide"
+    : "contributorSideContact";
   return (
     <>
-      <Row className="contributorSide">
+      <Row className={contributorClassName}>
         {data.id && (
           <Col
             className={
@@ -37,6 +42,9 @@ const MessagePreview = ({
             highlightedQuery={highlightedQuery}
           />
         </span>
+        <div>
+          <pre>{JSON.stringify(data || "", null, 2)}</pre>
+        </div>
       </Row>
     </>
   );

diff --git a/src/pages/contribution-page/staff-action.tsx b/src/pages/contribution-page/staff-action.tsx
@@ -1,10 +1,15 @@
 import { Col, Text } from "@dataesr/dsfr-plus";
 import EmailSender from "../../api/send-mail";
 import type { Contribution } from "../../types";
+import { useLocation } from "react-router-dom";
 
 const StaffActions = ({ data }: { data: Contribution }) => {
+  const location = useLocation();
+  const contributorClassName = location.pathname.includes("contributionpage")
+    ? "staffSide"
+    : "staffSideContact";
   return (
-    <Col className="staffSide">
+    <Col className={contributorClassName}>
       <EmailSender contribution={data} />
       {data.comment && <Text size="sm">Réponse : {data.comment}</Text>}
     </Col>

diff --git a/src/pages/contribution-page/styles.scss b/src/pages/contribution-page/styles.scss
@@ -6,13 +6,28 @@
   margin-right: 200px;
   padding: 20px;
 }
+.contributorSideContact {
+  background-color: var(--background-alt-brown-caramel);
+  border: 1px solid var(--background-alt-brown-caramel);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  margin-right: 200px;
+  padding: 20px;
+}
 .staffSide {
   text-align: right;
   background-color: var(--background-alt-pink-macaron);
   border-radius: 20px;
   padding: 20px;
   margin-left: 140px;
 }
+.staffSideContact {
+  text-align: right;
+  background-color: var(--background-alt-blue-cumulus);
+  border-radius: 20px;
+  padding: 20px;
+  margin-left: 140px;
+}
 
 .contributionItem {
   border-bottom: 10px solid #ccc;