clean up styles and naming (#44309)

Follow up from comments on: #44253

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved component styling architecture to follow modern CSS naming
conventions, enhancing code maintainability and consistency across the
setup assistant profile card. No changes to user-facing functionality or
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/SetupAssistantProfileCard.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import FileSaver from "file-saver";
+import classnames from "classnames";
 
 import { uploadedFromNow } from "utilities/date_format";
 
@@ -32,9 +33,12 @@ type ISetupAssistantProfileCardProps =
   | ICustomProfileProps;
 
 const SetupAssistantProfileCard = (props: ISetupAssistantProfileCardProps) => {
-  const baseClass = `setup-assistant-profile-card${
-    props.defaultProfile ? "-default-profile" : ""
-  }`;
+  const baseClass = "setup-assistant-profile-card";
+
+  const cardClassName = classnames(baseClass, {
+    [`${baseClass}--default-profile`]: props.defaultProfile,
+  });
+
   const onDownload = () => {
     const date = new Date();
     const filename = `${date.toISOString().split("T")[0]}_${
@@ -51,7 +55,7 @@ const SetupAssistantProfileCard = (props: ISetupAssistantProfileCardProps) => {
   };
 
   return (
-    <Card paddingSize="medium" className={baseClass}>
+    <Card paddingSize="medium" className={cardClassName}>
       <Graphic name="file-configuration-profile" />
       <div className={`${baseClass}__info`}>
         {props.defaultProfile ? (

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss

@@ -1,8 +1,12 @@
-.setup-assistant-profile-card, .setup-assistant-profile-card-default-profile {
+.setup-assistant-profile-card {
   display: flex;
   gap: $pad-medium;
   align-items: center;
 
+  &--default-profile {
+    background-color: $ui-off-white;
+  }
+
   // TODO: create reusable list item component and use instead of all these styles.
   &__info {
     display: flex;
@@ -30,8 +34,4 @@
   &__download-button, &__delete-button {
     padding: 11px; // TODO: use a padding value from existing variables. talk to design.
   }
-}
-
-.setup-assistant-profile-card-default-profile {
-  background-color: $ui-off-white;
 }