Merge pull request #6 from JosunLP/FEATURE/DesignImprovements

Feature/design improvements

.editorconfig

@@ -0,0 +1,35 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+charset = utf-8
+
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,ts,svg,md}]
+charset = utf-8
+
+[*.{ts,js}]
+indent_style = tab
+indent_size = 4
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.{sass,scss}]
+indent_style = space
+indent_size = 2
+
+[*.{css,less}]
+indent_style = space
+indent_size = 2
+
+[*.{json,yml,yaml}]
+indent_style = space

.github/workflows/codeql-analysis.yml

@@ -12,61 +12,60 @@
 name: "CodeQL"
 
 on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
-  schedule:
-    - cron: '37 13 * * 4'
+    push:
+        branches: ["main"]
+    pull_request:
+        # The branches below must be a subset of the branches above
+        branches: ["main"]
+    schedule:
+        - cron: "37 13 * * 4"
 
 jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
+    analyze:
+        name: Analyze
+        runs-on: ubuntu-latest
+        permissions:
+            actions: read
+            contents: read
+            security-events: write
 
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+        strategy:
+            fail-fast: false
+            matrix:
+                language: ["javascript"]
+                # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+                # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+            # Initializes the CodeQL tools for scanning.
+            - name: Initialize CodeQL
+              uses: github/codeql-action/init@v2
+              with:
+                  languages: ${{ matrix.language }}
+                  # If you wish to specify custom queries, you can do so here or in a config file.
+                  # By default, queries listed here will override any specified in a config file.
+                  # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+                  # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+                  # queries: security-extended,security-and-quality
 
+            # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+            # If this step fails, then you should remove it and run the build manually (see below)
+            - name: Autobuild
+              uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+            # ℹ️ Command-line programs to run using the OS shell.
+            # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+            #   If the Autobuild fails above, remove it and uncomment the following three lines.
+            #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+            # - run: |
+            #   echo "Run, Build Application using script"
+            #   ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #   echo "Run, Build Application using script"
-    #   ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v2

public/options.html

@@ -20,7 +20,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/classes/settings.js"></script>
+      <script type="module" src="./js/settings.js"></script>
     </footer>
   </body>
 </html>

src/components/button.ts

@@ -0,0 +1,63 @@
+import { customButton } from "../types/buttonType";
+
+export class BasicButton {
+
+    private type: customButton;
+
+    private text: string;
+
+    private id: string | undefined;
+
+    private className: string | undefined;
+
+    constructor(type: customButton, text: string, id?: string, className?: string) {
+        this.type = type;
+        this.text = text;
+        this.id = id;
+        this.className = className;
+    }
+
+    public render(): string {
+        const result = document.createElement('button');
+        result.type = "button";
+        result.className = this.type;
+        result.textContent = this.text;
+
+		switch (this.type) {
+			case "primary":
+				result.className = "btn btn-primary";
+				break;
+			case "success":
+				result.className = "btn btn-success";
+				break;
+			case "danger":
+				result.className = "btn btn-danger";
+				break;
+			case "warning":
+				result.className = "btn btn-warning";
+				break;
+			case "info":
+				result.className = "btn btn-info";
+				break;
+			case "light":
+				result.className = "btn btn-light";
+				break;
+			case "dark":
+				result.className = "btn btn-dark";
+				break;
+			default:
+				result.className = "btn btn-primary";
+				break;
+		}
+
+        if (this.id) {
+            result.id = this.id;
+        }
+        if (this.className) {
+            result.className += ' ' + this.className;
+        }
+
+        return result.outerHTML;
+    }
+
+}

src/sass/_button.sass

