webkom · ivarnakken · Mar 20, 2023 · Mar 19, 2023 · ivarnakken · Mar 19, 2023
diff --git a/app/components/CommentForm/CommentForm.css b/app/components/CommentForm/CommentForm.css
@@ -58,7 +58,7 @@
   font-size: 18px;
   margin-left: 25px;
   font-weight: 500;
-  color: #ba1414;
+  color: var(--lego-red-color);
 }
 
 .activeFields {

diff --git a/app/components/Content/ContentSidebar.css b/app/components/Content/ContentSidebar.css
@@ -6,6 +6,7 @@
   padding-top: 0;
   border-left: 1px solid var(--border-gray);
   margin-left: 3em;
+  line-height: 1.3;
 
   @media (--small-viewport) {
     border-left: none;

diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
@@ -31,21 +31,21 @@ const eventStatusObject = (event: Event): statusIconProps => {
         return {
           status: 'Admitted',
           icon: 'checkmark-circle-outline',
-          color: '#1ec91e',
+          color: 'var(--color-green-6)',
           tooltip: 'Du er påmeldt',
         } as statusIconProps;
       }
       return {
         status: 'Waitlist',
         icon: 'timer-outline',
-        color: '#fc9003',
+        color: 'var(--color-orange-6)',
         tooltip: 'Du er på ventelisten',
       } as statusIconProps;
     default:
       return {
         status: 'Error',
         icon: 'help-outline',
-        color: 'blue',
+        color: 'var(--danger-color)',
         tooltip: 'Det har oppstått en feil',
       } as statusIconProps;
   }
@@ -133,7 +133,11 @@ const EventItem = ({
             <Link to={`/events/${event.id}`}>
               <h4 className={styles.eventItemTitle}>{event.title}</h4>
             </Link>
-            <Time time={event.startTime} format="ll - HH:mm" />
+            <Time
+              time={event.startTime}
+              format="ll - HH:mm"
+              className={styles.time}
+            />
           </div>
           <Flex className={styles.companyLogoExtraCompact}>
             {event.cover && (

diff --git a/app/components/EventItem/styles.css b/app/components/EventItem/styles.css
@@ -12,6 +12,10 @@
   justify-content: space-between;
 }
 
+.time {
+  color: var(--secondary-font-color);
+}
+
 .eventItemTitle {
   color: var(--lego-font-color);
   margin: 0;

diff --git a/app/components/Feed/activity.css b/app/components/Feed/activity.css
@@ -1,7 +1,6 @@
 .header {
   display: flex;
   align-items: center;
-  flex-direction: row;
   padding: 10px 20px;
   border-bottom: 1px solid
     rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 9%);
@@ -35,3 +34,7 @@
   padding: 10px 20px;
   border-top: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 9%);
 }
+
+.time {
+  color: var(--secondary-font-color);
+}
diff --git a/app/components/Feed/renders/announcement.tsx b/app/components/Feed/renders/announcement.tsx
@@ -15,16 +15,18 @@ export function activityHeader(
   const actor = lookupContext(aggregatedActivity, latestActivity.actor);
   const object = lookupContext(aggregatedActivity, latestActivity.object);
   return (
-    <b>
-      {object.fromGroup ? (
-        <span className={styles.highlight}>{object.fromGroup.name}</span>
-      ) : (
-        htmlTag(contextRender[actor.contentType](actor))
-      )}
-      {' sendte ut en kunngjøring:'}
+    <span>
+      <b>
+        {object.fromGroup ? (
+          <span className={styles.highlight}>{object.fromGroup.name}</span>
+        ) : (
+          htmlTag(contextRender[actor.contentType](actor))
+        )}
+        {' sendte ut en kunngjøring:'}
+      </b>
       <br />
       {htmlTag(contextRender[object.contentType](object))}
-    </b>
+    </span>
   );
 }
 export function activityContent() {

diff --git a/app/components/Form/Field.css b/app/components/Form/Field.css
@@ -16,7 +16,7 @@
 }
 
 .fieldError {
-  height: 35px;
+  min-height: 35px;
   padding: 5px 10px;
   margin-top: 3px;
   background: var(--danger-color);
@@ -26,7 +26,7 @@
 }
 
 .fieldWarning {
-  height: 35px;
+  min-height: 35px;
   padding: 5px 10px;
   margin-top: 3px;
   background: var(--color-orange-6);

diff --git a/app/components/Form/RadioButton.css b/app/components/Form/RadioButton.css
@@ -47,7 +47,7 @@
   width: 16px;
   height: 16px;
   border-radius: 8px;
-  background: #d13c32;
+  background: var(--lego-red-color);
   transition: all var(--linear-medium);
 }
 

diff --git a/app/components/GroupForm/index.tsx b/app/components/GroupForm/index.tsx
@@ -86,7 +86,7 @@ function GroupForm({
         required
       />
       <Button success={!isNew} disabled={invalid || submitting} submit>
-        {isNew ? 'Lag gruppe' : 'Lagre gruppe'}
+        {isNew ? 'Lag gruppe' : 'Lagre endringer'}
       </Button>
     </Form>
   );

diff --git a/app/components/GroupMember/GroupMember.css b/app/components/GroupMember/GroupMember.css
@@ -7,7 +7,7 @@
 }
 
 .member.leader img {
-  border-color: #cca84c;
+  border-color: var(--color-orange-6);
 }
 
 .member.coLeader img {

diff --git a/app/components/InfoBubble/InfoBubble.css b/app/components/InfoBubble/InfoBubble.css
@@ -14,7 +14,7 @@
   order: 0;
   width: 70px;
   height: 70px;
-  background-color: #d13c32;
+  background-color: var(--lego-red-color);
   border-radius: 50%;
 }
 
@@ -60,8 +60,8 @@
   order: 0;
   width: 56px;
   height: 56px;
+  background-color: var(--lego-red-color);
   border-radius: 50%;
-  background-color: #d13c32;
 }
 
 .smallIcon {

diff --git a/app/components/LoadingIndicator/LoadingIndicator.css b/app/components/LoadingIndicator/LoadingIndicator.css
@@ -17,7 +17,7 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: #e20d13;
+  background-color: var(--color-red-5);
   opacity: 0.6;
   position: absolute;
   top: 0;

diff --git a/app/components/PhotoUploadStatus/PhotoUploadStatus.css b/app/components/PhotoUploadStatus/PhotoUploadStatus.css
@@ -14,5 +14,5 @@
 }
 
 .successMessage {
-  color: var(--color-green-8);
+  color: var(--color-green-6);
 }
diff --git a/app/components/Poll/index.tsx b/app/components/Poll/index.tsx
@@ -150,7 +150,7 @@ class Poll extends Component<Props, State> {
               size={20}
               style={{
                 marginLeft: '10px',
-                color: 'green',
+                color: 'var(--color-green-6)',
               }}
             />
           </div>

diff --git a/app/components/Reactions/ReactionPickerFooter.css b/app/components/Reactions/ReactionPickerFooter.css
@@ -8,4 +8,5 @@
   padding: 15px;
   background-color: var(--lego-card-color);
   border-top: 1px solid var(--border-gray);
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
 }
diff --git a/app/components/SpecialDay/AprilFools/LoadingBox.css b/app/components/SpecialDay/AprilFools/LoadingBox.css
@@ -97,7 +97,7 @@
 .dot {
   height: 10px;
   width: 10px;
-  background-color: #e20d13;
+  background-color: var(--lego-red-color);
   border-radius: 50%;
   display: inline-block;
   margin-right: 6px;

diff --git a/app/components/UserAttendance/AttendanceStatus.css b/app/components/UserAttendance/AttendanceStatus.css
@@ -11,11 +11,10 @@
 }
 
 .poolBox {
-  display: flex;
-  flex: 1;
-  max-width: 100%;
+  flex-grow: 1;
   min-width: 25%;
   flex-direction: column;
   align-items: center;
+  padding: 7px 0;
   background-color: var(--additive-background);
 }
diff --git a/app/components/UserAttendance/AttendanceStatus.tsx b/app/components/UserAttendance/AttendanceStatus.tsx
@@ -1,4 +1,5 @@
 import Button from 'app/components/Button';
+import Flex from 'app/components/Layout/Flex';
 import styles from './AttendanceStatus.css';
 import withModal from './withModal';
 import type { Pool } from './AttendanceModal';
@@ -22,13 +23,11 @@ const AttendanceElement = ({
   const totalCount = registrations ? registrations.length : registrationCount;
 
   const Status = () => (
-    <strong>
-      <p>{`${totalCount}/${capacity ? capacity : '∞'}`}</p>
-    </strong>
+    <strong>{`${totalCount}/${capacity ? capacity : '∞'}`}</strong>
   );
 
   return (
-    <div className={styles.poolBox}>
+    <Flex className={styles.poolBox}>
       <strong>{name}</strong>
       {registrations ? (
         <Button flat onClick={() => toggleModal(index)}>
@@ -37,7 +36,7 @@ const AttendanceElement = ({
       ) : (
         <Status />
       )}
-    </div>
+    </Flex>
   );
 };
 

diff --git a/app/components/UserValidator/Validator.css b/app/components/UserValidator/Validator.css
@@ -39,7 +39,7 @@
 
 .overlay i {
   font-size: 10em;
-  color: green;
+  color: var(--color-green-6);
 }
 
 .shown {

diff --git a/app/routes/admin/groups/components/GroupPage.css b/app/routes/admin/groups/components/GroupPage.css
@@ -18,25 +18,3 @@
   flex-direction: column;
   flex: 1;
 }
-
-.header {
-  text-align: center;
-  border-bottom: 2px solid var(--lego-link-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 25px;
-  padding-bottom: 10px;
-
-  > h2 {
-    line-height: 1;
-    margin: 0 10px;
-  }
-
-  > span {
-    line-height: 1;
-    margin: 0 10px;
-    font-size: 15px;
-    color: #808080;
-  }
-}
diff --git a/app/routes/bdb/components/SemesterStatusContent.tsx b/app/routes/bdb/components/SemesterStatusContent.tsx
@@ -57,7 +57,7 @@ export default class SemesterStatusContent extends Component<Props, State> {
                   <Icon
                     name="checkmark"
                     style={{
-                      color: 'green',
+                      color: 'var(--color-green-6)',
                       marginRight: '5px',
                       position: 'relative',
                       top: '5px',

diff --git a/app/routes/bdb/components/bdb.css b/app/routes/bdb/components/bdb.css
@@ -178,7 +178,7 @@
 }
 
 .deleteIcon {
-  color: #d13c32;
+  color: var(--danger-color);
 
   &:hover {
     cursor: pointer;

diff --git a/app/routes/companyInterest/components/CompanyInterest.css b/app/routes/companyInterest/components/CompanyInterest.css
@@ -41,10 +41,6 @@
   display: block;
 }
 
-.link {
-  margin-top: 10px;
-}
-
 .textEditor {
   @media (--small-viewport) {
     width: 300px;
@@ -75,11 +71,7 @@
 }
 
 .section {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   margin: 30px auto;
-  align-items: flex-end;
 
   @media (--small-viewport) {
     flex-flow: column wrap;

diff --git a/app/routes/companyInterest/components/CompanyInterestList.tsx b/app/routes/companyInterest/components/CompanyInterestList.tsx
@@ -155,7 +155,12 @@ class CompanyInterestList extends Component<Props, State> {
     return (
       <Content>
         <ListNavigation title="Bedriftsinteresser" />
-        <Flex className={styles.section}>
+        <Flex
+          wrap
+          justifyContent="space-between"
+          alignItems="flex-end"
+          className={styles.section}
+        >
           <Flex column>
             <p>
               Her finner du all praktisk informasjon knyttet til
@@ -171,15 +176,14 @@ class CompanyInterestList extends Component<Props, State> {
               styles={selectStyles}
             />
           </Flex>
-          <Link to="/companyInterest/semesters" className={styles.link}>
+          <Link to="/companyInterest/semesters">
             <Button>Endre aktive semestre</Button>
           </Link>
-          <Link to="/companyInterest/create" className={styles.link}>
+          <Link to="/companyInterest/create">
             <Button>Opprett ny bedriftsinteresse</Button>
           </Link>
         </Flex>
         <Table
-          infiniteScroll
           columns={columns}
           onLoad={(filters, sort) => {
             this.props.fetch({

diff --git a/app/routes/companyInterest/components/CompanyInterestPage.tsx b/app/routes/companyInterest/components/CompanyInterestPage.tsx
@@ -187,18 +187,18 @@ export const COMPANY_TYPES: Record<
   { norwegian: string; english: string }
 > = {
   company_types_small_consultant: {
-    norwegian: 'Liten Konsulentbedrift ( < ∼50)',
-    english: 'Small Consultant ( < ∼50)',
+    norwegian: 'Liten konsulentbedrift ( < ~50)',
+    english: 'Small consultant company ( < ~50)',
   },
   company_types_medium_consultant: {
-    norwegian: 'Medium Konsulentbedrift ( < 400)',
-    english: 'Medium Consultant ( < 400)',
+    norwegian: 'Medium konsulentbedrift ( < 400)',
+    english: 'Medium consultant company ( < 400)',
   },
   company_types_large_consultant: {
-    norwegian: 'Stor Konsulentbedrift ( > 400)',
-    english: 'Large Consultant ( > 400)',
+    norwegian: 'Stor konsulentbedrift ( > 400)',
+    english: 'Large consultant company ( > 400)',
   },
-  company_types_inhouse: { norwegian: 'Inhouse', english: 'Inhouse' },
+  company_types_inhouse: { norwegian: 'In-house', english: 'In-house' },
   company_types_others: { norwegian: 'Annet', english: 'Other' },
   company_types_start_up: { norwegian: 'Start-up', english: 'Start-up' },
   company_types_governmental: { norwegian: 'Statlig', english: 'Governmental' },