Rewrite CompanyDetail to make it look more like the webapp

app/components/EventListCompact/EventListCompact.css

@@ -0,0 +1,6 @@
+.emptyState {
+  color: var(--secondary-font-color);
+  font-size: 20px;
+  font-weight: lighter;
+  font-style: italic;
+}

app/components/EventListCompact/index.tsx

@@ -0,0 +1,41 @@
+import type { Event } from 'app/models';
+import EmptyState from '../EmptyState';
+import EventItem, { type EventStyle } from '../EventItem';
+import { Flex } from '../Layout';
+import styles from './EventListCompact.css';
+
+type Props = {
+  events: Array<Event>;
+  noEventsMessage: string;
+  loggedIn: boolean;
+  eventStyle?: EventStyle;
+};
+
+const EventListCompact = ({
+  events,
+  noEventsMessage,
+  loggedIn,
+  eventStyle = 'default',
+}: Props) => (
+  <>
+    {events && events.length ? (
+      <Flex column wrap>
+        {events.map((event) => (
+          <EventItem
+            key={event.id}
+            event={event}
+            showTags={false}
+            loggedIn={loggedIn}
+            eventStyle={eventStyle}
+          />
+        ))}
+      </Flex>
+    ) : (
+      <EmptyState>
+        <h2 className={styles.emptyState}>{noEventsMessage}</h2>
+      </EmptyState>
+    )}
+  </>
+);
+
+export default EventListCompact;

app/components/JoblistingItem/JoblistingItem.css

@@ -0,0 +1,60 @@
+@import url('~app/styles/variables.css');
+
+.joblistingItem {
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+  margin-bottom: 12px;
+  padding: 15px;
+  line-height: 1.3;
+  min-width: 280px;
+  border-radius: 5px;
+  color: var(--lego-font-color);
+  transition: background-color var(--easing-fast);
+
+  &:hover {
+    background-color: rgba(255, 0, 0, var(--color-red-hover-alpha));
+  }
+
+  @media (--mobile-device) {
+    padding: 5px;
+  }
+}
+
+.companyLogo {
+  width: 120px;
+  max-height: 80px;
+  min-width: 120px;
+  object-fit: contain;
+  margin-right: 20px;
+  background: white;
+}
+
+.listItem {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  font-size: 15px;
+
+  @media (--mobile-device) {
+    flex-direction: column;
+  }
+}
+
+.joblistingItemTitle {
+  font-weight: 600;
+  font-size: 16px;
+  margin-right: 5px;
+  margin-bottom: 10px;
+}
+
+.deadLine {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 145px;
+
+  @media (--mobile-device) {
+    justify-content: flex-start;
+  }
+}

app/components/JoblistingItem/index.tsx

@@ -0,0 +1,64 @@
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+import { Image } from 'app/components/Image';
+import { jobType, Year, Workplaces } from 'app/components/JoblistingItem/Items';
+import { Flex } from 'app/components/Layout';
+import Tag from 'app/components/Tags/Tag';
+import Time from 'app/components/Time';
+import type { ListJoblisting } from 'app/store/models/Joblisting';
+import styles from './JoblistingItem.css';
+
+type JobListingItemProps = {
+  joblisting: ListJoblisting;
+};
+
+const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
+  <Link to={`/joblistings/${joblisting.id}/`} className={styles.joblistingItem}>
+    {joblisting.company.logo && (
+      <Image
+        className={styles.companyLogo}
+        src={joblisting.company.logo}
+        placeholder={joblisting.company.logoPlaceholder}
+        alt={`${joblisting.company.name} logo`}
+      />
+    )}
+    <div className={styles.listItem}>
+      <div>
+        <Flex wrap gap={4}>
+          {moment(joblisting.createdAt).isAfter(
+            moment().subtract(3, 'days')
+          ) && <Tag tag="Ny" color="green" />}
+          <h3 className={styles.joblistingItemTitle}>{joblisting.title}</h3>
+        </Flex>
+        <div>
+          {joblisting.company.name}
+          {joblisting.jobType && (
+            <>
+              <span> • </span>
+              {jobType(joblisting.jobType)}
+            </>
+          )}
+        </div>
+        <div>
+          <Year joblisting={joblisting} />
+          {joblisting.workplaces && (
+            <>
+              <span> • </span>
+              <Workplaces places={joblisting.workplaces} />
+            </>
+          )}
+        </div>
+      </div>
+      <Time
+        time={joblisting.deadline}
+        style={{
+          width: '135px',
+        }}
+        format="ll HH:mm"
+        className={styles.deadLine}
+      />
+    </div>
+  </Link>
+);
+
+export default JoblistingItem;

app/routes/company/CompanyDetailRoute.ts

@@ -61,7 +61,7 @@ const mapStateToProps = (state, props) => {
 };
 
 const mapDispatchToProps = (dispatch, props) => {
-  const { companyId } = props.match.params;
+  const { companyId, loading } = props.match.params;
 
   const fetchMoreEvents = () =>
     dispatch(
@@ -73,6 +73,7 @@ const mapDispatchToProps = (dispatch, props) => {
 
   return {
     fetchMoreEvents,
+    loading,
   };
 };
 

app/routes/company/components/Company.css

@@ -1,81 +1,15 @@
 @import url('~app/styles/variables.css');
 
-.infoBubbles {
-  margin-top: 1em;
+.infoIcon {
+  min-width: 26px;
   display: flex;
-  flex-direction: row;
   justify-content: center;
+  padding-right: 0.2em;
 }
 
-.bubbleContainer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.showAllEventsButton {
-  color: var(--lego-link-color);
-  font-size: var(--font-size-large);
-  margin-left: -9px;
-}
-
-.editLink {
-  margin-top: 0.2em;
-  margin-right: 0.5em;
-}
-
-.inactiveLink {
-  pointer-events: none;
-  cursor: default;
-}
-
-.description {
-  margin: 15px;
-  margin-bottom: 35px;
-  margin-left: 0;
-  padding-top: 6px;
-  padding-left: 20px;
-  border-left: 4px solid var(--border-gray);
-  display: flex;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.coverImage {
-  width: 100%;
-  height: 300px;
-  overflow: hidden;
-}
-
-.companyEventList {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.companyEventTable {
+.sectionHeader {
+  font-size: 20px;
   margin-top: 20px;
-  width: 100%;
-}
-
-.companyEventsShowMore {
-  padding-left: 10px;
-  padding-bottom: 20px;
-}
-
-.companyImage {
-  display: block;
-  margin: auto;
-  background: white;
-}
-
-.image {
-  object-fit: cover;
-  background: var(--color-white);
-  height: 80px;
-  width: 300px;
-
-  @media (--mobile-device) {
-    height: auto;
-    width: 100%;
-  }
+  border-bottom: 1px solid var(--border-gray);
+  margin-bottom: 20px;
 }