Fix alt image, mobile view and lint

webkom · Jan 23, 2024 · 8dbf688 · 8dbf688
1 parent 4926772
commit 8dbf688
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/app/routes/interestgroups/components/InterestGroup.css b/app/routes/interestgroups/components/InterestGroup.css
@@ -9,6 +9,7 @@
   max-height: 100px;
   max-width: 100px;
   border-radius: 100%;
+  flex-shrink: 0;
 }
 
 .logoSmall {
@@ -17,6 +18,7 @@
   border-radius: 100%;
   filter: grayscale(100%);
   opacity: 0.7;
+  flex-shrink: 0;
 }
 
 .listItem {
@@ -26,7 +28,7 @@
   gap: 10px;
   color: var(--lego-font-color);
   border-radius: var(--border-radius-lg);
-  padding: 15px 20px 15px;
+  padding: 15px 20px;
   margin: 3px 0 12px;
   transition: background-color var(--easing-fast);
 
@@ -40,7 +42,6 @@
 }
 
 .listItemName {
-  font-weight: 600;
   margin: 0 0 10px;
   color: var(--lego-font-color);
 }

diff --git a/app/routes/interestgroups/components/InterestGroup.tsx b/app/routes/interestgroups/components/InterestGroup.tsx
@@ -1,11 +1,10 @@
 import { Flex } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
+import ABAKUS_ICON from 'app/assets/icon-192x192.png';
 import { Image } from 'app/components/Image';
 import styles from './InterestGroup.css';
 import type { Group } from 'app/models';
-// TODO: rather handle this in the backend
-const SAMPLE_LOGO = 'https://i.imgur.com/Is9VKjb.jpg';
 
 type Props = {
   group: Group;
@@ -31,7 +30,11 @@ const InterestGroupComponent = ({ group, active }: Props) => {
       </Flex>
       <Image
         className={active ? styles.logoMedium : styles.logoSmall}
-        src={group.logo || SAMPLE_LOGO}
+        src={group.logo || ABAKUS_ICON}
+        onError={({ currentTarget }) => {
+          currentTarget.src = ABAKUS_ICON;
+          currentTarget.onerror = null;
+        }}
         alt={active ? `${group.name} logo` : 'logo'}
       />
     </Link>

diff --git a/app/routes/interestgroups/components/InterestGroupList.tsx b/app/routes/interestgroups/components/InterestGroupList.tsx
@@ -57,24 +57,23 @@ const InterestGroupList = () => {
         )}
       </Flex>
 
-      {activeGroups.map((g) => (
-        <InterestGroupComponent group={g} key={g.id} active={true} />
+      {activeGroups.map((group) => (
+        <InterestGroupComponent group={group} key={group.id} active={true} />
       ))}
 
       <div className={styles.inactiveHeader}>
         <h2>Ikke-aktive interessegrupper</h2>
         <p>
-          Send gjerne e-post til
+          Send gjerne e-post til{' '}
           <a href="mailTo:interessegrupper@abakus.no">
-            {' '}
-            interessegrupper@abakus.no{' '}
+            interessegrupper@abakus.no
           </a>{' '}
           hvis du ønsker å åpne en av disse igjen!
         </p>
       </div>
 
-      {notActiveGroups.map((g) => (
-        <InterestGroupComponent group={g} key={g.id} active={false} />
+      {notActiveGroups.map((group) => (
+        <InterestGroupComponent group={group} key={group.id} active={false} />
       ))}
     </Content>
   );