optimized-react-component-library-xyz123 0.1.136 → 0.1.138

package/src/css/styles.css

@@ -2,8 +2,17 @@
 @import url('https://assets.soracom.io/fonts/aeonik/Aeonik.css');
 
 /* ---------- GENERAL ---------- */
+:root{
+    --background:#dddddd;
+    --text:#000000;
+    --action:#6e3282;
+    --error:#8e0039;
+    --main:#ffffff;
+    --info: #545454;
+    --orientation-active:#dc7d0a;
+    --background-second:#200827;
+}
 
-html,
 body,
 #root {
   min-height: 100vh;
@@ -20,7 +29,7 @@ body {
   font-family: Arial;
   font-size: 1.6rem;
   font-weight: 400;
-  background-color: #dddddd;
+  background-color: var(--background);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -32,7 +41,7 @@ body a {
 
   display: inline-flex;
   align-items: center;
-  color: #6e3282;
+  color: var(--action);
 }
 
 body a:hover {
@@ -86,7 +95,7 @@ h4 {
 section {
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: var(--main);
   padding: 3.6rem;
   margin-bottom: 1.6rem;
   border-radius: 0.4rem;
@@ -95,9 +104,9 @@ section {
 }
 /* ?? Make changes in html ?? ----
 .pts-button{
-  background-color: #6e3282;
-  border: 2px solid #6e3282;
-  color: #ffffff;
+  background-color: var(--action);
+  border: 2px solid var(--action);
+  color: var(--main);
   padding: 8px 20px;
   border-radius: 8px;
   font-size: 16px;
@@ -107,9 +116,9 @@ section {
 
 .pts-button:focus,
 .pts-button:hover{
-  background-color: #ffffff;
-  border: 2px solid #6e3282;
-  color: #6e3282;
+  background-color: var(--main);
+  border: 2px solid var(--action);
+  color: var(--action);
   transition: 0.2s;
 }
 --- ?? Make changes in html ?? */
@@ -123,7 +132,7 @@ section {
 .pts-form-step-header {
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: var(--main);
   padding: 3.6rem;
   margin-bottom: 0;
   border-radius: 0.4rem;
@@ -176,7 +185,7 @@ fieldset {
 
 .pts-root-about {
   font-size: 1.4rem;
-  color: #545454;
+  color: var(--info);
   margin: 0;
   margin-bottom: 0.4rem;
 }
@@ -184,7 +193,7 @@ fieldset {
 .pts-root-question input[type='text']:focus,
 .pts-root-question input[type='email']:focus,
 .pts-root-question input[type='tel']:focus {
-  border: 0.2rem solid #6e3282;
+  border: 0.2rem solid var(--action);
 }
 
 .pts-root-error {
@@ -200,14 +209,14 @@ fieldset {
   height: 1.8rem;
   border-radius: 1rem;
   justify-content: center;
-  color: #ffffff;
-  background-color: #8e0039;
+  color: var(--main);
+  background-color: var(--error);
   margin-right: 9px;
 }
 
 .errorText,
 .pts-root-mandatoryAsterisk {
-  color: #8e0039;
+  color: var(--error);
 }
 
 .pts-root-mandatoryAsterisk {
@@ -218,7 +227,7 @@ fieldset {
 .pts-root-question-input-error-border,
 .pts-root-question-input-error-border,
 .pts-root-question-input-error-border {
-  border: 0.2rem solid #8e0039 !important;
+  border: 0.2rem solid var(--error) !important;
 }
 
 .sr-only {
@@ -268,7 +277,7 @@ textarea:focus-visible,
   padding-left: 1.6rem;
   padding-right: 1.6rem;
   border-radius: 0.8rem;
-  border: 1px solid #545454;
+  border: 1px solid var(--info);
   height: 4.8rem;
 }
 
@@ -280,7 +289,7 @@ textarea:focus-visible,
   left: 0;
   padding: 15px 20px;
   background: #eaf1f9;
-  border-bottom: 4px solid #6e3282;
+  border-bottom: 4px solid var(--action);
   z-index: 9999;
   width: 100vw;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
@@ -317,8 +326,8 @@ textarea:focus-visible,
   text-align: center;
   font-size: 1.4rem;
   padding: 8px 15px;
-  background-color: #6e3282;
-  border: 2px solid #6e3282;
+  background-color: var(--action);
+  border: 2px solid var(--action);
   color: white;
   cursor: pointer;
   border-radius: 8px;
@@ -327,8 +336,8 @@ textarea:focus-visible,
 .pts-cookieBanner button:focus,
 .pts-cookieBanner button:hover {
   background-color: #eaf1f9;
-  border: 2px solid #6e3282;
-  color: #6e3282;
+  border: 2px solid var(--action);
+  color: var(--action);
   transition: 0.2s;
 }
 
@@ -356,7 +365,7 @@ textarea:focus-visible,
 .MoreInfoIcon svg {
   width: 1.6rem;
   height: 1.6rem;
-  background-color: #6e3282;
+  background-color: var(--action);
   border-radius: 50%;
   padding: 0.4rem;
   flex-shrink: 0;
@@ -365,7 +374,7 @@ textarea:focus-visible,
 
 .pts-serviceHeadlineAndBody-container a svg path,
 .MoreInfoIcon svg path {
-  fill: #ffffff;
+  fill: var(--main);
 }
 
 .pts-moreinfo-list {
@@ -377,7 +386,7 @@ textarea:focus-visible,
 .pts-moreinfo-list svg {
   width: 1.6rem;
   height: 1.6rem;
-  background-color: #6e3282;
+  background-color: var(--action);
   border-radius: 50%;
   padding: 0.4rem;
   flex-shrink: 0;
@@ -405,7 +414,7 @@ textarea:focus-visible,
   line-height: 2.4rem;
   font-size: 1.8rem;
   background-color: #747474;
-  color: #ffffff;
+  color: var(--main);
   border-radius: 50%;
   margin-bottom: 1.2rem;
   display: flex;
@@ -414,11 +423,11 @@ textarea:focus-visible,
 }
 
 .pts-stepperDotActive {
-  background-color: #dc7d0a;
+  background-color: var(--orientation-active);
 }
 
 .pts-stepperDotDone {
-  background-color: #6e3282;
+  background-color: var(--action);
 }
 
 .pts-stepper-step:not(:last-child)::after {
@@ -444,9 +453,9 @@ textarea:focus-visible,
 
 .pts-forwardButton,
 .pts-backButton {
-  background-color: #6e3282;
-  border: 2px solid #6e3282;
-  color: #ffffff;
+  background-color: var(--action);
+  border: 2px solid var(--action);
+  color: var(--main);
   padding: 8px 20px;
   border-radius: 8px;
   font-size: 1.6rem;
@@ -457,6 +466,7 @@ textarea:focus-visible,
 .pts-start-applicationButton {
   align-self: start !important;
   margin-left: 0px !important;
+  margin-top: 3.6rem;
 }
 
 .pts-backButton:focus,
@@ -465,9 +475,9 @@ textarea:focus-visible,
 .pts-forwardButton:hover,
 .btn-upload:focus,
 .btn-upload:hover {
-  background-color: #ffffff;
-  border: 2px solid #6e3282;
-  color: #6e3282;
+  background-color: var(--main);
+  border: 2px solid var(--action);
+  color: var(--action);
   transition: 0.2s;
 }
 
@@ -477,7 +487,7 @@ textarea:focus-visible,
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
-  border: 1.5px solid #545454;
+  border: 1.5px solid var(--info);
   border-radius: 3.1rem;
   margin: 0;
   margin-right: 0.8rem;
@@ -495,7 +505,7 @@ textarea:focus-visible,
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
-  background-color: #6e3282;
+  background-color: var(--action);
 }
 
 .pts-radioMultiple-container label {
@@ -514,15 +524,15 @@ textarea:focus-visible,
   margin-right: 0.8rem;
   flex-shrink: 0;
 
-  background-color: #ffffff;
-  border: 0.15rem solid #545454;
+  background-color: var(--main);
+  border: 0.15rem solid var(--info);
   border-radius: 0.2rem;
 
   cursor: pointer;
 }
 
 .pts-multipleCheckboxes-container input[type='checkbox']:checked {
-  background-color: #6e3282;
+  background-color: var(--action);
   border: none;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
 }
@@ -557,8 +567,8 @@ textarea:focus-visible,
   top: -1000px;
   left: 1.8rem;
   transition: top 0.3s ease-in-out;
-  background-color: #ffffff;
-  color: #6e3282;
+  background-color: var(--main);
+  color: var(--action);
 }
 
 .pts-skipLink-container a:focus {
@@ -571,14 +581,14 @@ textarea:focus-visible,
   padding: 0px 70px;
   align-items: center;
   justify-content: space-between;
-  background-color: #ffffff;
+  background-color: var(--main);
 }
 
 .pts-languageButton {
   display: flex;
   background: transparent;
   border: transparent;
-  color: #6e3282;
+  color: var(--action);
   cursor: pointer;
 }
 
@@ -594,7 +604,13 @@ textarea:focus-visible,
   min-height: 14rem;
   align-items: center;
   width: 100%;
-  background-color: #200827;
+  background-color: var(--ackground-second);
+}
+
+ .pts-footer-content{
+    display: flex;
+    align-items: center;
+    width: 100%;
 }
 
 .pts-footer-logo {
@@ -608,6 +624,7 @@ textarea:focus-visible,
 .pts-footer-linkList {
   flex: 1;
   justify-content: center;
+  margin-left: -160px;
 }
 
 .pts-footer-linkList ul {
@@ -621,7 +638,7 @@ textarea:focus-visible,
 }
 
 .pts-footer-linkList a {
-  color: #ffffff;
+  color: var(--main);
   text-underline-offset: 3px;
   white-space: nowrap;
 }
@@ -629,7 +646,7 @@ textarea:focus-visible,
 .pts-footer-linkList a span {
   padding-left: 36px;
   padding-right: 36px;
-  color: #ffffff;
+  color: var(--main);
 }
 
 .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
@@ -637,7 +654,7 @@ textarea:focus-visible,
   width: 1px;
   height: 24px;
   border: 0.5px solid;
-  color: #ffffff;
+  color: var(--main);
   position: absolute;
   box-sizing: border-box;
 }
@@ -650,13 +667,13 @@ textarea:focus-visible,
 
 .pts-about {
   margin-bottom: 0.4rem;
-  color: #545454;
+  color: var(--info);
   font-size: 1.4rem;
 }
 
 .textfield-about {
   margin-bottom: 0.4rem;
-  color: #545454;
+  color: var(--info);
   font-size: 1.4rem;
 }
 
@@ -669,11 +686,11 @@ textarea:focus-visible,
   font-family: arial;
   font-size: 1.6rem;
   border-radius: 8px;
-  border: 0.1px solid #545454;
+  border: 0.1px solid var(--info);
 }
 
 .pts-textArea-container textarea:focus {
-  border: 0.2rem solid #6e3282;
+  border: 0.2rem solid var(--action);
 }
 
 .pts-textarea-counter-error-container {
@@ -704,7 +721,7 @@ textarea:focus-visible,
   display: flex;
   align-items: center;
   background-color: transparent;
-  color: #6e3282;
+  color: var(--action);
   border: none;
   cursor: pointer;
   font-size: 1.3rem;
@@ -737,8 +754,6 @@ textarea:focus-visible,
 
 .pts-root-answer,
 .answer {
-  width: 66%;
-  margin-bottom: 8px;
 }
 
 .pts-root-answer ul {
@@ -767,7 +782,7 @@ textarea:focus-visible,
 }
 
 .no-answer-preview-page {
-  color: #545454;
+  color: var(--info);
 }
 
 .pts-preview-header {
@@ -889,8 +904,8 @@ textarea:focus-visible,
   padding: 1.6rem 2.4rem 1.6rem 2.4rem;
   margin-top: 3.6rem;
   border-radius: 0.8rem;
-  border: 0.1rem solid #8e0039;
-  border-left: 4rem solid #8e0039;
+  border: 0.1rem solid var(--error);
+  border-left: 4rem solid var(--error);
   position: relative;
 }
 
@@ -901,8 +916,8 @@ textarea:focus-visible,
   width: 1.6rem;
   height: 1.6rem;
   border-radius: 50%;
-  background-color: #ffffff;
-  color: #8e0039;
+  background-color: var(--main);
+  color: var(--error);
   align-items: center;
   font-size: 1.4rem;
 }
@@ -923,7 +938,7 @@ textarea:focus-visible,
 }
 
 .errorSummary-text {
-  color: #8e0039;
+  color: var(--error);
 }
 
 /* ---------- FILE UPLOAD ---------- */
@@ -936,7 +951,7 @@ textarea:focus-visible,
 
 /* Drop Zone */
 .files-drop-zone {
-  border: 2px dashed #6e3282;
+  border: 2px dashed var(--action);
   border-radius: 12px;
   padding: 3rem 2rem;
   text-align: center;
@@ -948,31 +963,31 @@ textarea:focus-visible,
 }
 
 .files-drop-zone:hover {
-  border-color: #6e3282;
+  border-color: var(--action);
   background-color: #f5ebf8;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
 }
 
 .files-drop-zone.drag-active {
-  border-color: #6e3282;
+  border-color: var(--action);
   background-color: #f5ebf8;
   transform: scale(1.02);
   box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
 }
 
 .files-drop-zone:focus {
-  /* border-color: #6e3282;
+  /* border-color: var(--action);
   background-color: #f5ebf8;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
   transform: translateY(-3px);
 
   animation: focusPulse 1s ease-in-out infinite;
-  box-shadow: inset 0 0 0 4px #6e3282;
+  box-shadow: inset 0 0 0 4px var(--action);
   
   border: none; */
-  border: 0.2rem solid #6e3282;
+  border: 0.2rem solid var(--action);
 }
 
 .files-drop-zone:focus-visible {
@@ -1028,7 +1043,7 @@ textarea:focus-visible,
 }
 
 .files-allowed-types strong {
-  color: #6e3282;
+  color: var(--action);
 }
 
 .files-input-hidden {
@@ -1263,12 +1278,12 @@ textarea:focus-visible,
 }
 
 .action-btn.remove {
-  color: #6e3282;
-  border-color: #6e3282;
+  color: var(--action);
+  border-color: var(--action);
 }
 
 .action-btn.remove:hover {
-  background-color: #6e3282;
+  background-color: var(--action);
   color: white;
 }
 
@@ -1367,7 +1382,7 @@ textarea:focus-visible,
 }
 
 .filePickButton.error {
-  background: #8e0039 !important;
+  background: var(--error) !important;
   color: #fff !important;
 }
 
@@ -1404,7 +1419,7 @@ textarea:focus-visible,
 }
 
 /* .uploadedDot.uploadFailed {
-  background: var(--red-green-red, #8e0039);
+  background: var(--red-green-red, var(--error));
 
   color: var(--neutral-300, #fff);
 } */
@@ -1497,8 +1512,8 @@ textarea:focus-visible,
 
 .DropZone svg {
   border-radius: 55%;
-  background: var(--purple-purple-900-primary, #6e3282);
-  border: 6px solid #6e3282;
+  background: var(--purple-purple-900-primary, var(--action));
+  border: 6px solid var(--action);
   margin-top: 17px;
   margin-right: 16px;
   height: 1.5rem;
@@ -1553,7 +1568,7 @@ textarea:focus-visible,
 
 .fileItem {
   display: grid !important;
-  grid-template-columns: 1fr 85% 1fr;
+  grid-template-columns: 26px 1fr 60px;
   margin: 0 1px 1.3rem 0;
 }
 
@@ -1568,11 +1583,10 @@ textarea:focus-visible,
 
 .selectedFilesLinkButton {
   display: flex;
-  align-items: center;
   padding: 0;
   stroke-width: 2px;
-  stroke: var(--purple-900-primary, #6e3282);
-  color: var(--purple-900-primary, #6e3282);
+  stroke: var(--purple-900-primary, var(--action));
+  color: var(--purple-900-primary, var(--action));
   font-size: 1.6rem;
   line-height: 24px;
   text-decoration: none;
@@ -1582,7 +1596,7 @@ textarea:focus-visible,
 }
 
 .selectedFilesLinkButton:hover {
-  color: var(--purple-900-primary, #6e3282);
+  color: var(--purple-900-primary, var(--action));
   text-decoration: underline;
 }
 
@@ -1624,7 +1638,7 @@ textarea:focus-visible,
 }
 
 .errorMessageAddingFile {
-  color: var(--red-green-red, #8e0039);
+  color: var(--red-green-red, var(--error));
   font-size: 1.3rem;
   line-height: 1.6rem;
   padding-top: 0.8rem !important;
@@ -1663,7 +1677,7 @@ textarea:focus-visible,
 }
 .uploadIndicator.uploadFailed {
   width: 10%;
-  background: var(--red-green-red, #8e0039);
+  background: var(--red-green-red, var(--error));
 }
 .uploadIndicator.uploadLoading {
   width: 50%;