Merge branch 'master' into hide-banner

webkom · Sep 15, 2024 · 3d47d94 · 3d47d94
2 parents 6bc81e4 + 236c1c0
commit 3d47d94
Show file tree

Hide file tree

Showing 31 changed files with 378 additions and 189 deletions.
diff --git a/app/components/AddToCalendar/AddToCalendar.css b/app/components/AddToCalendar/AddToCalendar.css
@@ -1,13 +1,8 @@
-.calendarToggleButton {
-  margin-top: var(--spacing-md);
-  margin-bottom: var(--spacing-sm);
-}
-
 .calendarImportCard {
   margin-top: var(--spacing-sm);
 }
 
 .calendarLink {
   display: block;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
 }
diff --git a/app/components/AddToCalendar/AddToCalendar.tsx b/app/components/AddToCalendar/AddToCalendar.tsx
@@ -38,10 +38,7 @@ const AddToCalendarToggle = ({ icalToken, meeting }: Props) => {
 
   return (
     <div>
-      <Button
-        className={styles.calendarToggleButton}
-        onPress={() => setCalendarIsOpen(!calendarIsOpen)}
-      >
+      <Button onPress={() => setCalendarIsOpen(!calendarIsOpen)}>
         <Icon name="calendar-outline" size={19} />
         {!calendarIsOpen ? 'Vis kalenderimport' : 'Skjul kalenderimport'}
       </Button>

diff --git a/app/components/MazemapEmbed/MazemapEmbed.css b/app/components/MazemapEmbed/MazemapEmbed.css
@@ -2,7 +2,7 @@
   z-index: 5;
   font-size: var(--font-size-lg);
   text-align: center;
-  color: #111;
+  color: var(--color-absolute-black);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -11,8 +11,8 @@
 }
 
 .mazemapEmbed {
-  --lego-font-color: var(--color-absolute-black);
-
+  border-radius: var(--border-radius-md);
+  color: var(--color-absolute-black);
   background-color: rgb(
     248,
     244,

diff --git a/app/components/MazemapEmbed/index.tsx b/app/components/MazemapEmbed/index.tsx
@@ -1,3 +1,4 @@
+import { Flex } from '@webkom/lego-bricks';
 import { useEffect, useState } from 'react';
 import 'node_modules/mazemap/mazemap.min.css';
 import styles from './MazemapEmbed.css';
@@ -176,7 +177,7 @@ export const MazemapEmbed = ({ mazemapPoi, ...props }: Props) => {
   }
 
   return (
-    <>
+    <Flex column gap="var(--spacing-xs)">
       <div
         style={{
           height: props.height || 400,
@@ -195,6 +196,6 @@ export const MazemapEmbed = ({ mazemapPoi, ...props }: Props) => {
         )}
       </div>
       <MazemapLink mazemapPoi={mazemapPoi} linkText={props.linkText} />
-    </>
+    </Flex>
   );
 };
diff --git a/app/components/Tooltip/Tooltip.css b/app/components/Tooltip/Tooltip.css
@@ -1,6 +1,5 @@
 :root {
   --tooltip-background: var(--lego-font-color);
-  --shadow-md: 0 12px 20px 6px rgba(104, 112, 118, 8%);
 }
 
 .tooltip {

diff --git a/app/components/Tooltip/index.tsx b/app/components/Tooltip/index.tsx
@@ -7,6 +7,7 @@ type Props = {
   children: ReactNode;
   content: ReactNode;
   className?: string;
+  containerClassName?: string;
   onClick?: () => void;
   positions?: ComponentProps<typeof Popover>['positions'];
   style?: CSSProperties;
@@ -17,6 +18,7 @@ const Tooltip = ({
   children,
   content,
   className,
+  containerClassName,
   onClick,
   positions,
   style,
@@ -35,6 +37,7 @@ const Tooltip = ({
       <Popover
         isOpen={hovered}
         positions={positions}
+        containerClassName={containerClassName}
         content={({ position, childRect, popoverRect }) => (
           <ArrowContainer
             position={position}

diff --git a/app/components/UserAttendance/AttendanceModalContent.css b/app/components/UserAttendance/AttendanceModalContent.css
@@ -1,16 +1,34 @@
-.modal {
-  height: calc(100vh - 100px - 70px);
+@import url('~app/styles/variables.css');
+
+.modalContent {
+  /* 
+   * Kinda hacky solution, but with the current flexibility of modal sizing it's the only way I could think of for now
+   * 
+   * 100vh - 100px          = height of the modal from @lego-bricks/src/components/Modal/Modal.module.css
+   * 2 * var(--spacing-xl)  = the padding of the modal
+   * 2rem                   = the height of the title
+   * var(--spacing-md)      = the margin-bottom of the title
+  */
+  --attendance-modal-content-height: calc(
+    (100vh - 100px) - (2 * var(--spacing-xl)) - (2rem) - var(--spacing-md)
+  );
+
+  height: var(--attendance-modal-content-height);
 
   @media (--tall-viewport) {
-    max-height: calc(100vh - 300px - 70px);
+    height: calc(var(--attendance-modal-content-height) - 100px);
   }
 }
 
+.searchInput {
+  flex-shrink: 0;
+}
+
 .list {
   position: relative;
   width: 100%;
   min-height: 100px;
-  height: 80%;
+  flex-grow: 1;
   overflow-y: auto;
   /* stylelint-disable indentation */
   background:

diff --git a/app/components/UserAttendance/AttendanceModalContent.tsx b/app/components/UserAttendance/AttendanceModalContent.tsx
@@ -81,12 +81,13 @@ const AttendanceModalContent = ({
   );
 
   return (
-    <Flex column gap="var(--spacing-md)" className={styles.modal}>
+    <Flex column gap="var(--spacing-md)" className={styles.modalContent}>
       <TextInput
         type="text"
         prefix="search"
         placeholder="Søk etter navn"
         onChange={(e) => setFilter(e.target.value)}
+        className={styles.searchInput}
       />
 
       <ul className={styles.list}>

diff --git a/app/routes/companyInterest/components/Translations.ts b/app/routes/companyInterest/components/Translations.ts
@@ -175,10 +175,10 @@ export const COLLABORATION_TYPES = {
     norwegian: 'Samarbeid med TIHLDE linjeforening',
     english: 'Event in collaboration with TIHLDE',
   },
-  // collaboration_revue: {
-  //   norwegian: 'Samarbeid med Revyen',
-  //   english: 'Collaboration with the revue',
-  // },
+  collaboration_revue: {
+    norwegian: 'Samarbeid med Revyen',
+    english: 'Collaboration with the revue',
+  },
   // collaboration_anniversary: {
   //   english: "Collaboration with Abakus' anniversary committee*",
   //   norwegian: 'Samarbeid med Abakus sitt Jubileum*',

diff --git a/app/routes/events/components/Calendar.tsx b/app/routes/events/components/Calendar.tsx
@@ -50,6 +50,7 @@ const Calendar = () => {
         const query = {
           date_after: dateAfter.format('YYYY-MM-DD'),
           date_before: dateBefore.format('YYYY-MM-DD'),
+          page_size: 1000,
         };
         return dispatch(
           fetchEvents({

diff --git a/app/routes/events/components/EventAdministrate/AdminRegister.tsx b/app/routes/events/components/EventAdministrate/AdminRegister.tsx
@@ -95,7 +95,7 @@ const AdminRegister = () => {
             />
             <Field
               placeholder="Tilbakemelding"
-              label="Melding til arrangør"
+              label="Kommentar"
               name="feedback"
               component={TextEditor.Field}
             />

diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -506,6 +506,15 @@ const EventDetail = () => {
                 />
               )}
 
+              {event.isPriced && (
+                <TextWithIcon
+                  iconNode={<Coins />}
+                  size={20}
+                  content={event.priceMember / 100 + ',-'}
+                  className={styles.sidebarInfo}
+                />
+              )}
+
               <TextWithIcon
                 iconNode={<MapPin />}
                 size={20}
@@ -514,34 +523,24 @@ const EventDetail = () => {
               />
 
               {event.mazemapPoi && (
-                <Button
-                  className={styles.mapButton}
-                  onPress={() => setMapIsOpen(!mapIsOpen)}
-                >
-                  <img
-                    className={styles.mazemapImg}
-                    alt="MazeMap sin logo"
-                    src={mazemapLogo}
-                  />
-                  {mapIsOpen ? 'Skjul kart' : 'Vis kart'}
-                </Button>
-              )}
-
-              {event.isPriced && (
-                <TextWithIcon
-                  iconNode={<Coins />}
-                  size={20}
-                  content={event.priceMember / 100 + ',-'}
-                  className={styles.sidebarInfo}
-                />
+                <Flex column gap="var(--spacing-xs)">
+                  <Button
+                    className={styles.mapButton}
+                    onPress={() => setMapIsOpen(!mapIsOpen)}
+                  >
+                    <img
+                      className={styles.mazemapImg}
+                      alt="MazeMap sin logo"
+                      src={mazemapLogo}
+                    />
+                    {mapIsOpen ? 'Skjul kart' : 'Vis kart'}
+                  </Button>
+                  {mapIsOpen && <MazemapEmbed mazemapPoi={event.mazemapPoi} />}
+                </Flex>
               )}
             </Flex>
           )}
 
-          {event.mazemapPoi && (
-            <>{mapIsOpen && <MazemapEmbed mazemapPoi={event.mazemapPoi} />}</>
-          )}
-
           {['OPEN', 'TBA'].includes(event.eventStatusType) ? (
             <JoinEventForm event={event} />
           ) : (
@@ -584,9 +583,9 @@ const EventDetail = () => {
               !event.isAdmitted ? (
                 <Card severity="danger">
                   <p>
-                    Du kan ikke melde deg på dette arrangementet fordi du har
-                    ubesvarte spørreundersøkelser. Gå til lenkene under for å
-                    svare:
+                    Du kan ikke melde deg {currentRegistration ? 'av' : 'på'}{' '}
+                    dette arrangementet fordi du har ubesvarte
+                    spørreundersøkelser. Gå til lenkene under for å svare:
                   </p>
                   <ul>
                     {event.unansweredSurveys.map((surveyId, i) => (

diff --git a/app/routes/events/components/EventList.tsx b/app/routes/events/components/EventList.tsx
@@ -199,7 +199,7 @@ const EventList = () => {
         return showSocial;
 
       case 'other':
-      case 'kid_event':
+      case 'nexus_event':
         return showOther;
 
       default:

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -462,7 +462,7 @@ const JoinEventForm = ({
                             {spyValues((values) => (
                               <Field
                                 id={feedbackName}
-                                placeholder="Melding til arrangør"
+                                placeholder="Kommentar"
                                 name={feedbackName}
                                 component={TextInput.Field}
                                 className={styles.feedbackText}
@@ -531,7 +531,7 @@ function getFeedbackName(event: UserDetailedEvent) {
 }
 
 function getFeedbackLabel(event: UserDetailedEvent) {
-  return event.feedbackDescription || 'Melding til arrangør';
+  return event.feedbackDescription || 'Kommentar';
 }
 
 export default withCountdown(JoinEventForm);
diff --git a/app/routes/events/utils.ts b/app/routes/events/utils.ts
@@ -61,10 +61,10 @@ export const EventTypeConfig: Record<EventType, ConfigProperties> = {
     color: '#8A2BE2',
     textColor: '#FFF',
   },
-  [EventType.KiD_EVENT]: {
-    displayName: 'KiD-arrangement',
-    color: 'var(--color-event-black)',
-    textColor: 'var(--color-white)',
+  [EventType.NEXUS_EVENT]: {
+    displayName: 'NEXUS-arrangement',
+    color: '#00509E',
+    textColor: 'var(--color-absolute-white)',
   },
   [EventType.OTHER]: {
     displayName: 'Annet',

diff --git a/app/routes/frontpage/components/CompactEvents.tsx b/app/routes/frontpage/components/CompactEvents.tsx
@@ -73,7 +73,7 @@ const CompactEvents = ({ className, style }: Props) => {
     EventType.ALTERNATIVE_PRESENTATION,
     EventType.COURSE,
     EventType.BREAKFAST_TALK,
-    EventType.KiD_EVENT,
+    EventType.NEXUS_EVENT,
   ]);
   const leftEvents =
     presentations.length > 0 ? presentations : ['Ingen presentasjoner'];

diff --git a/app/routes/interestgroups/components/InterestGroupDetail.tsx b/app/routes/interestgroups/components/InterestGroupDetail.tsx
@@ -134,6 +134,9 @@ const InterestGroupDetail = () => {
   const memberships = useAppSelector((state) =>
     selectMembershipsForGroup(state, { groupId }),
   );
+  const announcementActionGrant = useAppSelector(
+    (state) => state.allowed.announcements,
+  );
 
   const dispatch = useAppDispatch();
 
@@ -187,17 +190,20 @@ const InterestGroupDetail = () => {
             </>
           )}
 
-          {canEdit && (
-            <>
+          {(canEdit || announcementActionGrant) && (
+            <div>
               <h3>Admin</h3>
-              <LinkButton href={`/interest-groups/${group.id}/edit`}>
-                <Icon iconNode={<Pencil />} size={19} />
-                Rediger
-              </LinkButton>
-            </>
+              <ButtonGroup>
+                {canEdit && (
+                  <LinkButton href={`/interest-groups/${group.id}/edit`}>
+                    <Icon iconNode={<Pencil />} size={19} />
+                    Rediger
+                  </LinkButton>
+                )}
+                <AnnouncementInLine group={group} />
+              </ButtonGroup>
+            </div>
           )}
-
-          <AnnouncementInLine group={group} />
         </ContentSidebar>
       </ContentSection>
     </Page>

diff --git a/app/routes/meetings/components/MeetingDetail.css b/app/routes/meetings/components/MeetingDetail.css
@@ -1,9 +1,24 @@
+.changelogTrigger {
+  color: var(--secondary-font-color);
+  font-size: var(--font-size-sm);
+}
+
+.changelogDropdown {
+  z-index: 80;
+}
+
+.changelogTooltipContainer {
+  z-index: 95;
+}
+
+.changelogTooltip {
+  display: inline-flex;
+}
+
 .statusButtons {
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-md);
 }
 
 .meetingReactions {
-  display: flex;
-  flex-direction: row;
   margin: var(--spacing-sm) 0;
 }