From 7e9906c31509b4eb8d5591c2b854efcb02990faf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 24 Mar 2024 20:28:51 +0100
Subject: [PATCH] Fix layout, add missing colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/announcements/announcements-panel.tsx   | 2 +-
 src/components/ui/layout/layout.tsx                    | 4 ++--
 src/features/edit-profile/components/avatar-picker.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 8003286782..052b99f47e 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -33,7 +33,7 @@ const AnnouncementsPanel = () => {
 
   return (
     <Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
-      <Card className='relative' size='md' variant='rounded'>
+      <Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
         <ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
           {announcements.map((announcement) => (
             <Announcement
diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout/layout.tsx
index d78d4dd3d3..e3d9575c3c 100644
--- a/src/components/ui/layout/layout.tsx
+++ b/src/components/ui/layout/layout.tsx
@@ -21,8 +21,8 @@ interface LayoutComponent extends React.FC<ILayout> {
 
 /** Layout container, to hold Sidebar, Main, and Aside. */
 const Layout: LayoutComponent = ({ children }) => (
-  <div className='relative grow black:pt-0 sm:pt-4'>
-    <div className='mx-auto max-w-3xl sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8'>
+  <div className='relative flex grow flex-col black:pt-0 sm:pt-4'>
+    <div className='mx-auto w-full max-w-3xl grow sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8'>
       {children}
     </div>
   </div>
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index b56a82a127..ab06c522c7 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -24,7 +24,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
     <label
       ref={picker}
       className={clsx(
-        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2',
+        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-300 ring-2',
         {
           'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
           'ring-white dark:ring-primary-900': !isDraggedOver,