Plots2: Change background color of button

[divyabaid16]

Description

In https://publiclab.org/lists
Currently, when we hover the Suscribe button, it changes its background color to the color of its parent container. It should not happen in this way.

Expected Behaviour

• [ ] The background color of the button should be the same as the parent container.
• [ ] The button must have a border that separates it from the parent container.
• [ ] The background color must change on hover and should be equal to the current background color of the button without hover.
• [ ] There should be some vertical space between the email input box and the button.

[grvsachdeva]

I tried the page on Chrome and didn't get this issue but yes Firefox is showing this issue. Thanks @divyabaid16 for reporting this.

[grvsachdeva]

As the page is a wiki so you can make the changes by editing the code there only

[divyabaid16]

@gauravano I couldn't find the edit option on that page. Can you please help me with this?

[grvsachdeva]

Here you go :point_down:

[divyabaid16]

@gauravano Actually, I don't know why but I'm not getting an option to edit code in this page.

[divyabaid16]

@gauravano I'm unable to find the file where I have to edit. Can you please help me with this?

[grvsachdeva]

Hey @divyabaid16, sorry you have to face trouble here. Actually, editing privileges are limited to those contributors who have posted some work on publiclab.org. here's the code for the wiki - https://gist.github.com/gauravano/b1bdf4c95f7d781b47d50c06699b7ab5. You can do the changes and try it locally and after that I will update the page as per your code. Sounds good?

Thanks for working on this!

[PritiShaw]

Can I work on this if it is not done yet ?? @gauravano

[grvsachdeva]

Hey @PritiShaw, I think @divyabaid16 is working on this one.

[divyabaid16]

@gauravano I tried to change according to what is shown in Google Chrome, and here is the result.

[divyabaid16]

Here is the change.
https://gist.github.com/divyabaid16/f0a4534250bd45d0a28388ac5242994d

[grvsachdeva]

Hey @divyabaid16, the new design looks awesome. Also, I was going through the code and was little confused by the styling part https://gist.github.com/divyabaid16/f0a4534250bd45d0a28388ac5242994d/revisions#diff-01a8cb4ceec1c518a96d6e5e3178c637R10

Don't you see repetition?

Thanks!

[divyabaid16]

Yes, @gauravano I agree with you.
Actually, the link that you had shared previously I had downloaded the zip for the code. So all the components were present scattered.
Basically, I have just changed the following.

<form class="form" action="https://groups.google.com/group/grassrootsmapping/boxsubscribe"><div class="form-inline"><input class="input-medium form-control" type="text" name="email" placeholder="[email protected]" style="width: 250px;" /> <input class="btn" type=submit name="sub" value="Subscribe" style="background-color: #f5f5f5; border: 0.1px solid; margin: 2px;" onmouseover="this.style.backgroundColor='#d6d6d6'" onmouseout="this.style.backgroundColor=' #f5f5f5'" /></div></form>

This is the new form component.
I was actually getting confused regarding how to edit the code there and I just got started somehow.

[jywarren]

Hi, Divya - i wonder if we could use a standard Bootstrap style like
btn-default instead of btn-primary?

On Mon, Mar 25, 2019 at 4:47 AM Divya Baid [e-mail] wrote:

Yes, @gauravano https://github.com/gauravano I agree with you.
Actually, the link that you had shared previously I had downloaded the zip
for the code. So all the components were present scattered.
Basically, I have just changed the following.

This is the new form component.
I was actually getting confused regarding how to edit the code there and I
just got started somehow.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5042#issuecomment-476103777,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJyWiinrP0B1uMSMR_FBxk03os9TDks5vaI0IgaJpZM4bsfdj
.

[jywarren]

Thanks for tackling this!!! https://getbootstrap.com/docs/3.3/

On Mon, Mar 25, 2019 at 4:47 AM Divya Baid [e-mail] wrote:

Yes, @gauravano https://github.com/gauravano I agree with you.
Actually, the link that you had shared previously I had downloaded the zip
for the code. So all the components were present scattered.
Basically, I have just changed the following.

This is the new form component.
I was actually getting confused regarding how to edit the code there and I
just got started somehow.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5042#issuecomment-476103777,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJyWiinrP0B1uMSMR_FBxk03os9TDks5vaI0IgaJpZM4bsfdj
.

[divyabaid16]

Yes @jywarren
The screenshot for the change:

Changes in the code:
<form class="form" action="https://groups.google.com/group/grassrootsmapping/boxsubscribe"><div class="form-inline"><input class="input-medium form-control" type="text" name="email" placeholder="[email protected]" style="width: 250px;" /> <input class="btn btn-default" type=submit name="sub" value="Subscribe" /></div></form>

Thank you so much @gauravano @jywarren

[divyabaid16]

Yes @jywarren
The screenshot for the change:

Changes in the code:
<form class="form" action="https://groups.google.com/group/grassrootsmapping/boxsubscribe"><div class="form-inline"><input class="input-medium form-control" type="text" name="email" placeholder="[email protected]" style="width: 250px;" /> <input class="btn btn-default" type=submit name="sub" value="Subscribe" /></div></form>

Thank you so much @gauravano @jywarren

[grvsachdeva]

@jywarren what do you think about new design? Also, if you like it, please update the feature or let me know, I can do that. Thanks!

[jywarren]

I think it looks lovely! I think this one may be in the wiki page content itself, so perhaps a find/replace could work?

[grvsachdeva]

Ah, I knew it was wiki - https://github.com/publiclab/plots2/issues/5042#issuecomment-472525598 but wrote feature mistakenly :see_no_evil: . Making changes in wiki

[grvsachdeva]

Ok, I changed the page. here's new look https://publiclab.org/lists

Thanks @divyabaid16 :100: for changes! Also, @jywarren @divyabaid16 please check the page once just to be sure that we haven't broken anything there as its one of the important wiki page. Thanks!

Closing this now!

[jywarren]

Heads up to @publiclab/community-reps ! Thanks all, this looks great!