fix: change colors of today and free keywords in event details (#301)

* fix: change colors of today and free keywords in event details

* fix: add color as variable

Author: PekkaKela

apps/events-helsinki/src/domain/event/eventKeywords/EventKeywords.tsx

@@ -69,13 +69,15 @@ const EventKeywords: React.FC<Props> = ({
         <KeywordTag
           whiteOnly={whiteOnly}
           featured={!whiteOnly}
+          isFreeEvent
           keyword={t('categories.labelFree')}
           onClick={withActions ? handleClick('isFree') : undefined}
         />
       )}
       {today && (
         <KeywordTag
           whiteOnly={whiteOnly}
+          isToday
           keyword={t('categories.labelToday')}
           onClick={
             withActions ? handleClick('dateType', DATE_TYPES.TODAY) : undefined

apps/events-helsinki/src/styles/globals.scss

@@ -41,6 +41,7 @@ main {
   --color-input: var(--color-success);
   --color-input-dark: var(--color-success-dark);
   --color-input-selected-text: var(--color-white);
+  --color-keyword-free-event: #afe4de;
 
   /*hcrc styles*/
   --hcrc-color-link-show-all: var(--color-success-dark);

apps/hobbies-helsinki/src/domain/event/eventKeywords/EventKeywords.tsx

@@ -69,13 +69,15 @@ const EventKeywords: React.FC<Props> = ({
         <KeywordTag
           whiteOnly={whiteOnly}
           featured={!whiteOnly}
+          isFreeEvent
           keyword={t('categories.labelFree')}
           onClick={withActions ? handleClick('isFree') : undefined}
         />
       )}
       {today && (
         <KeywordTag
           whiteOnly={whiteOnly}
+          isToday
           keyword={t('categories.labelToday')}
           onClick={
             withActions ? handleClick('dateType', DATE_TYPES.TODAY) : undefined

apps/hobbies-helsinki/src/styles/globals.scss

@@ -27,6 +27,7 @@ main {
   --color-input: var(--color-fog);
   --color-input-dark: var(--color-coat-of-arms-dark);
   --color-input-selected-text: var(--color-black-90);
+  --color-keyword-free-event: #afe4de;
 
   /*hcrc styles*/
   --hcrc-color-link-show-all: var(--color-coat-of-arms-dark);

apps/sports-helsinki/src/domain/event/eventKeywords/EventKeywords.tsx

@@ -69,13 +69,15 @@ const EventKeywords: React.FC<Props> = ({
         <KeywordTag
           whiteOnly={whiteOnly}
           featured={!whiteOnly}
+          isFreeEvent
           keyword={t('categories.labelFree')}
           onClick={withActions ? handleClick('isFree') : undefined}
         />
       )}
       {today && (
         <KeywordTag
           whiteOnly={whiteOnly}
+          isToday
           keyword={t('categories.labelToday')}
           onClick={
             withActions ? handleClick('dateType', DATE_TYPES.TODAY) : undefined

apps/sports-helsinki/src/domain/venue/venueKeywords/VenueKeywords.tsx

@@ -92,6 +92,7 @@ const VenueKeywords: React.FC<Props> = ({
         <KeywordTag
           whiteOnly={whiteOnly}
           featured={!whiteOnly}
+          isFreeEvent
           keyword={t('categories.labelFree')}
           /* Disable onClick as per LIIKUNTA-411 comment */
           /* onClick={handleClick('isFree')} */

apps/sports-helsinki/src/styles/globals.scss

@@ -40,6 +40,7 @@ main {
   --color-input: var(--color-success);
   --color-input-dark: var(--color-success-dark);
   --color-input-selected-text: var(--color-white);
+  --color-keyword-free-event: #afe4de;
 
   /*hcrc styles*/
   --hcrc-color-link-show-all: var(--color-success-dark);

packages/components/src/components/keyword/KeywordTag.tsx

@@ -10,6 +10,8 @@ interface Props {
   whiteOnly?: boolean;
   featured?: boolean;
   transparent?: boolean;
+  isToday?: boolean;
+  isFreeEvent?: boolean;
   hideOnMobile?: boolean;
   keyword: string;
   onClick?: () => void;
@@ -21,6 +23,8 @@ const KeywordTag: FunctionComponent<Props> = ({
   whiteOnly,
   hideOnMobile,
   transparent,
+  isToday,
+  isFreeEvent,
   keyword,
   className,
   onClick,
@@ -44,6 +48,8 @@ const KeywordTag: FunctionComponent<Props> = ({
         blackOnMobile && styles.blackOnMobile,
         hideOnMobile && styles.hideOnMobile,
         transparent && styles.transparent,
+        isToday && styles.isToday,
+        isFreeEvent && styles.isFreeEvent,
         className
       )}
       onClick={handleClick}

packages/components/src/components/keyword/keyword.module.scss

@@ -20,4 +20,12 @@
       color: var(--color-white);
     }
   }
+
+  &.isToday {
+    background-color: var(--color-summer-medium-light);
+  }
+
+  &.isFreeEvent {
+    background-color: var(--color-keyword-free-event);
+  }
 }