Restyle welcome page list sections

graylog2-web-interface/src/components/bootstrap/ListGroupItem.tsx

@@ -39,7 +39,7 @@ const InnerContainer = styled.div<StyledProps>(
     font: inherit;
     text-align: left;
     width: 100%;
-    padding: 5px 10px;
+    padding: 5px 0;
     background-color: ${theme.colors.global.contentBackground};
     line-height: 1.25;
     color: ${theme.colors.text.primary};

graylog2-web-interface/src/components/content-stream/ContentStreamReleasesSection.tsx

@@ -15,35 +15,16 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import type { DefaultTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import isEmpty from 'lodash/isEmpty';
 
-import { ListGroup, ListGroupItem, Label, Alert } from 'components/bootstrap';
+import { ListGroup, Alert } from 'components/bootstrap';
 import { RelativeTime, Sanitize, Spinner, ExternalLink } from 'components/common';
+import { StyledListGroupItem, TimeInfo } from 'components/welcome/EntityListItem';
 import type { FeedItem } from 'components/content-stream/hook/useContentStream';
 import useContentStream from 'components/content-stream/hook/useContentStream';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 
-const StyledListGroupItem = styled(ListGroupItem)(
-  ({ theme }: { theme: DefaultTheme }) => css`
-    display: flex;
-    gap: ${theme.spacings.md};
-    align-items: flex-start;
-  `,
-);
-const LastOpenedTime = styled.i(
-  ({ theme }: { theme: DefaultTheme }) => css`
-    color: ${theme.colors.gray[60]};
-  `,
-);
-export const StyledLabel = styled(Label)`
-  cursor: default;
-  width: 110px;
-  display: block;
-`;
-
 const ContentStreamReleasesSection = () => {
   const path = 'release-info';
   const { feedList, isLoadingFeed, error } = useContentStream(path);
@@ -83,9 +64,9 @@ const ContentStreamReleasesSection = () => {
             <Sanitize html={feed?.title} />
           </a>
           {feed?.pubDate ? (
-            <LastOpenedTime>
+            <TimeInfo>
               <RelativeTime dateTime={feed.pubDate} />
-            </LastOpenedTime>
+            </TimeInfo>
           ) : null}
         </StyledListGroupItem>
       ))}

graylog2-web-interface/src/components/content-stream/ContentStreamSection.tsx

@@ -35,9 +35,11 @@ const StyledNewsSectionComponent = styled(SectionComponent)<{ $enabled: boolean
     overflow: hidden;
     flex-grow: 3;
     height: ${$enabled ? 'initial' : 'min-content'};
+    grid-column: span 2;
 
     @media (max-width: ${theme.breakpoints.max.md}) {
       flex-grow: 1;
+      grid-column: span 1;
     }
   `,
 );
@@ -111,7 +113,7 @@ const ContentStreamSection = () => {
   };
 
   return (
-    <SectionGrid $columns="2fr 1fr">
+    <SectionGrid $columns="1fr 1fr 1fr">
       {isNewsSectionEnabledForBrand && (
         <StyledNewsSectionComponent
           title="News"

graylog2-web-interface/src/components/welcome/EntityListItem.tsx

@@ -17,30 +17,30 @@
 
 import React, { useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import type { DefaultTheme } from 'styled-components';
 
 import { Link, RelativeTime } from 'components/common';
-import { ListGroupItem, Label } from 'components/bootstrap';
+import { ListGroupItem } from 'components/bootstrap';
 import getTitleForEntityType from 'util/getTitleForEntityType';
 import { getValuesFromGRN } from 'logic/permissions/GRN';
 import useHasEntityPermissionByGRN from 'hooks/useHasEntityPermissionByGRN';
 import useShowRouteFromGRN from 'routing/hooks/useShowRouteFromGRN';
 
-const StyledListGroupItem = styled(ListGroupItem)`
+export const StyledListGroupItem = styled(ListGroupItem)`
   display: flex;
   gap: 16px;
   align-items: flex-start;
+  justify-content: space-between;
 `;
 
-export const StyledLabel = styled(Label)`
-  cursor: default;
-  width: 110px;
-  display: block;
+const Title = styled.span`
+  text-transform: capitalize;
 `;
 
-const LastOpenedTime = styled.i(
-  ({ theme }: { theme: DefaultTheme }) => css`
-    color: ${theme.colors.gray[60]};
+export const TimeInfo = styled.span(
+  ({ theme }) => css`
+    flex-shrink: 0;
+    white-space: nowrap;
+    color: ${theme.colors.text.secondary};
   `,
 );
 
@@ -60,12 +60,14 @@ const EntityItem = ({ title, grn, timestamp = undefined }: Props) => {
 
   return (
     <StyledListGroupItem>
-      <StyledLabel bsStyle="info">{entityTypeTitle}</StyledLabel>
-      {!showLink ? <i>{entityTitle}</i> : <Link to={entityLink}>{entityTitle}</Link>}
+      <Title>
+        {`${entityTypeTitle} `}
+        {!showLink ? <i>{entityTitle}</i> : <Link to={entityLink}>{entityTitle}</Link>}
+      </Title>
       {timestamp ? (
-        <LastOpenedTime>
+        <TimeInfo>
           <RelativeTime dateTime={timestamp} />
-        </LastOpenedTime>
+        </TimeInfo>
       ) : null}
     </StyledListGroupItem>
   );

graylog2-web-interface/src/components/welcome/RecentActivityList.tsx

@@ -16,11 +16,12 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
+import upperFirst from 'lodash/upperFirst';
 
-import { Table } from 'components/bootstrap';
+import { ListGroup } from 'components/bootstrap';
 import { DEFAULT_PAGINATION } from 'components/welcome/Constants';
 import { NoSearchResult, PaginatedList, RelativeTime, Spinner, Link } from 'components/common';
-import { StyledLabel } from 'components/welcome/EntityListItem';
+import { StyledListGroupItem, TimeInfo } from 'components/welcome/EntityListItem';
 import type { RecentActivityType } from 'components/welcome/types';
 import useRecentActivity from 'components/welcome/hooks/useRecentActivity';
 import getTitleForEntityType from 'util/getTitleForEntityType';
@@ -43,7 +44,7 @@ const ActionItem = ({ itemGrn, activityType, itemTitle, userName = null }: Props
 
   return (
     <div>
-      {`The ${entityTypeTitle} `}
+      {`${upperFirst(entityTypeTitle)} `}
       {!showLink ? <i>{entityTitle}</i> : <Link to={entityLink}>{entityTitle}</Link>}
       {' was '}
       {`${activityType}d`}
@@ -88,22 +89,16 @@ const RecentActivityList = () => {
       pageSize={pagination.per_page}
       showPageSizeSelect={false}
       hideFirstAndLastPageLinks>
-      <Table>
-        <tbody>
-          {recentActivity.map(({ id, timestamp, activityType, itemGrn, itemTitle, userName }) => (
-            <tr key={id}>
-              <td style={{ width: 110 }}>
-                <StyledLabel bsStyle="primary">
-                  <RelativeTime dateTime={timestamp} />
-                </StyledLabel>
-              </td>
-              <td>
-                <ActionItem itemGrn={itemGrn} activityType={activityType} itemTitle={itemTitle} userName={userName} />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
+      <ListGroup>
+        {recentActivity.map(({ id, timestamp, activityType, itemGrn, itemTitle, userName }) => (
+          <StyledListGroupItem key={id}>
+            <ActionItem itemGrn={itemGrn} activityType={activityType} itemTitle={itemTitle} userName={userName} />
+            <TimeInfo>
+              <RelativeTime dateTime={timestamp} />
+            </TimeInfo>
+          </StyledListGroupItem>
+        ))}
+      </ListGroup>
     </PaginatedList>
   );
 };

graylog2-web-interface/src/components/welcome/Welcome.tsx

@@ -77,24 +77,24 @@ const Welcome = () => {
       </PageHeader>
       {AppConfig.welcomePageMetricsEnabled() && <WelcomeMetrics />}
       {onboardingEnabled && <OnboardingBanner />}
-      <SectionGrid>
-        <StyledSectionComponent title="Last Opened">
-          <p className="description">Overview of recently visited saved searches and dashboards.</p>
-          <LastOpenList />
-        </StyledSectionComponent>
+      <SectionGrid $columns="1fr 1fr 1fr">
         <StyledSectionComponent title="Favorite Items">
           <p className="description">Overview of your favorite saved searches and dashboards.</p>
           <FavoriteItemsList />
         </StyledSectionComponent>
+        <StyledSectionComponent title="Recent Activity">
+          <p className="description">
+            {isAdmin
+              ? 'This list includes all actions users performed, like creating or sharing an entity.'
+              : 'Overview of actions you made with entities or somebody else made with entities which relates to you, like creating or sharing an entity.'}
+          </p>
+          <RecentActivityList />
+        </StyledSectionComponent>
+        <StyledSectionComponent title="Last Opened">
+          <p className="description">Overview of recently visited saved searches and dashboards.</p>
+          <LastOpenList />
+        </StyledSectionComponent>
       </SectionGrid>
-      <StyledSectionComponent title="Recent Activity">
-        <p className="description">
-          {isAdmin
-            ? 'This list includes all actions users performed, like creating or sharing an entity.'
-            : 'Overview of actions you made with entities or somebody else made with entities which relates to you, like creating or sharing an entity.'}
-        </p>
-        <RecentActivityList />
-      </StyledSectionComponent>
       <ContentStreamContainer />
     </>
   );