Merge pull request #4408 from webkom/prettier-interestgroups

Improve design of interestgroup page
webkom · Jan 24, 2024 · 00a2861 · 00a2861
2 parents dd7f6af + 8dbf688
commit 00a2861
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 53 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,16 +18,45 @@
   border-radius: 100%;
   filter: grayscale(100%);
   opacity: 0.7;
+  flex-shrink: 0;
 }
 
 .listItem {
-  margin: 8px;
-  padding-left: 4px;
-  background: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--lego-font-color);
+  border-radius: var(--border-radius-lg);
+  padding: 15px 20px;
+  margin: 3px 0 12px;
+  transition: background-color var(--easing-fast);
+
+  &:hover {
+    background-color: rgba(255, 0, 0, var(--color-red-hover-alpha));
+  }
+}
+
+.inactiveListItem:hover {
+  background-color: rgba(123, 123, 123, var(--color-red-hover-alpha));
+}
+
+.listItemName {
+  margin: 0 0 10px;
+  color: var(--lego-font-color);
+}
+
+.inactiveListItem .listItemName {
+  margin: 0;
+  color: var(--color-gray-4);
 }
 
 .listItemContent {
-  padding: 4px;
+  opacity: 0.8;
+}
+
+.inactiveHeader {
+  margin: 30px 0;
 }
 
 .textEdit {

diff --git a/app/routes/interestgroups/components/InterestGroup.tsx b/app/routes/interestgroups/components/InterestGroup.tsx
@@ -1,52 +1,43 @@
 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;
   active: boolean;
 };
 
 const InterestGroupComponent = ({ group, active }: Props) => {
   return (
-    <Flex className={styles.listItem}>
-      <Flex
-        column
-        className={styles.listItemContent}
-        style={{
-          flex: '1',
-        }}
-      >
-        <Link to={`/interest-groups/${group.id}`} className={styles.link}>
-          <h2
-            style={
-              !active
-                ? {
-                    color: 'grey',
-                  }
-                : {}
-            }
-          >
-            {group.name}
-          </h2>
-        </Link>
+    <Link
+      to={`/interest-groups/${group.id}`}
+      className={cx(styles.listItem, !active && styles.inactiveListItem)}
+    >
+      <Flex column>
+        <h2 className={styles.listItemName}>{group.name}</h2>
         {active && (
-          <>
+          <div className={styles.listItemContent}>
             <div>{group.description}</div>
-            <div>{group.numberOfUsers} medlemmer</div>
-          </>
+            <div style={{ marginTop: '10px' }}>
+              {group.numberOfUsers} medlemmer
+            </div>
+          </div>
         )}
       </Flex>
-      <Flex justifyContent="center" column>
-        <Image
-          className={active ? styles.logoMedium : styles.logoSmall}
-          src={group.logo || SAMPLE_LOGO}
-        />
-      </Flex>
-    </Flex>
+      <Image
+        className={active ? styles.logoMedium : styles.logoSmall}
+        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
@@ -1,4 +1,4 @@
-import { Button } from '@webkom/lego-bricks';
+import { Button, Flex } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
@@ -38,32 +38,43 @@ const InterestGroupList = () => {
   return (
     <Content>
       <Helmet title="Interessegrupper" />
-      <div className={styles.section}>
-        <NavigationTab title="Interessegrupper" />
-        <p>
+      <NavigationTab title="Interessegrupper" />
+      <Flex
+        wrap
+        gap={10}
+        margin={'0 0 30px'}
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <p style={{ margin: 0 }}>
           <Link to="/pages/generelt/39-praktisk-informasjon">Her</Link> finner
           du all praktisk informasjon knyttet til våre interessegrupper.
         </p>
         {canCreate && (
-          <Link to="/interest-groups/create" className={styles.link}>
+          <Link to="/interest-groups/create">
             <Button>Lag ny interessegruppe</Button>
           </Link>
         )}
-      </div>
-      <div className="groups">
-        {activeGroups.map((g) => (
-          <InterestGroupComponent group={g} key={g.id} active={true} />
-        ))}
+      </Flex>
+
+      {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
-          <a href="mailTo:interessegrupper@abakus.no"> oss </a> hvis du ønsker å
-          åpne en av disse igjen!
+          Send gjerne e-post til{' '}
+          <a href="mailTo:interessegrupper@abakus.no">
+            interessegrupper@abakus.no
+          </a>{' '}
+          hvis du ønsker å åpne en av disse igjen!
         </p>
-        {notActiveGroups.map((g) => (
-          <InterestGroupComponent group={g} key={g.id} active={false} />
-        ))}
       </div>
+
+      {notActiveGroups.map((group) => (
+        <InterestGroupComponent group={group} key={group.id} active={false} />
+      ))}
     </Content>
   );
 };