@@ -0,0 +1,226 @@
+@import 'mixin'
+
+.btn-neutral
+  color: #fff
+  background-color: #000
+  border-color: #000
+  @include partialButton
+
+.btn-neutral:hover
+  color: #000
+  background-color: #fff
+  border-color: #fff
+
+.btn-neutral:focus, .btn-neutral.focus
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
+
+.btn-neutral.disabled, .btn-neutral:disabled
+  color: #fff
+  background-color: #000
+  border-color: #000
+
+.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active,
+.show > .btn-neutral.dropdown-toggle
+  color: #000
+  background-color: #fff
+  border-color: #fff
+
+.btn-primary
+  color: #fff
+  background-color: #007bff
+  border-color: #007bff
+  @include partialButton
+
+.btn-primary:hover
+  color: #fff
+  background-color: #0069d9
+  border-color: #0062cc
+
+.btn-primary:focus, .btn-primary.focus
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5)
+
+.btn-primary.disabled, .btn-primary:disabled
+  color: #fff
+  background-color: #007bff
+  border-color: #007bff
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
+.show > .btn-primary.dropdown-toggle
+  color: #fff
+  background-color: #0062cc
+  border-color: #005cbf
+
+.btn-secondary
+  color: #fff
+  background-color: #6c757d
+  border-color: #6c757d
+  @include partialButton
+
+.btn-secondary:hover
+  color: #fff
+  background-color: #5a6268
+  border-color: #545b62
+
+.btn-secondary:focus, .btn-secondary.focus
+  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5)
+
+.btn-secondary.disabled, .btn-secondary:disabled
+  color: #fff
+  background-color: #6c757d
+  border-color: #6c757d
+
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle
+  color: #fff
+  background-color: #545b62
+  border-color: #4e555b
+
+.btn-success
+  color: #fff
+  background-color: #28a745
+  border-color: #28a745
+  @include partialButton
+
+.btn-success:hover
+  color: #fff
+  background-color: #218838
+  border-color: #1e7e34
+
+.btn-success:focus, .btn-success.focus
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5)
+
+.btn-success.disabled, .btn-success:disabled
+  color: #fff
+  background-color: #28a745
+  border-color: #28a745
+
+.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
+.show > .btn-success.dropdown-toggle
+  color: #fff
+  background-color: #1e7e34
+  border-color: #1c7430
+
+.btn-info
+  color: #fff
+  background-color: #17a2b8
+  border-color: #17a2b8
+  @include partialButton
+
+.btn-info:hover
+  color: #fff
+  background-color: #138496
+  border-color: #117a8b
+
+.btn-info:focus, .btn-info.focus
+  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5)
+
+.btn-info.disabled, .btn-info:disabled
+  color: #fff
+  background-color: #17a2b8
+  border-color: #17a2b8
+
+.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
+.show > .btn-info.dropdown-toggle
+  color: #fff
+  background-color: #117a8b
+  border-color: #10707f
+
+.btn-warning
+  color: #212529
+  background-color: #ffc107
+  border-color: #ffc107
+  @include partialButton
+
+.btn-warning:hover
+  color: #212529
+  background-color: #e0a800
+  border-color: #d39e00
+
+.btn-warning:focus, .btn-warning.focus
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5)
+
+.btn-warning.disabled, .btn-warning:disabled
+  color: #212529
+  background-color: #ffc107
+  border-color: #ffc107
+
+.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
+.show > .btn-warning.dropdown-toggle
+  color: #212529
+  background-color: #d39e00
+  border-color: #c69500
+
+.btn-danger
+  color: #fff
+  background-color: #dc3545
+  border-color: #dc3545
+  @include partialButton
+
+.btn-danger:hover
+  color: #fff
+  background-color: #c82333
+  border-color: #bd2130
+
+.btn-danger:focus, .btn-danger.focus
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5)
+
+.btn-danger.disabled, .btn-danger:disabled
+  color: #fff
+  background-color: #dc3545
+  border-color: #dc3545
+
+.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
+.show > .btn-danger.dropdown-toggle
+  color: #fff
+  background-color: #bd2130
+  border-color: #b21f2d
+
+.btn-light
+  color: #212529
+  background-color: #f8f9fa
+  border-color: #f8f9fa
+  @include partialButton
+
+.btn-light:hover
+  color: #212529
+  background-color: #e2e6ea
+  border-color: #dae0e5
+
+.btn-light:focus, .btn-light.focus
+  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5)
+
+.btn-light.disabled, .btn-light:disabled
+  color: #212529
+  background-color: #f8f9fa
+  border-color: #f8f9fa
+
+.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
+.show > .btn-light.dropdown-toggle
+  color: #212529
+  background-color: #dae0e5
+  border-color: #d3d9df
+
+.btn-dark
+  color: #fff
+  background-color: #343a40
+  border-color: #343a40
+  @include partialButton
+
+.btn-dark:hover
+  color: #fff
+  background-color: #23272b
+  border-color: #1d2124
+
+.btn-dark:focus, .btn-dark.focus
+  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5)
+
+.btn-dark.disabled, .btn-dark:disabled
+  color: #fff
+  background-color: #343a40
+  border-color: #343a40
+
+.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
+.show > .btn-dark.dropdown-toggle
+  color: #fff
+  background-color: #1d2124
+  border-color: #171a1d

