added changes

Aayan-infotech · Dec 16, 2024 · 2b8f026 · 2b8f026
1 parent 8089ac4
commit 2b8f026
Show file tree

Hide file tree

Showing 55 changed files with 199 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -30,12 +30,14 @@
     "@tiptap/react": "^2.6.6",
     "@tiptap/starter-kit": "^2.6.6",
     "axios": "^1.7.7",
+    "bootstrap": "^5.3.3",
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
     "core-js": "^3.36.1",
     "js-cookie": "^3.0.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.7",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.0",

diff --git a/siggen/assets/index-CjwrOdIL.js b/siggen/assets/index-CjwrOdIL.js
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/components/FormComponent.js b/src/components/FormComponent.js
@@ -83,6 +83,7 @@ const FormComponent = () => {
         onChange={handleChange}
         placeholder="Name"
         style={inputStyle}
+        className="form-control"
       />
       <input
         name="address"

diff --git a/src/components/MainPage.js b/src/components/MainPage.js
@@ -14,6 +14,7 @@ import Template9 from './templates/Template9';
 import Template10 from './templates/Template10';
 import Template11 from './templates/Template11';
 import Template12 from './templates/Template12';
+import Header from './header/header';
 
 
 const MainPage = () => {
@@ -67,15 +68,18 @@ const MainPage = () => {
   };
 
   return (
-    <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
+    <>
+    <Header/>
+    <div className ='container-fluid px-0 d-flex'>
       <Sidebar />
-      <div style={{ width: '35%', padding: '20px' }}>
+      <div style={{ width: '30%', padding: '20px' }}>
         <Outlet />
       </div>
-      <div style={{ width: '80%', padding: '20px' }}>
+      <div style={{ width: '66%', padding: '20px' }}>
         {renderTemplate()}
       </div>
     </div>
+    </>
   );
 };
 

diff --git a/src/components/Pages/AppPage/AppPageGroup1.js b/src/components/Pages/AppPage/AppPageGroup1.js
@@ -308,7 +308,7 @@ const AppPageGroup1 = () => {
           <button
             key={templateName}
             style={{
-              padding: '5px',
+              padding: '15px',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -321,7 +321,7 @@ const AppPageGroup1 = () => {
             onClick={() => handleTemplateClick(templateName)}
           >
             {templateIcons1[index]}
-            <p>{templateName}</p>
+            <p className='mb-0'>{templateName}</p>
           </button>
         ))}
       </div>

diff --git a/src/components/Pages/DesignPage.js b/src/components/Pages/DesignPage.js
@@ -30,6 +30,7 @@ const DesignPage = () => {
             name="font"
             value={data.font || 'Arial'}
             onChange={handleChange}
+            className='form-control'
           >
             <option value="Arial">Arial</option>
             <option value="Verdana">Verdana</option>
@@ -89,6 +90,7 @@ const DesignPage = () => {
             name="spacing"
             value={data.spacing || 'normal'}
             onChange={handleChange}
+            className='form-control'
           >
             <option value="normal">Normal</option>
             <option value="wide">Wide</option>
@@ -102,6 +104,7 @@ const DesignPage = () => {
             name="size"
             value={data.size || 'medium'}
             onChange={handleChange}
+            className='form-control'
           >
             <option value="small">Small</option>
             <option value="medium">Medium</option>

diff --git a/src/components/Pages/DesignPage.scss b/src/components/Pages/DesignPage.scss
@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+  font-family: "Poppins", sans-serif !important;
+}
+
 .detail-page {
     background-color: white; 
     color: black; 
@@ -25,8 +31,8 @@
 
         select, input[type="color"] {
           padding: 10px;
-          border: 1px solid #444; 
-          border-radius: 4px;
+
+          border-radius: 14px;
           background-color: white; 
           color: black; 
 

diff --git a/src/components/Pages/DetailPage.js b/src/components/Pages/DetailPage.js
@@ -123,6 +123,7 @@ const DetailPage = () => {
             placeholder="Name"
             value={data.name || ''}
             onChange={handleChange}
+            className="form-control"
           />
           {errors.name && <span className="error-message">{errors.name}</span>}
         </div>
@@ -134,6 +135,7 @@ const DetailPage = () => {
             placeholder="Title"
             value={data.title || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.title && <span className="error-message">{errors.title}</span>}
         </div>
@@ -145,6 +147,7 @@ const DetailPage = () => {
             placeholder="Company"
             value={data.company || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.company && <span className="error-message">{errors.company}</span>}
         </div>
@@ -156,6 +159,7 @@ const DetailPage = () => {
             placeholder="Phone"
             value={data.phone || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.phone && <span className="error-message">{errors.phone}</span>}
         </div>
@@ -167,6 +171,7 @@ const DetailPage = () => {
             placeholder="Website"
             value={data.website || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.website && <span className="error-message">{errors.website}</span>}
         </div>
@@ -178,6 +183,7 @@ const DetailPage = () => {
             placeholder="Email"
             value={data.email || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.email && <span className="error-message">{errors.email}</span>}
         </div>
@@ -189,6 +195,7 @@ const DetailPage = () => {
             placeholder="Address"
             value={data.address || ''}
             onChange={handleChange}
+             className="form-control"
           />
           {errors.address && <span className="error-message">{errors.address}</span>}
         </div>
@@ -199,6 +206,7 @@ const DetailPage = () => {
             <label>{field.name}:</label>
             <input
               type="text"
+               className="form-control"
               placeholder={`${field.name}`}
               value={field.value || ''}
               onChange={(e) => handleAdditionalFieldChange(field.name, e.target.value)}
@@ -211,6 +219,7 @@ const DetailPage = () => {
         <div className="field-select">
           <select
             value={selectedField}
+             className="form-control"
             onChange={(e) => setSelectedField(e.target.value)}
           >
             <option value="">Add Field</option>

diff --git a/src/components/Pages/DetailPage.scss b/src/components/Pages/DetailPage.scss
@@ -26,8 +26,8 @@
 
       input {
         padding: 10px;
-        border: 1px solid #444; 
-        border-radius: 4px;
+
+        border-radius: 12px;
         background-color: white; 
         color: black; 
 

diff --git a/src/components/Pages/SocialPage.js b/src/components/Pages/SocialPage.js
@@ -86,6 +86,7 @@ const SocialPage = () => {
               type="text"
               placeholder={`${social.name} URL`}
               value={social.url}
+              className='form-control'
               onChange={(e) => handleUrlChange(social.name, e.target.value)}
             />
             <FaTrash onClick={() => removeSocialLink(social.name)} className="remove-icon" />
@@ -96,6 +97,7 @@ const SocialPage = () => {
         <select
           value={selectedSocial}
           onChange={(e) => setSelectedSocial(e.target.value)}
+          className='form-control'
         >
           <option value="">Select Social Media</option>
           {socialMediaOptions.map((option) => (

diff --git a/src/components/Pages/SocialPage.scss b/src/components/Pages/SocialPage.scss
@@ -64,14 +64,14 @@
 .add-icon {
   cursor: pointer;
   font-size: 24px;
-  color: #1e90fa; 
+  color: #fff; 
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  background-color: #f0f0f0;
+  background-color: #000;
   transition: background-color 0.3s ease;
 }
 

diff --git a/src/components/Pages/Tamplate.css b/src/components/Pages/Tamplate.css
@@ -0,0 +1,20 @@
+::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px transparent; 
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #1e90fa; 
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #1ea9fa; 
+  }
diff --git a/src/components/Pages/Tamplate.jsx b/src/components/Pages/Tamplate.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useAppContext } from '../../context/AppContext'
+import "./Tamplate.css"
 
 const TamplatesPreview = () => {
   const { handleTamplate, selectedTamplate } = useAppContext()
@@ -11,11 +12,12 @@ const TamplatesPreview = () => {
     <div>
       <h3>Templates</h3>
       <div
+      className='pe-2'
         style={{
           display: 'grid',
           gridTemplateColumns: 'repeat(2, 1fr)', // 2 columns layout
           gap: '20px', // Space between the buttons
-          maxWidth: '600px', // Optional: max-width to control overall width
+
           margin: '0 auto', // Center the grid container
           height:"calc(100vh - 100px )",
           overflowY:"auto",

diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -1,23 +1,25 @@
 .sidebar {
-  width: 4%;
+  width: 6%;
   border-right: 1px solid rgb(218, 214, 214);
-  padding: 20px;
+  padding: 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100vh;
+  min-height:100vh
 }
 
 .sidebar-link {
   text-decoration: none;
-  padding: 10px 20px;
+  padding: 10px 10px;
   margin-bottom: 15px;
   background-color: transparent;
   border-radius: 4px;
   color: #333; 
   width: 100%;
   text-align: center;
+
   transition: color 0.3s ease, background-color 0.3s ease;
+  word-wrap: break-word;
 
   &.active {
     background-color: transparent;
@@ -31,8 +33,12 @@
 }
 
 .active-icon {
-  background-color: #1e90fa; 
+  background-color: #1e90fa;
   color: white;
-  padding: 10px 20px;
+  padding: 0px 6px;
   border-radius: 25px;
+  height: 1.5rem;
+  width: 1.5rem;
 }
+
+
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -0,0 +1,38 @@
+import Container from 'react-bootstrap/Container'
+import Navbar from 'react-bootstrap/Navbar'
+import logo from '../../assets/images/logo.png'
+import { RxAvatar } from 'react-icons/rx'
+import Dropdown from 'react-bootstrap/Dropdown'
+
+function Header() {
+  return (
+    <>
+      <Navbar className="py-0">
+        <Container fluid>
+          <Navbar.Brand href="#home">
+            <img src={logo} alt="logo" className="w-100" style={{ maxWidth: '110px' }} />
+          </Navbar.Brand>
+          <Navbar.Toggle />
+          <Navbar.Collapse className="justify-content-end">
+            <Navbar.Text className='d-flex flex-row align-items-center'>
+            <Dropdown>
+                <Dropdown.Toggle id="dropdown-basic" className='border-0 text-dark' style={{background: 'none'}}>
+                  <RxAvatar className="fs-2" />
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu style={{left:"-50px"}}>
+                  <Dropdown.Item href="#/action-1">Logout</Dropdown.Item>
+
+                </Dropdown.Menu>
+              </Dropdown>
+                <span>Hello User</span>
+
+            </Navbar.Text>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+    </>
+  )
+}
+
+export default Header
diff --git a/src/components/templates/Parent.jsx b/src/components/templates/Parent.jsx
@@ -55,7 +55,9 @@ const Parent = ({ children }) => {
           color: 'inherit',
           fontSize: getFontSize(),
           lineHeight: getSpacing(),
-          maxWidth: '700px',
+          // maxWidth: '700px',
+          maxWidth: '100%',
+          flexWrap: 'wrap',
           padding: '20px',
           border: '1px solid #ddd',
           borderRadius: '10px',

diff --git a/src/components/templates/Template1.js b/src/components/templates/Template1.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { FaEnvelope, FaGlobe, FaMapMarkerAlt, FaPhone } from 'react-icons/fa'
+import { FaEnvelope, FaGlobe, FaMapMarkerAlt, FaPhoneAlt } from 'react-icons/fa'
 import AppContent from './AppContent'
 import Parent from './Parent'
 import AppContent2 from './AppContent2'
@@ -85,7 +85,7 @@ const Template1 = ({ data, onSubmit }) => {
         >
           <h2 style={{ margin: 0, color: data.fontColor }}>{data.name}</h2>
           <p style={{ margin: 0, fontStyle: 'italic', color: '#555' }}>
-            {data.title}, {data.company}
+            {data.title} {data.company}
           </p>
         </div>
 
@@ -101,7 +101,7 @@ const Template1 = ({ data, onSubmit }) => {
         >
           {/* Phone */}
           <p style={{ margin: 0 }}>
-            <FaPhone style={{ color: data.fontColor }} /> {data.phone}
+            <FaPhoneAlt style={{ color: data.fontColor }} /> {data.phone}
           </p>
           <span style={{ margin: '0 5px' }}>|</span>