feat(bildungs): Update color scheme

Agathebadia · Mar 25, 2024 · 2d7b30c · 2d7b30c
1 parent c8326f8
commit 2d7b30c
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 14 deletions.
diff --git a/app/components/navbar/index.hbs b/app/components/navbar/index.hbs
@@ -1,4 +1,4 @@
-<nav class="bg-gray-800">
+<nav>
   <div class="mx-auto px-2 sm:px-6 lg:px-8">
     <div class="relative flex h-16 items-center justify-between">
       <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">

diff --git a/app/index.html b/app/index.html
@@ -14,7 +14,7 @@
 
     {{content-for "head-footer"}}
   </head>
-  <body class="bg-slate-200">
+  <body>
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>

diff --git a/app/main.css b/app/main.css
@@ -2,7 +2,18 @@
 /* General */
 
 html  {
-  background-color: #ADADAD;
+  background-color: #202834;
+}
+
+body {
+  background-color: #202834;
+  color: #C4C7C8;
+}
+
+/* Navbar */
+
+nav {
+  background-color: #46A29F;
 }
 
 /* Headers */
@@ -20,11 +31,15 @@ div.h1 {
 /* Accordion eligibility */
 #eligibility-button-select {
   background-color: #83677b;
-  color: #d4d3d3;
+  color: #C4C7C8;
+}
+
+#accordion-flush {
+  border: 3px solid #64485c;
 }
 
-#accordion-flush #accordion-main-body {
-  color: #d4d3d3;
+#accordion-main-body {
+  color: #C4C7C8;
   background-color: #64485c;
 }
 /* Table of content */
@@ -50,13 +65,39 @@ div.h1 {
 }
 
 div.table-of-contents {
-  border: 3px solid;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0.5em;
   width: fit-content;
+  border: 3px solid #64485c;
+  background-color: #83677b;
+  color: #C4C7C8;
+  border-radius: 3px;
 }
 
 div.table-of-contents li {
   margin: 0.5em 0 0.5em 0;
 }
+
+table, caption {
+    background-color: #83677b;
+      color: #C4C7C8;
+}
+
+#templatesAndQuotes {
+  width: 80%;
+      background-color: #83677b;
+        color: #C4C7C8;
+        padding: 3px;
+        border: 3px solid #64485c;
+        border-radius: 3px;
+}
+
+/* Buttons */
+
+.copy-to-clipboard {
+  border: 3px solid #64485c;
+  border-radius: 3px;
+        color: #C4C7C8;
+        padding: 4px;
+}
diff --git a/app/routes/home/template.hbs b/app/routes/home/template.hbs
@@ -36,7 +36,7 @@ TODO:
 <div id="general-definition">
     <h1>What is Bildungsurlaub?</h1>
 
-    <p class="m-8"><em><q>In most federal states, employees are offered the opportunity to take time off work to take advantage of
+    <p class="m-8" id="templatesAndQuotes"><em><q>In most federal states, employees are offered the opportunity to take time off work to take advantage of
         opportunities
         for further education. This is known as "Bildungsurlaub" or "Bildungsfreistellung".
 
@@ -45,7 +45,7 @@ TODO:
         to sources that provide detailed information on requirements and further information.</q></em> - InfoWeb Weiterbildung
     </p>
 
-    <p class="m-8"><em><q>Educational leave is the legal entitlement of employees in [Germany] to time off work to participate in
+    <p class="m-8" id="templatesAndQuotes"><em><q>Educational leave is the legal entitlement of employees in [Germany] to time off work to participate in
     recognized further education events with continued payment of remuneration. </q></em> - Berlin.de</p>
 </div>
 <div id="definition-by-law">
@@ -104,7 +104,7 @@ TODO:
 
     <p>Here is a template you can use in English (scroll down for the German template):</p>
 
-    <p class="m-2" id="copyEnglishTemplateToClipboard">To the attention of {INSERT DEPARTMENT}:
+    <p class="m-2" id="templatesAndQuotes">To the attention of {INSERT DEPARTMENT}:
       I would like to request an approval for an educational leave (Bildungsurlaub) between {INSERT STARTING DATE} and {END DATE} ({INSERT EXACT NUMBER OF DAYS} days).
       As stated by the {NAME OF THE STATE YOUR ARE WORKING IN} law, as an employee, I'm entitled to days for further education. I would like to use those days for {NAME OF THE COURSE}.
       The course consists of:
@@ -118,8 +118,9 @@ TODO:
       Best,
         {YOUR NAME}
     </p>
-    <button class="border-solid	border-black	" {{on "click" (fn this.copyContent "copyEnglishTemplateToClipboard")}}>Copy to clipboard!</button>
-        <p class="m-2" id="copyGermanTemplateToClipboard">Zu Händen von {ABTEILUNG EINFÜGEN}:
+    <div class="text-right"><button class=" border-solid	border-black  bg-gray-900 copy-to-clipboard" {{on "click" (fn this.copyContent "copyEnglishTemplateToClipboard")}}>Copy to clipboard!</button>
+    </div>
+        <p class="m-2" id="templatesAndQuotes">Zu Händen von {ABTEILUNG EINFÜGEN}:
         Ich möchte eine Genehmigung für einen Bildungsurlaub zwischen {Beginndatum einfügen} und {Enddatum} (genaue Anzahl der
         Tage einfügen) beantragen.
         Gemäß dem Gesetz {NAME DES STAATES IN DEM SIE ARBEITEN} habe ich als Arbeitnehmer Anspruch auf Tage zur Weiterbildung.
@@ -133,8 +134,10 @@ TODO:
 
         {NAME}
         </p>
-        <button class="border-solid	border-black	"
+        <div class="text-right">
+        <button class="border-solid	border-black copy-to-clipboard bg-gray-900"
         {{on "click" (fn this.copyContent "copyGermanTemplateToClipboard")}}>Copy to clipboard!</button>
+        </div>
 </div>
 <div id="after-your-bildungsurlaub">
 

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,6 +1,6 @@
   {{page-title "Bildungsurlaub"}}
 <Navbar />
-<h1 class="m-6 flex justify-center" id="title">Bildungsurlaub</h1>
+<h1 class="m-6 flex justify-center" id="title">How to: Bildungsurlaub</h1>
 <div class="m-6">
   {{outlet}}
 </div>