src/sass/_input.sass

@@ -0,0 +1,36 @@
+@import 'root'
+
+.text-input
+  width: 80%
+  height: 2rem
+  border: none
+  border-radius: 0.5rem
+  padding: 0.5rem
+  margin-bottom: 0.5rem
+  font-size: 1rem
+  font-family: 'Roboto', sans-serif
+  color: $seccondary-color
+  background-color: $background-color-content
+  &:focus
+    outline: none
+    background-color: $background-color-content-focus
+    color: $seccondary-color
+    box-shadow: 0px 0px 30px silver
+  &:disabled
+    background-color: $background-color-content-disabled
+    color: $seccondary-color-disabled
+    box-shadow: none
+  &:hover
+    background-color: $background-color-content-hover
+    color: $seccondary-color-hover
+    box-shadow: 0px 0px 30px silver
+  &:active
+    background-color: $background-color-content-active
+    color: $seccondary-color-active
+    box-shadow: 0px 0px 30px silver
+
+label
+  font-size: 1rem
+  font-family: 'Roboto', sans-serif
+  color: $main-font-color
+  margin-bottom: 0.5rem

src/sass/_mixin.sass

@@ -1,86 +1,93 @@
 @import "root"
 
 @mixin respond-to($media)
-	@if $media == handhelds
-		@media only screen and (max-device-width: 40rem)
-			@content
+  @if $media == handhelds
+    @media only screen and (max-device-width: 40rem)
+      @content
 
-	@else if $media == medium-screens
-		@media only screen and (min-device-width: 40rem)
-			@content
+  @else if $media == medium-screens
+    @media only screen and (min-device-width: 40rem)
+      @content
 
-	@else if $media == wide-screens
-		@media only screen and (min-width: 1000px)
-			@content
+  @else if $media == wide-screens
+    @media only screen and (min-width: 1000px)
+      @content
 
 @mixin partialButton
-	button
-		width: 5rem !important
-		height: 2rem !important
-		text-align: center !important
-		margin: 0.5rem !important
-		border-color: $seccond-color !important
-		border-radius: 0.5rem !important
+  width: 5rem !important
+  height: 2rem !important
+  text-align: center !important
+  margin: 0.5rem !important
+  border-color: $seccond-color !important
+  border-radius: 0.5rem !important
 
-		@include respond-to(handhelds)
-			font-size: 3rem
+  @include respond-to(handhelds)
+    font-size: 3rem
 
-		@include respond-to(medium-screens)
-			font-size: 1.5rem
+    @include respond-to(medium-screens)
+      font-size: 1.5rem
 
 @mixin hoverMe
-	&:hover
-		button
-			color: grey !important
+  &:hover
+    button
+      color: grey !important
 
 @mixin shadow
-	box-shadow: 0px 0px 30px silver
+  box-shadow: 0px 0px 30px silver
 
 @mixin noselect
-	-webkit-touch-callout: none
-	-webkit-user-select: none
-	-khtml-user-select: none
-	-moz-user-select: none
-	-ms-user-select: none
-	user-select: none
-	pointer-events: none
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  pointer-events: none
+
+.form-group
+  margin-left: 2rem
+  margin-right: 2rem
+  margin-bottom: 0.5rem
+  flex-wrap: wrap
+  justify-content: center
+  display: flex
 
 @mixin formBasic
-	display: block
-	padding: 2rem
-	background: $background-color-content
-	border-radius: 0.7rem
-	min-height: 20rem
-	margin: auto
-	margin-top: 2rem
-	margin-bottom: 2rem
-	@include shadow
+  display: block
+  padding: 2rem
+  background: $background-color-content
+  border-radius: 0.7rem
+  min-height: 20rem
+  margin: auto
+  margin-top: 2rem
+  margin-bottom: 2rem
+  @include shadow
 
-	@include respond-to(handhelds)
-		font-size: 2.5em
-		margin-left: -0.8em
-		margin-right: -0.8em
-		border-radius: 0
+  @include respond-to(handhelds)
+    font-size: 2.5em
+    margin-left: -0.8em
+    margin-right: -0.8em
+    border-radius: 0
 
