Fix layout, add missing colors

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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

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>

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,