Cleaning up some icon styling and updating readme (#27)

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:

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,32 +680,38 @@
         }
         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;
         }
         line {
           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;
+        } 
       }
     }
 

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);