-	@include respond-to(medium-screens)
-		max-width: 40rem
+  @include respond-to(medium-screens)
+    max-width: 40rem
 
-	@include respond-to(wide-screens)
-		max-width: 40rem
+  @include respond-to(wide-screens)
+    max-width: 40rem
 
-	input
-		@include respond-to(handhelds)
-			font-size: 3rem
-			border-radius: 0.5rem
+  input
+    @include respond-to(handhelds)
+      font-size: 3rem
+      border-radius: 0.5rem
 
-	.check
-		position: static
-		@include respond-to(handhelds)
-			width: 2rem !important
-			height: 2rem !important
+  .check
+    position: static
+    @include respond-to(handhelds)
+      width: 2rem !important
+      height: 2rem !important
 
-	button
-		@include respond-to(handhelds)
-			font-size: 3rem
-			padding: 1rem
-			border-radius: 1rem
+  button
+    @include respond-to(handhelds)
+      font-size: 3rem
+      padding: 1rem
+      border-radius: 1rem

src/sass/_root.sass

@@ -1,8 +1,20 @@
 $main-font: 'Ubuntu', 'Staatliches'
 $main-font-color: white
 $main-font-color-hover: lightgrey
+$main-font-color-focus: lightgrey
+$main-font-color-disabled: lightgrey
+$main-font-color-active: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
-$seccond-color: lightgrey
+$seccond-color: #6c757d
+$seccondary-color: darkgrey
+$seccondary-color-hover: black
+$seccondary-color-focus: black
+$seccondary-color-disabled: black
+$seccondary-color-active: black
 $background-color: #77B2FF
 $background-color-content: rgb(198, 223, 255)
+$background-color-content-hover: rgb(198, 223, 255)
+$background-color-content-focus: rgb(198, 223, 255)
+$background-color-content-active: rgb(198, 223, 255)
+$background-color-content-disabled: rgb(198, 223, 255)
 $logo-image: url('../icons/icon128.png')

src/sass/app.sass

@@ -1,41 +1,50 @@
 @import 'root'
 @import 'mixin'
 @import 'content'
+@import 'button'
+@import 'input'
 
 body
-    height: 30rem
-    width: 30rem
-    background-color: $background-color
-    text-align: center
+  height: 30rem
+  width: 30rem
+  background-color: $background-color
+  text-align: center
+  margin: auto
+  padding: 1rem
+  color: $main-font-color
+
+  p
+    font-size: 1rem
+    font-weight: bold
     margin: auto
     padding: auto
     color: $main-font-color
-
-    @include partialButton
+    text-align: center
+    font-family: 'Roboto', sans-serif
 
 h1, h2
-    @include noselect
+  @include noselect
 
 form
-    @include formBasic
+  @include formBasic
 
 .logo
-    width: 5rem
-    height: auto
-    padding-top: 2rem
-    @include noselect
+  width: 5rem
+  height: auto
+  padding-top: 2rem
+  @include noselect
 
 svg
-    @include noselect
+  @include noselect
 
 table
-    color: $main-font-color !important
+  color: $main-font-color !important
 
-    th
-        @include noselect
+  th
+    @include noselect
 
 a
-    color: $main-font-color
+  color: $main-font-color
 
-    &:hover
-        color: $background-color-content
+  &:hover
+    color: $background-color-content

src/settings.ts

@@ -1,4 +1,5 @@
-import { Session } from "./session.js";
+import { Session } from "./classes/session.js";
+import { BasicButton } from "./components/button.js";
 
 class Settings {
 
@@ -10,13 +11,15 @@ class Settings {
 
     private async renderSettings(): Promise<void> {
         const settings = <HTMLDivElement>document.getElementById('settings');
+		const saveButton = new BasicButton('success', 'Save', 'saveSettings').render();
         settings.innerHTML = `
             <div class="form-group">
-                <label for="contentTest">Content Test</label>
-                <input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+                <input type="text" class="form-control text-input" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+				<label for="contentTest">Content Test</label>
             </div>
-            <button type="button" class="btn btn-primary" id="saveSettings">Save</button>
         `;
+		settings.innerHTML += saveButton;
+
         const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
         saveSettings.addEventListener('click', () => {
             this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;

src/types/buttonType.ts

@@ -0,0 +1 @@
+export type customButton = "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";