fix(core-components): correct size and color of FavoriteToggle

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>

.changeset/angry-mayflies-collect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Correct size of FavoriteToggle and inherit non-starred color from parent

packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { FavoriteToggle } from './FavoriteToggle';
 import {
   UnifiedThemeProvider,
@@ -21,10 +21,14 @@ import {
   createUnifiedTheme,
   palettes,
 } from '@backstage/theme';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 export default {
   title: 'Core/FavoriteToggle',
   component: FavoriteToggle,
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {

packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx

@@ -21,14 +21,16 @@ import { Theme, makeStyles } from '@material-ui/core/styles';
 import { StarIcon, UnstarredIcon } from '../../icons';
 
 const useStyles = makeStyles<Theme>(
-  theme => ({
+  () => ({
     icon: {
       color: '#f3ba37',
       cursor: 'pointer',
+      display: 'inline-flex',
     },
     iconBorder: {
-      color: theme.palette.text.primary,
+      color: 'inherit',
       cursor: 'pointer',
+      display: 'inline-flex',
     },
   }),
   { name: 'BackstageFavoriteToggleIcon' },
@@ -89,6 +91,7 @@ export function FavoriteToggle(
         aria-label={title}
         id={id}
         onClick={() => onChange(!value)}
+        color="inherit"
         {...iconButtonProps}
       >
         <FavoriteToggleIcon isFavorite={value} />