Update vote eligibility logic, add MatIconModule, and refine button styles for improved clarity.

frontend/src/app/pages/vote/vote.component.html

@@ -57,7 +57,9 @@
                  [href]="voteSites[voteSite]">
                 <div class=button-outer [class.not-available-button-outer]="!canVote(voteSite)"
                      [class.available-button-outer]="canVote(voteSite)">
-                  <span class="button-inner">{{ getVoteText(voteSite) }}</span>
+                  <span class="button-inner">
+                    {{ getVoteText(voteSite) }}
+                  </span>
                 </div>
               </a>
             </div>

frontend/src/app/pages/vote/vote.component.scss

@@ -43,9 +43,9 @@
 }
 
 .available-button-outer {
-  background-color: #4caf50 !important;
+  border: 2px solid #4caf50;
 }
 
 .not-available-button-outer {
-  background-color: var(--white) !important;
+  border: 2px solid #ffa433;
 }

frontend/src/app/pages/vote/vote.component.ts

@@ -6,13 +6,15 @@ import {SiteService, VoteData} from '@api';
 import {AuthService} from '@services/auth.service';
 import {interval, Subscription} from 'rxjs';
 import {TimeAgoPipe} from '@pipes/TimeAgoPipe';
+import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'app-vote',
   standalone: true,
   imports: [
     HeaderComponent,
-    TimeAgoPipe
+    TimeAgoPipe,
+    MatIconModule,
   ],
   templateUrl: './vote.component.html',
   styleUrl: './vote.component.scss'
@@ -98,6 +100,6 @@ export class VoteComponent implements OnInit, OnDestroy {
     if (!voteInfo) {
       return true;
     }
-    return (voteInfo.lastVoteTimestamp - now.getTime() > 86400000)
+    return (now.getTime() - voteInfo.lastVoteTimestamp < 86400000)
   }
 }