jadeocr/jadeocr

Update Google sign in button styling

TanayB11 opened this issue · 1 comments

Issue

The Google sign in button is not responsive, nor is it pretty. Here's what we need to fix this up:

  1. Responsive sizing
  2. Rounded corners (equivalent to the Tailwind rounded-lg attribute)
  3. Change opacity/background color on hover
  4. 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.

Made all the fixes (except the router -- we can do that while adding the profile page)