From c96758ea89a9f0bbc69713e23587ec4215512c51 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Wed, 6 Apr 2022 08:00:15 -0400
Subject: [PATCH 1/6] Use iTwinUI-react components to get consistent styling.

---
 .../src/ui/widget/AttachLayerPopupButton.tsx  |  4 +-
 .../src/ui/widget/BasemapPanel.scss           | 27 ++----
 .../map-layers/src/ui/widget/BasemapPanel.tsx |  8 +-
 .../src/ui/widget/MapLayerDroppable.tsx       |  5 +-
 .../src/ui/widget/MapLayerManager.scss        | 93 ++++++-------------
 .../src/ui/widget/MapLayerSettingsMenu.tsx    |  4 +-
 .../widget/MapLayerSettingsPopupButton.scss   |  5 +-
 .../ui/widget/MapLayerSettingsPopupButton.tsx |  5 +-
 .../src/ui/widget/SubLayersPopupButton.tsx    |  5 +-
 .../ui/widget/TransparencyPopupButton.scss    | 23 ++---
 .../src/ui/widget/TransparencyPopupButton.tsx |  6 +-
 11 files changed, 71 insertions(+), 114 deletions(-)

diff --git a/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx b/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
index 7962c9e0dc36..83c495b299c8 100644
--- a/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
@@ -436,10 +436,10 @@ export function AttachLayerPopupButton(props: AttachLayerPopupButtonProps) {
 
     if (props.buttonType === undefined || props.buttonType === AttachLayerButtonType.Icon) {
       button = (
-        <button ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
+        <Button styleType="borderless" ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
           onClick={togglePopup}>
           <UiCore.WebFontIcon iconName="icon-add" />
-        </button>
+        </Button>
       );
     } else {
       const determineStyleType = () => {
diff --git a/extensions/map-layers/src/ui/widget/BasemapPanel.scss b/extensions/map-layers/src/ui/widget/BasemapPanel.scss
index d9bd61212e81..fd183d772fd8 100644
--- a/extensions/map-layers/src/ui/widget/BasemapPanel.scss
+++ b/extensions/map-layers/src/ui/widget/BasemapPanel.scss
@@ -5,7 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/index";
 
 $divider-color: $buic-background-toolbutton-stroke;
-$hovered-icon-color: $buic-foreground-primary-tone;
+$hovered-icon-color: $buic-foreground-primary;
 
 .map-manager-basemap {
   display: flex;
@@ -24,17 +24,6 @@ $hovered-icon-color: $buic-foreground-primary-tone;
     width: 100%;
     margin-top: 5px;
 
-    .map-transparency-popup-button {
-      background-color: transparent;
-      margin-left: 5px;
-      width: 40px;
-      border: none;
-      color: $buic-foreground-body;
-
-      &:hover {
-        color: $hovered-icon-color;
-      }
-    }
   }
 
   .map-manager-base-label {
@@ -51,13 +40,16 @@ $hovered-icon-color: $buic-foreground-primary-tone;
       overflow: hidden;
     }
 
-    button.map-manager-base-item-visibility {
-      border: none;
-      margin-right: 4px;
-      background-color: transparent;
-      color: $buic-foreground-body;
 
+    .map-manager-base-item-select {
+      width: 100%;  // makes the Select control fill empty space on the right
+    }
+
+    .map-manager-base-item-visibility {
+      border: none;
+      height: 25px;
       &:hover {
+        background-color: transparent;
         color: $hovered-icon-color;
       }
     }
@@ -69,6 +61,7 @@ $hovered-icon-color: $buic-foreground-primary-tone;
       color: $buic-foreground-body;
 
       &:hover {
+        background-color: transparent;
         color: $hovered-icon-color;
       }
     }
diff --git a/extensions/map-layers/src/ui/widget/BasemapPanel.tsx b/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
index cf5d4bc024c2..d5abdff21919 100644
--- a/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
+++ b/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
@@ -10,7 +10,7 @@ import { BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings, Map
 import { DisplayStyleState } from "@itwin/core-frontend";
 import { WebFontIcon } from "@itwin/core-react";
 import { ColorPickerDialog, ColorSwatch } from "@itwin/imodel-components-react";
-import { Select, SelectOption } from "@itwin/itwinui-react";
+import { Button, Select, SelectOption } from "@itwin/itwinui-react";
 import * as React from "react";
 import { MapLayersUI } from "../../mapLayers";
 import "./BasemapPanel.scss";
@@ -152,11 +152,11 @@ export function BasemapPanel() {
   return (
     <>
       <div className="map-manager-base-item" >
-        <button className="map-manager-item-visibility" title={toggleVisibility} onClick={handleVisibilityChange}>
+        <Button styleType="borderless" className="map-manager-base-item-visibility" title={toggleVisibility} onClick={handleVisibilityChange}>
           <WebFontIcon iconName={baseMapVisible ? "icon-visibility" : "icon-visibility-hide-2"} />
-        </button>
+        </Button>
         <span className="map-manager-base-label">{baseLayerLabel}</span>
-        <Select options={baseMapOptions} placeholder={selectBaseMapLabel} value={selectedBaseMapValue.value} onChange={handleBaseMapSelection} size="small" />
+        <Select className="map-manager-base-item-select" options={baseMapOptions} placeholder={selectBaseMapLabel} value={selectedBaseMapValue.value} onChange={handleBaseMapSelection} size="small" />
         {
           baseIsColor &&
           <ColorSwatch className="map-manager-base-item-color" colorDef={ColorDef.fromJSON(bgColor)} round={false} onColorPick={handleBgColorClick} />
diff --git a/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx b/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
index d413c137b405..963dabe800a8 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
+++ b/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
@@ -54,8 +54,9 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
       <div className="map-manager-source-item" data-id={rubric.source.index} key={activeLayer.name}
         {...dragProvided.draggableProps}
         ref={dragProvided.innerRef} >
-        <button className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
-          <Icon iconSpec={activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2"} /></button>
+        <Button styleType="borderless" className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
+          <Icon iconSpec={activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2"} />
+        </Button>
         <span className="map-manager-item-label" {...dragProvided.dragHandleProps}>{activeLayer.name}</span>
         <div className="map-manager-item-sub-layer-container">
           {activeLayer.subLayers && activeLayer.subLayers.length > 1 &&
diff --git a/extensions/map-layers/src/ui/widget/MapLayerManager.scss b/extensions/map-layers/src/ui/widget/MapLayerManager.scss
index 6e830d19194f..1e352065f702 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerManager.scss
+++ b/extensions/map-layers/src/ui/widget/MapLayerManager.scss
@@ -6,24 +6,8 @@
 @import "~@itwin/itwinui-css/scss/style/typography";
 
 $divider-color: $buic-background-toolbutton-stroke;
-$hovered-icon-color: $buic-foreground-primary-tone;
-
-button.map-manager-item-visibility {
-  background-color: transparent;
-  border: none;
-  color: $buic-foreground-body;
-  background-color: transparent;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: $uicore-button-focus-boxshadow;
-  }
-}
-
+$hovered-icon-color: $buic-foreground-primary;
+$default-icon-height: 20px;
 .map-manager-layer-host {
   margin: 0 6px;
   height: 100%;
@@ -66,9 +50,8 @@ button.map-manager-item-visibility {
     padding-right: 5px;
   }
 
-  .map-manager-toggle {
-    height: 24px;
-  }
+  // .map-manager-toggle {
+  // }
 }
 
 .map-manager-container {
@@ -98,21 +81,14 @@ button.map-manager-item-visibility {
     padding-left: 10px;
 
     .map-manager-attach-layer-button {
-      background-color: transparent;
       margin-left: auto;
       width: 40px;
-      border: none;
-      color: $buic-foreground-body;
+      height: $default-icon-height;
       margin-right: 2px;
-
       &:hover {
+        background-color: transparent;
         color: $hovered-icon-color;
       }
-
-      &:focus {
-        box-shadow: $uicore-button-focus-boxshadow;
-        outline: none;
-      }
     }
   }
 
@@ -308,20 +284,15 @@ button.map-manager-item-visibility {
     margin-right: 6px;
   }
 
-  button.map-manager-item-visibility {
+  .map-manager-item-visibility {
     border: none;
     margin: 0 2px;
-    background-color: $buic-background-1;
-    color: $buic-foreground-body;
-
+    height: $default-icon-height;
     &:hover {
+      background-color: transparent;
       color: $hovered-icon-color;
     }
 
-    &:focus {
-      outline: none;
-      box-shadow: $uicore-button-focus-boxshadow;
-    }
   }
 
   button.map-manager-item-requireAuth {
@@ -339,39 +310,33 @@ button.map-manager-item-visibility {
       box-shadow: $uicore-button-focus-boxshadow;
     }
   }
-}
-
-.map-layer-settings {
-  border: none;
-  background-color: $buic-background-1;
-  color: $buic-foreground-body;
-  margin-left: 2px;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
+  .map-layer-settings {
+    border: none;
+    background-color: transparent;
+    color: $buic-foreground-body;
+    height: $default-icon-height;
+    margin-left: 2px;
 
-  &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
-    outline: none;
+    &:hover {
+      background-color: transparent;
+      color: $hovered-icon-color;
+    }
   }
-}
 
-.map-manager-item-sub-layer-button {
-  border: none;
-  background-color: $buic-background-1;
-  color: $buic-foreground-body;
-
-  &:hover {
-    color: $hovered-icon-color;
-  }
+  .map-manager-item-sub-layer-button {
+    border: none;
+    height: $default-icon-height;
+    background-color: transparent;
+    color: $buic-foreground-body;
 
-  &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
-    outline: none;
+    &:hover {
+      background-color: transparent;
+      color: $hovered-icon-color;
+    }
   }
 }
 
+
 .map-manager-item-sub-layer-container {
   @include uicore-z-index(dialog-popup);
 }
diff --git a/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx b/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
index a47c78414fdb..0ba1b501cb10 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
+++ b/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
@@ -5,7 +5,7 @@
 import * as React from "react";
 import { ScreenViewport } from "@itwin/core-frontend";
 import { ContextMenu, ContextMenuItem } from "@itwin/core-react";
-import { Slider } from "@itwin/itwinui-react";
+import { Button, Slider } from "@itwin/itwinui-react";
 import "./MapLayerManager.scss";
 import { StyleMapLayerSettings } from "../Interfaces";
 import { MapLayersUI } from "../../mapLayers";
@@ -81,7 +81,7 @@ export function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, ac
 
   return (
     <>
-      <button data-testid="map-layer-settings" className="map-layer-settings icon icon-more-vertical-2" ref={settingsRef} onClick={onSettingsClick} ></button>
+      <Button styleType="borderless" data-testid="map-layer-settings" className="map-layer-settings icon icon-more-vertical-2" ref={settingsRef} onClick={onSettingsClick} ></Button>
       <ContextMenu opened={isSettingsOpen && (undefined !== hasRangeData)} onOutsideClick={handleCloseSetting} >
         <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? "" : "core-context-menu-disabled"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>
         <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>
diff --git a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
index 19b087d1f4e3..80d39d7230ef 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
+++ b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/index";
 
-$hovered-icon-color: $buic-foreground-primary-tone;
+$hovered-icon-color: $buic-foreground-primary;
 
 .maplayers-settings-popup-panel {
   z-index: 14000;
@@ -13,6 +13,7 @@ $hovered-icon-color: $buic-foreground-primary-tone;
   width: 340px;
 }
 
+.map-manager-header-buttons-group {
 .maplayers-settings-popup-button {
   color: $buic-foreground-body;
   font-size: 20px;
@@ -23,9 +24,11 @@ $hovered-icon-color: $buic-foreground-primary-tone;
 
   &:hover {
     color: $hovered-icon-color;
+    background-color: transparent;
   }
 
   &:focus {
     outline: none;
   }
+}
 }
\ No newline at end of file
diff --git a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.tsx b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.tsx
index 9edf11ee3d46..b4dbfa65c4d6 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.tsx
@@ -10,6 +10,7 @@ import { MapManagerSettings } from "./MapManagerSettings";
 
 import "./MapLayerSettingsPopupButton.scss";
 import { MapLayersUI } from "../../mapLayers";
+import { Button } from "@itwin/itwinui-react";
 
 /** @alpha */
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -29,9 +30,9 @@ export function MapLayerSettingsPopupButton() {
 
   return (
     <>
-      <button title={buttonTooltip} className="maplayers-settings-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
+      <Button styleType="borderless" title={buttonTooltip} className="maplayers-settings-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
         <WebFontIcon iconName="icon-settings" />
-      </button>
+      </Button>
       <Popup
         isOpen={isSettingsOpen}
         position={RelativePosition.BottomRight}
diff --git a/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx b/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
index 1ea5eef7ae16..1b72fc7e83c6 100644
--- a/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
@@ -9,6 +9,7 @@ import { OutsideClickEvent, Popup, useOnOutsideClick, WebFontIcon } from "@itwin
 import { SubLayersPanel } from "./SubLayersTree";
 import { StyleMapLayerSettings } from "../Interfaces";
 import { MapLayersUI } from "../../mapLayers";
+import { Button } from "@itwin/itwinui-react";
 
 // cSpell:ignore droppable Sublayer
 
@@ -44,10 +45,10 @@ export function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLa
 
   return (
     <>
-      <button ref={buttonRef} className="map-manager-item-sub-layer-button" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}
+      <Button styleType="borderless" ref={buttonRef} className="map-manager-item-sub-layer-button" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}
         onClick={togglePopup}>
         <WebFontIcon iconName="icon-layers" />
-      </button>
+      </Button>
       <Popup
         isOpen={popupOpen}
         position={RelativePosition.BottomRight}
diff --git a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
index 790889e5f4c7..350fc9a14442 100644
--- a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
+++ b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
@@ -20,10 +20,16 @@
   }
 }
 
+.map-manager-base-item {
 .map-transparency-popup-button {
+    &:hover {
+      background-color: transparent;
+      svg.checkered {
+        fill: $buic-foreground-primary;
+      }
+    }
   color: $buic-foreground-body;
   font-size: $iui-font-size;
-  background-color: transparent;
   height: 2.2em;
   border: none;
   margin-right: 2px;
@@ -36,18 +42,5 @@
   svg.checkered {
     fill: $buic-foreground-body;
   }
-
-  &:hover {
-    color: $buic-foreground-primary-tone;
-    cursor: auto;
-
-    svg.checkered {
-      fill: $buic-foreground-primary-tone;
-    }
-  }
-
-  &:focus {
-    box-shadow: $uicore-button-focus-boxshadow;
-    outline: none;
-  }
+}
 }
\ No newline at end of file
diff --git a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
index 75ef646dc44f..d0e7d665bd50 100644
--- a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 import { RelativePosition } from "@itwin/appui-abstract";
 import { IModelApp } from "@itwin/core-frontend";
 import { Popup } from "@itwin/core-react";
-import { Slider } from "@itwin/itwinui-react";
+import { Button, Slider } from "@itwin/itwinui-react";
 
 import "./TransparencyPopupButton.scss";
 
@@ -50,13 +50,13 @@ export function TransparencyPopupButton({ transparency, onTransparencyChange, bu
 
   return (
     <>
-      <button title={toolTipLabel} className="map-transparency-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
+      <Button styleType="borderless" title={toolTipLabel} className="map-transparency-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
         <div className="transparent-button">
           <svg className="checkered" viewBox="0 0 24 24">
             <path d="m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z" />
           </svg>
         </div>
-      </button>
+      </Button>
       <Popup
         isOpen={isSettingsOpen}
         position={RelativePosition.BottomRight}

From dc3c178dcb839b418c6b13b4dd14786f04a83d37 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Wed, 6 Apr 2022 08:18:36 -0400
Subject: [PATCH 2/6] Fixed bug with elevation correction control.

---
 extensions/map-layers/src/ui/widget/MapManagerSettings.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/extensions/map-layers/src/ui/widget/MapManagerSettings.tsx b/extensions/map-layers/src/ui/widget/MapManagerSettings.tsx
index ab3914578647..48bef6437925 100644
--- a/extensions/map-layers/src/ui/widget/MapManagerSettings.tsx
+++ b/extensions/map-layers/src/ui/widget/MapManagerSettings.tsx
@@ -247,7 +247,8 @@ export function MapManagerSettings() {
             <QuantityNumberInput disabled={!applyTerrain} persistenceValue={terrainOrigin} snap quantityType={QuantityType.LengthEngineering} onChange={handleHeightOriginChange} onKeyDown={onKeyDown}/>
 
             <span className="map-manager-settings-label">{heightOriginLabel}</span>
-            <Select options={terrainHeightOptions.current} disabled={!applyTerrain} value={heightOriginMode} onChange={handleElevationTypeSelected} size="small" />
+            {/* elevation correction component:  'popoverProps' is needed here otherwise selecting an option closes the menu popup.*/}
+            <Select popoverProps={{appendTo: "parent"}} options={terrainHeightOptions.current} disabled={!applyTerrain} value={heightOriginMode} onChange={handleElevationTypeSelected} size="small" />
 
             <span className="map-manager-settings-label">{exaggerationLabel}</span>
             <NumberInput value={exaggeration} disabled={!applyTerrain} onChange={handleExaggerationChange} onKeyDown={onKeyDown} />

From a9ea1fef836398c2c8090dcc468ab5aab7ac2917 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Wed, 6 Apr 2022 08:45:22 -0400
Subject: [PATCH 3/6] change log.

---
 .../geo-maplayers_ui_button_2022-04-06-12-22.json      | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 common/changes/@itwin/map-layers/geo-maplayers_ui_button_2022-04-06-12-22.json

diff --git a/common/changes/@itwin/map-layers/geo-maplayers_ui_button_2022-04-06-12-22.json b/common/changes/@itwin/map-layers/geo-maplayers_ui_button_2022-04-06-12-22.json
new file mode 100644
index 000000000000..acb211a960ae
--- /dev/null
+++ b/common/changes/@itwin/map-layers/geo-maplayers_ui_button_2022-04-06-12-22.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/map-layers",
+      "comment": "Use iTwinUI-react components to get consistent styling. Alos fixed bug with elevation correction control.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/map-layers"
+}
\ No newline at end of file

From e56d66357af9c25068080d5dfc94ca5a52d4c304 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Wed, 6 Apr 2022 14:50:48 -0400
Subject: [PATCH 4/6] No longer override default button styling

---
 .../src/ui/widget/AttachLayerPopupButton.tsx  |   6 +-
 .../src/ui/widget/BasemapPanel.scss           |  10 +-
 .../map-layers/src/ui/widget/BasemapPanel.tsx |   2 +-
 .../src/ui/widget/MapLayerDroppable.tsx       |   5 +-
 .../src/ui/widget/MapLayerManager.scss        | 115 +-----------------
 .../src/ui/widget/MapLayerSettingsMenu.tsx    |  14 ++-
 .../widget/MapLayerSettingsPopupButton.scss   |  13 --
 .../src/ui/widget/SubLayersPopupButton.tsx    |   2 +-
 .../ui/widget/TransparencyPopupButton.scss    |  27 ++--
 .../src/ui/widget/TransparencyPopupButton.tsx |   2 +-
 10 files changed, 33 insertions(+), 163 deletions(-)

diff --git a/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx b/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
index 83c495b299c8..8e096f4600dd 100644
--- a/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
@@ -333,12 +333,16 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
                   (!!iTwinId && !!iModelId && layerNameUnderCursor && layerNameUnderCursor === source.name) &&
                   <>
                     <Button
+                      size="small"
+                      styleType="borderless"
                       className="map-source-list-entry-button"
                       title={editLayerDefButtonTitle}
                       onClick={onItemEditButtonClicked}>
                       <UiCore.Icon iconSpec="icon-edit" />
                     </Button>
                     <Button
+                      size="small"
+                      styleType="borderless"
                       className="map-source-list-entry-button"
                       title={removeLayerDefButtonTitle}
                       onClick={(event: React.MouseEvent) => { onItemRemoveButtonClicked(source, event); }}>
@@ -436,7 +440,7 @@ export function AttachLayerPopupButton(props: AttachLayerPopupButtonProps) {
 
     if (props.buttonType === undefined || props.buttonType === AttachLayerButtonType.Icon) {
       button = (
-        <Button styleType="borderless" ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
+        <Button size="small" styleType="borderless" ref={buttonRef} className="map-manager-attach-layer-button" title={popupOpen ? hideAttachLayerLabel : showAttachLayerLabel}
           onClick={togglePopup}>
           <UiCore.WebFontIcon iconName="icon-add" />
         </Button>
diff --git a/extensions/map-layers/src/ui/widget/BasemapPanel.scss b/extensions/map-layers/src/ui/widget/BasemapPanel.scss
index fd183d772fd8..d3ac855a9743 100644
--- a/extensions/map-layers/src/ui/widget/BasemapPanel.scss
+++ b/extensions/map-layers/src/ui/widget/BasemapPanel.scss
@@ -27,6 +27,7 @@ $hovered-icon-color: $buic-foreground-primary;
   }
 
   .map-manager-base-label {
+    margin-left: 2px;
     padding-right: 10px;
   }
 
@@ -45,15 +46,6 @@ $hovered-icon-color: $buic-foreground-primary;
       width: 100%;  // makes the Select control fill empty space on the right
     }
 
-    .map-manager-base-item-visibility {
-      border: none;
-      height: 25px;
-      &:hover {
-        background-color: transparent;
-        color: $hovered-icon-color;
-      }
-    }
-
     button.map-manager-base-settings-button {
       border: none;
       margin-left: 4px;
diff --git a/extensions/map-layers/src/ui/widget/BasemapPanel.tsx b/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
index d5abdff21919..a8c3dd8b3f4d 100644
--- a/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
+++ b/extensions/map-layers/src/ui/widget/BasemapPanel.tsx
@@ -152,7 +152,7 @@ export function BasemapPanel() {
   return (
     <>
       <div className="map-manager-base-item" >
-        <Button styleType="borderless" className="map-manager-base-item-visibility" title={toggleVisibility} onClick={handleVisibilityChange}>
+        <Button size="small" styleType="borderless"  title={toggleVisibility} onClick={handleVisibilityChange}>
           <WebFontIcon iconName={baseMapVisible ? "icon-visibility" : "icon-visibility-hide-2"} />
         </Button>
         <span className="map-manager-base-label">{baseLayerLabel}</span>
diff --git a/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx b/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
index 963dabe800a8..555bb46dd7fc 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
+++ b/extensions/map-layers/src/ui/widget/MapLayerDroppable.tsx
@@ -54,7 +54,7 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
       <div className="map-manager-source-item" data-id={rubric.source.index} key={activeLayer.name}
         {...dragProvided.draggableProps}
         ref={dragProvided.innerRef} >
-        <Button styleType="borderless" className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
+        <Button size="small" styleType="borderless" className="map-manager-item-visibility" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>
           <Icon iconSpec={activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2"} />
         </Button>
         <span className="map-manager-item-label" {...dragProvided.dragHandleProps}>{activeLayer.name}</span>
@@ -65,7 +65,8 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
         </div>
         {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&
           <Button
-            className="map-manager-item-requireAuth"
+            size="small"
+            styleType="borderless"
             onClick={() => {
               const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);
               if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {
diff --git a/extensions/map-layers/src/ui/widget/MapLayerManager.scss b/extensions/map-layers/src/ui/widget/MapLayerManager.scss
index 1e352065f702..05ecdf8c1732 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerManager.scss
+++ b/extensions/map-layers/src/ui/widget/MapLayerManager.scss
@@ -39,19 +39,12 @@ $default-icon-height: 20px;
     padding-left: 10px;
   }
 
-  button.map-manager-item-requireAuthIcon {
-    color: $buic-foreground-warning;
-  }
-
   .map-manager-header-buttons-group {
     margin-left: auto;
     border: none;
     display: flex;
     padding-right: 5px;
   }
-
-  // .map-manager-toggle {
-  // }
 }
 
 .map-manager-container {
@@ -71,24 +64,15 @@ $default-icon-height: 20px;
   .map-manager-layer-wrapper {
     border: 1px solid #ccc;
     margin-bottom: 15px;
+    padding: 10px;
   }
 
   .map-manager-underlays,
   .map-manager-overlays {
     display: flex;
     align-content: center;
-    margin-top: 8px;
-    padding-left: 10px;
-
     .map-manager-attach-layer-button {
       margin-left: auto;
-      width: 40px;
-      height: $default-icon-height;
-      margin-right: 2px;
-      &:hover {
-        background-color: transparent;
-        color: $hovered-icon-color;
-      }
     }
   }
 
@@ -160,6 +144,10 @@ $default-icon-height: 20px;
     margin: 1em 0 1em 0;
   }
 
+  .map-manager-item-menu {
+    padding: 5px;
+  }
+
   .map-manager-header {
     display: flex;
     flex-direction: column;
@@ -217,12 +205,6 @@ $default-icon-height: 20px;
     width: 465px;
     min-width: 3em;
   }
-
-  .map-manager-item-visibility {
-    width: 40px;
-    margin-right: 20px;
-  }
-
   .map-manager-item-transparency {
     max-width: 160px;
     width: 160px;
@@ -249,90 +231,18 @@ $default-icon-height: 20px;
     /* Required for text-overflow to do anything */
     white-space: nowrap;
     overflow: hidden;
+    margin-left: 2px;
   }
-
-  .map-manager-item-settings-button {
-    background-color: $buic-background-1;
-    color: $buic-foreground-body;
-    border: none;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
-    &:focus {
-      box-shadow: $uicore-button-focus-boxshadow;
-      outline: none;
-    }
-
-    .core-context-menu-container {
-      .core-context-menu-item {
-        >.core-context-menu-icon {
-          flex-shrink: 1;
-          flex-grow: 0;
-          width: 0;
-        }
-
-        .core-slider.core-slider-minMax {
-          min-width: 100px;
-        }
-      }
-    }
-  }
-
   .map-manager-item-transparency {
     margin-right: 6px;
   }
 
   .map-manager-item-visibility {
-    border: none;
     margin: 0 2px;
-    height: $default-icon-height;
-    &:hover {
-      background-color: transparent;
-      color: $hovered-icon-color;
-    }
-
   }
 
-  button.map-manager-item-requireAuth {
-    background-color: transparent;
-    border: none;
-    color: $buic-foreground-warning;
-    background-color: transparent;
-
-    &:hover {
-      color: $hovered-icon-color;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: $uicore-button-focus-boxshadow;
-    }
-  }
   .map-layer-settings {
-    border: none;
-    background-color: transparent;
-    color: $buic-foreground-body;
-    height: $default-icon-height;
     margin-left: 2px;
-
-    &:hover {
-      background-color: transparent;
-      color: $hovered-icon-color;
-    }
-  }
-
-  .map-manager-item-sub-layer-button {
-    border: none;
-    height: $default-icon-height;
-    background-color: transparent;
-    color: $buic-foreground-body;
-
-    &:hover {
-      background-color: transparent;
-      color: $hovered-icon-color;
-    }
   }
 }
 
@@ -446,19 +356,6 @@ $default-icon-height: 20px;
       button.map-source-list-entry-button {
         height: auto;
         padding: 0 4px 0 4px;
-        margin: 0;
-        background-color: transparent;
-        border: none;
-        color: $buic-foreground-body;
-
-        &:hover {
-          color: $hovered-icon-color;
-        }
-
-        &:focus {
-          outline: none;
-          box-shadow: $uicore-button-focus-boxshadow;
-        }
       }
 
       .map-source-list-entry-name {
diff --git a/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx b/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
index 0ba1b501cb10..952c236174c3 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
+++ b/extensions/map-layers/src/ui/widget/MapLayerSettingsMenu.tsx
@@ -81,13 +81,15 @@ export function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, ac
 
   return (
     <>
-      <Button styleType="borderless" data-testid="map-layer-settings" className="map-layer-settings icon icon-more-vertical-2" ref={settingsRef} onClick={onSettingsClick} ></Button>
+      <Button size="small" styleType="borderless" data-testid="map-layer-settings" className="map-layer-settings icon icon-more-vertical-2" ref={settingsRef} onClick={onSettingsClick} ></Button>
       <ContextMenu opened={isSettingsOpen && (undefined !== hasRangeData)} onOutsideClick={handleCloseSetting} >
-        <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? "" : "core-context-menu-disabled"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>
-        <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>
-        <ContextMenuItem hideIconContainer={true} key={2} >
-          <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />
-        </ContextMenuItem>
+        <div className="map-manager-item-menu" >
+          <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? "" : "core-context-menu-disabled"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>
+          <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>
+          <ContextMenuItem hideIconContainer={true} key={2} >
+            <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />
+          </ContextMenuItem>
+        </div>
       </ContextMenu>
     </>
   );
diff --git a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
index 80d39d7230ef..1c9b8fead83b 100644
--- a/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
+++ b/extensions/map-layers/src/ui/widget/MapLayerSettingsPopupButton.scss
@@ -15,20 +15,7 @@ $hovered-icon-color: $buic-foreground-primary;
 
 .map-manager-header-buttons-group {
 .maplayers-settings-popup-button {
-  color: $buic-foreground-body;
-  font-size: 20px;
-  background-color: transparent;
-  border: none;
   position: relative;
   top: 1px;
-
-  &:hover {
-    color: $hovered-icon-color;
-    background-color: transparent;
-  }
-
-  &:focus {
-    outline: none;
-  }
 }
 }
\ No newline at end of file
diff --git a/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx b/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
index 1b72fc7e83c6..70cdf33c5764 100644
--- a/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/SubLayersPopupButton.tsx
@@ -45,7 +45,7 @@ export function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLa
 
   return (
     <>
-      <Button styleType="borderless" ref={buttonRef} className="map-manager-item-sub-layer-button" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}
+      <Button size="small" styleType="borderless" ref={buttonRef} className="map-manager-item-sub-layer-button" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}
         onClick={togglePopup}>
         <WebFontIcon iconName="icon-layers" />
       </Button>
diff --git a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
index 350fc9a14442..739c9353e6db 100644
--- a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
+++ b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.scss
@@ -20,27 +20,14 @@
   }
 }
 
-.map-manager-base-item {
-.map-transparency-popup-button {
-    &:hover {
-      background-color: transparent;
-      svg.checkered {
-        fill: $buic-foreground-primary;
-      }
-    }
-  color: $buic-foreground-body;
-  font-size: $iui-font-size;
-  height: 2.2em;
-  border: none;
-  margin-right: 2px;
 
-  .transparent-button {
-    width: 16px;
-    height: 16px;
-  }
+.map-transparency-popup-button {
+.transparent-button {
+  width: 16px;
+  height: 16px;
+}
 
-  svg.checkered {
-    fill: $buic-foreground-body;
-  }
+svg.checkered {
+  fill: $buic-foreground-body;
 }
 }
\ No newline at end of file
diff --git a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
index d0e7d665bd50..2880c2109161 100644
--- a/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
+++ b/extensions/map-layers/src/ui/widget/TransparencyPopupButton.tsx
@@ -50,7 +50,7 @@ export function TransparencyPopupButton({ transparency, onTransparencyChange, bu
 
   return (
     <>
-      <Button styleType="borderless" title={toolTipLabel} className="map-transparency-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
+      <Button size="small" styleType="borderless" title={toolTipLabel} className="map-transparency-popup-button" onClick={togglePopupDisplay} ref={buttonRef}>
         <div className="transparent-button">
           <svg className="checkered" viewBox="0 0 24 24">
             <path d="m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z" />

From 30530811335b1e38caa45b545128514a3866b487 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Wed, 6 Apr 2022 15:21:43 -0400
Subject: [PATCH 5/6] Fine tune eye-icon position in sublayer tree.

---
 extensions/map-layers/src/ui/widget/SubLayersTree.scss |  4 ++++
 extensions/map-layers/src/ui/widget/SubLayersTree.tsx  | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.scss b/extensions/map-layers/src/ui/widget/SubLayersTree.scss
index cd543cc42607..ac784205b929 100644
--- a/extensions/map-layers/src/ui/widget/SubLayersTree.scss
+++ b/extensions/map-layers/src/ui/widget/SubLayersTree.scss
@@ -13,6 +13,9 @@
   .core-tree-node {
     >.contents {
       padding-left: 31px;
+      >.core-image-checkbox {
+        top: 6px;
+      }
     }
   }
 
@@ -21,6 +24,7 @@
     left: 5px;
     padding: 0;
     margin: -2px 0px 0px 5px;
+    top: 6px
   }
 }
 
diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx
index 7c7e4ad61a81..753eaf128dda 100644
--- a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx
+++ b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx
@@ -13,7 +13,7 @@ import {
 import { ImageMapLayerSettings, MapSubLayerProps, MapSubLayerSettings } from "@itwin/core-common";
 import { IModelApp, ScreenViewport } from "@itwin/core-frontend";
 import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, useLayoutResizeObserver, useRefState, WebFontIcon } from "@itwin/core-react";
-import { Input } from "@itwin/itwinui-react";
+import { Button, Input } from "@itwin/itwinui-react";
 import * as React from "react";
 import { StyleMapLayerSettings } from "../Interfaces";
 import { SubLayersDataProvider } from "./SubLayersDataProvider";
@@ -151,12 +151,12 @@ export function SubLayersTree(props: { mapLayer: StyleMapLayerSettings }) {
         }
       >
         {mapLayer.provider?.mutualExclusiveSubLayer ? undefined : [
-          <button key="show-all-btn" title={allOnLabel} onClick={showAll}>
+          <Button size="small"styleType="borderless" key="show-all-btn" title={allOnLabel} onClick={showAll}>
             <WebFontIcon iconName="icon-visibility" />
-          </button>,
-          <button key="hide-all-btn" title={allOffLabel} onClick={hideAll}>
+          </Button>,
+          <Button size="small"styleType="borderless" key="hide-all-btn" title={allOffLabel} onClick={hideAll}>
             <WebFontIcon iconName="icon-visibility-hide-2" />
-          </button>,
+          </Button>,
         ]}
       </Toolbar>
       {/* <div ref={ref} className="map-manager-sublayer-tree-content"> */}

From 0cb9be701e2b14a96abbd7df960de787da9e3257 Mon Sep 17 00:00:00 2001
From: mdastous-bentley <mdastous-bentley@users.noreply.github.com>
Date: Thu, 7 Apr 2022 10:43:46 -0400
Subject: [PATCH 6/6] fine tune eye checkbox style.

---
 extensions/map-layers/src/ui/widget/SubLayersTree.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.scss b/extensions/map-layers/src/ui/widget/SubLayersTree.scss
index ac784205b929..fae9ae26ecce 100644
--- a/extensions/map-layers/src/ui/widget/SubLayersTree.scss
+++ b/extensions/map-layers/src/ui/widget/SubLayersTree.scss
@@ -14,7 +14,7 @@
     >.contents {
       padding-left: 31px;
       >.core-image-checkbox {
-        top: 6px;
+        top: 5px;
       }
     }
   }
@@ -24,7 +24,6 @@
     left: 5px;
     padding: 0;
     margin: -2px 0px 0px 5px;
-    top: 6px
   }
 }