fix(theme): theme fixes in secondary button & devtools (codesandbox#3004)

Author: jyash97

packages/app/src/app/components/Preview/DevTools/Console/index.tsx

@@ -180,7 +180,11 @@ class ConsoleComponent extends React.Component<StyledProps> {
             method: 'log',
             data: [
               '%cConsole was cleared',
-              'font-style: italic; color: rgba(255, 255, 255, 0.3)',
+              `font-style: italic; color: ${
+                this.props.theme.vscodeTheme.type === 'light'
+                  ? 'rgba(0, 0, 0, 0.3)'
+                  : 'rgba(255, 255, 255, 0.3)'
+              }`,
             ],
           },
         ];

packages/app/src/app/components/Preview/DevTools/Tabs/Tab/UnreadDevToolsCount.tsx

@@ -14,10 +14,12 @@ const Container = styled.div<{ unread: number; status: StatusType }>`
   height: 16px;
   width: 16px;
   color: ${({ unread }) =>
-    unread === 0 ? `rgba(255, 255, 255, 0.4)` : 'white'};
+    unread === 0 ? 'rgba(255, 255, 255, 0.4)' : 'white'};
   background-color: ${({ status, unread, theme }) => {
     if (unread === 0) {
-      return 'rgba(255, 255, 255, 0.2)';
+      return theme.vscodeTheme.type === 'dark'
+        ? 'rgba(255, 255, 255, 0.2)'
+        : 'rgba(0, 0, 0, 0.2)';
     }
     if (status === 'info') {
       return theme.secondary();

packages/common/src/components/Button/elements.ts

@@ -47,11 +47,11 @@ const getBackgroundHoverColor = ({
         : theme.background2.darken(0.3)()
     }`;
   if (danger) return `background-color: #E25D6A`;
-  if (secondary) return `background-color: #66b9f4`;
   if (red) return `background-color: #F27777`;
   if (internalTheme && internalTheme['button.hoverBackground']) {
     return `background-color: ${internalTheme['button.hoverBackground']}`;
   }
+  if (secondary) return `background-color: #66b9f4`;
 
   return `background-color: #66b9f4;`;
 };
@@ -88,12 +88,12 @@ const getBorder = ({
     return internalTheme.light
       ? '2px solid rgba(0, 0, 0, 0.3)'
       : '2px solid #161A1C';
-  if (secondary) return `2px solid #66B9F4`;
   if (red) return '2px solid #F27777';
   if (danger) return '2px solid #E25D6A';
   if (internalTheme && internalTheme['button.hoverBackground']) {
     return `2px solid ${internalTheme['button.hoverBackground']}`;
   }
+  if (secondary) return `2px solid #66B9F4`;
 
   return '2px solid #66B9F4';
 };