Refactor CodePaths and FileCodeSnippet components

This refactors the CodePaths and FileCodeSnippet components to be more
readable and in style with the rest of the "new" components. It does the
following:

- Remove uses of the `style` and `sx` props; replace it by using
  `styled-components` instead
- Remove uses of Primer icons
- Split out the components into multiple files
- Change the colors of the severity to match VSCode colors (and make
  them themable)

I haven't removed the use of the Primer `Overlay` component yet, since
this component seems to do quite a lot and the VSCode WebView UI Toolkit
doesn't have a replacement for it.

Author: koesie10

…ies/remote-queries/CodePaths.stories.tsx …src/stories/common/CodePaths.stories.tsxextensions/ql-vscode/src/stories/remote-queries/CodePaths.stories.tsx renamed to extensions/ql-vscode/src/stories/common/CodePaths.stories.tsx extensions/ql-vscode/src/stories/remote-queries/CodePaths.stories.tsx renamed to extensions/ql-vscode/src/stories/common/CodePaths.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ThemeProvider } from '@primer/react';
 
-import CodePaths from '../../view/remote-queries/CodePaths';
+import { CodePaths } from '../../view/remote-queries/CodePaths';
 import type { CodeFlow } from '../../remote-queries/shared/analysis-result';
 
 export default {
@@ -112,8 +112,8 @@ PowerShell.args = {
   message: {
     tokens: [
       {
-        type: 'text',
-        t: 'This zip file may have a dangerous path'
+        t: 'text',
+        text: 'This zip file may have a dangerous path'
       }
     ]
   },

…mote-queries/FileCodeSnippet.stories.tsx …ories/common/FileCodeSnippet.stories.tsxextensions/ql-vscode/src/stories/remote-queries/FileCodeSnippet.stories.tsx renamed to extensions/ql-vscode/src/stories/common/FileCodeSnippet.stories.tsx extensions/ql-vscode/src/stories/remote-queries/FileCodeSnippet.stories.tsx renamed to extensions/ql-vscode/src/stories/common/FileCodeSnippet.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import FileCodeSnippet from '../../view/remote-queries/FileCodeSnippet';
+import { FileCodeSnippet } from '../../view/remote-queries/FileCodeSnippet';
 
 export default {
   title: 'File Code Snippet',

extensions/ql-vscode/src/view/remote-queries/AnalysisAlertResult.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AnalysisAlert } from '../../remote-queries/shared/analysis-result';
-import CodePaths from './CodePaths';
-import FileCodeSnippet from './FileCodeSnippet';
+import { CodePaths } from './CodePaths';
+import { FileCodeSnippet } from './FileCodeSnippet';
 
 const AnalysisAlertResult = ({ alert }: { alert: AnalysisAlert }) => {
   const showPathsLink = alert.codeFlows.length > 0;