Update Google sign in button styling
TanayB11 opened this issue · 1 comments
TanayB11 commented
Issue
The Google sign in button is not responsive, nor is it pretty. Here's what we need to fix this up:
- Responsive sizing
- Rounded corners (equivalent to the Tailwind
rounded-lg
attribute) - Change opacity/background color on hover
- Hide after signing in and replace with a "to profile" routing
Ideas
General
Use the guidelines for building a custom Google sign-in button. This is probably the best solution
Item 1
Use the v-bind
attribute to data-width
and data-height
to conditionally bind the width/height of the button based on the viewport width. It appears we can't use rem or Tailwind media queries because Google only accepts pixels.
Look at the guidelines in the general section.
Item 4
Use vue-router and route to /profile
, which will be a dummy page for the time being.
TanayB11 commented
Made all the fixes (except the router -- we can do that while adding the profile page)