diff --git a/README.md b/README.md
index df364d74..0a690875 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ The project is structured as follows:
- `TaskName.stories.js`
- `TaskName.scss`
- Create a new `Task` in `Task.js`
- - Search svgrepo.com for a suitable icon and add it to the `icons` folder
+ - Search svgrepo.com for a suitable icon and add it to the `icons` folder (see below for more instructions)
- Add the new task to:
- `getStaticTask`
- `getDefaultModel`
@@ -101,6 +101,17 @@ The project is structured as follows:
- `getStaticTasks`
- Create a new story for the task in `QuickInput.stories.js`
+## Adding new Task icons
+- Go to svgrepo.com, search for a suitable icon, download it, and drag the file into the `src/resources/icons` directory
+- Rename the file to follow the `icon-taskNameInCamelCase.svg` structure that all of the other Task icons use
+- Import the file to `Task.js` and finish Task setup as usual.
+- You can view the icon in the `Home` -> `Splash Page` Storybook.
+- After deploying to Staging (or locally if you have the React app running), the icon is also visible on the `All Models` page, in the "Filter Models by Tasks" menu on the left.
+- The icon colors should be white and blue. If you notice black lines, you'll need to use css to adjust those.
+ - Open the svg file, and if the file isn't already formatted, from the main VS Code menu, select `View` and then `Command Pallet`, and then type `Format document` into the search bar (you may need to install XML Tools)
+ - Now open the `Header.scss` and `_FilterGroup.scss` files and find the related styling (Search for this text: `// Styling for .svg Task icons to make sure they are $white and $azul`)
+ - Compare the xml tags against the styling here, and update as necessary
+
## Recommended Workflow for creating new components
Create a new folder in `src/components/` with the name of the component, and create the following files as needed:
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index a0f746a9..5b216ab0 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -671,7 +671,7 @@
width: 24px;
height: 24px;
margin-right: 8px;
-
+ // Styling for .svg Task icons to make sure they are $white and $azul
path {
fill: $azul !important;
}
@@ -680,13 +680,18 @@
}
circle {
stroke: $azul !important;
- }
+ fill: $azul !important;
+ }
+ polyline {
+ stroke: $azul !important;
+ }
}
&:hover, &-selected {
background-color: $azul;
color: $white;
-
+ // Styling for .svg Task icons to make sure they are $white and $azul
+ // Get more icons at https://www.svgrepo.com/
path {
fill: $white !important;
}
@@ -694,18 +699,19 @@
stroke: $azul !important;
}
.a {
- // Currently not used
- // Get more icons at https://www.svgrepo.com/
+ // Currently not used?
stroke: $azul !important;
}
rect {
- // Currently only used for audioToText icon
stroke: $white !important;
}
circle {
- // Currently only used for audioToText icon
stroke: $white !important;
+ fill: $white !important;
}
+ polyline {
+ stroke: $white !important;
+ }
}
}
diff --git a/src/components/ModelList/_FilterGroup.scss b/src/components/ModelList/_FilterGroup.scss
index d3ea5726..92febade 100644
--- a/src/components/ModelList/_FilterGroup.scss
+++ b/src/components/ModelList/_FilterGroup.scss
@@ -16,15 +16,31 @@
color: $white;
.filter-group__button-icon {
+ // Styling for .svg Task icons to make sure they are $white and $azul
+ // Note: This needs to be double-checked on Staging / Local
path {
fill: $white;
- }
+ }
+ line {
+ stroke: $white;
+ }
+ rect {
+ stroke: $white;
+ }
+ circle {
+ stroke: $white;
+ fill: $white;
+ }
+ polyline {
+ stroke: $white;
+ }
}
}
&-inactive {
background: white;
color: $color;
+ // Styling for .svg Task icons to make sure they are $white and $azul
path {
fill: $color;
}
@@ -36,10 +52,14 @@
}
circle {
stroke: $color;
+ fill: $color;
}
+ polyline {
+ stroke: $color;
+ }
.a {
stroke: $color;
- }
+ }
&:hover {
background: rgba($color, 0.07);
diff --git a/src/resources/icons/icon-audioToAudio.svg b/src/resources/icons/icon-audioToAudio.svg
index 4c0ab8a6..493401b8 100644
--- a/src/resources/icons/icon-audioToAudio.svg
+++ b/src/resources/icons/icon-audioToAudio.svg
@@ -1 +1,21 @@
-
\ No newline at end of file
+
\ No newline at end of file