[v17] Web: remove unified resource card styling when require request

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx

@@ -32,6 +32,7 @@ import {
   getBackgroundColor,
 } from '../shared/getBackgroundColor';
 import { PinButton } from '../shared/PinButton';
+import { ResourceActionButtonWrapper } from '../shared/ResourceActionButton';
 import { ResourceItemProps } from '../types';
 
 // Since we do a lot of manual resizing and some absolute positioning, we have
@@ -220,7 +221,9 @@ export function ResourceCard({
                 </HoverTooltip>
               </SingleLineBox>
               {hovered && <CopyButton name={name} mr={2} />}
-              {ActionButton}
+              <ResourceActionButtonWrapper requiresRequest={requiresRequest}>
+                {ActionButton}
+              </ResourceActionButtonWrapper>
             </Flex>
             <Flex flexDirection="row" alignItems="center">
               <ResTypeIconBox>

web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx

@@ -33,6 +33,7 @@ import {
   getBackgroundColor,
 } from '../shared/getBackgroundColor';
 import { PinButton } from '../shared/PinButton';
+import { ResourceActionButtonWrapper } from '../shared/ResourceActionButton';
 import { ResourceItemProps } from '../types';
 
 export function ResourceListItem({
@@ -226,7 +227,9 @@ export function ResourceListItem({
             grid-area: button;
           `}
         >
-          {ActionButton}
+          <ResourceActionButtonWrapper requiresRequest={requiresRequest}>
+            {ActionButton}
+          </ResourceActionButtonWrapper>
         </Box>
 
         {/* labels */}

web/packages/shared/components/UnifiedResources/shared/ResourceActionButton.tsx

@@ -0,0 +1,40 @@
+/**
+ * Teleport
+ * Copyright (C) 2025  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import styled, { css } from 'styled-components';
+
+/**
+ * Wrapper to apply shared styles across action buttons that does
+ * not require request. This is to help distinguish between
+ * requestable and non requestable buttons.
+ */
+export const ResourceActionButtonWrapper = styled.div<{
+  requiresRequest: boolean;
+}>`
+  line-height: 0;
+
+  ${p =>
+    !p.requiresRequest &&
+    css`
+      button,
+      a {
+        background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
+        border: none;
+      }
+    `}
+`;

web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts

@@ -26,12 +26,6 @@ export interface BackgroundColorProps {
 }
 
 export const getBackgroundColor = (props: BackgroundColorProps) => {
-  if (props.requiresRequest && props.pinned) {
-    return props.theme.colors.interactive.tonal.primary[0];
-  }
-  if (props.requiresRequest) {
-    return props.theme.colors.spotBackground[0];
-  }
   if (props.selected) {
     return props.theme.colors.interactive.tonal.primary[2];
   }