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,
   },
@@ -160,3 +182,4 @@ export const App = () => {
     </>
   );
 };
+

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,93 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { ButtonSize } from "../../types";
+import { StyledComponent, DefaultTheme } from "styled-components";
+
+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 }>`
+  position: relative;
+  margin-left: 16px;
+  color: ${({ theme, grayed }) => (
+    grayed
+      ? theme.colors.actionIconButtonTextDisabledColor
+      : color_brand_tertiary
+  )};
+  `;
+
+const IconContainer = styled.div<{ buttonSize: number, grayed?: boolean }>`
+  display: flex;
+  position: relative;
+  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`
+  )};
+
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+  `;
+
+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 = useMemo(() => style === "disabled", [style]);
+
+  const StyledIcon = styled(Icon) <{ grayed?: boolean }>`
+    position: absolute;
+    fill: ${({ theme, grayed }) => (
+      grayed
+        ? theme.colors.actionIconButtonDisabledColor
+        : color_brand_tertiary
+    )};
+    `;
+
+  return (
+    <Button onClick={onClick} grayed={grayed}>
+      <IconContainer buttonSize={size} grayed={grayed}>
+        <StyledIcon grayed={grayed} />
+      </IconContainer>
+      <ButtonText grayed={grayed}>{children}</ButtonText>
+    </Button>
+  );
+};
+