[web] introduce community header button

Summary:
This diff introduces the community header button. This will be used by the two community buttons we will have in the header.

For context here is what the community header should look like:
{F1013632}

Linear task: https://linear.app/comm/issue/ENG-5933/top-bar

Depends on D10496

Test Plan:
Please see the demo video below

{F1013634}

Reviewers: atul, kamil, rohan

Reviewed By: rohan

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10497

web/community-header/community-header-button.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+}
+
+.addButton {
+  background-color: var(--button-background-tertiary-default);
+  color: var(--button-label-tertiary-default);
+  border-radius: 8px;
+  padding: 6px 10px;
+}
+
+.addButton:hover {
+  cursor: pointer;
+  background-color: var(--button-background-tetirary-hover);
+  color: var(--button-label-tertiary-hover);
+}

web/community-header/community-header-button.react.js

@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon, {
+  type Icon,
+} from 'lib/components/SWMansionIcon.react.js';
+
+import css from './community-header-button.css';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
+
+type Props = {
+  +icon: Icon,
+  +label: string,
+  +onClick: () => mixed,
+};
+
+function CommunityHeaderButton(props: Props): React.Node {
+  const { icon, label, onClick } = props;
+
+  const { onMouseEnter, onMouseLeave } = useLabelTooltip({
+    tooltipLabel: label,
+    position: tooltipPositions.BOTTOM,
+    tooltipMargin: 16,
+  });
+
+  return (
+    <div
+      className={css.container}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <SWMansionIcon icon={icon} size={20} className={css.addButton} />
+    </div>
+  );
+}
+
+export default CommunityHeaderButton;

web/theme.css

@@ -272,15 +272,19 @@
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
+  --button-background-tertiary-default: var(--shades-black-85);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
+  --button-background-tetirary-hover: var(--shades-black-75);
   --button-background-primary-disabled: var(--shades-black-75);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-60);
+  --button-label-tertiary-default: var(--shades-white-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
+  --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
@@ -354,15 +358,20 @@
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);
+  /* @GINSU: TODO double check the tertiary values after redesign is finished */
+  --button-background-tertiary-default: var(--shades-black-60);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
+  --button-background-tetirary-hover: var(--shades-black-50);
   --button-background-primary-disabled: var(--shades-white-60);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-90);
+  --button-label-tertiary-default: var(--shades-white-90);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
+  --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);