Fixed icons (#13332)

* Fix deployment icons * Test * Test * Fix icons of contact page
Altinn · Aug 12, 2024 · c5009f7 · c5009f7
1 parent 0dcb16e
commit c5009f7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 47 deletions.
diff --git a/...nd/app-development/features/appPublish/components/DeploymentEnvironmentLogList.module.css b/...nd/app-development/features/appPublish/components/DeploymentEnvironmentLogList.module.css
@@ -62,18 +62,18 @@
   width: var(--icon-size);
 }
 
-.icon-canceled {
+.canceledIcon {
   color: var(--fds-semantic-border-warning-default);
 }
-.icon-failed {
+.failedIcon {
   color: var(--fds-semantic-border-danger-default);
 }
-.icon-none {
+.noneIcon {
   color: var(--fds-semantic-border-info-default);
 }
-.icon-partiallySucceeded {
+.partiallySucceededIcon {
   color: var(--fds-semantic-border-warning-default);
 }
-.icon-succeeded {
+.succeededIcon {
   color: var(--fds-semantic-border-success-default);
 }
diff --git a/frontend/app-development/features/appPublish/components/DeploymentEnvironmentLogList.tsx b/frontend/app-development/features/appPublish/components/DeploymentEnvironmentLogList.tsx
@@ -35,26 +35,15 @@ export const DeploymentEnvironmentLogList = ({
     : `${t('general.test_environment_alt').toLowerCase()} ${envName?.toUpperCase()}`;
 
   const getIcon = (buildResult: BuildResult) => {
+    const classnames = classNames(classes.icon, classes[`${buildResult}Icon`]);
     switch (buildResult) {
       case BuildResult.failed:
-        return (
-          <XMarkOctagonFillIcon
-            className={classNames(classes.icon, classes[`icon-${buildResult}`])}
-          />
-        );
+        return <XMarkOctagonFillIcon className={classnames} />;
       case BuildResult.canceled:
       case BuildResult.partiallySucceeded:
-        return (
-          <ExclamationmarkTriangleFillIcon
-            className={classNames(classes.icon, classes[`icon-${buildResult}`])}
-          />
-        );
+        return <ExclamationmarkTriangleFillIcon className={classnames} />;
       case BuildResult.succeeded:
-        return (
-          <CheckmarkCircleFillIcon
-            className={classNames(classes.icon, classes.icon, classes[`icon-${buildResult}`])}
-          />
-        );
+        return <CheckmarkCircleFillIcon className={classnames} />;
       case BuildResult.none:
       default:
         return (
@@ -68,22 +57,6 @@ export const DeploymentEnvironmentLogList = ({
     }
   };
 
-  const getClassName = (buildResult: BuildResult) => {
-    switch (buildResult) {
-      case BuildResult.canceled:
-        return classes.canceled;
-      case BuildResult.failed:
-        return classes.failed;
-      case BuildResult.partiallySucceeded:
-        return classes.partiallySucceeded;
-      case BuildResult.succeeded:
-        return classes.succeeded;
-      case BuildResult.none:
-      default:
-        return classes.none;
-    }
-  };
-
   return (
     <div className={classes.container}>
       {pipelineDeploymentList.length === 0 ? (
@@ -121,7 +94,7 @@ export const DeploymentEnvironmentLogList = ({
               </Table.Head>
               <Table.Body>
                 {pipelineDeploymentList.map((deploy: PipelineDeployment) => {
-                  const tableCellStatusClassName = getClassName(deploy.build.result);
+                  const tableCellStatusClassName = classes[deploy.build.result];
                   return (
                     <Table.Row key={deploy.build.id} className={tableCellStatusClassName}>
                       <Table.Cell

diff --git a/frontend/studio-root/pages/Contact/Contact.module.css b/frontend/studio-root/pages/Contact/Contact.module.css
@@ -43,12 +43,8 @@
   box-sizing: border-box;
 }
 
-.emailIcon {
-  font-size: 2.5rem;
-}
-
-.githubIcon {
-  padding: 10px;
+.icon {
+  font-size: 2.3rem;
 }
 
 .textContainer {

diff --git a/frontend/studio-root/pages/Contact/Contact.tsx b/frontend/studio-root/pages/Contact/Contact.tsx
@@ -20,7 +20,7 @@ export const Contact = () => {
           </div>
           <section className={classes.section}>
             <div className={classes.iconContainer}>
-              <EnvelopeClosedIcon className={classes.emailIcon} />
+              <EnvelopeClosedIcon className={classes.icon} />
             </div>
             <div className={classes.textContainer}>
               <Heading level={2} size='xsmall' spacing>
@@ -36,7 +36,7 @@ export const Contact = () => {
           </section>
           <section className={classes.section}>
             <div className={classes.iconContainer}>
-              <SlackIcon />
+              <SlackIcon className={classes.icon} />
             </div>
             <div className={classes.textContainer}>
               <Heading level={2} size='xsmall' spacing>
@@ -58,8 +58,8 @@ export const Contact = () => {
             </div>
           </section>
           <section className={classes.section}>
-            <div className={classNames(classes.iconContainer, classes.githubIcon)}>
-              <GitHubIcon />
+            <div className={classNames(classes.iconContainer)}>
+              <GitHubIcon className={classes.icon} />
             </div>
             <div className={classes.textContainer}>
               <Heading level={2} size='xsmall' spacing>