Merge pull request #4077 from webkom/success-card

webkom · Aug 7, 2023 · 251fb7d · 251fb7d
2 parents 8c59360 + fe54453
commit 251fb7d
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 53 deletions.
diff --git a/app/components/Card/Card.css b/app/components/Card/Card.css
@@ -4,6 +4,12 @@
   border-radius: var(--border-radius-lg);
 }
 
+.header {
+  font-weight: 600;
+  font-size: var(--font-size-lg);
+  line-height: 1.3;
+}
+
 .shadow {
   box-shadow: var(--shadow-sm);
 }
@@ -60,11 +66,25 @@ html[data-theme='dark'] .danger a:hover {
 }
 
 .infoIcon {
-  color: var(--color-blue-8);
+  color: var(--color-blue-7);
 }
 
-.header {
-  font-weight: 600;
-  font-size: var(--font-size-lg);
-  line-height: 1.3;
+.success {
+  margin: 20px 0;
+  background-color: var(--color-green-2);
+  border: 1.5px solid var(--color-green-7);
+  color: var(--color-green-7);
+}
+
+.success a {
+  color: var(--color-green-8);
+  text-decoration: underline;
+
+  &:hover {
+    color: var(--color-green-7);
+  }
+}
+
+.successIcon {
+  color: var(--color-green-7);
 }
diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx
@@ -4,6 +4,8 @@ import Flex from 'app/components/Layout/Flex';
 import styles from './Card.css';
 import type { HTMLAttributes, ReactNode } from 'react';
 
+type Severity = 'danger' | 'info' | 'success';
+
 type CardHeaderProps = {
   children: ReactNode;
   className?: string;
@@ -14,25 +16,33 @@ const CardHeader = ({ children, className }: CardHeaderProps) => (
 );
 
 type CardContentProps = {
+  severity?: Severity;
   children: ReactNode;
-  danger?: boolean;
-  info?: boolean;
 };
 
-const CardContent = ({ children, danger, info }: CardContentProps) => {
+const CardContent = ({ children, severity }: CardContentProps) => {
   let icon;
-  if (danger) {
-    icon = <Icon name="alert-circle-outline" className={styles.warningIcon} />;
-  }
 
-  if (info) {
-    icon = (
-      <Icon name="information-circle-outline" className={styles.infoIcon} />
-    );
+  switch (severity) {
+    case 'danger':
+      icon = (
+        <Icon name="alert-circle-outline" className={styles.warningIcon} />
+      );
+      break;
+    case 'info':
+      icon = (
+        <Icon name="information-circle-outline" className={styles.infoIcon} />
+      );
+      break;
+    case 'success':
+      icon = (
+        <Icon name="checkmark-circle-outline" className={styles.successIcon} />
+      );
+      break;
   }
 
   return icon !== undefined ? (
-    <Flex gap={20} className={styles.cardWithSeverity}>
+    <Flex gap={20}>
       {icon}
       <Flex column>{children}</Flex>
     </Flex>
@@ -46,8 +56,7 @@ type Props = {
   shadow?: boolean;
   hideOverflow?: boolean;
   isHoverable?: boolean;
-  danger?: boolean;
-  info?: boolean;
+  severity?: Severity;
 } & HTMLAttributes<HTMLDivElement>;
 
 function Card({
@@ -56,8 +65,7 @@ function Card({
   shadow = true,
   hideOverflow = false,
   isHoverable = false,
-  danger = false,
-  info = false,
+  severity,
   ...htmlAttributes
 }: Props) {
   return (
@@ -67,17 +75,14 @@ function Card({
         styles.card,
         shadow && styles.shadow,
         isHoverable && styles.isHoverable,
-        danger && styles.danger,
-        info && styles.info
+        severity && styles[severity]
       )}
       style={{
         overflow: hideOverflow ? 'hidden' : 'initial',
       }}
       {...htmlAttributes}
     >
-      <CardContent danger={danger} info={info}>
-        {children}
-      </CardContent>
+      <CardContent severity={severity}>{children}</CardContent>
     </div>
   );
 }

diff --git a/app/components/PhotoUploadStatus/PhotoUploadStatus.css b/app/components/PhotoUploadStatus/PhotoUploadStatus.css
@@ -13,6 +13,6 @@
   cursor: pointer;
 }
 
-.successMessage {
-  color: var(--color-green-6);
+.header {
+  width: 80%;
 }
diff --git a/app/components/PhotoUploadStatus/index.tsx b/app/components/PhotoUploadStatus/index.tsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { connect } from 'react-redux';
 import { Gallery } from 'app/actions/ActionTypes';
 import Card from 'app/components/Card';
@@ -31,29 +30,37 @@ const UploadStatusCard = ({
   hideUploadStatus,
 }: Props) => {
   if (!uploadStatus.showStatus) return null;
+
   const uploadDone =
     uploadStatus.successCount + uploadStatus.failCount ===
     uploadStatus.imageCount;
   const hasFailedUploads = uploadStatus.failCount !== 0;
-  const word = uploadStatus.successCount === 1 ? 'bilde' : 'bilder';
+
   return (
-    <Card className={styles.photoUploadStatus}>
+    <Card
+      severity={!uploadDone ? 'info' : hasFailedUploads ? 'danger' : 'success'}
+      className={styles.photoUploadStatus}
+    >
       <Icon className={styles.close} onClick={hideUploadStatus} name="close" />
+
       {uploadDone ? (
-        <Fragment>
-          <h3 className={styles.successMessage}>
-            {uploadStatus.successCount} {word} ble lastet opp{' '}
-          </h3>
-        </Fragment>
+        <Card.Header className={styles.header}>
+          {uploadStatus.successCount > 1 ? uploadStatus.successCount : 'Ingen'}{' '}
+          {hasFailedUploads ? `av ${uploadStatus.imageCount}` : ''}{' '}
+          {uploadStatus.successCount === 1 ? 'bilde' : 'bilder'} ble lastet opp
+        </Card.Header>
       ) : (
-        <Fragment>
-          <h3>Laster opp bilder ...</h3>
+        <>
+          <Card.Header>
+            Laster opp {uploadStatus.imageCount > 1 ? 'bildene' : 'bildet'} ...
+          </Card.Header>
           <p>
             <b>Status</b>: {uploadStatus.successCount} av{' '}
             {uploadStatus.imageCount}
           </p>
-        </Fragment>
+        </>
       )}
+
       {hasFailedUploads && (
         <Tooltip
           content={
@@ -70,13 +77,13 @@ const UploadStatusCard = ({
             </Flex>
           }
         >
-          <b>Antall feil</b>: {uploadStatus.failCount}
+          {uploadStatus.failCount} feil
         </Tooltip>
       )}
 
       {lastImage && (
         <Image
-          alt="Last"
+          alt="Siste bilde"
           style={{
             width: 250,
             height: 100,

diff --git a/app/routes/announcements/components/AnnouncementsCreate.tsx b/app/routes/announcements/components/AnnouncementsCreate.tsx
@@ -115,7 +115,7 @@ let AnnouncementsCreate = ({
                 Opprett og send
               </Button>
 
-              <Card info>
+              <Card severity="info">
                 Du kan velge å sende kunngjøringen med en gang, eller lagre den
                 og sende den senere fra listen nedenfor.
               </Card>

diff --git a/app/routes/bdb/components/BdbDetail.tsx b/app/routes/bdb/components/BdbDetail.tsx
@@ -414,7 +414,7 @@ export default class BdbDetail extends Component<Props, State> {
               marginBottom: '10px',
             }}
           >
-            <Card info>
+            <Card severity="info">
               <Card.Header>Tips</Card.Header>
               Du kan endre semestere ved å trykke på dem i listen!
             </Card>

diff --git a/app/routes/bdb/components/BdbPage.tsx b/app/routes/bdb/components/BdbPage.tsx
@@ -214,7 +214,7 @@ export default class BdbPage extends Component<Props, State> {
           filters={this.state.filters}
         />
 
-        <Card info>
+        <Card severity="info">
           <Card.Header>Tips</Card.Header>
           Du kan endre semestere ved å trykke på dem i listen!
         </Card>

diff --git a/app/routes/companyInterest/components/CompanyInterestPage.tsx b/app/routes/companyInterest/components/CompanyInterestPage.tsx
@@ -647,7 +647,7 @@ const CompanyInterestPage = (props: Props) => {
                 </Link>
               )}
             </FlexRow>
-            <Card info>
+            <Card severity="info">
               {labels.subHeading[language]}
               <a href={'mailto:bedriftskontakt@abakus.no'}>
                 bedriftskontakt@abakus.no

diff --git a/app/routes/contact/components/ContactForm.tsx b/app/routes/contact/components/ContactForm.tsx
@@ -62,7 +62,7 @@ const ContactForm = (props: Props) => {
         Hovedstyret, enten du har spørsmål, tilbakemeldinger, eller bare ønsker
         å dele informasjon med oss.
       </p>
-      <Card info>
+      <Card severity="info">
         <p>
           Dersom du ønsker å varsle om kritikkverdige forhold, vennligst benytt
           vår{' '}

diff --git a/app/routes/events/components/EventAttendeeStatistics.tsx b/app/routes/events/components/EventAttendeeStatistics.tsx
@@ -370,7 +370,7 @@ const EventAttendeeStatistics = ({
   return (
     <>
       {isEventFromPreviousSemester(eventStartTime) && (
-        <Card danger>
+        <Card severity="danger">
           <span>
             Dette arrangementet er fra et tidligere semester, og kan derfor ha
             feil fordeling av klassetrinn og gruppetilhørighet. Dette er fordi

diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -505,7 +505,7 @@ export default class EventDetail extends Component<Props, State> {
                 {'unansweredSurveys' in event &&
                 event.unansweredSurveys?.length > 0 &&
                 !event.isAdmitted ? (
-                  <Card danger>
+                  <Card severity="danger">
                     <p>
                       Du kan ikke melde deg på dette arrangementet fordi du har
                       ubesvarte spørreundersøkelser. Gå til lenkene under for å

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -359,7 +359,7 @@ const JoinEventForm = (props: Props) => {
               <div>Du kan ikke melde deg på dette arrangementet.</div>
             )}
             {sumPenalties(penalties) > 0 && event.heedPenalties && (
-              <Card danger>
+              <Card severity="danger">
                 <Card.Header>NB!</Card.Header>
                 <p>
                   {sumPenalties(penalties) > 2
@@ -377,7 +377,7 @@ const JoinEventForm = (props: Props) => {
             {!disabledForUser &&
               event.useContactTracing &&
               !currentUser.phoneNumber && (
-                <Card danger>
+                <Card severity="danger">
                   <Card.Header>NB!</Card.Header>
                   <p>
                     Du må legge til telefonnummer for å melde deg på dette

diff --git a/app/routes/events/components/StripeElement.tsx b/app/routes/events/components/StripeElement.tsx
@@ -10,6 +10,7 @@ import {
 import { loadStripe } from '@stripe/stripe-js';
 import { Component, useState, useEffect, useCallback } from 'react';
 import Button from 'app/components/Button';
+import Card from 'app/components/Card';
 import LoadingIndicator from 'app/components/LoadingIndicator';
 import config from 'app/config';
 import type { EventRegistrationPaymentStatus, Event } from 'app/models';
@@ -348,13 +349,13 @@ class PaymentForm extends Component<FormProps, FormState> {
   render() {
     const { success, error, loading } = this.state;
     return success ? (
-      <div className={stripeStyles.success}>
+      <Card severity="success">
         {`Din betaling på ${
           this.props.event.price
             ? (this.props.event.price / 100).toFixed(2).replace('.', ',')
             : ''
         } kr ble godkjent.`}
-      </div>
+      </Card>
     ) : (
       <>
         {loading && <LoadingIndicator loading />}

diff --git a/app/routes/photos/components/GalleryEditor.tsx b/app/routes/photos/components/GalleryEditor.tsx
@@ -285,7 +285,9 @@ class GalleryEditor extends Component<Props, State> {
         />
         <Flex>
           {isNew ? (
-            <Card info>For å legge inn bilder må du først lage albumet!</Card>
+            <Card severity="info">
+              For å legge inn bilder må du først lage albumet!
+            </Card>
           ) : (
             <GalleryComponent
               photos={pictures}

diff --git a/app/routes/surveys/components/SurveyEditor/SurveyEditor.tsx b/app/routes/surveys/components/SurveyEditor/SurveyEditor.tsx
@@ -338,7 +338,7 @@ const SurveyEditor = ({
         )}
       </TypedLegoForm>
 
-      <Card info>
+      <Card severity="info">
         <span>
           Deltagerene på arrangementet vil få e-post med link til
           spørreundersøkelsen når den aktiveres (