front

data-players · Jun 28, 2024 · 359c89b · 359c89b
1 parent a05ffbb
commit 359c89b
Show file tree

Hide file tree

Showing 12 changed files with 293 additions and 105 deletions.
diff --git a/frontend/src/assets/logos/common/SVG/documentation.svg b/frontend/src/assets/logos/common/SVG/documentation.svg
diff --git a/frontend/src/components/CollapsibleFilter.css b/frontend/src/components/CollapsibleFilter.css
@@ -13,7 +13,19 @@
   margin-bottom: 10px;
 }
 
+.filter-header-content {
+  display: flex;
+  align-items: center;
+}
+
 .filter-icon {
     margin-right: 10px;
 }
 
+.filter-title {
+  font-weight: bold;
+}
+
+.chevron.down {
+  transform: rotate(180deg);
+}
diff --git a/frontend/src/components/CollapsibleFilter.js b/frontend/src/components/CollapsibleFilter.js
@@ -14,9 +14,9 @@ const CollapsibleFilter = ({ title, initialRouteState, attribute, children, icon
   return (
     <div className="filter-container">
       <div className="filter-header" onClick={() => setIsOpen(!isOpen)}>
-        <div>
+        <div className="filter-header-content">
           {icon && <span className="filter-icon">{icon}</span>}
-          <span>{title}</span>
+          <span className='body2 filter-title'>{title}</span>
         </div>
         <span className={`chevron ${isOpen ? 'up' : 'down'}`}>▼</span>
       </div>

diff --git a/frontend/src/components/Hit.css b/frontend/src/components/Hit.css
@@ -28,6 +28,7 @@ a.hit-link:hover {
 .hit-data-source,
 .hit-department {
     align-items: center;
+    font-weight: bold;
 }
 
 .keyword-container {
@@ -70,17 +71,20 @@ a.hit-link:hover {
 
 .hit-title {
   position: relative;
+  color: #88BDED;
+  font-weight: bold;
   display: inline-block;
+  padding-top: 20px;
   margin-bottom: 20px;
 }
 
 .hit-title::after {
   content: '';
   display: block;
-  width: 50px; /* Ajustez la largeur selon vos besoins */
-  height: 2px; /* Ajustez la hauteur selon vos besoins */
-  background-color: #88BDED; /* Couleur bleue */
+  width: 50px;
+  height: 2px;
+  background-color: #88BDED;
   position: absolute;
-  bottom: -10px; /* Ajustez la position selon vos besoins */
+  bottom: -10px;
   left: 0;
 }
diff --git a/frontend/src/components/Hit.js b/frontend/src/components/Hit.js
@@ -19,18 +19,18 @@ const Hit = ({ hit }) => {
         <div>
           <a href={hit.homePage} target="_blank" rel="noreferrer" className="hit-link">
             <div>
-              <h2 className="hit-name hit-title">
+              <span className="body1 hit-name hit-title">
                 <Highlight attribute="title" hit={hit} />
-              </h2>
+              </span>
             </div>
           </a>
         </div>
-        <div>
-          <Highlight attribute="description" hit={hit} />
+        <div className='body3'>
+          <Highlight attribute="description" hit={hit}/>
         </div>
         <div className="hit-details">
           {hit.hasTopic && (
-            <div className="hit-topic">
+            <div className="hit-topic body3">
               <div>
                 <ThematiqueIcon />
               </div>
@@ -40,7 +40,7 @@ const Hit = ({ hit }) => {
             </div>
           )}
           {hit.hasDepartment && (
-            <div className="hit-department">
+            <div className="hit-department body3">
               <div>
                 <DepartementIcon />
               </div>
@@ -50,7 +50,7 @@ const Hit = ({ hit }) => {
             </div>
           )}
           {hit.hasDataSource && (
-            <div className="hit-data-source">
+            <div className="hit-data-source body3">
               <div>
                 <RessourceIcon />
               </div>
@@ -63,7 +63,7 @@ const Hit = ({ hit }) => {
 
         {hit?._highlightResult?.hasKeyword &&  (
           <div className="hit-details">
-            <div className="hit-keyword">
+            <div className="hit-keyword body3">
               <div className="hit-keyword-icon">
                 <TagIcon />
               </div>

diff --git a/frontend/src/components/InputWithStyledPlaceholder.css b/frontend/src/components/InputWithStyledPlaceholder.css
@@ -7,7 +7,16 @@
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-    color: #aaa;
     z-index: 1;
 }
 
+.placeholderText {
+    color: black;
+}
+
+.placeholderText-subtitle {
+    color: #828282;
+}
+
+
+
diff --git a/frontend/src/components/SearchComponents.css b/frontend/src/components/SearchComponents.css
@@ -3,13 +3,33 @@
   }
 
   .searchBox input  {
-    border-radius: 20px;
-    padding: 10px;
+    border-radius: 30px;
+    padding: 20px;
     padding-left: 50px;
+    border: 1px solid #E5E7EB;
+    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 8px rgba(0, 0, 0, 0.08);
+
   }
   .searchBox button  {
     margin-left: 15px;
   }
+
+  .clearRefinementsButton{
+    color: #343A33;
+    border-radius: 20px;  
+    padding: 10px;
+    background-color: #B9FF66;
+    font-family: 'Raleway', sans-serif;
+    font-size: 12px!important;
+    font-weight: bold;
+    line-height: 16px!important;
+    padding: 15px;
+  }
+
+  .clearRefinementsButton:disabled{
+    background-color: #F3F2F1;
+  }
+
 
   .ais-RefinementList-label {
     display: flex;
@@ -43,8 +63,8 @@
   }
 
   [class^=ais-] {
-    font-size: inherit !important
-}
+    font-size: inherit !important;
+  }
 
   .searchResult {
     overflow-y:auto !important;
@@ -60,11 +80,13 @@
 
   .sideFilters {
     flex-basis: 30%;
-    padding-right: 20px;
+    /* padding-right: 20px; */
+    box-shadow: 0px 18.95px 47.38px 0px #7773AA1A;
   }
 
   .searchPanel {
     flex-basis: 70%;
+    margin-left: 20px;
     display: flex;
     flex-direction: column;
     height : 90vh;
@@ -97,16 +119,6 @@
     padding: 10px;
   }
 
-  .clearRefinementsButton{
-    color: black;
-    border-radius: 20px;  
-    padding: 10px;
-    background-color: #B9FF66;
-  }
-
-  .clearRefinementsButton:disabled{
-    background-color: #F3F2F1;
-  }
 
   .filtersHeader {
     display: flex;
@@ -134,3 +146,20 @@
     width: 70%;
   }
 
+  .didacticiel-icon {
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 30px;
+    /* gray/200 */
+    border: 1px solid #E5E7EB;
+    /* depth 4 */
+    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  .customStats {
+    font-family: Raleway;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 16px;
+  }