internal: fix get code button to be purple with correct margin (#32504)

Author: jennifer-shehane

packages/frontend-shared/src/assets/icons/technology-angle-brackets_x16.svg

@@ -15,10 +15,10 @@
     "watch": "yarn build-for-tests --watch --progress"
   },
   "devDependencies": {
-    "@cypress-design/constants-button": "^1.9.0",
+    "@cypress-design/constants-button": "^1.10.0",
     "@cypress-design/css": "1.2.0",
-    "@cypress-design/react-button": "^1.10.1",
-    "@cypress-design/react-icon": "1.30.0",
+    "@cypress-design/react-button": "^1.11.0",
+    "@cypress-design/react-icon": "^1.31.0",
     "@cypress/react-tooltip": "0.5.3",
     "@fontsource/mulish": "4.3.0",
     "@fontsource/open-sans": "4.3.0",

packages/reporter/package.json

@@ -4,6 +4,7 @@ import Markdown from 'markdown-it'
 import { observer } from 'mobx-react'
 import React, { useState, useEffect } from 'react'
 import Tooltip from '@cypress/react-tooltip'
+import Button from '@cypress-design/react-button'
 
 import appState from '../lib/app-state'
 import events from '../lib/events'
@@ -23,7 +24,7 @@ import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down
 import HiddenIcon from '@packages/frontend-shared/src/assets/icons/general-eye-closed_x16.svg'
 import PinIcon from '@packages/frontend-shared/src/assets/icons/object-pin_x16.svg'
 import RunningIcon from '@packages/frontend-shared/src/assets/icons/status-running_x16.svg'
-import AngleBracketsIcon from '@packages/frontend-shared/src/assets/icons/technology-angle-brackets_x16.svg'
+import { IconTechnologyAngleBrackets } from '@cypress-design/react-icon'
 
 const displayName = (model: CommandModel) => model.displayName || model.name
 const nameClassName = (name: string) => name.replace(/(\s+)/g, '-')
@@ -535,13 +536,22 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
                 <CommandControls model={model} commandName={commandName} />
               </div>
               {model.isCyPrompt && model.state === 'passed' && (
-                <div className='command-prompt-get-code' onClick={(e) => {
-                  e.stopPropagation()
-                  events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
-                }}>
-                  <AngleBracketsIcon className='command-prompt-get-code-indicator' width={12} height={12} />
+                <Button
+                  variant="indigo-dark-mode"
+                  size="20"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
+                  }}
+                  className="command-prompt-get-code mr-1 whitespace-nowrap"
+                >
+                  <IconTechnologyAngleBrackets
+                    className='command-prompt-get-code-indicator pr-1'
+                    size='16'
+                    strokeColor='white'
+                  />
                   <span>Get code</span>
-                </div>
+                </Button>
               )}
             </div>
           </FlashOnClick>

packages/reporter/src/commands/command.tsx

@@ -65,16 +65,6 @@
       .command-expander > path {
         stroke: $gray-700;
       }
-
-      .command-prompt-get-code {
-        background: $gray-900;
-        border: 1px solid $gray-700;
-        color: $gray-200;
-
-        svg {
-          color: $gray-200;
-        }
-      }
     }
 
     .command-wrapper-text {
@@ -113,21 +103,8 @@
       width: 100%;
 
       .command-prompt-get-code {
-        min-width: 85px;
-        margin-top: 1px;
-        align-self: flex-start;
-        display: flex;
-        padding: 2px 4px;
-        gap: 4px;
-        align-items: center;
         cursor: pointer;
-        border-radius: 4px;
-        border: 1px solid $gray-900;
-        color: $gray-300;
-      
-        svg {
-          color: $gray-500;
-        }       
+        font-family: $font-system;     
       }
     }
   }

packages/reporter/src/commands/commands.scss

@@ -2615,10 +2615,10 @@
     tailwindcss "^3.4.3"
     tailwindcss-hocus "^0.0.7"
 
