Merge pull request #4425 from webkom/ivarnakken/aba-783-standardize-a…

…-success-color
webkom · Feb 2, 2024 · b039423 · b039423
2 parents 56cd6b9 + 5b17d27
commit b039423
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 15 deletions.
diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
@@ -30,7 +30,7 @@ const eventStatusObject = (event: ListEvent): statusIconProps => {
         return {
           status: 'Admitted',
           icon: 'checkmark-circle-outline',
-          color: 'var(--color-green-6)',
+          color: 'var(--success-color)',
           tooltip: 'Du er påmeldt',
         } as statusIconProps;
       }

diff --git a/app/components/Poll/Poll.css b/app/components/Poll/Poll.css
@@ -113,3 +113,7 @@
     pointer-events: none;
   }
 }
+
+.success {
+  color: var(--success-color);
+}
diff --git a/app/components/Poll/index.tsx b/app/components/Poll/index.tsx
@@ -123,9 +123,7 @@ const Poll = ({
             <Icon
               name="checkmark-circle-outline"
               size={20}
-              style={{
-                color: 'var(--color-green-6)',
-              }}
+              className={styles.success}
             />
           </Flex>
         )}

diff --git a/app/components/Upload/UploadImage.css b/app/components/Upload/UploadImage.css
@@ -48,7 +48,7 @@
 }
 
 .dragAccept .placeholderContainer {
-  border: 3px dashed var(--color-green-6);
+  border: 3px dashed var(--success-color);
 }
 
 .dragReject .placeholderContainer {

diff --git a/app/routes/bdb/utils.tsx b/app/routes/bdb/utils.tsx
@@ -25,7 +25,7 @@ export const NonEventContactStatusConfig: Record<
   },
   [NonEventContactStatus.INTERESTED]: {
     displayName: 'Interessert',
-    color: 'var(--color-green-6)',
+    color: 'var(--success-color)',
     textColor: '#000',
   },
   [NonEventContactStatus.NOT_INTERESTED]: {

diff --git a/app/routes/events/components/EventAdministrate/Administrate.css b/app/routes/events/components/EventAdministrate/Administrate.css
@@ -64,7 +64,7 @@
 
 .greenIcon {
   font-size: 1.4em;
-  color: var(--color-green-6);
+  color: var(--success-color);
 
   &:hover {
     color: var(--color-green-7);

diff --git a/app/routes/events/components/Stripe.css b/app/routes/events/components/Stripe.css
@@ -43,7 +43,7 @@
 }
 
 .success {
-  background: var(--color-green-6);
+  background: var(--success-color);
   color: var(--color-absolute-white);
   text-align: center;
   padding: 5px 10px;

diff --git a/app/routes/photos/components/Overview.css b/app/routes/photos/components/Overview.css
@@ -55,7 +55,7 @@
 }
 
 .iconSelected {
-  color: var(--color-green-6);
+  color: var(--success-color);
 }
 
 .createState {

diff --git a/app/routes/polls/components/PollsList.css b/app/routes/polls/components/PollsList.css
@@ -22,3 +22,7 @@
 .heading {
   margin-left: 15px;
 }
+
+.success {
+  color: var(--success-color);
+}
diff --git a/app/routes/polls/components/PollsList.tsx b/app/routes/polls/components/PollsList.tsx
@@ -72,9 +72,7 @@ const PollsList = () => {
                         <Icon
                           name="checkmark-circle-outline"
                           size={20}
-                          style={{
-                            color: 'var(--color-green-6)',
-                          }}
+                          className={styles.success}
                         />
                       </>
                     ) : (

diff --git a/app/routes/users/components/Penalties.css b/app/routes/users/components/Penalties.css
@@ -26,7 +26,7 @@
 }
 
 .success {
-  color: var(--color-green-6);
+  color: var(--success-color);
 }
 
 .successMessage {

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -15,7 +15,9 @@
   --lego-red-color: var(--color-red-5);
   --lego-red-color-hover: var(--color-red-6);
   --lego-link-color: var(--lego-red-color);
+
   --danger-color: var(--color-red-6);
+  --success-color: var(--color-green-6);
 
   --lego-max-width: 1100px;
   --lego-default-padding: 2rem;
@@ -147,6 +149,8 @@
 
   --lego-red-color: var(--color-red-7);
 
+  --success-color: var(--color-green-5);
+
   --color-event-black: #ddd;
   --color-white: #181818;
   --color-black: #fff;

diff --git a/packages/lego-bricks/src/components/Button/Button.module.css b/packages/lego-bricks/src/components/Button/Button.module.css
@@ -21,7 +21,7 @@
 
   --button-success-background: var(--color-green-4);
   --button-success-background-hover: var(--color-green-5);
-  --button-success-background-active: var(--color-green-6);
+  --button-success-background-active: var(--success-color);
   --button-success-box-shadow-focus: #2da44e44;
 }
 

diff --git a/packages/lego-bricks/src/components/Icon/Icon.module.css b/packages/lego-bricks/src/components/Icon/Icon.module.css
@@ -53,7 +53,7 @@
 
 .success {
   composes: clickable;
-  color: var(--color-green-6);
+  color: var(--success-color);
 
   &:hover,
   &:focus-visible {

diff --git a/packages/lego-bricks/src/variables.css b/packages/lego-bricks/src/variables.css
@@ -15,7 +15,9 @@
   --lego-red-color: var(--color-red-5);
   --lego-red-color-hover: var(--color-red-6);
   --lego-link-color: var(--lego-red-color);
+
   --danger-color: var(--color-red-6);
+  --success-color: var(--color-green-6);
 
   --lego-max-width: 1100px;
   --lego-default-padding: 2rem;
@@ -146,6 +148,8 @@
 
   --lego-red-color: var(--color-red-7);
 
+  --success-color: var(--color-green-5);
+
   --color-event-black: #ddd;
   --color-white: #181818;
   --color-black: #fff;