Fix Card Icons in Tutorials (microsoft#10436)

Mostly, this fixes microsoft/pxt-arcade#6817. To get the id-card-looking icon in the tutorial view, we add a "card" class to the icon's css, which conflicted with the "card" css class we use for code-cards. I just added a bit of special casing to avoid the conflict.

I have also added the teaching-bubble-button class to the buttons in the teaching bubble, because I need to be able to access them specifically to fix microsoft/pxt-arcade#6807. However, the main chunk of that fix will happen in pxt-arcade with microsoft/pxt-arcade#6825

Author: thsparks

react-common/components/controls/TeachingBubble.tsx

@@ -389,21 +389,21 @@ export const TeachingBubble = (props: TeachingBubbleProps) => {
                     </div>}
                     <div className="teaching-bubble-navigation">
                         {hasPrevious && <Button
-                            className="tertiary"
+                            className="tertiary tour-button"
                             onClick={onBack}
                             title={backLabel}
                             ariaLabel={backLabel}
                             label={backLabel}
                         />}
                         {hasNext && <Button
-                            className="tertiary inverted"
+                            className="tertiary inverted teaching-bubble-button"
                             onClick={onNext}
                             title={nextLabel}
                             ariaLabel={nextLabel}
                             label={nextLabel}
                         />}
                         {!hasNext && <Button
-                            className="tertiary inverted"
+                            className="tertiary inverted teaching-bubble-button"
                             onClick={onFinish}
                             title={finishLabel}
                             ariaLabel={finishLabel}

theme/semantic-ui-overrides.less

@@ -65,7 +65,15 @@ body.pxt-theme-root {
         color: var(--pxt-neutral-foreground1);
     }
 
-    .ui.card, .ui.cards .card {
+    i.ui.card.icon {
+        /*
+            There is a card class used in tutorials to get an id-card icon, but it conflicts with the
+            card class used for code cards, so we need some special-casing to avoid conflicts.
+        */
+        border: none;
+    }
+
+    .ui.card:not(.icon), .ui.cards .card:not(.icon) {
         background-color: var(--pxt-neutral-background1);
         color: var(--pxt-neutral-foreground1);
         border-color: var(--pxt-neutral-stencil1);