cetirizine

commit 88c8c184ea0a53893ef56f25d86c80fbd7526d01
parent 5d50743252d57161a98ae0fe7b7ac42e2bfc19bb
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  6 Jun 2023 22:55:40 +0200

Simplify grid

Diffstat:
M
src/components/avatar/avatar.tsx
 | 
2
+-
M
src/components/roomList/roomListItem/roomListItem.tsx
 | 
4
++--
M
src/index.scss
 | 
3
++-
M
src/pages/MainPage.scss
 | 
17
+++++++++++------
M
src/pages/MainPage.tsx
 | 
6
+++---

5 files changed, 19 insertions(+), 13 deletions(-)
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -30,7 +30,7 @@ const Avatar: FC<AvatarProps> = memo(({ avatarUrl, displayname, dm = false, onli
 
     if (avatarUrl && !error) {
         return (
-            <div className="flex relative min-w-[2rem] min-h-[2rem] w-[2rem] h-[2rem] justify-center items-center m-0 mr-3 text-xl rounded-full text-white">
+            <div className="flex relative min-w-[2rem] min-h-[2rem] w-[2rem] h-[2rem] justify-center items-center text-xl rounded-full text-white">
                 <img className="rounded-full w-8 h-8 object-cover" alt={displayname} src={avatarUrl} onError={() => { setError(true) }} />
                 {
                     dm ?
diff --git a/src/components/roomList/roomListItem/roomListItem.tsx b/src/components/roomList/roomListItem/roomListItem.tsx
@@ -58,12 +58,12 @@ const RoomListItem: FC<RoomListItemProps> = memo(({ roomId, avatarUrl, displayna
             {
                 inView && (active ? (
                     <div className="flex flex-row gap-2 p-1 bg-gray-300 hover:bg-gray-400 rounded-lg duration-200 ease-in-out items-center">
-                        <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} />
+                        <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} isBot={false} />
                         <span title={displayname} className='text-slate-900 font-normal text-base max-w-[32ch] overflow-hidden text-ellipsis w-full whitespace-nowrap'>{displayname}</span>
                     </div>
                 ) : (
                     <div className="flex flex-row gap-2 p-1 hover:bg-gray-300 rounded-lg duration-200 ease-in-out items-center">
-                        <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} />
+                        <Avatar avatarUrl={avatarUrl} displayname={displayname} dm={dm} online={online} isBot={false} />
                         <span title={displayname} className='text-slate-900 font-normal text-base max-w-[32ch] overflow-hidden text-ellipsis w-full whitespace-nowrap'>{displayname}</span>
                     </div>
                 ))
diff --git a/src/index.scss b/src/index.scss
@@ -44,5 +44,6 @@ pre {
   * Blockquote should be light grey with a thick left border
   */
 blockquote {
-  @apply border-l-4 border-gray-300 p-4 py-0 bg-slate-100 rounded-md;
+  @apply border-l-4 border-gray-300 p-4 py-0 bg-slate-100;
+  border-radius: 0 0.375rem 0.375rem 0;
 }
 \ No newline at end of file
diff --git a/src/pages/MainPage.scss b/src/pages/MainPage.scss
@@ -4,18 +4,18 @@
         "sidebar header"
         "sidebar main"
         "sidebar editor";
-    grid-template-columns: 40ch 1fr;
-    grid-template-rows: 60px 2fr 1fr;
+    grid-template-columns: 40ch auto;
+    grid-template-rows: 60px 2fr auto;
     grid-auto-flow: column;
     row-gap: 0.5rem;
-    column-gap: 0.1rem;
+    column-gap: 0.15em;
 
     #sidebar {
         grid-area: sidebar;
         @apply bg-gradient-to-br from-slate-100 via-gray-200 to-orange-200 border-r-[1px] border-slate-300;
         display: grid;
         grid-auto-flow: column;
-        grid-template-rows: 60px 1fr;
+        grid-template-rows: 60px auto;
         grid-template-areas:
             "user-info"
             "roomlist";
@@ -27,7 +27,7 @@
             column-gap: 0.5rem;
             display: grid;
             grid-auto-flow: row;
-            grid-template-columns: minmax(0, 1fr) 7fr;
+            grid-template-columns: auto 1fr;
             grid-template-areas:
                 "avatar username";
             flex-direction: row;
@@ -50,7 +50,12 @@
     }
 
     #room-info {
-        @apply pb-2 flex flex-row items-center border-b-2 pt-4 pl-2;
+        @apply pb-2 border-b-2 pt-4 pl-2;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: start;
+        gap: 1rem;
         grid-area: header;
     }
 
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -488,9 +488,9 @@ const MainPage = memo(() => {
                 <div id="room-wrapper"></div>
                 <div id='room-info'>
                     <Avatar displayname={room.getName()} avatarUrl={room.getAvatarURL()} dm={room.isDM()} online={room.presence} isBot={false} />
-                    <div className='flex flex-row items-start'>
-                        <h1 className='text-black font-semibold text-lg flex-shrink-0'>{room.getName()}</h1>
-                        <Linkify options={linkifyOptions} as='p' className="ml-4 text-slate-700 font-normal text-base line-clamp-2 text-ellipsis">{room.getTopic()}</Linkify>
+                    <div className='flex mr-2'>
+                        <h1 className='text-black font-semibold text-lg'>{room.getName()}</h1>
+                        <Linkify options={linkifyOptions} as='p' className="ml-2 text-slate-700 font-normal text-base line-clamp-2 text-ellipsis">{room.getTopic()}</Linkify>
                     </div>
                 </div>
                 <ChatView id='chat-view' room={room} />