client: modify alignments

Casuals4Fun · Apr 7, 2024 · 4112f39 · 4112f39
1 parent 6591d65
commit 4112f39
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -1,16 +1,13 @@
 import "./closed-debate-card.css";
-import React from "react";
 import { Link } from "react-router-dom";
 import DebateBar from "./debate-bar";
 import useFormatNumber from "../../utils/useFormatNumber";
 
-interface CardProps { }
-
-const ClosedDebateCard: React.FC<CardProps> = () => {
+const ClosedDebateCard = () => {
     return (
         <div id='closed-card'>
             <div className='left'>
-                <h2>Sony is the best camera</h2>
+                <h2>Sony is the best camera of all time.</h2>
                 <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis.
                 </p>

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -14,6 +14,9 @@
 #open-card .debate-header h2 {
     font-size: 20px;
     font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 #open-card .debate-header a {

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,10 +1,7 @@
 import "./open-debate-card.css";
-import React from "react";
 import { Link } from "react-router-dom";
 
-interface CardProps { }
-
-const OpenDebateCard: React.FC<CardProps> = () => {
+const OpenDebateCard = () => {
     return (
         <div id='open-card'>
             <div className='debate-header'>

diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -26,11 +26,13 @@
 #left-sidebar ul {
     max-width: fit-content;
     height: 100%;
+    max-height: 100dvh;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 75px;
+    overflow-y: auto;
 }
 
 #left-sidebar .links__wrapper {

diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -46,7 +46,15 @@ const Profile = () => {
                 <LoadingSkeleton />
             ) : isAuthenticated === AuthStatus.Authenticated ? (
                 <>
-                    <Link to='/notifications' className='notification-btn'>
+                    <Link
+                        to='/notifications'
+                        className='notification-btn'
+                        style={{
+                            borderWidth: '2px',
+                            borderStyle: 'solid',
+                            borderColor: location.pathname === '/notifications' ? 'var(--body_color)' : 'transparent'
+                        }}
+                    >
                         <PiBellSimpleFill size={20} />
                     </Link>
                     <div