Merge pull request #11 from Arkshine/modernize

COMPATIBILITY: Modernize the component

Author: nathan-nz

.discourse-compatibility

@@ -0,0 +1 @@
+< 3.3.0.beta1-dev: f3561ce7fd9dded965fb8e9a99229539c7af3aa1

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.github/workflows/component-linting.yml

@@ -1,4 +1,4 @@
-name: Linting
+name: Discourse Theme
 
 on:
   push:
@@ -7,37 +7,5 @@ on:
   pull_request:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-
-      - name: Yarn install
-        run: yarn install
-
-      - name: ESLint
-        if: ${{ always() }}
-        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,javascripts}
-
-      - name: Prettier
-        if: ${{ always() }}
-        shell: bash
-        run: |
-          yarn prettier -v
-          shopt -s extglob
-          if ls @(javascripts|desktop|mobile|common|scss)/**/*.@(scss|js|es6) &> /dev/null; then
-            yarn prettier --list-different "@(javascripts|desktop|mobile|common|scss)/**/*.{scss,js,es6}"
-          fi
-          if ls test/**/*.@(js|es6) &> /dev/null; then
-            yarn prettier --list-different "test/**/*.{js,es6}"
-          fi
-
-      - name: Ember template lint
-        if: ${{ always() }}
-        run: yarn ember-template-lint javascripts --no-error-on-unmatched-pattern
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.github/workflows/component-tests.yml

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.prettierrc

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

.prettierrc.cjs

@@ -1,5 +1,13 @@
-@import 'mixins';
-@import 'buttons';
+@import "mixins";
+@import "buttons";
+
+@if $links_position == "left" {
+  .home-logo-wrapper-outlet {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+}
 
 .custom-header-links {
   .top-level-links {
@@ -8,10 +16,11 @@
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    margin: 0;
 
     .custom-header-link {
       color: $main_link_color;
-      padding-block: 1rem;
+      padding-block: 0.5rem;
       cursor: default;
 
       &-icon {
@@ -55,7 +64,8 @@
     list-style: none;
     transform: scale(0);
     transition: transform 0.2s ease;
-    transition-delay: 0.3s;
+    transition-delay: 0.1s;
+    will-change: transform;
 
     &-link {
       color: $dropdown_item_color;
@@ -81,11 +91,11 @@
 }
 
 // hide on scroll when nav is positioned to left of header:
-.title .custom-header-links.scrolling {
+.d-header .custom-header-links.scrolling {
   display: none;
 }
 
-// maintains suitable spacing when Sign Up buttons are present
-.anon .d-header .sign-up-button {
-    margin-left: 1.25em;
+// maintains suitable spacing when auth buttons are present
+.anon .d-header .header-buttons:has(.custom-header-links) .auth-buttons {
+  margin-left: 1.25em;
 }

.template-lintrc.cjs

@@ -1,4 +1,10 @@
 .custom-header-links {
+  display: flex;
+
+  .custom-header-link {
+    display: flex;
+  }
+
   @media screen and (max-width: 712px) {
     display: none;
   }