feat(arcgis): auth UI

src/app.tsx

@@ -19,6 +19,8 @@ import {
   color_brand_secondary_dark,
   color_accent_primary,
   color_accent_tertiary,
+  color_brand_tertiary,
+  dim_brand_tertinary
 } from "./constants/colors";
 import * as Pages from "./pages";
 import { AppThemes, ComparisonMode, Theme } from "./types";
@@ -75,6 +77,16 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary_dark,
       validateTileWarning: color_accent_tertiary,
       filtrationImage: color_brand_quaternary,
+
+      actionIconButtonDisabledColor: color_canvas_primary,
+      actionIconButtonDisabledBG: dim_canvas_primary,
+      actionIconButtonTextDisabledColor: dim_canvas_primary,
+      actionIconButtonTextDisabledColorHover: dim_brand_tertinary,
+
+      logoutButtonTextColor: dim_canvas_primary,
+      logoutButtonIconColorHover: dim_brand_tertinary,
+
+      esriImageColor: color_canvas_secondary_inverted,
     },
     name: Theme.Dark,
   },
@@ -106,6 +118,16 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary,
       validateTileWarning: color_accent_primary,
       filtrationImage: color_canvas_secondary,
+
+      actionIconButtonDisabledColor: color_canvas_secondary,
+      actionIconButtonDisabledBG: `${color_brand_tertiary}66`,
+      actionIconButtonTextDisabledColor: `${color_brand_tertiary}66`,
+      actionIconButtonTextDisabledColorHover: color_brand_tertiary,
+
+      logoutButtonTextColor: color_brand_quaternary,
+      logoutButtonIconColorHover: color_brand_tertiary,
+
+      esriImageColor: `${color_brand_tertiary}66`,
     },
     name: Theme.Light,
   },

src/components/plus-button/plus-button.spec.tsx → src/components/action-icon-button/action-icon-button.spec.tsx

@@ -2,14 +2,17 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ButtonSize } from "../../types";
 import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
-import { PlusButton } from "./plus-button";
+import PlusIcon from "../../../public/icons/plus.svg";
+import { ActionIconButton } from "../action-icon-button/action-icon-button";
 
 const onClickMock = jest.fn();
 
 const callRender = (renderFunc, props = {}) => {
   return renderFunc(
-    <PlusButton
-      buttonSize={ButtonSize.Small}
+    <ActionIconButton
+      Icon={PlusIcon}
+      style='disabled'
+      size={ButtonSize.Small}
       onClick={onClickMock}
       {...props} />
   );
@@ -20,23 +23,21 @@ describe("Plus Button", () => {
     const { container } = callRender(renderWithTheme, { children: 'Test Button' });
     expect(container).toBeInTheDocument();
     const button = screen.getByText('Test Button');
-    const buttonHeight = getComputedStyle(button.previousSibling as Element).getPropertyValue(
-      "height"
-    );
+    const buttonHeight = getComputedStyle(button.previousSibling as Element).getPropertyValue("height");
     expect(buttonHeight).toEqual('24px');
+
     userEvent.click(button);
     expect(onClickMock).toHaveBeenCalled();
   });
 
   it("Should render Big Plus button", () => {
-    const { container } = callRender(renderWithTheme, { children: 'Test Button', buttonSize: ButtonSize.Big });
+    const { container } = callRender(renderWithTheme, { children: 'Test Button', size: ButtonSize.Big });
     expect(container).toBeInTheDocument();
     const button = screen.getByText('Test Button');
-    const buttonHeight = getComputedStyle(button.previousSibling as Element).getPropertyValue(
-      "height"
-    );
+    const buttonHeight = getComputedStyle(button.previousSibling as Element).getPropertyValue("height");
     expect(buttonHeight).toEqual('40px');
     userEvent.click(button);
     expect(onClickMock).toHaveBeenCalled();
   });
+
 });

src/components/action-icon-button/action-icon-button.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import styled, { StyledComponent, DefaultTheme, useTheme } from "styled-components";
+import { ButtonSize } from "../../types";
+
+import {
+  color_brand_tertiary,
+} from "../../constants/colors";
+
+const Button = styled.div<{ grayed?: boolean }>`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+
+  &:hover {
+    > :first-child {
+      background: ${color_brand_tertiary}33;
+
+      > * {
+        fill: ${color_brand_tertiary};
+      }
+    }
+
+    > :nth-child(2) {
+      color: ${({ theme, grayed }) => (
+    grayed
+      ? theme.colors.actionIconButtonTextDisabledColorHover
+      : color_brand_tertiary
+  )};
+    }
+  }
+`;
+
+const ButtonText = styled.div<{ grayed?: boolean }>`
+  margin-left: 16px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: ${({ theme, grayed }) => (
+    grayed
+      ? theme.colors.actionIconButtonTextDisabledColor
+      : color_brand_tertiary
+  )};
+  `;
+
+const IconContainer = styled.div<{ buttonSize: number, grayed?: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  width: ${(props) => (props.buttonSize === ButtonSize.Big ? "40px" : "24px")};
+  height: ${(props) => (props.buttonSize === ButtonSize.Big ? "40px" : "24px")};
+
+  background: ${({ theme, grayed }) => (
+    grayed
+      ? theme.colors.actionIconButtonDisabledBG
+      : `${color_brand_tertiary}66`
+  )};
+  `;
+
+type ActionIconButtonProps = {
+  children?: React.ReactNode;
+  Icon: StyledComponent<any, DefaultTheme, object, string | number | symbol>;
+  size: ButtonSize;
+  style?: "active" | "disabled";
+  onClick?: () => void;
+};
+
+export const ActionIconButton = ({ Icon, style, size, children, onClick }: ActionIconButtonProps) => {
+  const grayed = style === "disabled";
+  const theme = useTheme();
+
+  return (
+    <Button onClick={onClick} grayed={grayed}>
+      <IconContainer buttonSize={size} grayed={grayed}>
+        <Icon fill={
+          grayed
+            ? theme.colors.actionIconButtonDisabledColor
+            : color_brand_tertiary
+        } />
+      </IconContainer>
+      <ButtonText grayed={grayed}>{children}</ButtonText>
+    </Button>
+  );
+};

src/components/arcgis-user/arcgis-user.spec.tsx

@@ -0,0 +1,30 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
+import { AcrGisUser } from "./arcgis-user";
+
+const onClickMock = jest.fn();
+
+const callRender = (renderFunc, props) => {
+  return renderFunc(
+    <AcrGisUser
+      onClick={onClickMock}
+      {...props} />
+  );
+};
+
+describe("AcrGisUser", () => {
+  it("Should render Logout button", () => {
+    const { container } = callRender(renderWithTheme, { children: 'Test Button' });
+    expect(container).toBeInTheDocument();
+    const button = screen.getByText('Test Button');
+    const buttonIcon = button.nextSibling as Element;
+    const buttonHeight = getComputedStyle(buttonIcon).getPropertyValue(
+      "height"
+    );
+    expect(buttonHeight).toEqual('17px');
+    userEvent.click(buttonIcon);
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+});