client: wip create debate page, server: update dependencies

.github/workflows/main.yml

@@ -33,6 +33,7 @@ jobs:
     - name: Install dependencies and build
       env:
         VITE_SERVER_URL: ${{ secrets.VITE_SERVER_URL }}
+        VITE_SYNCFUSION_KEY: ${{ secrets.VITE_SYNCFUSION_KEY }}
       run: |
         cd client
         npm install

client/src/App.css

@@ -20,7 +20,7 @@
 }
 
 #main {
-    padding: 20px;
+    /* padding: 20px; */
     width: 40%;
     height: 100dvh;
     overflow-y: auto;
@@ -32,10 +32,13 @@
         linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
         linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
         var(--dot-color);
+    border-left: 1px solid var(--explore_input_bg);
+    border-right: 1px solid var(--explore_input_bg);
 }
 
 #main.w-full {
     width: 100%;
+    border: unset;
 }
 
 .sidebar-btn {
@@ -63,6 +66,7 @@
 }
 
 .debates {
+    padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -115,6 +119,15 @@
     }
 }
 
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+
+    #main,
+    #main.w-full {
+        border-left: 1px solid var(--explore_input_bg);
+        border-right: 1px solid var(--explore_input_bg);
+    }
+}
+
 @media screen and (max-width: 767px) {
     #left-sidebar {
         width: 15%;
@@ -123,13 +136,23 @@
     #main,
     #main.w-full {
         width: 85%;
+        border-right: unset;
     }
 
     #right-sidebar {
         display: none;
     }
 }
 
+@media screen and (min-width: 481px) and (max-width: 767px) {
+
+    #main,
+    #main.w-full {
+        border-left: 1px solid var(--explore_input_bg);
+        border-right: unset;
+    }
+}
+
 @media screen and (max-width: 480px) {
     #left-sidebar {
         position: fixed;
@@ -150,9 +173,12 @@
         background: var(--body_background);
     }
 
+    #main {
+        border: unset;
+    }
+
     #main,
     #main.w-full {
-        padding: 10px;
         padding-top: 70px;
         width: 100%;
     }
@@ -162,6 +188,8 @@
     }
 
     .debates {
+        padding: 10px;
+        padding-top: 0;
         gap: 10px;
     }
 }

client/src/App.tsx

@@ -65,8 +65,8 @@ export default function App() {
           <Route path='/login' element={<Navigate to='/auth?type=login' />} />
           <Route path='/signup' element={<Navigate to='/auth?type=signup' />} />
           <Route path='/search' element={<SearchPage />} />
-          {/* <Route path='/create' element={<ProtectedRoute><CreateDebatePage /></ProtectedRoute>} /> */}
-          <Route path='/create' element={<CreateDebatePage />} />
+          {/* <Route path='/create' element={<ProtectedRoute><CreateDebatePage isVisible={isScrollingUp} isFullscreen={!sidebar} /></ProtectedRoute>} /> */}
+          <Route path='/create' element={<CreateDebatePage isVisible={isScrollingUp} isFullscreen={!sidebar} />} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />
           <Route path='/open-topics' element={<OpenTopicsPage />} />
           <Route path='/notifications' element={<NotificationPage />} />

client/src/components/card/closed-debate-card.css

@@ -2,9 +2,10 @@
 #closed-card-loading {
     min-height: 270px;
     background-color: var(--card_background);
-    border: 2px solid var(--card_border);
+    border: 1px solid var(--card_border);
     display: flex;
     justify-content: space-between;
+    /* border-radius: 8px; */
 }
 
 #closed-card .left,
@@ -35,9 +36,10 @@
 
 #closed-card .divider,
 #closed-card-loading .divider {
-    margin: 15px 0;
+    /* margin: 15px 0;
     width: 2px;
-    background: linear-gradient(transparent, var(--card_divider), var(--card_divider), transparent);
+    background: linear-gradient(transparent, var(--card_divider), var(--card_divider), transparent); */
+    border-left: 1px solid var(--card_border);
 }
 
 #closed-card .left h2 {
@@ -302,12 +304,6 @@
 } */
 
 @media screen and (max-width: 480px) {
-
-    #closed-card,
-    #closed-card-loading {
-        border-width: 1px;
-    }
-
     #closed-card .left h2 {
         /* max-width: 100%; */
         font-size: 18px;

client/src/components/card/open-debate-card.css

@@ -3,7 +3,8 @@
     min-height: 270px;
     padding: 20px 15px;
     background-color: var(--card_background);
-    border: 2px solid var(--card_border);
+    border: 1px solid var(--card_border);
+    /* border-radius: 8px; */
 }
 
 #open-card .debate-header,
@@ -203,12 +204,6 @@
 }
 
 @media screen and (max-width: 480px) {
-
-    #open-card,
-    #open-card-loading {
-        border-width: 1px;
-    }
-
     #open-card .debate-header {
         gap: 10px;
     }

client/src/components/sidebar/explore.css

@@ -55,14 +55,17 @@
 #explore .explore-btns {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 5px;
 }
 
 #explore .explore-btns a {
-    padding: 7.5px 20px;
+    /* padding: 7.5px 20px;
     background-color: var(--card_background);
-    border: 1px solid var(--explore_input_bg);
+    border: 1px solid var(--explore_input_bg); */
+    padding: 7.5px 15px;
+    background-color: var(--body_background);
     border-radius: 20px;
+    text-transform: lowercase;
 }
 
 #explore .explore-btns a:hover {

client/src/components/sidebar/explore.tsx

@@ -57,7 +57,7 @@ const Explore: React.FC<ExploreProps> = ({ term }) => {
                 <div className='explore-btns'>
                     {categoriesData.map((item, index) => (
                         <Link to={`/search?category=${item}`} key={index}>
-                            {item}
+                            #{item}
                         </Link>
                     ))}
                 </div>

client/src/globals.css

@@ -63,7 +63,8 @@
     --card_background: #f4f4f4;
     --card_color_primary: #111111;
     --card_color_secondary: #606060;
-    --card_border: #e5e4e2;
+    /* --card_border: #e5e4e2; */
+    --card_border: #e8e8e8;
     --card_divider: #a0a0a041;
     --debate_from: #5b5b5b;
     --debate_by: #000000;
@@ -81,7 +82,8 @@
     --card_background: #121212;
     --card_color_primary: #ffffff;
     --card_color_secondary: #a5a5a5;
-    --card_border: #212122;
+    --card_border: #1f1f21;
+    /* --card_border: #212122; */
     --card_divider: #ffffff1a;
     --debate_from: #AAAAAA;
     --debate_by: #ffffff;

client/src/pages/create-debate/index.tsx

@@ -3,7 +3,12 @@ import { useRef, useState } from "react"
 import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
 import Editor from "./editor";
 
-function CreateDebatePage() {
+interface CreateProps {
+    isVisible: boolean
+    isFullscreen: boolean
+}
+
+const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) => {
     const editorRef = useRef<RichTextEditorComponent>(null);
     const [editorContent, setEditorContent] = useState<string>('');
 
@@ -30,8 +35,10 @@ function CreateDebatePage() {
                     rteValue=""
                 />
             </div>
-            <div>
-                <button type='button' onClick={saveEditorContent}></button>
+            <div className='space' />
+            <div className={`debate-btns ${isVisible ? 'reveal' : 'hide'} ${isFullscreen ? 'w-full' : ''}`}>
+                <button type='button' onClick={saveEditorContent}>PREVIEW</button>
+                <button type='submit' onClick={() => { }}>PUBLISH</button>
             </div>
         </form>
     );