Merge pull request #165 from spotify/alund/plugin-them

Update default theme for new plugins

frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -20,7 +20,7 @@ const ExampleComponent: FC<{}> = () => {
   const classes = useStyles();
 
   return (
-    <Page theme={theme.home}>
+    <Page theme={theme.tool}>
       <div className={classes.mainContentArea}>
         <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle"></Header>
         <Grid

frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -73,7 +73,7 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
 
 const ExampleFetchComponent: FC<{}> = () => {
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    const response = await fetch('https://randomuser.me/api/?results=100');
+    const response = await fetch('https://randomuser.me/api/?results=20');
     const data = await response.json();
     return data.results;
   }, []);

frontend/packages/core/src/layout/Page/PageThemeProvider.ts

@@ -11,8 +11,9 @@ export const gradients = {
   violetPeach: 'linear-gradient(44deg, #B39AC8 0%, #FCCBD3 100%)',
   violetGreen: 'linear-gradient(44deg, #4302F4 0%, #C3EFC8 100%)',
   purple: 'linear-gradient(-90deg, #a186bd 0%, #7c5c92 100%)',
-  tpm: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
-  royalBlue: 'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
+  eveningSea: 'linear-gradient(-137deg, #00FFF2 0%, #035355 100%)',
+  royalBlue:
+    'linear-gradient(45deg, #000044 0%, #0000DD 61.47%, #0033DD 74%, #4B80D4 100%)',
   grey: 'linear-gradient(45deg, #111111 0%, #777777 100%)',
   sunset: 'linear-gradient(148deg, #cf8022 0%, #4e6ec7 100%)',
   sky: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)',
@@ -41,7 +42,17 @@ export const theme = {
   },
   documentation: {
     activeNavLinkColor: '#04c2ba',
-    gradient: gradients.tpm,
+    gradient: gradients.eveningSea,
     burstShape: null,
   },
-};
+  tool: {
+    activeNavLinkColor: '#04c2ba',
+    gradient: gradients.purpleBlue,
+    burstShape: null,
+  },
+  library: {
+    activeNavLinkColor: '#B39AC8',
+    gradient: gradients.sunset,
+    burstShape: null,
+  },
+};

frontend/yarn.lock

@@ -2308,6 +2308,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@4.0.0-alpha.45":
+  version "4.0.0-alpha.45"
+  resolved "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.45.tgz#6e1abbdd6e44b9ef7b3eff8ef892a3da5dc52f10"
+  integrity sha512-zT6kUU87SHsPukiu3tlWg8V6o0tGS38c1b/xst/kPqX6eLbfqrROyxhHn1A8ZtHmqga1AKQdv/1llQoG80Afww==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.7.1"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@material-ui/styles@^4.9.0":
   version "4.9.0"
   resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
@@ -5057,7 +5068,7 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.0.2:
+clsx@^1.0.2, clsx@^1.0.4:
   version "1.1.0"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702"
   integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==