Modified quick use button

- Changed the quick use button to a simpler, more obvious variation.
eclipse-thingweb · Dec 6, 2023 · 2b5f258 · 2b5f258
1 parent 3a3b678
commit 2b5f258
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 35 deletions.
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
@@ -18,7 +18,7 @@
  * for the examples menu, such as displaying all the TD and TM examples,
  * as well as filtering them by categories, a search function to find
  * specific examples and a use a template example to directly added to an editor where it can be utilized and modified.
- * In the future the option to see short snipets of the most important part of the example, might also be implemented.
+ * In the future the option to see short snippets of the most important part of the example, might also be implemented.
  */
 
 import { createIde, ideCount, tabsLeft } from "./editor"
@@ -296,9 +296,10 @@ async function getAllExamples(categoryId, thingType) {
         //Create the example quick access button
         const quickButton = document.createElement('button')
         quickButton.classList.add("example__header--quick")
-        const quickButtonIcon = document.createElement('i')
-        quickButtonIcon.classList.add("fa-solid", "fa-file-import")
-        quickButton.appendChild(quickButtonIcon)
+        quickButton.innerText = "Use"
+        // const quickButtonIcon = document.createElement('i')
+        // quickButtonIcon.classList.add("fa-solid", "fa-file-import")
+        // quickButton.appendChild(quickButtonIcon)
         exampleHeader.appendChild(quickButton)
 
 

diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
@@ -322,7 +322,7 @@
                             background-color: var(--clr-neutral-50);
                             border-radius: 5px;
                             width: fit-content;
-                            padding: 2rem;
+                            padding: 1rem;
                             box-shadow: 0px 0px 5px 0px var(--clr-shadow);
 
                             &__header {
@@ -332,12 +332,12 @@
                                 gap: 2rem;
 
                                 &--name {
-                                    width: 100%;
+                                    flex: 1;
                                     display: flex;
                                     flex-direction: row;
                                     align-items: center;
                                     justify-content: center;
-                                    gap: 2rem;
+                                    gap: 1rem;
                                     cursor: pointer;
                                     transition: all 250ms ease-in-out 250ms;
 
@@ -358,22 +358,17 @@
 
                                 &--quick {
                                     width: fit-content;
-                                    background-color: transparent;
+                                    background-color: var(--clr-primary-500);
                                     border: none;
-                                    border-left: 2px solid var(--clr-primary-500);
-                                    padding: 1rem 1rem 1rem 2rem;
+                                    border-radius: 5px;
+                                    padding: .75rem 1.5rem;
                                     cursor: pointer;
-
-                                    i {
-                                        font-size: var(--fs-i);
-                                        color: var(--clr-primary-500);
-                                        transition: color 250ms ease-in-out 250ms;
-                                    }
+                                    font-weight: bold;
+                                    color: var(--clr-neutral-50);
+                                    transition: background-color 250ms ease-in-out;
 
                                     &:hover {
-                                        i {
-                                            color: var(--clr-primary-700);
-                                        }
+                                        background-color: var(--clr-primary-700);
                                     }
                                 }
                             }
@@ -382,7 +377,7 @@
                                 pointer-events: none;
                                 display: flex;
                                 flex-direction: column;
-                                align-items: center;
+                                align-items: flex-start;
                                 justify-content: center;
                                 flex-wrap: wrap;
                             }

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -1967,7 +1967,7 @@ main .console {
   border-radius: 5px;
   width: -moz-fit-content;
   width: fit-content;
-  padding: 2rem;
+  padding: 1rem;
   box-shadow: 0px 0px 5px 0px var(--clr-shadow);
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header {
@@ -1977,12 +1977,12 @@ main .console {
   gap: 2rem;
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name {
-  width: 100%;
+  flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 2rem;
+  gap: 1rem;
   cursor: pointer;
   transition: all 250ms ease-in-out 250ms;
 }
@@ -1998,25 +1998,23 @@ main .console {
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick {
   width: -moz-fit-content;
   width: fit-content;
-  background-color: transparent;
+  background-color: var(--clr-primary-500);
   border: none;
-  border-left: 2px solid var(--clr-primary-500);
-  padding: 1rem 1rem 1rem 2rem;
+  border-radius: 5px;
+  padding: 0.75rem 1.5rem;
   cursor: pointer;
+  font-weight: bold;
+  color: var(--clr-neutral-50);
+  transition: background-color 250ms ease-in-out;
 }
-.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i {
-  font-size: var(--fs-i);
-  color: var(--clr-primary-500);
-  transition: color 250ms ease-in-out 250ms;
-}
-.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover i {
-  color: var(--clr-primary-700);
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover {
+  background-color: var(--clr-primary-700);
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__content {
   pointer-events: none;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
 }