log out button update

DFanso · Jan 5, 2024 · a38a794 · a38a794
1 parent f5dfcba
commit a38a794
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/admin/src/components/Header.js b/admin/src/components/Header.js
@@ -1,4 +1,3 @@
-// Header.js
 import React from 'react';
 
 const Header = () => {
@@ -9,9 +8,23 @@ const Header = () => {
             height: '65px',
             display: 'flex',
             alignItems: 'center',
-            paddingLeft: '20px'
+            justifyContent: 'space-between',
+            paddingLeft: '20px',
+            paddingRight: '20px',
         }}>
-            CINEMAGIC
+            <span>CINEMAGIC</span>
+            <button style={{
+                backgroundColor: '#f0f0f0',
+                color: 'black',
+                padding: '10px 20px',
+                border: 'none',
+                borderRadius: '5px',
+                cursor: 'pointer',
+                fontSize: '1rem',
+                fontWeight: 'bold'
+            }}>
+                Log Out
+            </button>
         </div>
     );
 };

diff --git a/admin/src/css/AllMovies.css b/admin/src/css/AllMovies.css
@@ -7,7 +7,7 @@
 }
 
 .movie-card {
-    width: calc(25% - 20px);
+    width: calc(26% - 20px);
     /* Adjust width for 4 cards in a row, accounting for the gap */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
@@ -89,6 +89,17 @@
     margin-right: 5px;
 }
 
+.chat-btn {
+    padding: 6px 14px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-bottom: 8px;
+    color: white;
+    margin-right: 5px;
+}
+
 
 .show-btn {
     padding: 6px 14px;

diff --git a/admin/src/pages/AllMovies.js b/admin/src/pages/AllMovies.js
@@ -101,6 +101,7 @@ const MovieGrid = () => {
             <button className="btn add-btn">Add Movie</button>
           </Link>
         </Link>
+        <Link to="/chat" className="btn-link"><button className="btn add-btn">Chat</button></Link>
       </div>
       <div className="movie-grid">
         {currentMovies.map((movie, index) => (