webkom · ivarnakken · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023
diff --git a/app/components/Dropdown/index.tsx b/app/components/Dropdown/index.tsx
@@ -66,8 +66,12 @@ const Dropdown = ({
   );
 };
 
-const List = ({ children }: { children: ReactNode }) => (
-  <ul className={styles.dropdownList}>{children}</ul>
+type ListProps = {
+  children: ReactNode;
+} & HTMLAttributes<HTMLUListElement>;
+
+const List = ({ children, className }: ListProps) => (
+  <ul className={cx(className, styles.dropdownList)}>{children}</ul>
 );
 
 const ListItem = (props: HTMLAttributes<HTMLLIElement>) => <li {...props} />;

diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
@@ -78,15 +78,15 @@ const TimeStamp = ({ event }) => {
       <Flex alignItems="center">
         <Icon
           name="calendar-number-outline"
-          size={23}
+          size={20}
           style={{ cursor: 'pointer', marginRight: '10px' }}
         />
         <Time time={event.startTime} format="ll" />
       </Flex>
       <Flex alignItems="center">
         <Icon
           name="time-outline"
-          size={23}
+          size={20}
           style={{ cursor: 'pointer', marginRight: '10px' }}
         />
         <Time time={event.startTime} format="HH:mm" />

diff --git a/app/components/HeaderNotifications/HeaderNotifications.css b/app/components/HeaderNotifications/HeaderNotifications.css
@@ -1,9 +1,6 @@
 @import url('~app/styles/variables.css');
 
 .notifications {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   width: 400px;
 
   @media (--small-viewport) {
@@ -16,32 +13,25 @@
   }
 }
 
+.maxHeight {
+  max-height: 400px;
+}
+
 .notification {
-  border-bottom: 1px solid var(--border-gray);
   padding: 15px 15px 0;
   display: flex;
   flex-direction: row;
   color: var(--lego-font-color);
-  line-height: 1.5;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background-color: var(--additive-background);
-  }
+  line-height: 1.4;
+  cursor: pointer;
 }
 
 .innerNotification {
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding-right: 15px;
   word-break: break-word;
   white-space: pre-line;
-  border-bottom: 1px solid var(--border-gray);
-  padding-bottom: 15px;
 }
 
 .unRead {
@@ -52,3 +42,9 @@
   padding-top: 1px;
   padding-right: 15px;
 }
+
+.updatedAt {
+  display: block;
+  margin: 0;
+  color: var(--secondary-font-color);
+}
diff --git a/app/components/HeaderNotifications/index.tsx b/app/components/HeaderNotifications/index.tsx
@@ -44,10 +44,7 @@ const NotificationElement = ({
               <Time
                 time={notification.updatedAt}
                 wordsAgo
-                style={{
-                  margin: '0',
-                  display: 'block',
-                }}
+                className={styles.updatedAt}
               />
             </div>
           </div>
@@ -69,13 +66,15 @@ export default class NotificationsDropdown extends Component<Props, State> {
   };
   renderNotifications = (notifications: Array<Record<string, any>>) => {
     return (
-      <div>
+      <Dropdown.List className={styles.maxHeight}>
         {notifications.map((notification) => (
-          <ErrorBoundary hidden key={notification.id}>
-            <NotificationElement notification={notification} />
-          </ErrorBoundary>
+          <Dropdown.ListItem key={notification.id}>
+            <ErrorBoundary hidden>
+              <NotificationElement notification={notification} />
+            </ErrorBoundary>
+          </Dropdown.ListItem>
         ))}
-      </div>
+      </Dropdown.List>
     );
   };
 
@@ -108,20 +107,7 @@ export default class NotificationsDropdown extends Component<Props, State> {
       >
         {/* TODO FIXME - do same as the menu element*/}
         {notifications.length ? (
-          <div
-            style={{
-              width: '100%',
-            }}
-          >
-            <div
-              style={{
-                maxHeight: '400px',
-                overflowY: 'auto',
-              }}
-            >
-              {this.renderNotifications(notifications)}
-            </div>
-          </div>
+          <>{this.renderNotifications(notifications)}</>
         ) : (
           <h2
             style={{

diff --git a/app/components/Pill/Pill.css b/app/components/Pill/Pill.css
@@ -6,4 +6,5 @@
   text-align: center;
   font-size: 0.9rem;
   font-weight: 600;
+  color: var(--lego-font-color);
 }
diff --git a/app/components/Table/Table.css b/app/components/Table/Table.css
@@ -44,7 +44,7 @@
 }
 
 .icon {
-  color: var(--color-gray-6);
+  color: var(--color-gray-7);
 }
 
 .iconActive {

diff --git a/app/routes/articles/components/ArticleDetail.css b/app/routes/articles/components/ArticleDetail.css
@@ -4,6 +4,10 @@
   margin-top: 8px;
 }
 
+.detail {
+  color: var(--secondary-font-color);
+}
+
 span.detail + span.detail {
   margin-left: 10px;
 }

diff --git a/app/routes/events/components/EventAdministrate/Administrate.css b/app/routes/events/components/EventAdministrate/Administrate.css
@@ -124,4 +124,9 @@ a.transparent:hover {
   justify-content: center;
   cursor: pointer;
   color: var(--color-red-3);
+  transition: color var(--easing-medium);
+
+  &:hover {
+    color: var(--color-red-5);
+  }
 }
diff --git a/app/routes/events/components/Toolbar.css b/app/routes/events/components/Toolbar.css
@@ -13,13 +13,6 @@
   }
 }
 
-.time {
-  grid-area: time;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
 .create {
   grid-area: create;
   display: flex;

diff --git a/app/routes/events/components/Toolbar.tsx b/app/routes/events/components/Toolbar.tsx
@@ -10,9 +10,7 @@ type Props = {
 
 const Toolbar = ({ actionGrant }: Props) => (
   <div className={styles.root}>
-    <div className={styles.time}>
-      <Time format="ll" className={styles.timeNow} />
-    </div>
+    <Time format="ll" className={styles.timeNow} />
 
     <NavLink
       exact

diff --git a/app/routes/overview/components/CompactEvents.css b/app/routes/overview/components/CompactEvents.css
@@ -8,19 +8,13 @@
   text-align: left;
 }
 
-.compactEvents h3 {
-  margin-bottom: 10px;
-}
-
 .compactLeft {
   padding-right: 20px;
 }
 
 .compactLeft,
 .compactRight {
   flex: 1;
-  padding-top: 5px;
-  padding-bottom: 5px;
 
   @media (--mobile-device) {
     padding: 0 10px 10px;

diff --git a/app/routes/users/components/UserSettingsNotifications.css b/app/routes/users/components/UserSettingsNotifications.css
@@ -10,3 +10,7 @@
 .table td div {
   justify-content: center;
 }
+
+.table tr:nth-child(even) {
+  background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 3%);
+}
diff --git a/app/routes/users/components/UserSettingsOAuth2.css b/app/routes/users/components/UserSettingsOAuth2.css
@@ -7,6 +7,7 @@
 }
 
 .deleteIcon {
+  justify-content: center;
   cursor: pointer;
   color: var(--color-red-3);
   transition: color var(--easing-medium);

diff --git a/app/routes/users/components/UserSettingsOAuth2.tsx b/app/routes/users/components/UserSettingsOAuth2.tsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Button from 'app/components/Button';
 import Icon from 'app/components/Icon';
 import Flex from 'app/components/Layout/Flex';
+import { ConfirmModalWithParent } from 'app/components/Modal/ConfirmModal';
 import Table from 'app/components/Table';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
@@ -14,7 +15,7 @@ import styles from './UserSettingsOAuth2.css';
 type Props = {
   applications: Array<any>;
   grants: Array<any>;
-  deleteOAuth2Grant: (grantId: number) => void;
+  deleteOAuth2Grant: (grantId: number) => Promise<void>;
   actionGrant: Array<string>;
   fetchingApplications: boolean;
   fetchingGrants: boolean;
@@ -90,15 +91,20 @@ const UserSettingsOAuth2 = (props: Props) => {
     {
       dataIndex: 'delete',
       render: (id, grant) => (
-        <Tooltip
-          content="Fjern"
-          onClick={() => props.deleteOAuth2Grant(grant.id)}
-          style={{
-            marginTop: '-7px',
-          }}
+        <ConfirmModalWithParent
+          title="Bekreft handling"
+          message={`Er du sikker på at du vil fjerne token?`}
+          onConfirm={() => props.deleteOAuth2Grant(grant.id)}
+          closeOnCancel
         >
-          <Icon name="trash-outline" size={20} className={styles.deleteIcon} />
-        </Tooltip>
+          <Tooltip content="Fjern" style={{ marginTop: '-7px' }}>
+            <Icon
+              name="trash-outline"
+              size={18}
+              className={styles.deleteIcon}
+            />
+          </Tooltip>
+        </ConfirmModalWithParent>
       ),
     },
   ];

diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -46,6 +46,12 @@ ul {
   list-style: none;
 }
 
+h1 {
+  font-size: 30px;
+  margin: 15px 0;
+}
+
+h1,
 h2,
 h3,
 h4 {
@@ -102,12 +108,6 @@ th:last-child {
   border-radius: 0 2em 2em 0;
 }
 
-h1 {
-  font-size: 30px;
-  font-weight: bold;
-  margin: 15px 0;
-}
-
 label {
   display: block;
 }
diff --git a/app/styles/overlay.css b/app/styles/overlay.css
@@ -45,7 +45,7 @@
 
 .dropdownList {
   border-radius: inherit;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .dropdownList > li > a,