Merge pull request #275 from MehulKChaudhari/migrate-to-ember-scoped-css

Migrate to ember scoped css

Author: mansona

app/components/filter-menu.hbs

@@ -1,9 +1,8 @@
-<div local-class="container">
+<div class="container">
   {{#each this.filterNames as |filterName|}}
     <LinkTo
-      class="es-button"
+      class="es-button link"
       data-test-link={{filterName}}
-      local-class="link"
       @model={{filterName}}
       @query={{hash query=""}}
       @route="issues"

app/components/github-label.hbs

@@ -1,3 +1,3 @@
-<span local-class="label" style={{this.styleForLabel}}>
+<span class="label" style={{this.styleForLabel}}>
   {{remove-emoji-shortcode @label}}
 </span>

app/index.html

@@ -21,4 +21,4 @@
 
     {{content-for "body-footer"}}
   </body>
-</html>
+</html>

app/styles/index.css renamed to app/templates/index.css

@@ -1,4 +1,4 @@
-.container {
+.index-container {
   background-color: var(--color-gray-900);
   height: 100%;
 }

app/templates/index.hbs

@@ -1,14 +1,14 @@
-<div class="bg-shape-boxes pt-5" local-class="container">
-  <div class="mb-4 pt-4" local-class="header-container">
+<div class="bg-shape-boxes pt-5 index-container">
+  <div class="mb-4 pt-4 header-container">
     <img alt="" src="../images/ember-help-wanted-logo.svg" />
-    <h1 class="text-hero-xl" local-class="header">
+    <h1 class="text-hero-xl header">
       Ember Help Wanted
     </h1>
 
     <FilterMenu />
   </div>
 
-  <div class="bg-light-muted" local-class="body-container">
+  <div class="bg-light-muted body-container">
     <div class="container">
       <h2 class="text-xl pb-3">
         Repositories with help-wanted issues
@@ -18,9 +18,8 @@
         <ul class="list-unstyled layout">
           {{#each @model as |githubRepository|}}
             <EsLinkCard
-              class="lg:col-3 bg-dark"
+              class="lg:col-3 bg-dark link-card"
               data-test-github-repository={{githubRepository.name}}
-              local-class="link-card"
               @href="{{githubRepository.htmlUrl}}/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+Wanted%22+sort%3Acreate-date"
               @title={{githubRepository.name}}
             >
@@ -39,7 +38,7 @@
         Improving the contributor experience
       </h2>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         This app is designed to help community members find issues in the Ember
         ecosystem that are requesting some extra help! The goal would be for
         this to work well for project nights for meetups, conferences and anyone
@@ -49,7 +48,7 @@
 
       <h3>Big Picture</h3>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         To accomplish this, we use a
         <a href="https://github.com/ember-learn/ember-help-wanted-server">Node
           backend</a>
@@ -59,15 +58,15 @@
         work on.
       </p>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         Those issues will then surface in this Ember app, where they can be
         searched and filtered in various ways as each potential contributor
         desires. We may add some level of curation to the issues (whether that
         is needed is still to be determined) or in other ways editorialize as
         issues show up in the app.
       </p>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         Meetup organizers (and contributor workshops at various Ember
         conferences) can also use this as a tool to sort through issues and pick
         subsets for their meetings. For example, if a Meetup group wants to help
@@ -78,15 +77,15 @@
         occurs each year at EmberConf.
       </p>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         Long-term, we are considering ways to make this easily findable by
         anyone who wants to contribute to Ember- tweeting out major new issues,
         or in other ways that communicate key pieces of info to the Ember
         community. We could potentially use it as a way of posting "maintainer
         wanted" messages as well. Do you have more ideas? Let us know!
       </p>
 
-      <p local-class="paragraph">
+      <p class="paragraph">
         To learn more, visit
         <a
           href="https://github.com/ember-learn/ember-help-wanted"

app/styles/issues.css renamed to app/templates/issues.css

@@ -1,41 +1,41 @@
 {{page-title "Issues"}}
-<section class="container" local-class="header-container">
+<section class="container header-container">
   <FilterMenu />
 
   <form {{on "submit" this.filterIssues}}>
-    <label for="search-input-issues" local-class="search-label">
+    <label for="search-input-issues" class="search-label">
       Keyword
     </label>
 
     <input
       id="search-input-issues"
       data-test-field="Keyword"
-      local-class="search-input"
+      class="search-input"
       type="text"
       value={{this.keyword}}
       {{on "input" this.updateKeyword}}
     />
 
     <EsButton
       data-test-button="Search"
-      local-class="search-button"
+      class="search-button"
       @label="Search"
       @type="submit"
     />
 
     {{#if this.label}}
-      <div local-class="label-filter-container">
+      <div class="label-filter-container">
         <p>
           In addition, look for issues with the label
-          <span local-class="label-filter">{{remove-emoji-shortcode
+          <span class="label-filter">{{remove-emoji-shortcode
               this.label
             }}</span>.
         </p>
 
         <EsButton
           aria-label={{this.clearMessage}}
           data-test-button="Clear Filter"
-          local-class="clear-label-filter-button"
+          class="clear-label-filter-button"
           title={{this.clearMessage}}
           @label="Clear Filter"
           @onClicked={{fn (mut this.label) null}}
@@ -46,24 +46,21 @@
     {{/if}}
   </form>
 
-  <p class="text-sm" local-class="num-results-found">
+  <p class="text-sm num-results-found">
     {{@model.length}}
     issues displayed
   </p>
 </section>
 
-<div class="container" local-class="body-container">
+<div class="container body-container">
   <h2 class="text-xl pb-3">
     Issues that could use your help!
   </h2>
 
   <div class="row">
     <ul class="list-unstyled layout">
       {{#each this.githubIssuesSorted as |githubIssue|}}
-        <EsCard
-          data-test-github-issue={{githubIssue.number}}
-          local-class="card"
-        >
+        <EsCard data-test-github-issue={{githubIssue.number}} class="card">
           <header>
             <h3 class="text-lg">
               <a
@@ -76,11 +73,8 @@
               </a>
             </h3>
 
-            <div local-class="github-issue-number-container">
-              <p
-                data-test-field="Issue Number"
-                local-class="github-issue-number"
-              >
+            <div class="github-issue-number-container">
+              <p data-test-field="Issue Number" class="github-issue-number">
                 #{{githubIssue.number}}
               </p>
             </div>
@@ -92,7 +86,7 @@
               <a
                 data-test-field="Repository Name"
                 href={{githubIssue.repositoryHtml}}
-                local-class="github-repository-name"
+                class="github-repository-name"
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -104,7 +98,7 @@
             {{#each githubIssue.labels as |label|}}
               <button
                 data-test-button={{label.name}}
-                local-class="github-label-button"
+                class="github-label-button"
                 type="button"
                 {{on "click" (fn (mut this.label) label.name)}}
               >

app/templates/issues.hbs

@@ -1,11 +1,11 @@
-<div local-class="sk-cube-grid">
-  <div local-class="sk-cube sk-cube1"></div>
-  <div local-class="sk-cube sk-cube2"></div>
-  <div local-class="sk-cube sk-cube3"></div>
-  <div local-class="sk-cube sk-cube4"></div>
-  <div local-class="sk-cube sk-cube5"></div>
-  <div local-class="sk-cube sk-cube6"></div>
-  <div local-class="sk-cube sk-cube7"></div>
-  <div local-class="sk-cube sk-cube8"></div>
-  <div local-class="sk-cube sk-cube9"></div>
+<div class="sk-cube-grid">
+  <div class="sk-cube sk-cube1"></div>
+  <div class="sk-cube sk-cube2"></div>
+  <div class="sk-cube sk-cube3"></div>
+  <div class="sk-cube sk-cube4"></div>
+  <div class="sk-cube sk-cube5"></div>
+  <div class="sk-cube sk-cube6"></div>
+  <div class="sk-cube sk-cube7"></div>
+  <div class="sk-cube sk-cube8"></div>
+  <div class="sk-cube sk-cube9"></div>
 </div>

app/styles/loading.css renamed to app/templates/loading.css

@@ -1,7 +1,7 @@
 {{page-title "Pull Requests (" @model.length ")"}}
 {{outlet}}
 
-<div class="container">
+<div class="container body-container">
   <h2 class="text-xl pb-3">
     {{@model.length}}
     open pull requests