client: add tag button and action button

client/src/components/ActionButton/ActionButton.scss

@@ -0,0 +1,30 @@
+@import '@/variables';
+
+.action-button {
+  cursor: pointer;
+
+  &--green {
+    border-color: $navbar-selected-color;
+    color: $navbar-selected-color;
+    background-color: transparent;
+    border-radius: 5px;
+
+    &:hover {
+      color: $secondary;
+      background-color: $navbar-selected-color;
+    }
+  }
+
+  &--red {
+    border-color: $cancel-color;
+    color: $cancel-color;
+    background-color: transparent;
+    border-radius: 5px;
+
+    &:hover {
+        color: $secondary;
+        background-color: $cancel-color;
+    }
+  }
+
+}

client/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,27 @@
+import './ActionButton.scss';
+
+export enum ActionButtonColor {
+  GREEN,
+  RED,
+}
+
+export interface ActionButtonProps {
+  onClick: () => void;
+  description: string;
+  color: ActionButtonColor;
+}
+
+const actionButtonColorToClass = {
+    [ActionButtonColor.GREEN]: 'action-button--green',
+    [ActionButtonColor.RED]: 'action-button--red',
+};
+
+const ActionButton = ({ onClick, description, color }: ActionButtonProps) => {
+  return (
+    <button onClick={onClick} className={actionButtonColorToClass[color]}>
+      {description}
+    </button>
+  );
+};
+
+export default ActionButton;

client/src/components/SVGIcon/SVGIcon.scss

@@ -25,3 +25,14 @@
   @extend .svg-icon;
   mask: url('/src/assets/settings_icon.svg') no-repeat center;
 }
+
+.drop-down-icon {
+  @extend .svg-icon;
+  mask: url('/src/assets/drop-down-icon.svg') no-repeat center;
+}
+
+.reverse-drop-down-icon {
+  @extend .svg-icon;
+  transform: rotate(180deg);
+  mask: url('/src/assets/drop-down-icon.svg') no-repeat center;
+}

client/src/components/TagButton/TagButton.scss

@@ -0,0 +1,65 @@
+@import '@/variables';
+
+.tag-button {
+  position: relative;
+  width: 8rem;
+  margin: 0;
+  padding: 0;
+
+  &__toggle {
+    cursor: pointer;
+    border: 2px solid $navbar-selected-color;
+    background-color: transparent;
+    color: $navbar-selected-color;
+    border-radius: 5px;
+    width: 8rem;
+    align-items: center;
+    justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+
+    .svg-icon {
+      background-color: $navbar-selected-color;
+      justify-content: flex-end;
+    }
+
+    &__description {
+      text-align: center;
+      width: 6rem;
+    }
+
+    &:hover {
+      color: $secondary;
+      background-color: $navbar-selected-color;
+
+      .svg-icon {
+        background-color: $secondary;
+      }
+    }
+  }
+
+  &__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    border: 2px solid $navbar-selected-color;
+    background-color: transparent;
+    color: $navbar-selected-color;
+    width: 100%;
+    border-radius: 5px;
+
+    &__element {
+      padding: 0.7rem 1.5rem;
+      cursor: pointer;
+      border-radius: 5px;
+
+      &:hover {
+        color: $secondary;
+        background-color: $navbar-selected-color;
+      }
+    }
+  }
+}

client/src/components/TagButton/TagButton.tsx

@@ -0,0 +1,42 @@
+import { useReducer, useState } from 'react';
+import './TagButton.scss';
+import SVGIcon from 'components/SVGIcon/SVGIcon';
+
+export interface TagButtonProps {
+  listItems: Array<string>;
+  chosenItem: string;
+}
+
+const TagButton = ({ listItems, chosenItem = listItems[0] }: TagButtonProps) => {
+  const [isOpen, toggle] = useReducer((isOpenToChange) => !isOpenToChange, false);
+  const [selectedOption, setSelectedOption] = useState(chosenItem);
+
+  const handleOptionClick = (item: string) => {
+    setSelectedOption(item);
+    toggle();
+  };
+
+  return (
+    <div className="tag-button">
+      <div className="tag-button__toggle" onClick={toggle}>
+        <div className='tag-button__toggle__description'>{selectedOption}</div>
+        <SVGIcon iconName={isOpen ? 'reverse-drop-down-icon' : 'drop-down-icon'}/>
+      </div>
+      {isOpen && (
+        <ul className="tag-button__menu">
+          {listItems.map((item, index) => (
+            <li
+              key={index}
+              className="tag-button__menu__element"
+              onClick={() => handleOptionClick(item)}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default TagButton;

client/src/variables.scss

@@ -3,7 +3,7 @@ $primary-accent: #dbfff1;
 $secondary: #0c1926;
 $tertiary: #ffffff2a;
 $quaternary: #fff4;
-$red: #f91515;
+$red: #f91515; 
 $red-light: #fb272755;
 $accent-light: #ff6161;
 $md: 768px;
@@ -19,3 +19,5 @@ $background: #07111b;
 $component-background: #0c1926;
 $component-secondary-background: #122131;
 $component-border-color: #484a49;
+
+$cancel-color: #EC584B;