refactor: contact page and style.scss

Author: Helias

.github/copilot-instructions.md

@@ -48,6 +48,7 @@ Here is a link to the most recent Angular style guide https://angular.dev/style-
 - Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
 - When you create a new component, create the related component.spec.ts file for unit tests
 - When you create a new service, create the related service.spec.ts file for unit tests
+- use readonly in all variables when it's possible
 
 ### State Management
 

angular.json

@@ -31,8 +31,7 @@
               }
             ],
             "styles": [
-              "src/tailwind.css",
-              "src/styles.scss"
+              "src/tailwind.css"
             ]
           },
           "configurations": {

src/app/components/contact/contact-button/contact-button.component.ts

@@ -1,4 +1,17 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+const VARIANT_CLASSES = {
+  primary:
+    'border-(--color-primary) bg-(--color-primary) text-white hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white',
+  secondary:
+    'border-secondary bg-secondary text-white hover:border-secondary-hover hover:bg-secondary-hover hover:text-white',
+  telegram: 'border-[#2aabee] bg-[#2aabee] text-white hover:border-[#1d96d4] hover:bg-[#1d96d4] hover:text-white',
+  'primary-outline':
+    'border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]',
+  'white-outline': 'border-white bg-transparent text-white hover:border-white hover:bg-white/10',
+} as const;
+
+type ButtonVariant = keyof typeof VARIANT_CLASSES;
 
 @Component({
   selector: 'app-contact-button',
@@ -10,18 +23,20 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
       target="_blank"
       [href]="href()"
       role="button"
-      class="w-40"
-      [class]="buttonClass()"
+      class="inline-flex w-40 cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 px-4 py-2 text-base font-semibold no-underline transition-colors [&_svg]:shrink-0"
+      [class]="variantClass()"
       [attr.aria-label]="ariaLabel()"
     >
       <ng-content />
     </a>
   `,
 })
 export class ContactButtonComponent {
-  id = input.required<string>();
-  href = input.required<string>();
-  ariaLabel = input.required<string>();
-  buttonClass = input<string>('');
-  rel = input<string>('noopener');
+  readonly id = input.required<string>();
+  readonly href = input.required<string>();
+  readonly ariaLabel = input.required<string>();
+  readonly variant = input<ButtonVariant>('primary');
+  readonly rel = input<string>('noopener');
+
+  protected readonly variantClass = computed(() => VARIANT_CLASSES[this.variant()]);
 }

src/app/components/contact/contact.component.html

@@ -10,7 +10,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://t.me/pythoncatania"
           ariaLabel="Telegram"
-          buttonClass="border-[#2aabee] bg-[#2aabee] text-white hover:border-[#1d96d4] hover:bg-[#1d96d4]"
+          variant="telegram"
         >
           <app-icon-telegram />Telegram
         </app-contact-button>
@@ -22,7 +22,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://www.facebook.com/PythonCatania"
           ariaLabel="Facebook"
-          buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
+          variant="secondary"
         >
           <app-icon-facebook />Facebook
         </app-contact-button>
@@ -31,7 +31,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://www.linkedin.com/groups/9895708/"
           ariaLabel="LinkedIn"
-          buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
+          variant="secondary"
         >
           <app-icon-linkedin />LinkedIn
         </app-contact-button>
@@ -40,7 +40,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://www.youtube.com/@pythoncatania"
           ariaLabel="YouTube"
-          buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
+          variant="secondary"
         >
           <app-icon-youtube />YouTube
         </app-contact-button>
@@ -49,7 +49,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://www.instagram.com/pythoncatania/"
           ariaLabel="Instagram"
-          buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
+          variant="secondary"
         >
           <app-icon-instagram />Instagram
         </app-contact-button>
@@ -58,7 +58,7 @@ <h2>Contacts</h2>
           rel="me noopener"
           href="https://social.python.it/@pycatania"
           ariaLabel="Mastodon"
-          buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
+          variant="secondary"
         >
           <app-icon-mastodon />Mastodon
         </app-contact-button>
@@ -68,12 +68,7 @@ <h2>Contacts</h2>
     <!-- Column: Code + Networks + Partners -->
     <div class="flex flex-col gap-8">
       <app-contact-group title="Code">
-        <app-contact-button
-          id="github"
-          rel="me noopener"
-          href="https://github.com/PythonCatania"
-          ariaLabel="GitHub"
-        >
+        <app-contact-button id="github" rel="me noopener" href="https://github.com/PythonCatania" ariaLabel="GitHub">
           <app-icon-github />GitHub
         </app-contact-button>
       </app-contact-group>
@@ -83,15 +78,15 @@ <h2>Contacts</h2>
           id="python-software-foundation"
           href="https://www.python.org/"
           ariaLabel="Python Software Foundation"
-          buttonClass="border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
+          variant="primary-outline"
         >
           <app-icon-psf /><abbr title="Python Software Foundation">PSF</abbr>
         </app-contact-button>
         <app-contact-button
           id="python-italia"
           href="https://www.python.it/"
           ariaLabel="Python Italia"
-          buttonClass="border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
+          variant="primary-outline"
         >
           <app-icon-python-italia />Python&nbsp;Italia
         </app-contact-button>
@@ -102,7 +97,7 @@ <h2>Contacts</h2>
           id="pycon-italia"
           href="https://www.pycon.it/"
           ariaLabel="PyCon Italia"
-          buttonClass="border-white bg-transparent text-white hover:border-white hover:bg-white/10"
+          variant="white-outline"
         >
           <app-icon-pycon-italia />PyCon&nbsp;Italia
         </app-contact-button>
@@ -113,7 +108,7 @@ <h2>Contacts</h2>
           id="google-developer-group-catania"
           href="https://gdg.community.dev/gdg-catania/"
           ariaLabel="Google Developer Group Catania"
-          buttonClass="border-white bg-transparent text-white hover:border-white hover:bg-white/10"
+          variant="white-outline"
         >
           <app-icon-gdg /><abbr title="Google Developer Group">GDG</abbr>&nbsp;Catania
         </app-contact-button>

src/app/components/meetup/meetup.component.html

@@ -11,6 +11,7 @@ <h2>Meetup</h2>
     href="https://www.meetup.com/python-catania/"
     role="button"
     aria-label="Meetup"
+    class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 border-(--color-primary) bg-(--color-primary) px-4 py-2 text-base font-semibold text-white no-underline transition-colors hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white [&_svg]:shrink-0"
   >
     <app-icon-meetup />Unisciti a noi</a
   >