fix post-deployment colors

spacemeshos · Oct 28, 2024 · 522407e · 522407e
1 parent d249244
commit 522407e
Showing 1 changed file with 68 additions and 15 deletions.
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -12,22 +12,75 @@
 
 :root {
   --feedback-primary-color: #3affa7;
-  --feedback-secondary-color: orange;
-  --feedback-text-color: #ffffff;
+  --feedback-secondary-color: #313131;
+  --feedback-text-color: var(--feedback-light-color);
   --feedback-white-color: #3affa7;
-  --feedback-highlight-color: #ffb422;
-  --feedback-light-color: #313131;
+  /* --feedback-highlight-color: #ffb422; */
+  --feedback-light-color: #FFFF;
   --feedback-dark-color: #191919;
-      /* Feedback button*/
-      --feedback-button-border-radius: 20px;
-      --feedback-button-dark-bg-color: var(--feedback-dark-color);
-      --feedback-button-dark-text-color: var(--feedback-white-color);
-      --feedback-button-light-bg-color: var(--feedback-white-color);
-      --feedback-button-light-text-color: var(--feedback-dark-color);
-      --feedback-button-text-font-size: var(--feedback-text-font-size);
-      --feedback-button-text-font-weight: 600;
-      --feedback-button-z-index: 300;
+  /* Feedback button*/
+  --feedback-button-border-radius: 20px;
+  --feedback-button-dark-bg-color: var(--feedback-dark-color);
+  --feedback-button-dark-text-color: var(--feedback-white-color);
+  --feedback-button-light-bg-color: var(--feedback-white-color);
+  --feedback-button-light-text-color: var(--feedback-dark-color);
+  --feedback-button-text-font-size: var(--feedback-text-font-size);
+  --feedback-button-text-font-weight: 600;
+  --feedback-button-z-index: 300;
+  /*Modal*/
+  --feedback-modal-button-bg-color: var(--feedback-dark-color);
+  --feedback-modal-button-bg-color-active: var(--feedback-dark-color);
+  --feedback-modal-button-border-color: var(--feedback-secondary-color);
+  --feedback-modal-button-border-color-active: var(--feedback-primary-color);
+  --feedback-modal-button-border-radius: 4px;
+  --feedback-modal-button-font-size: var(--feedback-text-font-size);
+  --feedback-modal-button-icon-color: var(--feedback-primary-color);
+  --feedback-modal-button-icon-color-active: var(--feedback-primary-color);
+  --feedback-modal-button-submit-bg-color: var(--feedback-primary-color);
+  --feedback-modal-button-submit-bg-color-hover: var(--feedback-primary-color);
+  --feedback-modal-button-submit-border-color-hover: var(--feedback-primary-color);
+  --feedback-modal-button-submit-text-color: var(--feedback-dark-color);
+  --feedback-modal-button-submit-text-color-hover: var(--feedback-dark-color);
+  --feedback-modal-button-text-color: var(--feedback-primary-color);
+  --feedback-modal-button-text-color-active: var(--feedback-primary-color);
+  --feedback-modal-close-bg-color: var(--feedback-dark-color);
+  --feedback-modal-close-color: var(--feedback-primary-color);
+  --feedback-modal-content-bg-color: var(--feedback-dark-color);
+  --feedback-modal-content-border-color: var(--feedback-light-color);
+  --feedback-modal-content-border-radius: 8px;
+  --feedback-modal-content-font-family: var(--feedback-font-family);
+  --feedback-modal-content-position-bottom: 10px;
+  --feedback-modal-content-position-left: 10px;
+  --feedback-modal-content-position-right: 10px;
+  --feedback-modal-content-position-top: 10px;
+  --feedback-modal-content-text-color: var(--feedback-text-color);
+  --feedback-modal-content-z-index: 300;
+  --feedback-modal-element-hover-border-color: var(--feedback-primary-color);
+  --feedback-modal-element-selected-border-color: var(--feedback-primary-color);
+  --feedback-modal-footer-link: var(--feedback-light-color);
+  --feedback-modal-header-font-family: var(--feedback-font-family);
+  --feedback-modal-header-font-size: var(--feedback-heading-font-size);
+  --feedback-modal-header-font-weight: 500;
+  --feedback-modal-header-text-color: var(--feedback-primary-color);
+  --feedback-modal-input-bg-color: var(--feedback-secondary-color);
+  --feedback-modal-input-heading: var(--feedback-light-color);
+  --feedback-modal-input-border-color: transparent;
+  --feedback-modal-input-border-color-focused: transparent;
+  --feedback-modal-input-border-radius: 4px;
+  --feedback-modal-input-font-size: var(--feedback-text-font-size);
+  --feedback-modal-input-text-color: var(--feedback-text-color);
+  --feedback-modal-message-font-size: var(--feedback-text-font-size);
+  --feedback-modal-modal-wrapper-z-index: 300;
+  --feedback-modal-rating-button-color: var(--feedback-text-color);
+  --feedback-modal-rating-button-selected-color: var(--feedback-primary-color);
+  --feedback-modal-rating-button-stars-selected-color: var(--feedback-highlight-color);
+}
 
-      --feedback-modal-button-submit-text-color: var(--feedback-dark-color);
-      --feedback-modal-button-submit-text-color-hover: var(--feedback-dark-color);
+.feedback-modal-input-heading {
+  display: block;
+  color: var(--feedback-light-color);
+  font-size: 14px;
+  font-weight: 300;
+  padding-bottom: 10px;
+  font-family: var(--feedback-modal-content-font-family);
 }