SVG: Fix icons for difference and subtract set operations

[heralden]

The original icons got messed up due to the black-on-white colors being hardcoded into the SVG. This will need some time-consuming manual editing!

[heralden]

To Hacktoberfest participants and other external contributors:

This requires changing SVG code only, so if you like SVG's or want to learn about them, this is for you!

You can see the icons in the picture below.

These can be accessed at this page: http://bluegenes.apps.intermine.org/default/lists

Note that they will have a light background by default, but if you select two lists or more (by clicking the checkboxes in the table rows below) the background will turn dark to indicate that they're clickable. The fixed SVG icons should work for both states!

You can use your browser's devtools to copy the code for the SVG icons.

This is how the icons should look like:

• Difference https://en.wikipedia.org/wiki/Symmetric_difference#/media/File:Venn0110.svg
• Subtract https://en.wikipedia.org/wiki/Complement_(set_theory)#/media/File:Venn0010.svg

Once the icons have been fixed, you can use the following tool to convert the HTML to Hiccup: http://htmltohiccup.herokuapp.com/

Finally, to make your PR, copy the Hiccup code and paste it replacing the current Hiccup for the icons:

• Difference https://github.com/intermine/bluegenes/blob/84919744412eaccc30136e80c4f921fac7fbfba2/src/cljs/bluegenes/components/icons.cljs#L105
• Subtract https://github.com/intermine/bluegenes/blob/84919744412eaccc30136e80c4f921fac7fbfba2/src/cljs/bluegenes/components/icons.cljs#L158

[Saffafatima12]

Hi! I am new to open source community. I tried solving this issue and I was able to get the design as attached in the images below. Could you please let me know if this solves the problem and if I should proceed to converting HTML to Hiccup?

1. when two or more in list are selected (dark background)

2. when less than two selected in list (light background)

[heralden]

@Saffafatima12 Thank you for picking this up, it looks much better already!

I have one suggestion to make it perfect, if you don't mind. That is to change the Combine lists icon so that it's shaded both on dark background and on light background. It would also be great if the borders of the circles are visible, like they are on the other icons. The new Combine lists icon should look like this, just with the red area being gray instead.

Once that is done, you are welcome to make a PR. Thanks again for your help.

PS: We're having problems with our servers right now, so the only way to access Bluegenes right now is to run it locally and use a different mine like http://localhost:5000/thalemine/lists. Let me know if you meet difficulties because of this.

[Saffafatima12]

@uosl Thank you so much for the quick response! And, thanks a lot for your suggestion! I agree that Combine Icon will look much better with the borders and shading. I will try running Bluegenes locally and hopefully will make the changes soon :)

Also, just wanted to mention that this is the first time I am trying to contribute to open source, so apologies in advance if I make any mistakes when making the PR. Thanks once again!

[heralden]

@Saffafatima12 I just realized that I can paste the SVG source here, so you don't need to run Bluegenes locally.

<svg viewBox="0 -4 26 26" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="icon-venn-combine"><g transform="translate(1.000000, 1.000000)" id="icon-venn-combine-g"><path fill-rule="nonzero" fill="#AAAAAA" d="M12,14.9297396 C10.8233059,15.6104216 9.4571477,16 8,16 C3.581728,16 0,12.418272 0,8 C0,3.581728 3.581728,0 8,0 C9.4571477,0 10.8233059,0.389578385 12,1.07026042 C13.1766941,0.389578385 14.5428523,0 16,0 C20.41824,0 24,3.581728 24,8 C24,12.418272 20.41824,16 16,16 C14.5428523,16 13.1766941,15.6104216 12,14.9297396 Z" class="path1"></path><path stroke-width="0.8" stroke="#000000" d="M12,14.9297396 C10.8233059,15.6104216 9.4571477,16 8,16 C3.581728,16 0,12.418272 0,8 C0,3.581728 3.581728,0 8,0 C9.4571477,0 10.8233059,0.389578385 12,1.07026042 C13.1766941,0.389578385 14.5428523,0 16,0 C20.41824,0 24,3.581728 24,8 C24,12.418272 20.41824,16 16,16 C14.5428523,16 13.1766941,15.6104216 12,14.9297396 Z" class="path2"></path></g></svg>

Let me know if I can help any other way, and don't be too worried about making mistakes in the PR. We've all been there :smile:

Update: http://bluegenes.apps.intermine.org/default/lists is working again now.

[heralden]

Fixed with #562