Merge branch 'master' into lending-system

app/actions/CompanyActions.ts

@@ -183,8 +183,8 @@ export function deleteSemesterStatus(
   });
 }
 
-export function fetchCompanyContacts({ companyId }: { companyId: EntityId }) {
-  return callAPI<CompanyContact[]>({
+export function fetchCompanyContacts(companyId: EntityId) {
+  return callAPI<{ results: CompanyContact[] }>({
     types: Company.FETCH_COMPANY_CONTACT,
     endpoint: `/companies/${companyId}/company-contacts/`,
     method: 'GET',

app/components/EmptyState/EmptyState.css

@@ -1,7 +1,12 @@
 .container {
   width: 100%;
+  color: var(--secondary-font-color);
 }
 
 .centered {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
 }

app/components/EmptyState/index.tsx

@@ -4,20 +4,13 @@ import styles from './EmptyState.css';
 import type { ReactNode } from 'react';
 
 type Props = {
-  /** name of icon */
   icon?: string;
-
-  /** html to display in an EmptyState */
   children?: ReactNode;
   size?: number;
   className?: string;
 };
 
-/**
- * A basic EmptyState component
- *
- */
-const EmptyState = ({ icon, size = 88, className, children }: Props) => (
+const EmptyState = ({ icon, size = 45, className, children }: Props) => (
   <div className={cx(styles.container, icon && styles.centered, className)}>
     {icon && <Icon name={icon} size={size} />}
     {children}

app/components/ErrorBoundary/ErrorBoundary.css

@@ -3,6 +3,10 @@
 .container {
   width: 40%;
   margin: 0 auto;
+  line-height: 1.3;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
 
   @media (--mobile-device) {
     width: 60%;

app/components/ErrorBoundary/index.tsx

@@ -92,11 +92,8 @@ class ErrorBoundary extends Component<Props, State> {
         onClick={() => !openReportDialog && this.openDialog()}
         className={styles.container}
       >
-        <Card.Header>
-          <p>En feil har oppstått</p>
-        </Card.Header>
+        <Card.Header>En feil har oppstått</Card.Header>
         <p>Webkom har fått beskjed om feilen</p>
-        <br />
         <p>
           Hvis du har slitt med problemet en liten stund uten at det har blitt
           fikset, send gjerne en påminnelse til{' '}
@@ -107,7 +104,6 @@ class ErrorBoundary extends Component<Props, State> {
           referansen under (som tekst, ikke skjermbilde) er det mye lettere å
           identifisere feilen din
         </p>
-        <br />
         <p>Referanse: {this.state.lastEventId}</p>
       </Card>
     );

app/components/EventItem/index.tsx

@@ -158,7 +158,7 @@ const EventItem = ({
           <Flex className={styles.companyLogoExtraCompact}>
             {event.cover && (
               <Image
-                alt="Event cover image"
+                alt="Forsidebilde"
                 src={event.cover}
                 placeholder={event.coverPlaceholder}
               />
@@ -172,11 +172,9 @@ const EventItem = ({
           style={{ borderColor: colorForEventType(event.eventType) }}
           className={styles.eventItemCompact}
         >
-          <Flex width="100%">
-            <Link to={`/events/${event.slug}`}>
-              <h3 className={styles.eventItemTitle}>{event.title}</h3>
-            </Link>
-          </Flex>
+          <Link to={`/events/${event.slug}`}>
+            <h3 className={styles.eventItemTitle}>{event.title}</h3>
+          </Link>
           <Flex width="100%" justifyContent="space-between">
             <Flex width="72%">
               <Flex className={styles.companyLogoCompact}>
@@ -185,7 +183,7 @@ const EventItem = ({
                     <Image
                       src={event.cover}
                       placeholder={event.coverPlaceholder}
-                      alt={`Event cover image - ${event.title}`}
+                      alt={`Forsidebildet til ${event.title}`}
                     />
                   </Link>
                 )}
@@ -236,7 +234,7 @@ const EventItem = ({
           <Flex className={styles.companyLogo}>
             {event.cover && (
               <Image
-                alt="Event cover"
+                alt="Forsidebilde"
                 src={event.cover}
                 placeholder={event.coverPlaceholder}
               />

app/components/EventItem/styles.css

@@ -5,6 +5,7 @@
   margin-bottom: var(--spacing-md);
   display: flex;
   justify-content: space-between;
+  line-height: 1.3;
 }
 
 .eventItemCompact {
@@ -22,6 +23,7 @@
   color: var(--lego-font-color);
   margin: 0;
   word-break: break-word;
+  margin-bottom: var(--spacing-sm);
 }
 
 .eventTime {

app/components/EventListCompact/index.tsx

@@ -42,9 +42,7 @@ const EventListCompact = ({
   }
 
   if (!events.length) {
-    return (
-      <EmptyState className="secondaryFontColor">{noEventsMessage}</EmptyState>
-    );
+    return <EmptyState>{noEventsMessage}</EmptyState>;
   }
 
   return (

app/components/Feed/activity.css

@@ -1,9 +1,8 @@
 .header {
   display: flex;
   align-items: center;
-  padding: 10px 20px;
-  border-bottom: 1px solid
-    rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 9%);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--border-gray);
   word-break: break-word;
   white-space: pre-line;
 }
@@ -13,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
-  padding: 10px 20px;
+  padding: var(--spacing-sm) var(--spacing-md);
 }
 
 .activityHeaderItem {

app/components/Feed/index.tsx

@@ -3,7 +3,6 @@ import ErrorBoundary from 'app/components/ErrorBoundary';
 import { selectFeedActivitiesByFeedId } from 'app/reducers/feeds';
 import { useAppSelector } from 'app/store/hooks';
 import { FeedActivityVerb } from 'app/store/models/FeedActivity';
-import styles from './Feed.css';
 import Activity from './activity';
 import AdminRegistrationRenderer from './renders/adminRegistration';
 import AnnouncementRenderer from './renders/announcement';
@@ -58,8 +57,8 @@ const Feed = ({ feedId }: Props): ReactNode => {
           ) : null;
         })
       ) : (
-        <EmptyState>
-          <h2 className={styles.emptyState}>Ingen aktiviteter i feeden</h2>
+        <EmptyState icon="sad-outline">
+          Ingen aktiviteter i feeden ...
         </EmptyState>
       )}
     </div>

app/components/Footer/index.tsx

@@ -130,7 +130,7 @@ const Footer = () => {
           <Image
             className={styles.cooperator}
             src={netcompany}
-            alt="netcompany"
+            alt="Netcompany sin logo"
           />
           <Link to="/pages/personvern/114-informasjonskapsler">
             Informasjonskapsler (cookies)

app/components/Form/CheckBox.css

@@ -19,6 +19,7 @@
 
 .label {
   user-select: none;
+  line-height: 1.3;
 
   &:not:disabled {
     cursor: pointer;

app/components/Form/CheckBox.tsx

@@ -38,7 +38,7 @@ const CheckBox = ({
   };
 
   return (
-    <Flex wrap alignItems="center" gap={7}>
+    <Flex wrap alignItems="center" gap="var(--spacing-sm)">
       <div className={cx(styles.checkbox, styles.bounce, className)}>
         <input
           {...props}

app/components/Form/Field.css

@@ -25,12 +25,12 @@
   border-radius: var(--border-radius-md);
 }
 
-.label {
-  font-size: var(--font-size-lg);
+.labelContent {
+  line-height: 1.8;
 }
 
 .description {
-  margin-left: 7px;
+  margin-left: var(--spacing-sm);
 }
 
 .required {

app/components/Form/Field.tsx

@@ -81,10 +81,10 @@ export function createField<T, ExtraProps extends object>(
         {label && (
           <div
             style={{
-              cursor: inlineLabel ? 'pointer' : 'default',
+              cursor: inlineLabel && !props.disabled ? 'pointer' : 'default',
               fontSize: !inlineLabel ? 'var(--font-size-lg)' : 'inherit',
             }}
-            className={labelContentClassName}
+            className={cx(labelContentClassName, styles.labelContent)}
           >
             {label}
           </div>
@@ -114,7 +114,7 @@ export function createField<T, ExtraProps extends object>(
     );
 
     const content = inlineLabel ? (
-      <Flex gap={7}>
+      <Flex gap="var(--spacing-sm)">
         {component}
         {labelComponent}
       </Flex>

app/components/Form/MultiSelectGroup.css

@@ -7,10 +7,6 @@
   font-size: var(--font-size-lg);
 }
 
-.radioField {
-  margin-bottom: 10px;
-}
-
 .radioLabel {
   display: flex;
   flex-direction: row;

app/components/Form/RadioButton.css

@@ -17,6 +17,7 @@
 
 .label {
   user-select: none;
+  line-height: 1.3;
 
   &:not:disabled {
     cursor: pointer;

app/components/Form/RadioButton.tsx

@@ -29,7 +29,7 @@ function RadioButton({
   };
 
   return (
-    <Flex wrap alignItems="center" gap={7}>
+    <Flex wrap alignItems="center" gap="var(--spacing-sm)">
       <div className={cx(styles.radioButton, styles.bounce, className)}>
         <input
           {...props}

app/components/Form/SelectInput.tsx

@@ -66,7 +66,7 @@ export const selectTheme: ThemeConfig = (theme) => ({
     neutral20: 'var(--border-gray)', // Border color
     neutral30: 'var(--border-gray)', // Hover border color
     neutral40: 'var(--secondary-font-color)', //  Text color in dropdown ("No options" and "Loading...")
-    neutral50: 'var(--color-gray-5)', // Placholder color,
+    neutral50: 'var(--placeholder-color)', // Placholder color,
     neutral60: 'var(--color-gray-4)', // Focused arrow color
     // neutral70: // Unknown
     neutral80: 'var(--lego-font-color)', // Font color and hover arrow color

app/components/Form/TextEditor.css

@@ -7,7 +7,7 @@
   outline: none;
 
   &::placeholder {
-    color: var(--color-gray-5);
+    color: var(--placeholder-color);
   }
 
   &:focus::placeholder {

app/components/Form/TextInput.css

@@ -18,12 +18,12 @@
 }
 
 .prefix {
-  color: var(--color-gray-5);
+  color: var(--placeholder-color);
 }
 
 .prefix,
 .spacing:not(.centered) input {
-  padding-left: 10px;
+  padding-left: var(--spacing-sm);
 }
 
 /* stylelint-disable no-descending-specificity */
@@ -40,7 +40,7 @@
   }
 
   &::placeholder {
-    color: var(--color-gray-5);
+    color: var(--placeholder-color);
   }
 
   &:focus::placeholder {
@@ -64,8 +64,8 @@ span.suffix {
   width: fit-content;
   height: inherit;
   margin-left: auto;
-  padding: 0 10px;
-  color: var(--color-gray-5);
+  padding: 0 var(--spacing-sm);
+  color: var(--placeholder-color);
   text-align: center;
   background-color: var(--additive-background);
   position: relative;
@@ -81,3 +81,7 @@ span.suffix {
 .phoneNumberInput {
   padding: var(--spacing-sm);
 }
+
+.togglePasswordVisibility {
+  padding-right: var(--spacing-sm);
+}