-"@cypress-design/constants-button@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/constants-button/-/constants-button-1.9.0.tgz#56683bb760b7eaab9857c7f7384c5ac55eafef18"
-  integrity sha512-4mNYfEdrUJUfC4uPwr7P3u0MFsxrffvf5CefbL1HbjwxdHSLT94PhUL70kOukkN1CkM2TwPOTffNZWFLARyQeQ==
+"@cypress-design/constants-button@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/constants-button/-/constants-button-1.10.0.tgz#854172de87c1e63ff8309849c42e5d26ba386fff"
+  integrity sha512-I/NAurZriTdioqH9NVpzv0MVzqPGFZADVL8LNlYP5fcWcBZ/gCB+gViHrCe5juE5tp1zYRXXAjQflcx0qvl1mw==
 
 "@cypress-design/constants-spinner@^1.0.0":
   version "1.0.1"
@@ -2648,26 +2648,26 @@
     tailwindcss "^3.4.3"
     tailwindcss-hocus "^0.0.7"
 
-"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.18.0", "@cypress-design/icon-registry@^1.30.0", "@cypress-design/icon-registry@^1.5.1":
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.30.0.tgz#169f61fddb0baad1e7297487eab4eec68fc7537e"
-  integrity sha512-4DSHYeSo6gnsnKrufTxgAn3c/1ORGCoDeXOLypoatfNtmlbSyB6jdsQ4wIJmuM6lR9wDtkwziPHCsilNVPFy2Q==
+"@cypress-design/icon-registry@^1.0.0", "@cypress-design/icon-registry@^1.18.0", "@cypress-design/icon-registry@^1.31.0", "@cypress-design/icon-registry@^1.5.1":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-1.31.0.tgz#fb0b14aef3ad284e46655bace3302662cb950a9b"
+  integrity sha512-HL6LvdB98jvOPPp/pD0FOCcyg3hq0oByAitUNscC5wc2aWq3amdWhHHzbCh4H7KkD0R0qTYmHTPynk2jq0wiAw==
   dependencies:
     "@cypress-design/color-constants" "^1.1.0"
 
-"@cypress-design/react-button@^1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/react-button/-/react-button-1.10.1.tgz#31328d00789cf8a59898afdce1b71eecadec9de1"
-  integrity sha512-NFRWZRmYREaElTZj8ioyNu1lzaf0WperEw98EqC+LOYpwZzHtLahR0Ot/1DGOiCZTacrvBrtjo65VQGieXqJfQ==
+"@cypress-design/react-button@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/react-button/-/react-button-1.11.0.tgz#368a48b3cf4ce2a4c0e84a75f599e59456cfef9b"
+  integrity sha512-PEp/che82N6wuH6wyc9uLF6gzg/GZO8l1H7+niP/2sWGf1toVtvecZI6/y570YaStyHnkPpBwHpO630iByrz+Q==
   dependencies:
     clsx "^2.1.1"
 
-"@cypress-design/react-icon@1.30.0":
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/react-icon/-/react-icon-1.30.0.tgz#2ac51db1ce2941dc012481c883e053c3bc8223c1"
-  integrity sha512-ooF9WpHvnW4A4SEh3/1aXs1lBqmCfIB2Ioca1dg+/uL22ALYgyji7xcAStm/BzMo/nGTelqx2GcDWzMqOjFnGw==
+"@cypress-design/react-icon@^1.31.0":
+  version "1.31.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/react-icon/-/react-icon-1.31.0.tgz#aa82413c5a600f85a5648c7f442d416512beafa4"
+  integrity sha512-QXDhP3qf+VXwjysdk366TVomoizkbI4jmtXY1ldztQaSaSRdwvyI6etR9jpn2Pq3XzKJS1zKAvVwiRA9xA9ZUA==
   dependencies:
-    "@cypress-design/icon-registry" "^1.30.0"
+    "@cypress-design/icon-registry" "^1.31.0"
     clsx "^2.1.1"
 
 "@cypress-design/vue-button@^1.1.0", "@cypress-design/vue-button@^1.6.0":