Refactor PDF icon and title in AdminExplanation component

Author: Administrator

src/assets/מדריך למשתמשת.pdf renamed to src/assets/Site guide.pdf

@@ -34,6 +34,27 @@
   margin-bottom: 20px;
 }
 
+/* Container for the PDF icon and title */
+.pdf-container-explain {
+  /* left corner */
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.pdf-icon-explain {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  flex-direction: column;
+}
+
+.pdf-title-explain{
+  font-size: 1em;
+  color: #34495e;
+}
+
+
 .category-list {
   list-style-type: none;
   padding: 0;

src/screens/AdminDashboard/AdminExplanation.css

@@ -1,9 +1,22 @@
 import React from 'react';
 import './AdminExplanation.css';
+import pdfIcon from '../../assets/pdf-file.png'; // Importing the PDF icon
 
 const AdminExplanation = () => {
   return (
     <div className="admin-explanation" dir="rtl">
+      {/* PDF Icon with title under it */}
+      <div className="pdf-container-explain">
+        <a href={require('../../assets/Site guide.pdf')} target="_blank" rel="noopener noreferrer">
+          <img src={pdfIcon} alt="PDF Icon" className="pdf-icon-explain" />
+        </a>
+        <span className="pdf-title-explain">
+          <a href={require('../../assets/Site guide.pdf')} target="_blank" rel="noopener noreferrer" className="pdf-link-explain">
+          מעבר למדריך המפורט
+          </a>
+          </span>
+      </div>
+      
       <h1 className="welcome-header">ברוכות הבאות ללוח הניהול</h1>
       <p className="intro-text">כאן תוכלו לנהל את האתר ולבצע פעולות שונות בהתאם לקטגוריות המפורטות:</p>
       <ul className="category-list">